/* =========================================================
   Ramiro Gracias — Portfolio
   Onepage, mobile-first, animaciones sutiles al hacer scroll
   ========================================================= */

:root{
  --color-bg:        #ffffff;
  --color-cream:     #f7f5ed;
  --color-dark:      #1c1a17;
  --color-dark-2:    #202020;
  --color-muted:     #7a736e;
  --color-border:    #e0dad2;
  --color-orange:    #e54b30;
  --color-purple:    #8e85ff;
  --color-green:     #10b981;
  --color-green-bg:  #d1fae5;
  --color-white:     #ffffff;

  /* Case-study pages (Fastlane, etc.) */
  --color-case-navy-1:    #0022b3;
  --color-case-navy-2:    #02001d;
  --color-case-panel:     #001c9a;
  --color-case-validation:#152333;
  --color-case-pain-bg:   #f6f5f1;
  --color-case-solution-bg:#f9f8f3;
  --color-case-muted:     #737373;

  --font-serif: 'Fraunces', serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-w: 1440px;
  --gutter: 20px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

@media (min-width: 640px){ :root{ --gutter: 32px; } }
@media (min-width: 1024px){ :root{ --gutter: 48px; } }
@media (min-width: 1280px){ :root{ --gutter: 80px; } }

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-dark);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,p,blockquote{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; }

.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

.accent-dot{ color: var(--color-orange); }

/* =============== ANIMATIONS (fade + ease on scroll) =============== */
[data-animate]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
[data-animate].is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* stagger children inside grids that carry [data-animate-group] */
.work-carousel__track [data-animate]:nth-child(2){ transition-delay: .08s; }
.work-carousel__track [data-animate]:nth-child(3){ transition-delay: .16s; }
.work-carousel__track [data-animate]:nth-child(4){ transition-delay: .24s; }
.process-grid [data-animate]:nth-child(2){ transition-delay: .06s; }
.process-grid [data-animate]:nth-child(3){ transition-delay: .12s; }
.process-grid [data-animate]:nth-child(4){ transition-delay: .18s; }
.process-grid [data-animate]:nth-child(5){ transition-delay: .24s; }
.process-grid [data-animate]:nth-child(6){ transition-delay: .3s; }
.timeline [data-animate]:nth-child(2){ transition-delay: .08s; }
.timeline [data-animate]:nth-child(3){ transition-delay: .16s; }
.timeline [data-animate]:nth-child(4){ transition-delay: .24s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-animate]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* JS also adds .is-static to .banner-animation-wrap for prefers-reduced-motion,
   since the export keeps re-triggering its own keyframes via inline JS on a
   5s interval — this freezes every animated child in place. */
.banner-animation-wrap.is-static *{
  animation: none !important;
}

/* =============== HEADER / NAV =============== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px var(--gutter) 0;
  background: linear-gradient(var(--color-cream) 60%, transparent);
  pointer-events: none;
}
.site-header .nav-bar{ pointer-events: auto; }

.nav-bar{
  max-width: calc(var(--container-w) - 2 * var(--gutter) + 2 * 32px);
  margin-inline: auto;
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(28,26,23,.05), 0 8px 24px -12px rgba(28,26,23,.12);
}

.logo{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-dark);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo__avatar{
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(28,26,23,.12);
}
.logo__avatar img{ width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 860px){
  /* Echoes the Figma layout: the avatar breaks out of the pill on the left,
     overlapping the nav bar, while the wordmark keeps its own reserved space. */
  .nav-bar{ padding-left: 12px; }
  .logo{ position: relative; padding-left: 66px; gap: 0; }
  .logo__avatar{
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(28,26,23,.15);
  }
}

.nav-links{
  display: none;
  align-items: center;
  gap: 28px;
}
.nav-links > a{
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  transition: color .25s var(--ease);
}
.nav-links > a:hover{ color: var(--color-purple); }
.nav-links > a.is-active:not(.nav-cta){ color: var(--color-purple); }

.nav-cta{
  background: var(--color-dark-2);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}

.nav-toggle{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-toggle span{
  width: 20px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 860px){
  .nav-toggle{ display: none; }
  .nav-links{
    display: flex;
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ---- Mobile menu full-screen elements (Figma node 84:44155) ----
   Hidden by default (desktop); shown only in the mobile menu below. */
.nav-links__divider{
  display: none;
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 8px 0 16px;
}
.nav-links__actions{
  display: none;
}

@media (max-width: 859.98px){
  body.nav-open{ overflow: hidden; }

  body.nav-open .site-header{
    background: #fff;
    padding-bottom: 0;
  }
  body.nav-open .nav-bar{
    border-radius: 0;
    box-shadow: inset 0 -1px 0 #e4e5e8;
    padding: 14px var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    max-width: none;
  }

  .nav-links{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 76px;
    margin-inline: 0;
    background: #fff;
    border-radius: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 6px;
    padding: 24px var(--gutter) 32px;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links > a{
    padding: 16px 14px;
    border-radius: 8px;
    font-size: 16px;
  }
  .nav-links > a:hover{ background: var(--color-cream); }
  .nav-links > a.is-active:not(.nav-cta){
    color: #b59cf5;
    background: rgba(181, 156, 245, .1);
  }
  .nav-cta{ display: none; }

  .nav-links__divider{ display: block; }

  .nav-links__actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
  }
  .nav-links__actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* =============== HERO =============== */
.hero{
  background: var(--color-cream);
  padding-top: 28px;
}
.hero__inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.availability{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.availability__dot{
  width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--color-green-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.availability__dot span{
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--color-green);
}
.availability p{
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
}

.hero__content{ display: flex; flex-direction: column; gap: 28px; width: 100%; }
.hero__title-group{ display: flex; flex-direction: column; gap: 12px; }

.eyebrow--muted{
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #878787;
  margin: 0;
}

.hero__title{ max-width: 100%; width: 100%; }
.hero__title img{ display: block; width: 100%; height: auto; }

.hero__lede{
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 58ch;
}

.hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .icon{ width: 15px; height: 15px; }
.btn:hover{ transform: translateY(-2px); }

.btn--primary{ background: var(--color-dark-2); color: #fff; }
.btn--primary:hover{ box-shadow: 0 10px 24px -10px rgba(32,32,32,.5); }

.btn--outline{ background: transparent; color: var(--color-dark); border: 1px solid var(--color-dark); }
.btn--outline:hover{ background: var(--color-dark); color: #fff; }

.btn--dark{ background: var(--color-dark); color: #fff; }
.btn--dark:hover{ box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }

/* ---- logo strip ---- */
.logo-strip{
  background: var(--color-cream);
  padding: 28px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.logo-strip__scroll{
  width: 100%;
  max-width: 1200px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.logo-strip__label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-muted);
  font-weight: 600;
}
.logo-strip__image{
  display: block;
  width: 100%;
  min-width: 640px;
  max-width: 1200px;
  height: auto;
  margin-inline: auto;
}
@media (min-width: 640px){
  .logo-strip__image{ min-width: 0; }
}

/* =============== SECTION HEADERS (shared) =============== */
.section-header{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
}
.section-header--center{ align-items: center; text-align: center; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-purple);
}
.eyebrow__dot{
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--color-purple);
  display: inline-block;
}

.section-title{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 5.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.section-title--light{ color: #fff; }
/* Now a true vector (selected-work.svg replaced the old raster PNG), so no
   more upscale-blur ceiling needed — shown at its native 394px design width. */
.section-title--graphic img{ display: block; width: 100%; max-width: 394px; height: auto; }
@media (max-width: 639px){
  .section-title--graphic img{ max-width: 240px; }
}
.title-spark{
  width: .68em; height: .68em;
  display: inline-block;
  vertical-align: -.08em;
  margin: 0 .02em;
}

.section-desc{
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 56ch;
}
.section-desc--light{ color: rgba(255,255,255,.72); }

/* =============== WORK =============== */
.work{ background: #fff; padding: 88px 0 56px; }

.project-card{ display: flex; flex-direction: column; gap: 18px; }

/* Selected Work carousel — 6 projects arranged as 3 columns of 2 (matching
   the original 2-column grid pattern), paged with dots. Page 1 shows
   columns 1-2 (the 4 original projects); page 2 slides the whole track
   exactly one column-width to the left, revealing column 3 (ePrendiz,
   Pecuar.io) while column 2 stays visible — a literal sliding-window
   carousel, not a page swap.

   Mobile has no 2-column grid to begin with, so below 760px this falls
   back to a simple vertical stack, paged with the same dots (4 cards on
   page 1, the 2 new ones on page 2) instead of sliding. */
.work-carousel__track{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (max-width: 759px){
  .work-carousel .project-card:nth-child(n+5){ display: none; }
  .work-carousel.is-page-2 .project-card:nth-child(-n+4){ display: none; }
  .work-carousel.is-page-2 .project-card:nth-child(n+5){ display: flex; }
}

@media (min-width: 760px){
  .work-carousel__viewport{ overflow: hidden; }

  .work-carousel__track{
    display: grid;
    grid-template-columns: repeat(3, calc(50% - 16px));
    grid-template-rows: repeat(2, auto);
    column-gap: 32px;
    row-gap: 32px;
    transition: transform .7s var(--ease);
  }

  /* Explicit placement (not DOM order) is what forms the 3 columns, so the
     DOM can stay in the original reading order — PayPal, Xoom, Cisco,
     Nuestro Trabajo, ePrendiz, Pecuar.io — which is also exactly what the
     mobile stacked fallback above needs. */
  .work-carousel__track .project-card:nth-child(1){ grid-column: 1; grid-row: 1; } /* PayPal */
  .work-carousel__track .project-card:nth-child(2){ grid-column: 2; grid-row: 1; } /* Xoom */
  .work-carousel__track .project-card:nth-child(3){ grid-column: 1; grid-row: 2; } /* Cisco */
  .work-carousel__track .project-card:nth-child(4){ grid-column: 2; grid-row: 2; } /* Nuestro Trabajo */
  .work-carousel__track .project-card:nth-child(5){ grid-column: 3; grid-row: 1; } /* ePrendiz */
  .work-carousel__track .project-card:nth-child(6){ grid-column: 3; grid-row: 2; } /* Pecuar.io */

  .work-carousel.is-page-2 .work-carousel__track{
    transform: translateX(calc(-50% - 16px));
  }
}

@media (prefers-reduced-motion: reduce){
  .work-carousel__track{ transition: none !important; }
}

.work-carousel__dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.work-carousel__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  padding: 0;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work-carousel__dot:hover{ background: var(--color-muted); }
.work-carousel__dot.is-active{ background: var(--color-purple); transform: scale(1.15); }

.project-visual{
  position: relative;
  aspect-ratio: 624 / 380;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
}
.project-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.project-visual--xoom{ border: 1px solid var(--color-border); }

/* Case studies with an internal page (e.g. Fastlane): thumbnail + text
   become links, styled to look identical to the plain (non-linked) cards. */
a.project-visual,
a.project-info{
  display: block;
  color: inherit;
  text-decoration: none;
}
a.project-visual:hover img{ transform: scale(1.04); }
a.project-info:hover .project-name{ color: var(--color-purple); }

.project-category{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-purple);
}
.project-name{
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  color: var(--color-dark);
}
.project-desc{ font-size: 15px; line-height: 1.55; color: var(--color-muted); }
.project-desc strong{ color: var(--color-dark); font-weight: 700; }

/* =============== APPROACH / PROCESS =============== */
.approach{ background: #fff; padding: 24px 0 50px; }
.approach__panel{
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: 64px var(--gutter) 56px;
}

/* Real "Banner animation" export from Figma — true vector (SVG) HTML5 export
   from Bannerify, replacing the earlier GIF (which looked soft/low-res at
   larger sizes). The banner itself is a fixed 721x178 canvas; this wrapper
   scales it responsively via a CSS custom property set in main.js so it
   stays crisp at any width. */
.banner-animation-wrap{
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 721 / 178;
  margin-top: 8px;
  overflow: hidden;
}
.banner-animation-wrap #b_4758{
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--banner-scale, 1));
  transform-origin: top left;
}

/* --- Verbatim styles from the Figma/Bannerify HTML export (scoped to unique
   ids, safe to keep as-is) --- */
#b_4758{background-color:transparent;border:0;box-sizing:border-box;cursor:default;display:block;height:178px;overflow:hidden;position:relative;width:721px;z-index:1;}#b_4758 div{position:absolute;box-sizing:border-box;padding:0;margin:0;}#b_4758 img{position:absolute;top:0;left:0;display:block;padding:0;margin:0;}#el_4886{top:33px;left:140px;z-index:29;pointer-events:none;mix-blend-mode:normal;}#img_4886{width:113px;height:113px;}#img_4886.bnfy-enter{-webkit-animation:figma-motion-4-886 4980ms 20.66ms ease 1 both;animation:figma-motion-4-886 4980ms 20.66ms ease 1 both;}#el_4710{top:0px;left:426px;z-index:28;pointer-events:none;mix-blend-mode:normal;}#img_4710{width:178px;height:178px;}#img_4710.bnfy-enter{-webkit-animation:figma-motion-4-710 4981.66ms 19ms ease 1 both;animation:figma-motion-4-710 4981.66ms 19ms ease 1 both;}#el_3699{top:30px;left:452px;z-index:27;pointer-events:none;mix-blend-mode:normal;}#img_3699{width:124px;height:128px;}#img_3699.bnfy-enter{-webkit-animation:figma-motion-3-699 4980ms 20.66ms ease 1 both;animation:figma-motion-3-699 4980ms 20.66ms ease 1 both;}#el_3693{top:15px;left:269px;z-index:26;pointer-events:none;mix-blend-mode:normal;}#img_3693{width:167px;height:147px;}#img_3693.bnfy-enter{-webkit-animation:figma-motion-3-693 4980ms 20.66ms ease 1 both;animation:figma-motion-3-693 4980ms 20.66ms ease 1 both;}#el_4711{top:88px;left:570px;z-index:25;pointer-events:none;mix-blend-mode:normal;}#img_4711{width:39px;height:3px;}#img_4711.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3697{top:88px;left:426px;z-index:24;pointer-events:none;mix-blend-mode:normal;}#img_3697{width:39px;height:3px;}#img_3697.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3689{top:88px;left:240px;z-index:23;pointer-events:none;mix-blend-mode:normal;}#img_3689{width:39px;height:3px;}#img_3689.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3627{top:88px;left:101px;z-index:22;pointer-events:none;mix-blend-mode:normal;}#img_3627{width:39px;height:3px;}#img_3627.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3696{top:81px;left:361px;z-index:21;pointer-events:none;mix-blend-mode:normal;}#img_3696{width:16px;height:14px;}#img_3696.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4715{top:83px;left:665px;z-index:20;pointer-events:none;mix-blend-mode:normal;}#img_4715{width:16px;height:14px;}#img_4715.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3626{top:84px;left:74px;z-index:19;pointer-events:none;mix-blend-mode:normal;}#img_3626{width:16px;height:14px;}#img_3626.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3686{top:70px;left:191px;z-index:18;pointer-events:none;mix-blend-mode:normal;}#img_3686{width:14px;height:41px;}#img_3686.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3695{top:81px;left:317px;z-index:17;pointer-events:none;mix-blend-mode:normal;}#img_3695{width:41px;height:14px;}#img_3695.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4714{top:83px;left:641px;z-index:16;pointer-events:none;mix-blend-mode:normal;}#img_4714{width:21px;height:14px;}#img_4714.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3625{top:84px;left:30px;z-index:15;pointer-events:none;mix-blend-mode:normal;}#img_3625{width:41px;height:14px;}#img_3625.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4713{top:35px;left:606px;z-index:14;pointer-events:none;mix-blend-mode:normal;}#img_4713{width:109px;height:112px;}#img_4713.bnfy-enter{-webkit-animation:figma-motion-4-713 4981.66ms 19ms ease 1 both;animation:figma-motion-4-713 4981.66ms 19ms ease 1 both;}#el_3624{top:36px;left:4px;z-index:13;pointer-events:none;mix-blend-mode:normal;}#img_3624{width:115px;height:100px;}#img_3624.bnfy-enter{-webkit-animation:figma-motion-3-624 4980ms 20.66ms ease 1 both;animation:figma-motion-3-624 4980ms 20.66ms ease 1 both;}#el_4705{top:85px;left:523px;z-index:12;pointer-events:none;mix-blend-mode:normal;}#img_4705{width:5px;height:5px;}#img_4705.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4704{top:81px;left:508px;z-index:11;pointer-events:none;mix-blend-mode:normal;}#img_4704{width:18px;height:18px;}#img_4704.bnfy-enter{-webkit-animation:figma-motion-4-704 4980ms 20.66ms ease 1 both;animation:figma-motion-4-704 4980ms 20.66ms ease 1 both;}#el_4703{top:77px;left:549px;z-index:10;pointer-events:none;mix-blend-mode:normal;}#img_4703{width:18px;height:18px;}#img_4703.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4702{top:52px;left:515px;z-index:9;pointer-events:none;mix-blend-mode:normal;}#img_4702{width:23px;height:23px;}#img_4702.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3701{top:58px;left:471px;z-index:8;pointer-events:none;mix-blend-mode:normal;}#img_3701{width:74px;height:74px;}#img_3701.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3694{top:29px;left:289px;z-index:7;pointer-events:none;mix-blend-mode:normal;}#img_3694{width:118px;height:118px;}#img_3694.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3687{top:47px;left:156px;z-index:6;pointer-events:none;mix-blend-mode:normal;}#img_3687{width:81px;height:81px;}#img_3687.bnfy-enter{-webkit-animation:figma-motion-3-687 4980ms 20.66ms ease 1 both;animation:figma-motion-3-687 4980ms 20.66ms ease 1 both;}#el_3692{top:14px;left:265px;z-index:5;pointer-events:none;mix-blend-mode:normal;}#img_3692{width:164px;height:154px;}#img_3692.bnfy-enter{-webkit-animation:figma-motion-3-692 4980ms 20.66ms ease 1 both;animation:figma-motion-3-692 4980ms 20.66ms ease 1 both;}#el_3690{top:12px;left:271px;z-index:4;pointer-events:none;mix-blend-mode:normal;}#img_3690{width:152px;height:152px;}#img_3690.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3682{top:36px;left:144px;z-index:3;pointer-events:none;mix-blend-mode:normal;}#img_3682{width:105px;height:105px;}#img_3682.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_4720{top:34px;left:607px;z-index:2;pointer-events:none;mix-blend-mode:normal;}#img_4720{width:108px;height:108px;}#img_4720.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}#el_3623{top:36px;left:8px;z-index:1;pointer-events:none;mix-blend-mode:normal;}#img_3623{width:105px;height:105px;}#img_3623.bnfy-enter{-webkit-animation:none 1000ms 0ms ease 1 both;animation:none 1000ms 0ms ease 1 both;}@-webkit-keyframes figma-motion-4-886{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@keyframes figma-motion-4-886{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@-webkit-keyframes figma-motion-4-710{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-4-710{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}@-webkit-keyframes figma-motion-3-699{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-3-699{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}@-webkit-keyframes figma-motion-3-693{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-3-693{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}@-webkit-keyframes figma-motion-4-713{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-4-713{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}@-webkit-keyframes figma-motion-3-624{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-3-624{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(-360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}@-webkit-keyframes figma-motion-4-704{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}49.6655%{-webkit-transform:translateX(0px) translateY(0px) scaleX(3.7) scaleY(3.699999) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@keyframes figma-motion-4-704{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}49.6655%{transform:translateX(0px) translateY(0px) scaleX(3.7) scaleY(3.699999) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@-webkit-keyframes figma-motion-3-687{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}49.6655%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1.08) scaleY(1.08) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@keyframes figma-motion-3-687{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}49.6655%{transform:translateX(0px) translateY(0px) scaleX(1.08) scaleY(1.08) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:cubic-bezier(0.5,0,0.5,1);opacity:1;}}@-webkit-keyframes figma-motion-3-692{0%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}100%{-webkit-transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);-webkit-transform-origin:50% 50%;-webkit-animation-timing-function:linear;opacity:1;}}@keyframes figma-motion-3-692{0%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}100%{transform:translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(360.00001deg);transform-origin:50% 50%;animation-timing-function:linear;opacity:1;}}

.process-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 48px;
}
@media (min-width: 700px){
  .process-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.process-card{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.process-card__head{ display: flex; align-items: center; justify-content: space-between; }
/* Matches the Figma file exactly: card 01 sets its number in Fraunces
   (serif) while cards 02-06 use Instrument Sans — an intentional accent
   on the first card, not a mistake. */
.process-card__num{ font-family: var(--font-sans); font-weight: 400; font-size: 22px; color: var(--color-orange); }
.process-card__num--serif{ font-family: var(--font-serif); }
.process-card__rule{ width: 30px; height: 1px; background: var(--color-border); }
.process-card h3{ font-size: 19px; font-weight: 400; }
.process-card p{ font-size: 14px; line-height: 1.55; color: var(--color-muted); }

.quote-box{
  margin-top: 40px;
  border-left: 4px solid var(--color-purple);
  padding: 20px 0 20px 26px;
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.4;
  color: #fff;
  font-style: normal;
}

/* =============== EXPERIENCE =============== */
.experience{ background: #fff; padding: 50px 0 88px; }

.timeline{ display: flex; flex-direction: column; gap: 28px; }
.timeline__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}
.timeline__row:last-child{ border-bottom: none; padding-bottom: 0; }

.timeline__date{ font-size: 14px; font-weight: 600; color: var(--color-muted); }
.timeline__role{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.timeline__title{ font-family: var(--font-serif); font-size: 19px; color: var(--color-dark); }
.timeline__company{ font-size: 16px; color: var(--color-purple); }
.timeline__text{ font-size: 14px; line-height: 1.55; color: var(--color-muted); margin-top: 6px; }
.timeline__place{ font-size: 13px; font-weight: 500; color: var(--color-muted); }

@media (min-width: 780px){
  .timeline__row{
    grid-template-columns: 150px 1fr 150px;
    align-items: start;
    gap: 28px;
  }
  .timeline__place{ text-align: right; }
}

/* =============== CONTACT =============== */
.contact{ padding: 0 0 96px; }
.contact-card{
  position: relative;
  background: var(--color-cream) url("../assets/images/gradient-card.svg") no-repeat bottom right / cover;
  border-radius: var(--radius-md);
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  overflow: hidden;
}
/* On narrow/tall cards "cover" blows the blob up so much it swallows the
   buttons — "contain" anchored to the corner keeps it a small accent, same
   as the proportion it has on desktop. */
@media (max-width: 640px){
  .contact-card{
    background-image: url("../assets/images/gradient-card.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 75% auto;
  }
}
.contact-card__text{ display: flex; flex-direction: column; gap: 14px; max-width: 720px; position: relative; z-index: 1; }
.contact-card__text h2{
  font-size: clamp(20px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.contact-card__text p{ font-size: 17px; line-height: 1.6; color: var(--color-muted); white-space: normal; }

.contact-email{
  background: var(--color-purple);
  color: #fff;
  padding: 12px 30px;
  border-radius: 999px;
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 500;
  transition: transform .3s var(--ease);
}
.contact-email:hover{ transform: translateY(-2px); }

.contact-actions{ display: flex; flex-direction: column; align-items: center; gap: 22px; }
.contact-buttons{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.contact-social{ font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =============== FOOTER =============== */
.site-footer{ border-top: 1px solid var(--color-border); padding: 40px 0; }
.footer__inner{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
.footer__brand{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer__logo{ font-family: var(--font-serif); font-weight: 700; font-size: 18px; }
.footer__copy{ font-size: 13px; color: var(--color-muted); }
.footer__links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: 13px; color: var(--color-muted); }

@media (min-width: 700px){
  .footer__inner{ flex-direction: row; justify-content: space-between; text-align: left; }
  .footer__brand{ align-items: flex-start; }
}

/* =========================================================
   CASE STUDY PAGES (Fastlane, etc.)
   ========================================================= */

/* On case-study pages the sticky header sits on a dark hero, not the cream
   homepage hero, so the fade-to-cream gradient from the homepage would look
   wrong here — swap it for a plain transparent background instead. The
   white nav-bar pill already provides all the contrast it needs. */
body.case-study .site-header{ background: none; }

/* ---- case hero ---- */
.case-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--color-case-navy-1) 31%, var(--color-case-navy-2) 94%);
  padding: 28px 0 64px;
}
.case-hero__container{ position: relative; }
.case-hero__inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 48px;
  max-width: 720px;
}
.case-hero__tags{ display: flex; flex-wrap: wrap; gap: 12px; }
.case-tag{
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.case-hero__title{
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fff;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.case-hero__lede{
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  color: #fff;
}
.case-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: rgba(255,255,255,.05);
  border: .5px solid rgba(245,245,245,.5);
  border-radius: 12px;
  padding: 24px;
}
.case-hero__meta-item{ display: flex; flex-direction: column; gap: 4px; min-width: 91px; }
.case-hero__meta-label{ font-size: 12px; color: #7f7f7f; }
.case-hero__meta-value{ font-size: 14px; color: #fff; line-height: 1.3; }
.case-hero__meta-divider{
  display: none;
  align-self: stretch;
  width: 1px;
  background: rgba(255,255,255,.2);
}
@media (min-width: 640px){
  .case-hero__meta-divider{ display: block; }
}

.case-hero__image{
  position: relative;
  z-index: 1;
  margin: 32px auto 0;
  max-width: 470px;
  padding: 0 var(--gutter);
}
.case-hero__image img{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(10px 17px 14px rgba(0,0,0,.28));
}
@media (min-width: 1024px){
  /* Fixed section height matching the Figma frame (825px). The text block
     sits 100px from the top (not vertically centered — that left too much
     empty blue space above it), and the hero image is positioned by its
     own top offset (proportional to the Figma layout) against the
     full-height container — never clipped by the section's overflow,
     unlike the previous version where the section's height was driven only
     by the (shorter) text content and cropped the bottom of the image. */
  .case-hero{ height: 825px; padding: 0; }
  .case-hero__container{ height: 100%; display: flex; align-items: flex-start; }
  .case-hero__inner{ padding-top: 100px; padding-bottom: 0; }
  .case-hero__image{
    position: absolute;
    right: 0;
    top: 100px;
    margin: 0;
    max-width: 468px;
    padding: 0;
  }
}

/* Subtle right-to-left fade-in entrance, distinct from the default
   fade-up used across the rest of the site. */
[data-animate].fade-left{ transform: translateX(56px); }
[data-animate].fade-left.is-visible{ transform: translateX(0); }

/* ---- usecase submenu (sticky in-page nav) ---- */
.usecase-menu{
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-cream);
  padding: 20px var(--gutter);
}
.usecase-menu__inner{
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.usecase-menu__link{
  font-size: 15px;
  color: var(--color-dark);
  padding: 8px 18px;
  border-radius: 100px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.usecase-menu__link:hover{ color: var(--color-purple); }
.usecase-menu__link.is-active{
  background: var(--color-dark);
  color: #fff;
}
.usecase-menu__link.is-active:hover{ color: #fff; }

/* ---- generic case section shell ---- */
.case-section{ background: #fff; padding: 64px 0; }
.case-section--cream{ background: var(--color-cream); }
@media (min-width: 1024px){
  .case-section{ padding: 100px 0; }
}

/* Solution ends with the full-bleed row-2 wrap, which owns its own bottom
   spacing (below) so it can sit flush against Validation right after it —
   no extra section padding underneath, or it shows through as a blank
   white gap between the two (doesn't match the Figma, where they touch). */
#solution.case-section{ padding-bottom: 0; }

.case-eyebrow{ margin-bottom: 16px; }

.case-heading{
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-dark);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.case-heading--sm{ font-size: clamp(22px, 3.4vw, 32px); }
.case-heading--light{ color: #fff; }

/* Forces the Strategy title to its designed 2-line break from tablet width
   up; below that the line is too long for the column, so it's left to wrap
   naturally instead of being forced into an even tighter 2 lines. */
.case-heading__break{ display: none; }
@media (min-width: 640px){
  .case-heading__break{ display: inline; }
}

.case-body{
  font-size: 18px;
  line-height: 1.67;
  color: var(--color-dark);
  max-width: 62ch;
  margin-top: 24px;
}
.case-body--muted{ color: var(--color-muted); }
.case-body--light{ color: rgba(255,255,255,.72); }

.case-divider{
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}
.case-divider--slim{ margin: 24px 0; }

/* ---- overview: role & ownership ---- */
.case-role-grid{
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 64px;
}
.case-role-grid__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.case-role-card{
  background: var(--color-case-pain-bg);
  border-radius: 8px;
  padding: 16px;
}
.case-role-card__number{ color: var(--color-purple); font-size: 18px; margin-bottom: 8px; }
.case-role-card__text{ font-size: 14px; color: var(--color-dark); line-height: 1.5; }
@media (min-width: 640px){
  .case-role-grid__list{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px){
  .case-role-grid{ flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 48px; }
  .case-role-grid__header{ max-width: 334px; flex-shrink: 0; }
  .case-role-grid__list{ max-width: 715px; gap: 24px; }
}

/* ---- research: methods row + questions ---- */
.case-methods{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}
.case-methods__item{ max-width: 260px; }
.case-methods__title{ font-size: 18px; font-weight: 500; color: var(--color-dark); margin-bottom: 4px; }
.case-methods__desc{ font-size: 14px; color: var(--color-dark); }
.case-methods__divider{ display: none; }
@media (min-width: 760px){
  .case-methods{ flex-direction: row; align-items: flex-start; gap: 18px; }
  .case-methods__divider{ display: block; align-self: stretch; width: 1px; background: var(--color-border); }
}

.case-questions{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.case-questions__list{ display: flex; flex-direction: column; }
.case-question{ display: flex; flex-direction: column; gap: 4px; padding: 20px 0; }
.case-question:first-child{ padding-top: 0; }
.case-question__num{ color: var(--color-purple); font-size: 20px; }
.case-question__text{ font-size: 20px; color: var(--color-dark); }
.case-question + .case-question{ border-top: 1px solid var(--color-border); }
@media (min-width: 1024px){
  .case-questions{ flex-direction: row; gap: 83px; }
  .case-questions__header{ max-width: 400px; flex-shrink: 0; }
}

/* ---- strategy: pain-point grid + design principles panel ---- */
.pain-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
.pain-card{
  background: var(--color-case-pain-bg);
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pain-card__title{ font-size: 20px; font-weight: 600; color: var(--color-dark); }
.pain-card__body{ display: flex; flex-direction: column; gap: 12px; }
.pain-card__label{ font-size: 16px; font-weight: 500; color: var(--color-dark); }
.pain-card__text{ font-size: 14px; color: var(--color-case-muted); margin-top: 2px; }
.pain-card__tag{
  align-self: flex-start;
  margin-top: auto;
  background: rgba(142,133,255,.5);
  color: var(--color-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
}
@media (min-width: 640px){
  .pain-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px){
  .pain-grid{ grid-template-columns: repeat(4, 1fr); }
}

.principles-panel{
  background: var(--color-case-panel);
  border-radius: 24px;
  padding: 24px;
  margin-top: 24px;
}
.principles-grid{
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.principle{ display: flex; flex-direction: column; gap: 8px; }
.principle__title{ font-size: 18px; font-weight: 600; color: var(--color-green); }
.principle__text{ font-size: 14px; color: #fff; line-height: 1.5; }
.principle__divider{ display: none; }
@media (min-width: 900px){
  .principles-grid{ flex-direction: row; justify-content: center; }
  .principle{ max-width: 287px; }
  .principle__divider{ display: block; align-self: stretch; width: 1px; background: rgba(255,255,255,.2); }
}

/* ---- solution ---- */
.case-logo-divider{ display: flex; justify-content: center; padding: 0 0 24px; }
.case-logo-divider img{ height: 48px; width: auto; }

.solution-row{
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
}
.solution-row__text{ max-width: 420px; }
.solution-row__image{ width: 100%; max-width: 586px; }
.solution-row__image img{ display: block; width: 100%; height: auto; border-radius: 24px; }
.solution-checklist{ display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 420px; }
.solution-checklist li{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-dark);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.solution-checklist li:last-child{ border-bottom: none; padding-bottom: 0; }
.solution-checklist .icon-check{ width: 15px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-orange); }
.solution-row-2-wrap{ background: var(--color-case-solution-bg); padding-bottom: 64px; }
@media (min-width: 1024px){
  .solution-row{ flex-direction: row; align-items: center; justify-content: center; gap: 90px; }
  .solution-row-2-wrap{ padding-bottom: 100px; }
}

/* ---- solution (stacked variant): text on top, one full-width image below —
   for a solution block whose Figma reference shows a wide dashboard/desktop
   screenshot spanning the row rather than a phone-sized image sitting beside
   the text (first used by Cisco's "NTG creation" block). */
.solution-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}
.solution-stack__text{ max-width: 700px; }
.solution-stack__image{ width: 100%; }
.solution-stack__image img{ display: block; width: 100%; height: auto; border-radius: 24px; }

/* ---- validation ---- */
.validation-section{
  position: relative;
  overflow: hidden;
  background: var(--color-case-validation);
  border-radius: 42px 42px 0 0;
  padding: 64px 0;
}
.validation-grid{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.validation-stats{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.stat{ display: flex; flex-direction: column; gap: 4px; }
.stat__label{ font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--color-purple); }
.stat__value{ font-size: clamp(32px, 5vw, 48px); font-weight: 600; color: #fff; }
.stat__desc{ font-size: 12px; color: #fff; max-width: 220px; }
.validation-graphic{
  display: none;
}
@media (min-width: 1024px){
  .validation-grid{ flex-direction: row; justify-content: space-between; gap: 40px; }
  .validation-stats{ flex-direction: row; gap: 48px; }
  /* Sits in normal flow below the text/stats (never overlapping them, no
     matter how many lines the descriptions wrap to) and right-aligned via
     the block auto-margin trick, matching its position in the Figma design. */
  .validation-graphic{
    display: block;
    width: 190px;
    height: auto;
    margin: 40px 0 0 auto;
  }
}

/* =========================================================
   XOOM CASE STUDY — page-specific variants
   (reuses every shared .case-* class above; only what Xoom's Figma
   actually draws differently from Fastlane is added here)
   ========================================================= */
:root{
  --color-xoom-blue: #1072eb;
}

/* ---- hero: blue-to-cream diagonal gradient (vs. Fastlane's navy) ---- */
.case-hero--xoom{
  background: linear-gradient(177deg, #005dd0 4.34%, #f7f5f0 96.21%);
}

/* Illustration hero visual: a flat SVG scene, not a phone-screenshot photo,
   so no drop-shadow. */
.case-hero__image--xoom img{ filter: none; }

/* The shared .case-hero uses a fixed 825px height (sized for Fastlane's
   tall phone-collage image). The updated globe artwork is much shorter and
   wider, so keeping that fixed height left a large empty gap between the
   image and the sections below. Instead, Xoom's hero drops the fixed
   height and absolute image positioning in favor of a normal flex row —
   the image becomes a regular flex item (same top offset as the text, via
   its own top margin, pushed to the right edge with margin-left:auto) so
   the hero's own height simply hugs whichever column is taller, and the
   rest of the page follows right after the image's bottom edge instead of
   a fixed 825px floor. */
@media (min-width: 1024px){
  .case-hero--xoom{ height: auto; padding: 100px 0 0; }
  .case-hero--xoom .case-hero__container{ height: auto; align-items: flex-start; }
  .case-hero--xoom .case-hero__inner{ padding-top: 0; }
  .case-hero--xoom .case-hero__image{
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 0 auto;
    padding: 0;
    /* Bottom-align the image within the row instead of top-aligning it:
       at 1024–1279px the image (max-width 380px) is shorter than the text
       column, so top-aligning it (the container's default align-items)
       left empty space below the image before the usecase menu even
       after the hero's own bottom padding was removed. Bottom-aligning
       closes that gap by matching the image's bottom edge to the text
       column's bottom edge, which is what actually determines the row's
       height. At ≥1280px the image is the taller item, so this has no
       visible effect there. */
    align-self: flex-end;
  }
}
/* Between 1024–1279px the text column and a Figma-scale globe would
   collide (measured: negative clearance below ~1180px) — kept smaller in
   that range, and only sized up to the large Figma proportions from
   1280px, where there's room for both. */
@media (min-width: 1024px) and (max-width: 1279px){
  .case-hero__image--xoom{ max-width: 380px; }
}
@media (min-width: 1280px) and (max-width: 1365px){
  .case-hero__image--xoom{ max-width: 620px; }
}
@media (min-width: 1366px){
  .case-hero__image--xoom{ max-width: 760px; }
}

/* Hero meta box (ROLE/SCOPE/CONTRIBUTION): only the labels are set to the
   site's dark ink (matching Figma, where the ROLE/SCOPE/CONTRIBUTION
   labels are dark against the hero even though the rest of its text is
   white) — the values (UX DESIGNER / REVIEW PAGES / Concept to Handoff)
   stay white, the shared default. */
.case-hero--xoom .case-hero__meta-label{ color: #1c1a17; }

/* Subtle bottom-to-top fade-in, distinct from Fastlane's left-to-right
   entrance — used for the Xoom hero illustration per the brief ("fade y
   ease de abajo hacia arriba"). */
[data-animate].fade-bottom{ transform: translateY(56px); }
[data-animate].fade-bottom.is-visible{ transform: translateY(0); }

/* ---- research / strategy-principles / validation: bright blue panels ----
   Xoom's Figma uses a saturated blue (#1072eb) for these instead of
   Fastlane's dark navy, with the eyebrow kept dark against it (as drawn in
   the design, even though the rest of the copy on the same background is
   white) — replicated exactly rather than normalized to Fastlane's colors. */
.case-section--xoom-blue{ background: var(--color-xoom-blue); }
.case-section--xoom-blue .case-eyebrow{ color: #292929; }
.case-section--xoom-blue .case-heading{ color: #fff; }
.case-section--xoom-blue .case-body{ color: #fff; }
.case-section--xoom-blue .case-methods__title,
.case-section--xoom-blue .case-methods__desc{ color: #fff; }
.case-section--xoom-blue .case-methods__divider{ background: rgba(255,255,255,.25); }
.case-section--xoom-blue .case-divider{ border-top-color: rgba(255,255,255,.25); }
.case-section--xoom-blue .case-question__num{ color: #292929; }
.case-section--xoom-blue .case-question__text{ color: #fff; }
.case-section--xoom-blue .case-question + .case-question{ border-top-color: rgba(255,255,255,.25); }

/* Figma spaces the design-principles panel 42px below the pain-point
   cards, more than the shared 24px used on Fastlane. */
.principles-panel--xoom{ background: var(--color-xoom-blue); margin-top: 42px; }
.principles-panel--xoom .principle__title{ color: #292929; }

/* ---- strategy: 3-card pain grid (Xoom has 3 moments, not Fastlane's 4) ---- */
@media (min-width: 1180px){
  .pain-grid--3{ grid-template-columns: repeat(3, 1fr); }
}

/* ---- validation: same blue treatment, 2 stats instead of 3, and its own
   decorative graphic (different aspect ratio than Fastlane's) ---- */
.validation-section--xoom{ background: var(--color-xoom-blue); }
.validation-section--xoom .case-eyebrow{ color: #fff; }
.validation-section--xoom .case-body{ color: #fff; }
.validation-section--xoom .stat__label{ color: #fff; }
@media (min-width: 1024px){
  .validation-graphic--xoom{ width: 220px; }
}

/* ---- solution: Xoom's 2nd solution image is a tall, narrow two-phone
   stack (353x1091 natively — much narrower than row 1's 4-phone collage),
   so it can't share the same 586px max-width without being stretched
   absurdly tall; capped instead to a width proportional to its own
   aspect ratio, landing it close to row 1's rendered height. */
.solution-row__image--narrow{ max-width: 300px; }

/* ---- solution: Xoom's logo divider — the shared .case-logo-divider img
   rule scales Fastlane's logo to a 48px height, but Ramiro asked for the
   Xoom logo at its native Figma size, 236x118px, exactly. */
.case-logo-divider--xoom img{ width: 236px; height: 118px; }

/* =========================================================
   CISCO CASE STUDY — page-specific variants
   (reuses every shared .case-* class above; only what Cisco's Figma
   actually draws differently from Fastlane/Xoom is added here)
   ========================================================= */

/* ---- hero: violet-to-near-black diagonal gradient (Figma:
   linear-gradient(161.76deg, #3e00d0 32.4%, #2b052f 65.4%)) ---- */
.case-hero--cisco{
  background: linear-gradient(162deg, #3e00d0 32.4%, #2b052f 65.4%);
}

/* Decorative flat illustration (waveform + wordmark), not a phone
   screenshot — no drop-shadow. */
.case-hero__image--cisco img{ filter: none; }

/* Same reasoning as Xoom's hero: the shared .case-hero uses a fixed 825px
   height sized for Fastlane's tall phone collage, but Cisco's illustration
   (848x607 — wide and short) is much shorter, so the fixed height would
   leave empty space below it before the usecase menu. The hero instead
   auto-hugs whichever column (text or image) is taller, and the image is
   bottom-aligned within the row so it always sits flush against the menu
   that follows — identical technique to Xoom's hero. */
@media (min-width: 1024px){
  .case-hero--cisco{ height: auto; padding: 100px 0 0; }
  .case-hero--cisco .case-hero__container{ height: auto; align-items: flex-start; }
  .case-hero--cisco .case-hero__inner{ padding-top: 0; }
  .case-hero--cisco .case-hero__image{
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 0 auto;
    padding: 0;
    /* Centered within the row's height, not bottom-aligned — Ramiro asked
       for the illustration centered against the text content instead of
       sitting at the bottom (which is what flex-end produced once the 75px
       meta margin below made the row noticeably taller than the image). */
    align-self: center;
  }
  /* Ramiro asked for 75px of breathing room between the ROLE/SCOPE/
     CONTRIBUTION card and the usecase menu below, instead of the two
     sitting flush — the text column is the taller one at every desktop
     breakpoint here, so this reliably pushes the whole hero (and the
     centered image with it) down by exactly 75px. */
  .case-hero--cisco .case-hero__meta{ margin-bottom: 75px; }
}
@media (min-width: 1024px) and (max-width: 1279px){
  .case-hero__image--cisco{ max-width: 380px; }
}
@media (min-width: 1280px) and (max-width: 1365px){
  .case-hero__image--cisco{ max-width: 560px; }
}
@media (min-width: 1366px){
  .case-hero__image--cisco{ max-width: 660px; }
}

/* Subtle bottom-to-top fade-in + opacity for the hero illustration, as
   requested — reuses the same entrance already built for Xoom's hero. */

/* ---- research / design-principles / validation: dark violet panels ----
   Cisco's Figma uses a near-black violet (#230426) for these instead of
   Fastlane's navy or Xoom's bright blue. The default purple eyebrow/number
   color (#8e85ff) and green principle-title color (#10b981) already match
   Cisco's Figma exactly against this dark background, so only the
   background itself needs overriding here. */
.case-section--cisco-dark{ background: #230426; }
.case-section--cisco-dark .case-heading{ color: #fff; }
.case-section--cisco-dark .case-body{ color: #fff; }
.case-section--cisco-dark .case-methods__title,
.case-section--cisco-dark .case-methods__desc{ color: #fff; }
.case-section--cisco-dark .case-methods__divider{ background: rgba(255,255,255,.25); }
.case-section--cisco-dark .case-divider{ border-top-color: rgba(255,255,255,.25); }
.case-section--cisco-dark .case-question__text{ color: #fff; }
.case-section--cisco-dark .case-question + .case-question{ border-top-color: rgba(255,255,255,.25); }

.principles-panel--cisco{ background: #230426; }

.validation-section--cisco{ background: #230426; }

/* ---- solution: Cisco's logo mark is a square icon (181x181 in Figma),
   not a wordmark, so the shared 48px-tall scaling reads too small as a
   section divider — sized up to 180px (Ramiro's requested size, close to
   its native 181x181) while keeping it square. */
.case-logo-divider--cisco img{ width: 180px; height: 180px; }

/* ---- solution: Cisco's first solution image (535x1513 natively) at its
   full native width, per Ramiro's request — wider than the shared
   .solution-row__image--narrow (300px, sized for Xoom's narrower asset). */
.solution-row__image--cisco-1{ max-width: 535px; }

/* ---- solution: the gap between "design principles" (end of Strategy) and
   the Cisco logo divider (start of Solution) was 200px — each section's own
   padding (Strategy's bottom + Solution's top) stacking up. Ramiro asked
   for 100px instead, so Solution's top padding is dropped to 0 here,
   leaving only Strategy's own bottom padding as the gap (100px on desktop,
   the shared .case-section padding at that breakpoint). Scoped to Cisco via
   the page's own body class so Fastlane/Xoom keep their current spacing. */
.case-study--cisco #solution.case-section{ padding-top: 0; }

/* Same fix as Cisco: gap between the "design principles" panel (end of
   Strategy) and the Solution logo was 200px (100px Strategy bottom-padding
   + 100px Solution top-padding). Ramiro asked for 100px, so Solution's
   top padding is dropped to 0 here, scoped to Nuestro Trabajo only. */
.case-study--nt #solution.case-section{ padding-top: 0; }

/* =========================================================
   NUESTRO TRABAJO CASE STUDY — page-specific variants
   (reuses every shared .case-* class above; only what this Figma
   actually draws differently from Fastlane/Xoom/Cisco is added here)
   ========================================================= */

/* ---- hero: blue-to-navy diagonal gradient (Figma:
   linear-gradient(167.03deg, #3551c3 42.2%, #181c48 99.6%)) ---- */
.case-hero--nt{
  background: linear-gradient(167deg, #3551c3 42.2%, #181c48 99.6%);
}

/* Decorative flat line-art illustration, not a phone screenshot — no
   drop-shadow. */
.case-hero__image--nt img{ filter: none; }

/* Same auto-hug-height technique built for Xoom/Cisco: the shared
   .case-hero's fixed 825px height (sized for Fastlane's tall phone
   collage) would leave empty space below this shorter, wider
   illustration. Ramiro asked explicitly for this one to stay bottom-flush
   against the usecase menu (unlike Cisco's later "centered" request), so
   the image keeps align-self:flex-end rather than center. */
@media (min-width: 1024px){
  .case-hero--nt{ height: auto; padding: 100px 0 0; }
  .case-hero--nt .case-hero__container{ height: auto; align-items: flex-start; }
  .case-hero--nt .case-hero__inner{ padding-top: 0; }
  .case-hero--nt .case-hero__image{
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 0 auto;
    padding: 0;
    align-self: flex-end;
  }
  /* Ramiro asked for ~75px of breathing room between the ROLE/SCOPE/
     CONTRIBUTION card and the usecase submenu below (it was flush against
     it) — same fix already applied to Cisco. This grows the text column's
     own height, which grows the hero itself (auto height), while the
     illustration keeps align-self:flex-end so it stays bottom-flush
     against the submenu regardless. */
  .case-hero--nt .case-hero__meta{ margin-bottom: 75px; }
}
@media (min-width: 1024px) and (max-width: 1279px){
  .case-hero__image--nt{ max-width: 340px; }
}
@media (min-width: 1280px) and (max-width: 1365px){
  .case-hero__image--nt{ max-width: 460px; }
}
@media (min-width: 1366px){
  .case-hero__image--nt{ max-width: 540px; }
}

/* ROLE/SCOPE/CONTRIBUTION labels in white (Ramiro asked explicitly) —
   values (UX DESIGNER, etc.) are already white by default. */
.case-hero--nt .case-hero__meta-label{ color: #fff; }

/* ---- research: soft lavender panel instead of a dark one — unlike Xoom's
   bright blue or Cisco's near-black violet, this Figma keeps Research on a
   light tint with the same dark body text as the rest of the page, so no
   text-color overrides are needed, only the background. */
.case-section--nt-light{ background: #eef2ff; }

/* ---- strategy: design-principles panel and validation share the same
   brand blue as the hero's gradient start. */
.principles-panel--nt{ background: #3551c3; }
.validation-section--nt{ background: #3551c3; }

/* Figma places the single "Active Subscribers" stat right next to the
   header text (16px gap), not pushed to the far edge of the row — the
   shared .validation-grid's justify-content:space-between (built for
   Fastlane/Xoom's multi-stat layouts, spread edge-to-edge) left this one
   stat stranded ~440px away from the text on wide screens. Scoped to this
   page only. */
@media (min-width: 1024px){
  .case-study--nt .validation-grid{ justify-content: flex-start; gap: 64px; }
}

/* Decorative graphic (green star + pink squiggle), extracted from Figma —
   same positioning technique as Fastlane/Xoom's .validation-graphic
   (normal flow below the grid, right-aligned via margin auto). */
.validation-graphic--nt{ width: 221px; }

/* The second Solution row's full-bleed wrap defaults to the shared
   off-white (--color-case-solution-bg); this Figma uses the same light
   lavender as Research instead. */
.case-study--nt .solution-row-2-wrap{ background: #eef2ff; }

/* ---- solution: "Nuestro Trabajo" logo divider, native aspect 283x170 —
   sized up from the shared 48px-tall default so it reads clearly, matching
   how Cisco's and Xoom's own-brand logos were each sized to their asset. */
.case-logo-divider--nt img{ width: 282px; height: auto; }

/* =========================================================
   EPRENDIZ CASE STUDY — page-specific variants
   (reuses every shared .case-* class above; only what this Figma
   actually draws differently from the previous pages is added here.
   This page's Solution section carries far more imagery than any other
   case study, so extra care went into positioning/quality here.)
   ========================================================= */

/* ---- hero: warm coral-to-yellow diagonal gradient (Figma:
   linear-gradient(157.87deg, #D67271 31.22%, #FFE492 93.97%)) — reuses
   Fastlane's fixed-height hero layout (image absolutely positioned beside
   the text) rather than Xoom/Cisco/Nuestro Trabajo's auto-height,
   bottom-flush illustration, since this hero image is a photographic
   phone-mockup collage sized and cropped like Fastlane's, not a wide flat
   illustration. */
.case-hero--eprendiz{
  background: linear-gradient(158deg, #d67271 31.22%, #ffe492 93.97%);
}
/* Labels dark against this lighter, warmer gradient (same detail already
   replicated for Xoom/Nuestro Trabajo on their own backgrounds). */
.case-hero--eprendiz .case-hero__meta-label{ color: #1c1a17; }
@media (min-width: 1024px){
  /* Centered to the hero content block instead of pinned to a fixed top
     offset (Ramiro's request). The fade-left animation already drives
     `transform` on this element (translateX for the entry effect), so
     centering is done via flexbox (align-items:center + space-between on
     the row) rather than `transform:translateY(-50%)`, which would fight
     the animation's own transform and get overridden once `.is-visible`
     lands. */
  .case-hero--eprendiz .case-hero__container{
    align-items: center;
    justify-content: space-between;
  }
  .case-hero--eprendiz .case-hero__image{
    position: static;
    right: auto;
    top: auto;
  }
}
/* The two-phone collage is tall and comparatively wide; at the full 526px
   Figma size it collides with the ROLE/SCOPE/CONTRIBUTION card and the
   lede text between 1024–1279px (measured with Playwright: up to ~260px
   of overlap at 1024px). Scaled down in that range, then up to the full
   size from 1280px where there's room for both. */
@media (min-width: 1024px) and (max-width: 1279px){
  .case-hero__image--eprendiz{ max-width: 300px; }
}
@media (min-width: 1280px) and (max-width: 1365px){
  .case-hero__image--eprendiz{ max-width: 420px; }
}
@media (min-width: 1366px){
  .case-hero__image--eprendiz{ max-width: 526px; }
}

/* ---- research: warm cream section background (Figma: #fff1e3) — this
   page's equivalent of Xoom's blue or Cisco's near-black panels, but a
   soft warm tint that matches the hero gradient's yellow end instead of a
   saturated brand color. Body text stays the shared dark ink (no color
   overrides needed, unlike Xoom's white-on-blue treatment). */
.case-section--eprendiz-warm{ background: #fff1e3; }

/* Figma's pain-card background (#f7f5ed) is a hair warmer than the shared
   default (#f6f5f1) — close enough to be invisible at a glance, but scoped
   here for exactness since this page was called out for extra polish. */
.case-study--eprendiz .pain-card{ background: #f7f5ed; }

/* ---- solution: eprendiz wordmark divider, native aspect 380x68. */
.case-logo-divider--eprendiz{ padding-bottom: 100px; }
.case-logo-divider--eprendiz img{ width: 379px; height: auto; }

/* First Solution block: a text-free "showcase" pair — the brand process
   board (sketches + wordmark exploration) stacked above the final
   logo-and-palette image, both centered, matching the Figma exactly
   (no accompanying copy for this pair, unlike every other Solution image
   on the site, which always pairs an image with a text column). */
.solution-showcase{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0 auto 64px;
}
.solution-showcase img{ display: block; width: 100%; height: auto; border-radius: 24px; }
.solution-showcase__wide{ max-width: 1040px; }
.solution-showcase__narrow{ max-width: 625px; }
@media (min-width: 1024px){
  .solution-showcase{ gap: 58px; margin-bottom: 100px; }
}

/* First text+image Solution row: a second, smaller screenshot
   (solution-1-overlay-eprendiz.png) floats over the bottom-left corner of
   the main tall image, exactly as drawn in the Figma (the overlay's
   absolute position there extends left past the image's own edge and
   hangs slightly below it). Positioned as percentages of the wrapping
   image column so the overlap scales proportionally at every breakpoint,
   and hidden below 640px where there isn't room for it to float without
   colliding with the text above. */
.solution-row__image-wrap{ position: relative; width: 100%; max-width: 586px; }
.solution-row__image-wrap .solution-row__image{ max-width: none; width: 100%; }
.solution-row__overlay{
  display: none;
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(28,26,23,.18);
}
@media (min-width: 1280px){
  /* Precise fidelity to the Figma layout: measured directly against the
     absolute Figma coordinates of the tall image (582.02 x 1160.56) and the
     overlay strip (883.30 x 172.60, positioned at -599.84/1054.54 relative
     to the tall image's own top-left). Expressed as percentages of the
     image-wrap so the overlap scales proportionally at every width, capped
     at the strip's native 883px so it's never upscaled past its own
     resolution. Restricted to ≥1280px: between 1024–1279px the row's text
     column is still being squeezed by the narrower viewport, which pushes
     the image-wrap far enough left that this large a leftward bleed gets
     clipped by the edge of the screen (measured: up to ~86px of the strip
     cut off) — from 1280px on there's enough room for it to sit fully
     on-screen. */
  .solution-row__overlay--eprendiz{
    display: block;
    left: -103.06%;
    bottom: -5.74%;
    width: 883px;
    max-width: 151.77%;
  }
}

/* Second Solution block's full-bleed wrap defaults to the shared off-white
   (--color-case-solution-bg); this Figma uses the same warm cream as
   Research instead. */
.case-study--eprendiz .solution-row-2-wrap{ background: #fff1e3; }

/* The two solution rows shared only their default 40px top/bottom padding,
   which left the tall image + overlay of row 1 sitting right on top of
   row 2's image with barely any breathing room. Ramiro asked for 100px of
   air on each side of that seam. Scoped to just the touching edges (row 1's
   bottom, row 2's top) so the other sides of each row keep their normal
   40px spacing against the logo divider / bottom of the section. */
.case-study--eprendiz #solution > .container > .solution-row{ padding-bottom: 100px; }
.case-study--eprendiz .solution-row-2-wrap .solution-row{ padding-top: 100px; }

/* =========================================================
   PECUAR.IO CASE STUDY — page-specific variants
   (sixth and final case study; reuses every shared .case-* class above,
   plus two brand-new generic components: .solution-checklist-row, for a
   3-column horizontal checklist with a top-border divider — this Figma's
   Solution section uses it instead of the vertical bottom-border list every
   other page uses — and .solution-block, a centered text header for a
   solution-stack-style block. Both are page-scoped below but written
   generically enough to reuse on a future page with the same layout.)
   ========================================================= */

/* ---- hero: diagonal bright-blue gradient, exact Figma values ---- */
.case-hero--pecuario{
  background: linear-gradient(167deg, #177cff 42.2%, #0023a4 99.635%);
}
.case-hero--pecuario .case-hero__meta-label{ color: #152333; }
/* Bundled illustration (phone mockup + activity graph), not a flat
   line-art SVG — keep the drop-shadow so it reads as a floating device
   like Fastlane's phone collage, unlike NT's flat ribbon graphic. */

/* Same auto-hug-height technique as Xoom/Cisco/NT: this hero's
   illustration is wide-and-short (631x471 in Figma) rather than tall like
   Fastlane's phone collage, so the fixed 825px height would leave empty
   space beneath it. No bottom-flush request was made for this page, so it
   keeps the default flex-start alignment (top-aligned with the text
   column) rather than Xoom/NT's align-self:flex-end. */
@media (min-width: 1024px){
  .case-hero--pecuario{ height: auto; padding: 100px 0 0; }
  .case-hero--pecuario .case-hero__meta{ margin-bottom: 100px; }
  .case-hero--pecuario .case-hero__container{ height: auto; align-items: flex-start; }
  .case-hero--pecuario .case-hero__inner{ padding-top: 0; }
  .case-hero--pecuario .case-hero__image{
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1279px){
  .case-hero__image--pecuario{ max-width: 340px; }
}
@media (min-width: 1280px) and (max-width: 1365px){
  .case-hero__image--pecuario{ max-width: 460px; }
}
@media (min-width: 1366px){
  .case-hero__image--pecuario{ max-width: 540px; }
}

/* ---- research: flat light-gray panel (distinct from every other page's
   tinted or dark research background) ---- */
.case-section--pecuario-gray{ background: #f2f2f2; }

/* ---- strategy: design-principles panel and validation share the site's
   green accent instead of a brand-blue/navy tone. Because the shared
   .principle__title already defaults to that same green (for use on dark
   navy/violet panels), it would be nearly invisible on a green panel here —
   swapped to the dark text color instead, matching the Figma exactly. */
.principles-panel--pecuario{ background: #10b981; }
.principles-panel--pecuario .case-eyebrow{ color: #1c1a17; }
.principles-panel--pecuario .principle__title{ color: #1c1a17; }

.validation-section--pecuario{ background: #10b981; }
.validation-section--pecuario .case-eyebrow{ color: #1c1a17; }
.validation-section--pecuario .stat__label{ color: #1c1a17; }
.validation-graphic--pecuario{ width: 221px; }

/* ---- solution: logo lockup + two centered text blocks, each followed by
   a horizontal 3-item checklist and one full-width image (a new pattern —
   every previous page paired a checklist with a side-by-side image, never
   a centered header above a full-width image). ---- */
.case-logo-divider--pecuario img{ width: 302px; height: auto; }
/* Strategy's 100px padding-bottom + Solution's default 100px padding-top
   left 200px between the design-principles panel and this logo — same fix
   as Cisco/Nuestro Trabajo: zero Solution's own top padding for this page,
   leaving exactly the 100px Ramiro asked for. */
.case-study--pecuario #solution.case-section{ padding-top: 0; padding-bottom: 100px; }

.solution-block{ max-width: 826px; margin: 0 auto; text-align: center; }
.solution-block .case-body{ margin-left: auto; margin-right: auto; }
.solution-block--second{ margin-top: 64px; }
@media (min-width: 1024px){
  .solution-block--second{ margin-top: 100px; }
}

.solution-checklist-row{
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1150px;
  margin: 32px auto 48px;
  text-align: left;
}
.solution-checklist-row li{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-dark);
}
.solution-checklist-row .icon-check{ width: 15px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-orange); }
@media (min-width: 900px){
  .solution-checklist-row{ flex-direction: row; gap: 26px; }
  .solution-checklist-row li{ flex: 1; }
}

/* pecuario1/pecuario2 are ~750px-wide source files; the shared
   .solution-stack__image stretches to the full container (1280px),
   upscaling them well past their native resolution and making them look
   pixelated. Capped to 727px and centered so they render close to their
   real size instead of being blown up. */
.case-study--pecuario .solution-stack__image{ max-width: 727px; margin-inline: auto; }

/* ---- Calendly ("Let's Talk" / "Schedule a Call") popup — restyle
   Calendly's own widget chrome to match this site's soft, rounded look
   instead of its plain default square card + bare 19px X icon. These
   classes come from Calendly's own stylesheet/JS (assets.calendly.com),
   injected into the page at click time, not from our markup — selectors
   target Calendly's documented default class names. ---- */
.calendly-overlay .calendly-popup-content{
  border-radius: 24px;
  overflow: hidden;
}
.calendly-overlay .calendly-popup-content iframe{ border-radius: 24px; }
.calendly-overlay .calendly-popup-close{
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  /* Calendly's own close-icon.svg is a light/white glyph, made for its
     bare default (no circle behind it) — on our white circle it either
     disappeared or read as a faint, low-contrast mark. Dropped it and
     drawn our own X with two pseudo-element bars instead, so the color is
     ours to control and guaranteed to pass contrast on white. */
  background-image: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  z-index: 2;
}
.calendly-overlay .calendly-popup-close::before,
.calendly-overlay .calendly-popup-close::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  /* --color-dark (#1c1a17) on white is ~17:1 contrast — far past the 3:1
     WCAG minimum for graphical/UI icons. */
  background: var(--color-dark);
  border-radius: 1px;
}
.calendly-overlay .calendly-popup-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.calendly-overlay .calendly-popup-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.calendly-overlay .calendly-popup-close:hover{
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
}
@media (max-width: 975px){
  /* Calendly's own mobile breakpoint makes .calendly-popup fixed and flush
     against the left/right/bottom edges of the screen (only top:50px stays
     inset) — rounding all 4 corners there would show the page bleeding
     through at the bottom/side corners. Round just the top two, like a
     bottom-sheet, and nudge the close button in to match Calendly's own
     15px mobile inset. */
  .calendly-overlay .calendly-popup-content{ border-radius: 20px 20px 0 0; }
  .calendly-overlay .calendly-popup-content iframe{ border-radius: 20px 20px 0 0; }
  .calendly-overlay .calendly-popup-close{ top: 12px; right: 12px; width: 32px; height: 32px; }
}