:root {
  --black: #181b1b; --charcoal: #1f2937; --paper: #dfe7e9; --white: #fff;
  --gray: #71717a; --rule: rgba(255,255,255,.16); --ink-rule: rgba(24,27,27,.17);
  --cyan: #06b6d4; --violet: #ab55f7; --deep-cyan: #0891b2; --deep-violet: #7c3aed;
  --navy: #002060; --purple: #50164a; --gradient: linear-gradient(105deg,var(--navy) 0%,var(--deep-violet) 48%,var(--purple) 100%); --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--white); background: var(--black); font-family: Poppins,Arial,sans-serif; font-size: 16px; line-height: 24px; }
body.menu-open { overflow: hidden; }
section,article { scroll-margin-top: 72px; }
a { color: inherit; }
.wrap { width: min(var(--max),calc(100% - clamp(44px,10vw,136px))); margin: 0 auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: white; color: var(--black); }
.skip-link:focus { top: 16px; }
h1,h2,h3,.eyebrow,.site-nav,.button,.brand,.hero-proof strong,.chapter-identity,.change strong,.scale-metrics strong,.brand-name,dt { font-family: Figtree,Arial,sans-serif; }
h1,h2,h3 { font-weight: 700; }

.site-header { position: sticky; inset: 0 0 auto; z-index: 40; min-height: 72px; padding: 10px clamp(20px,4vw,56px); display: flex; align-items: center; justify-content: space-between; background: rgba(24,27,27,.96); border-bottom: 1px solid var(--rule); transition: box-shadow .25s ease,background .25s ease,border-color .25s ease; }
.site-header.scrolled { box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.brand { position: relative; z-index: 42; transition: opacity .2s ease; }
.brand img { display: block; width: 154px; height: 50px; object-fit: contain; object-position: left center; }
.site-nav { position: fixed; z-index: 40; inset: 0; display: flex; padding: clamp(138px,18vh,190px) clamp(28px,3.5vw,58px) 52px; background: rgba(24,27,27,.995); flex-direction: column; align-items: flex-start; justify-content: flex-start; visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .28s ease,transform .28s ease,visibility .28s; }
.site-nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.site-nav a { color: #dfe7e9; font-size: clamp(42px,5.2vw,78px); font-weight: 700; line-height: .98; letter-spacing: -.055em; text-decoration: none; text-transform: uppercase; transition: color .2s ease,transform .2s ease; }
.site-nav a:hover,.site-nav a:focus-visible { color: var(--violet); transform: translateX(8px); }
.nav-cta { margin: 0; padding: 0!important; border: 0!important; text-align: left; }
.menu-toggle { position: relative; z-index: 42; display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 10px 0 10px 16px; background: transparent; color: white; font: 700 12px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-toggle i { position: relative; display: block; width: 24px; height: 2px; background: var(--white); font-style: normal; transition: transform .25s ease,background .25s ease; }
.menu-toggle i::after { content: ""; position: absolute; inset: 0; background: var(--violet); opacity: 0; transform: rotate(90deg); transition: opacity .2s ease; }
body.menu-open .site-header { background: transparent; border-color: transparent; box-shadow: none; }
body.menu-open .brand { opacity: 0; pointer-events: none; }
body.menu-open .menu-toggle i { background: var(--violet); transform: rotate(45deg); }
body.menu-open .menu-toggle i::after { opacity: 1; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.eyebrow.ink { color: var(--black); }
.accent { color: var(--violet); }

.hero { position: relative; min-height: 500px; display: block; overflow: hidden; color: white; background: var(--black); }
.hero-media { position: absolute; inset: 0; background: url('/gerardo/assets/banner-background.png') 58% 50%/cover no-repeat; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,2,8,.98) 0%,rgba(3,2,8,.9) 37%,rgba(3,2,8,.48) 62%,rgba(3,2,8,.08) 100%); }
.hero-inner { position: relative; z-index: 1; padding: clamp(48px,6vw,68px) 0 clamp(42px,5vw,58px); }
.hero-identity { margin: 0; color: var(--white); font: 400 clamp(12px,1.55vw,18px)/1.4 Poppins,Arial,sans-serif; letter-spacing: 0; white-space: nowrap; }
.hero-identity span { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; }
.hero-identity .hero-name { color: var(--white); }
.hero-identity .hero-role { color: var(--white); }
.hero h1 { margin: 18px 0 22px; max-width: 10.5ch; font-size: clamp(4rem,6vw,5.75rem); font-weight: 600; line-height: .84; letter-spacing: -.07em; text-transform: uppercase; }
.hero h1 span { color: transparent; background: linear-gradient(90deg,var(--cyan),var(--violet)); -webkit-background-clip: text; background-clip: text; }
.mobile-title-break { display: none; }
.hero-copy { max-width: 590px; margin: 0; color: #dfe7e9; font: 400 clamp(1rem,1.35vw,1.2rem)/1.5 Poppins,Arial,sans-serif; }
.hero-copy span { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 0; color: white; background: transparent; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform .25s ease,background .25s ease,color .25s ease; }
.cta-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; overflow: visible; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: white; color: var(--black); }
.button-primary:hover { background: var(--violet); color: var(--black); }
.hero .button-primary:hover { color: var(--white); }
.button-ghost:hover { background: rgba(255,255,255,.09); }
.hero-proof { display: grid; grid-template-columns: repeat(3,1fr); max-width: none; margin: 0; color: var(--black); background: var(--paper); }
.hero-proof>div { min-height: 156px; padding: 34px clamp(22px,4vw,52px); border-right: 1px solid var(--ink-rule); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero-proof>div:last-child { border-right: 0; }
.hero-proof strong { display: block; font-size: clamp(34px,5vw,62px); line-height: 1; letter-spacing: -.05em; }
.hero-proof span:not(.count) { display: block; margin-top: 12px; color: var(--black); font-size: 15px; line-height: 1.35; text-transform: none; letter-spacing: 0; }

.pattern { padding: clamp(56px,8vw,104px) clamp(22px,5vw,68px); color: white; background: var(--charcoal); }
.pattern .wrap { width: min(var(--max),100%); }
.pattern-grid { display: grid; gap: clamp(40px,8vw,110px); grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: start; }
.pattern h2,.career-intro h2,.brand-one h2,.about h2,.contact h2 { font-size: clamp(40px,5vw,64px); font-weight: 700; line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.pattern h2,.career-intro h2,.brand-one h2,.contact h2 { margin: 20px 0 28px; }
.pattern .lead { margin: 0; color: #dfe7e9; font-size: 16px; line-height: 24px; }
.pattern .eyebrow.ink,.brand-one .eyebrow.ink { color: var(--white); }
.pattern-method { padding-top: 0; }
.pattern-method>.eyebrow { margin-bottom: 16px; }
.pattern-list { margin: 16px 0 0; padding: 0; list-style: none; }
.pattern-list li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; padding: 13px 0; font: 400 clamp(20px,2.5vw,30px)/1.15 Figtree,sans-serif; text-transform: uppercase; }
.pattern-list span { margin: 0; color: var(--white); font: inherit; font-weight: 500; letter-spacing: inherit; }

.career-intro { position: relative; min-height: 470px; display: flex; align-items: center; padding: clamp(56px,7vw,84px) clamp(22px,5vw,68px); overflow: hidden; color: white; background: #09050e; }
.career-intro-media { position: absolute; inset: 0; border: 0; border-radius: 0; background: url('/gerardo/assets/career-journey.png') center/cover no-repeat; opacity: 1; transform: none; }
.career-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,5,14,.98) 0%,rgba(9,5,14,.91) 38%,rgba(9,5,14,.55) 67%,rgba(9,5,14,.14)); }
.career-intro-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(48px,8vw,110px); align-items: center; width: min(var(--max),100%); padding: 0; opacity: 1; transform: none; }
.career-intro h2 { max-width: 720px; }
.career-intro-copy>p:last-child { max-width: 600px; margin: 0; color: #dfe7e9; font-size: 16px; line-height: 24px; }
.chapter { position: relative; padding: 0 clamp(22px,5vw,68px); overflow: visible; color: var(--black); background: var(--paper); border-top: 1px solid var(--ink-rule); }
.chapter::before { display: none; }
.chapter-grid { position: relative; display: grid; gap: clamp(34px,7vw,90px); grid-template-columns: minmax(190px,.72fr) minmax(0,1.5fr); width: min(var(--max),100%); margin: 0 auto; padding: clamp(48px,7vw,82px) 0; }
.chapter-identity { position: sticky; top: 92px; align-self: start; padding: 0; border: 0; }
.chapter-number { margin: 0; color: var(--black); font: 700 11px Figtree,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.chapter-identity h3 { margin: 14px 0; font-size: clamp(26px,4vw,46px); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.chapter-identity p:not(.chapter-number) { margin: 0; color: #5e6266; font-size: 13px; line-height: 19px; }
.chapter-story .eyebrow { display: none; }
.chapter-story h2 { max-width: 850px; margin: 0 0 28px; font-size: clamp(28px,3.7vw,48px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; text-transform: none; }
.chapter-story>p:not(.eyebrow):not(.models) { max-width: 760px; margin: 0; color: #383b3e; font-size: 16px; line-height: 24px; }
.chapter-story>p:not(.eyebrow):not(.models)+p:not(.eyebrow):not(.models) { margin-top: 16px; }
.chapter-details { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--ink-rule); }
.chapter-details span { display: block; margin-bottom: 9px; color: #5e6266; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.chapter-details p { margin: 0; color: var(--black); font-size: 15px; line-height: 22px; }
.change ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; background: transparent; border: 0; }
.change li { display: flex; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 21px; color: #5e6266; text-align: center; flex-direction: column; align-items: center; justify-content: flex-start; }
.change strong { display: block; min-width: 0; margin-bottom: 10px; color: var(--black); font-size: clamp(34px,4vw,50px); line-height: 1; letter-spacing: -.045em; text-transform: none; }
.change strong.nowrap { white-space: nowrap; }
.result-word.word-reveal { opacity: 0; transform: translateY(12px); transition: opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.result-word.word-reveal.is-visible { opacity: 1; transform: none; }
.systems-result>span { display: block; margin: 0; color: inherit; font-size: inherit; line-height: inherit; letter-spacing: 0; text-transform: none; }
.models { margin: 28px 0 0; color: var(--purple); font: 700 12px Figtree,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.chapter-dark,.chapter-gradient { color: white; background: var(--black); border-color: var(--rule); }
.chapter-dark .chapter-number,.chapter-gradient .chapter-number { color: white; }
.chapter-dark .chapter-identity p:not(.chapter-number),.chapter-gradient .chapter-identity p:not(.chapter-number) { color: var(--gray); }
.chapter-dark .chapter-story>p:not(.eyebrow):not(.models),.chapter-gradient .chapter-story>p:not(.eyebrow):not(.models) { color: #c8cbcf; }
.chapter-dark .chapter-details,.chapter-gradient .chapter-details { border-color: var(--rule); }
.chapter-dark .chapter-details span,.chapter-gradient .chapter-details span { color: var(--gray); }
.chapter-dark .chapter-details p,.chapter-gradient .chapter-details p { color: white; }
.chapter-dark .change ul,.chapter-gradient .change ul { background: transparent; border: 0; }
.chapter-dark .change li,.chapter-gradient .change li { color: #dfe7e9; background: transparent; }
.chapter-dark .change strong,.chapter-gradient .change strong { color: white; }
.chapter-dark .models,.chapter-gradient .models { color: var(--violet); }

.scale { padding: clamp(56px,8vw,104px) clamp(22px,5vw,68px); color: white; background: var(--charcoal); }
.scale .wrap { width: min(var(--max),100%); }
.scale-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(42px,8vw,110px); align-items: end; }
.scale-copy { max-width: 760px; margin: 0; color: #dfe7e9; font-size: 16px; line-height: 24px; }
.scale-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 44px; border: 0; }
.scale-metrics div { min-height: 170px; padding: 25px; background: transparent; border: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.scale-metrics strong { display: block; font-size: clamp(30px,4vw,50px); line-height: 1; letter-spacing: -.05em; }
.scale-metrics span { display: block; max-width: 190px; margin-top: 12px; color: #c8cbcf; font-size: 14px; line-height: 1.45; text-transform: none; letter-spacing: 0; }

.brand-one { position: relative; padding: clamp(70px,10vw,130px) clamp(22px,5vw,68px); overflow: hidden; color: white; background: linear-gradient(90deg,rgba(9,5,14,.98) 0%,rgba(9,5,14,.91) 38%,rgba(9,5,14,.55) 67%,rgba(9,5,14,.14)),url('/gerardo/assets/career-journey.png') center/cover no-repeat; }
.brand-one::before { display: none; }
.brand-one-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: clamp(54px,9vw,130px); width: min(var(--max),100%); align-items: center; }
.brand-one-grid>div:first-child { max-width: 680px; }
.brand-one h2 { max-width: 820px; font-weight: 600; }
.brand-one h2 .accent { display: inline-block; color: var(--violet); font-size: inherit; white-space: nowrap; }
.brand-name { margin: 0 0 22px; color: transparent; background: linear-gradient(90deg,var(--cyan),var(--violet)); -webkit-background-clip: text; background-clip: text; font-size: clamp(34px,5vw,60px); line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.brand-one-copy { margin: 0; max-width: 720px; color: #dfe7e9; font-size: 16px; line-height: 24px; }
.brand-one-infographic-trigger { margin-top: 28px; }
.brand-one-infographic-trigger:hover { color: white; }
.brand-stages { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0; border: 0; }
.brand-stages>div { padding: 0; border: 0; text-align: left; }
.brand-stages span { color: var(--white); font: inherit; letter-spacing: inherit; }
.brand-stages h3 { display: grid; grid-template-columns: 52px 1fr; margin: 0; font-size: clamp(22px,2.4vw,30px); font-weight: 400; text-transform: uppercase; }
.brand-stages h3 span { font-weight: 500; }
.brand-stages h3 b { font: inherit; }
.brand-stages p { margin: 5px 0 0 52px; color: #dfe7e9; font-size: 14px; line-height: 21px; text-transform: uppercase; letter-spacing: .04em; }

.case-studies { padding: clamp(68px,9vw,116px) clamp(22px,5vw,68px); color: var(--black); background: #f5f7f8; }
.case-studies-shell { width: min(var(--max),100%); }
.case-studies-intro { display: grid; grid-template-columns: minmax(0,.95fr) minmax(320px,1.05fr); gap: 18px clamp(46px,8vw,110px); align-items: end; margin-bottom: clamp(42px,6vw,72px); }
.case-studies-intro .eyebrow { grid-column: 1/-1; }
.case-studies-intro h2 { margin: 0; font-size: clamp(40px,5vw,64px); font-weight: 700; line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.case-studies-intro>p:last-child { max-width: 520px; margin: 0 0 2px; color: #4f555a; font-size: 16px; line-height: 24px; }
.case-study-stack { display: grid; gap: 0; padding-bottom: clamp(26px,5vw,58px); }
.case-study-card { position: sticky; top: calc(92px + var(--stack-index)*18px); z-index: calc(2 + var(--stack-index)); display: grid; grid-template-columns: minmax(310px,.85fr) minmax(0,1.15fr); min-height: clamp(390px,46vw,470px); margin-bottom: clamp(72px,10vh,112px); overflow: hidden; color: var(--black); background: #fff; border: 1px solid rgba(24,27,27,.17); box-shadow: 0 18px 46px rgba(18,21,23,.12); }
.case-study-card:nth-child(2) { background: #f0f2f3; }
.case-study-card:nth-child(3) { margin-bottom: 0; background: #e8ebed; }
.case-study-card-copy { display: flex; min-width: 0; padding: clamp(28px,4vw,52px); flex-direction: column; align-items: flex-start; }
.case-study-card-number { margin: 0 0 14px; color: #777d81; font: 500 11px/18px Figtree,sans-serif; letter-spacing: .12em; }
.case-study-labels { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: auto; }
.case-study-labels span { padding: 3px 0; color: #a1a6a9; border-bottom: 1px solid transparent; font: 600 9px/12px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.case-study-labels span.is-active { color: #4b5054; border-bottom-color: #8f969b; }
.case-study-client { margin: clamp(30px,4vw,54px) 0 8px; color: #60666a; font: 600 11px/18px Figtree,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.case-study-card h3 { max-width: 570px; margin: 0; font: 600 clamp(30px,3.6vw,50px)/.93 Figtree,sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.case-study-card-copy>p:not(.case-study-card-number):not(.case-study-client) { max-width: 520px; margin: 17px 0 0; color: #555b5f; font-size: 14px; line-height: 22px; }
.case-study-card-result { display: block; margin-top: 22px; color: var(--black); font: 600 13px/19px Figtree,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.case-study-card-image { min-height: 100%; overflow: hidden; background: #11151a; }
.case-study-card-image picture { display: block; width: 100%; height: 100%; }
.case-study-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.case-study-card:hover .case-study-card-image img { transform: scale(1.025); }
.case-study-open { min-width: 176px; margin-top: 26px; color: white; background: var(--black); border-color: var(--black); }
.case-study-open:hover { color: white; background: var(--violet); border-color: var(--violet); }
.case-study-open[disabled] { color: #6d7276; background: transparent; border-color: #aeb3b6; cursor: default; transform: none; }

@media (min-width:821px) {
  .case-study-card-image-guidehouse img { object-position: left center; }
}

@media (min-width:1100px) {
  .case-studies-shell { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); gap: clamp(52px,6vw,84px); align-items: start; }
  .case-studies-intro { position: sticky; top: 110px; display: block; margin: 0; padding-top: 4px; }
  .case-studies-intro .eyebrow { margin-bottom: 18px; }
  .case-studies-intro h2 { max-width: none; font-size: clamp(46px,4vw,58px); white-space: nowrap; }
  .case-studies-intro>p:last-child { max-width: 390px; margin-top: 24px; }
  .case-study-card {
    top: calc(110px + var(--stack-index)*18px);
    grid-template-columns: minmax(340px,1.15fr) minmax(0,.85fr);
    min-height: clamp(440px,39vw,510px);
    margin-bottom: clamp(72px,10vh,104px);
  }
  .case-study-card-copy { padding: clamp(28px,3vw,38px); }
  .case-study-client { margin-top: clamp(26px,3vw,38px); }
  .case-study-card h3 { font-size: clamp(28px,2.8vw,38px); }
  .case-study-card-copy>p:not(.case-study-card-number):not(.case-study-client) { margin-top: 14px; }
  .case-study-card-result { margin-top: 18px; }
  .case-study-open { margin-top: 22px; }
}

.case-study-modal { width: min(1180px,calc(100% - 44px)); max-height: calc(100dvh - 44px); padding: 0; overflow: hidden; color: var(--black); background: var(--paper); border: 0; box-shadow: 0 28px 90px rgba(0,0,0,.62); }
.case-study-modal::backdrop { background: rgba(5,6,9,.9); backdrop-filter: blur(5px); }
.case-study-modal[open] { display: block; }
.case-study-modal-shell { position: relative; max-height: calc(100dvh - 44px); padding: clamp(48px,6vw,76px); overflow-y: auto; overscroll-behavior: contain; }
.case-study-modal-close { position: absolute; z-index: 2; top: 22px; right: 28px; padding: 8px 0; border: 0; color: var(--black); background: transparent; font: 700 11px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.case-study-modal-close span { margin-left: 7px; color: var(--violet); font-size: 20px; }
.case-study-detail>header { padding: 22px 0 clamp(36px,5vw,56px); border-bottom: 1px solid var(--ink-rule); }
.case-study-modal-context { display: flex; justify-content: space-between; gap: 22px; margin: 0 0 30px; color: #777d81; font: 600 11px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.case-study-modal-context strong { color: var(--black); }
.case-study-modal-context b { color: #a2a7aa; font: inherit; }
.case-study-modal-context b.is-active { color: var(--violet); }
.case-study-modal-context i { margin: 0 10px; color: #a2a7aa; font-style: normal; }
.case-study-detail h2 { max-width: 920px; margin: 0; font: 600 clamp(44px,6.6vw,88px)/.86 Figtree,sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.case-study-detail>header>p:last-child { max-width: 760px; margin: 24px 0 0; color: #5e6468; font-size: clamp(17px,2vw,23px); line-height: 1.45; }
.case-study-detail-section { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: clamp(26px,5vw,70px); padding: clamp(38px,5vw,60px) 0; border-bottom: 1px solid var(--ink-rule); scroll-margin-top: 20px; }
.case-study-detail-section>span { color: var(--violet); font: 600 13px/20px Figtree,sans-serif; letter-spacing: .1em; }
.case-study-detail-section h3 { margin: 0 0 22px; color: var(--violet); font: 700 12px/18px Figtree,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.case-study-detail-section h4 { max-width: 780px; margin: 0 0 22px; font: 600 clamp(27px,3vw,40px)/1.03 Figtree,sans-serif; letter-spacing: -.035em; }
.case-study-detail-section p { max-width: 780px; margin: 0; color: #4f555a; font-size: 16px; line-height: 26px; }
.case-study-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 34px; background: rgba(24,27,27,.15); }
.case-study-results-five { grid-template-columns: repeat(5,1fr); }
.case-study-results-two { grid-template-columns: repeat(2,1fr); max-width: 720px; }
.case-study-results div { display: flex; min-height: 135px; padding: 22px; flex-direction: column; align-items: center; justify-content: center; background: #f5f7f8; text-align: center; }
.case-study-results strong { display: flex; align-items: baseline; justify-content: center; font: 600 clamp(28px,3vw,40px)/1 Figtree,sans-serif; letter-spacing: -.04em; }
.case-study-results div>span { display: block; margin-top: 10px; color: #60666a; font-size: 13px; line-height: 19px; }
.case-study-results .case-study-count { display: inline; margin: 0; color: inherit; font: inherit; }
.case-study-work-link { margin-top: 28px; color: white; background: var(--black); border-color: var(--black); }
.case-study-work-link:hover { color: white; background: var(--violet); border-color: var(--violet); }
.case-study-work-viewer[hidden] { display: none; }
.case-study-work-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 18px 0 26px; border-bottom: 1px solid var(--ink-rule); }
.case-study-work-header h2 { margin: 0; font: 600 clamp(25px,3vw,40px)/1 Figtree,sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.case-study-back { padding: 8px 0; color: #555b5f; background: transparent; border: 0; font: 700 11px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.case-study-back:hover { color: var(--violet); }
.case-study-work-viewer iframe { display: block; width: 100%; height: min(72dvh,900px); margin-top: 24px; background: white; border: 1px solid var(--ink-rule); }
.case-study-work-viewer[data-work-type="genially"] iframe { height: auto; min-height: 400px; aspect-ratio: 16/9; }
.case-study-work-pages { display: none; }
.case-study-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding-top: 30px; }
.case-study-bottom-close { min-width: 150px; color: white; background: var(--black); border-color: var(--black); }
.case-study-bottom-close:hover { color: white; background: var(--violet); border-color: var(--violet); }
.case-study-back-bottom { color: var(--black); background: transparent; border-color: rgba(24,27,27,.45); }
.case-study-back-bottom[hidden] { display: none; }
.case-study-back-bottom:hover { color: white; background: var(--violet); border-color: var(--violet); }
body.case-study-modal-open { overflow: hidden; }

.infographic-modal { width: min(1120px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; color: white; background: #0f1111; border: 0; box-shadow: 0 28px 90px rgba(0,0,0,.68); }
.infographic-modal::backdrop { background: rgba(5,6,9,.92); backdrop-filter: blur(6px); }
.infographic-modal[open] { display: block; }
.infographic-modal-shell { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: #0f1111; }
.infographic-modal-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; color: white; background: rgba(15,17,17,.96); border-bottom: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.infographic-modal-header p { margin: 0 0 2px; color: var(--violet); font: 700 9px/14px Figtree,sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.infographic-modal-header h2 { margin: 0; font: 600 17px/22px Figtree,sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.infographic-modal-close { flex: 0 0 auto; padding: 8px 0; color: white; background: transparent; border: 0; font: 700 11px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.infographic-modal-close span { margin-left: 7px; color: var(--violet); font-size: 20px; }
.infographic-modal-close:hover { color: var(--violet); }
.infographic-modal-canvas { padding: clamp(10px,2vw,24px); background: #17191a; }
.infographic-modal-canvas img { display: block; width: 100%; height: auto; margin: 0 auto; background: white; }
body.infographic-modal-open { overflow: hidden; }

.about { padding: clamp(56px,8vw,104px) clamp(22px,5vw,68px); color: var(--black); background: var(--paper); }
.about-grid { display: grid; gap: clamp(60px,10vw,140px); grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); width: min(var(--max),100%); }
.about h2 { max-width: 760px; margin: 20px 0 0; }
.about-list { margin: 38px 0 0; border: 0; }
.about-list div { display: grid; grid-template-columns: 105px 1fr; gap: 18px; padding: 3px 0; border: 0; }
.about-list dt { font-size: 12px; line-height: 18px; letter-spacing: 0; text-transform: uppercase; }
.about-list dd { margin: 0; color: var(--black); font-size: 13px; line-height: 18px; }
.education { align-self: start; margin-top: 112px; padding: 0; color: var(--black); background: transparent; border-top: 1px solid var(--ink-rule); }
.education .eyebrow { display: none; }
.education>p:not(.eyebrow) { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--ink-rule); color: #55595d; font-size: 11px; line-height: 17px; }
.education strong { color: var(--black); font-family: Figtree,sans-serif; font-size: 15px; line-height: 20px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 54px; }
.about .button-primary { background: var(--black); color: white; }
.about .button-ghost { border-color: rgba(24,27,27,.45); color: var(--black); background: var(--white); }
.about .button-primary:hover { color: white; background: var(--violet); border-color: var(--violet); }
.about .button-ghost:hover { color: var(--black); background: #c8cbcf; border-color: #c8cbcf; }

.contact { position: relative; min-height: auto; display: block; padding: clamp(56px,8vw,104px) clamp(22px,5vw,68px); overflow: hidden; color: white; background: var(--gradient); text-align: center; }
.contact-media { position: absolute; inset: 0; background: url('/gerardo/assets/contact-background.png') center/cover no-repeat; opacity: 1; transform: none; }
.contact::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg,rgba(0,24,77,.56),rgba(54,28,118,.42),rgba(45,18,76,.6)); }
.contact-inner { position: relative; z-index: 1; width: min(var(--max),100%); padding: 0; }
.contact h2 { max-width: 850px; margin-left: auto; margin-right: auto; }
.contact p:not(.eyebrow) { max-width: 670px; margin: 0 auto 30px; color: #dfe7e9; font-size: 16px; line-height: 24px; }
.contact .button-primary:hover { color: white; background: var(--violet); border-color: var(--violet); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.contact .button-ghost { color: var(--black); background: var(--white); border-color: var(--white); }
.contact .button-ghost:hover { color: var(--black); background: #c8cbcf; border-color: #c8cbcf; }

.resume-modal { width: min(1100px,calc(100% - 32px)); height: min(88vh,900px); padding: 0; color: var(--black); background: var(--paper); border: 0; box-shadow: 0 28px 80px rgba(0,0,0,.55); }
.resume-modal::backdrop { background: rgba(8,9,12,.86); backdrop-filter: blur(5px); }
.resume-modal[open] { display: grid; grid-template-rows: auto 1fr auto; }
.resume-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; color: white; background: var(--black); }
.resume-modal-header h2 { margin: 0; font: 700 16px/22px Figtree,sans-serif; text-transform: uppercase; }
.resume-modal-close { border: 0; padding: 8px 0; color: white; background: transparent; font: 700 12px/18px Figtree,sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.resume-modal-close:hover { color: var(--violet); }
.resume-modal iframe { width: 100%; height: 100%; border: 0; background: #525659; }
.resume-pages { display: none; }
.resume-modal-download { justify-self: end; margin: 12px 18px; background: var(--black); color: white; }
.resume-modal-download:hover { color: var(--white); background: var(--violet); border-color: var(--violet); }
footer { padding: 28px clamp(22px,5vw,68px); color: var(--gray); background: #101216; font-size: 12px; }
.footer-inner { width: min(var(--max),100%); display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.footer-logo { display: block; width: 106px; height: 50px; object-fit: contain; object-position: left center; }
.footer-inner a { color: white; text-decoration: none; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width:820px) {
  body { font-size: 16px; line-height: 24px; }
  .wrap { width: min(100% - 44px,var(--max)); }
  .site-header { padding: 10px 20px; }
  .site-nav { inset: 0; padding: 128px 22px 36px; }
  .site-nav a { font-size: clamp(36px,10.5vw,58px); line-height: 1.03; }
  .hero { min-height: 540px; }
  .brand img { width: 132px; height: 50px; }
  .hero-proof,.pattern-grid,.career-intro-inner,.chapter-grid,.chapter-details,.scale-intro,.scale-metrics,.brand-one-grid,.brand-stages,.case-studies-intro,.about-grid { grid-template-columns: 1fr; }
  .hero-proof>div { border-right: 0; border-bottom: 1px solid var(--ink-rule); }
  .chapter-identity { position: static; }
  .change ul { display: grid; grid-template-columns: 1fr 1fr; }
  .scale-metrics { gap: 1px; }
  .hero-media { background-position: 58% 50%; }
  .career-intro { min-height: 430px; }
  .career-intro-media { opacity: 1; }
  .hero-copy { font-size: 14px; line-height: 21px; }
  .education { margin-top: 0; }
  .case-studies-intro .eyebrow { grid-column: auto; }
  .case-study-stack { --mobile-stack-step: 28px; }
  .case-study-card { position: sticky; top: calc(70px + var(--stack-index)*var(--mobile-stack-step)); grid-template-columns: 1fr; min-height: 0; margin-bottom: 72px; box-shadow: 0 16px 34px rgba(18,21,23,.16); }
  .case-study-card:nth-child(3) { margin-bottom: 0; }
  .case-study-card-copy { padding: 28px; }
  .case-study-labels { margin-bottom: 0; }
  .case-study-client { margin-top: 34px; }
  .case-study-card-image { min-height: clamp(180px,48vw,230px); }
  .case-study-open { margin-top: 24px; }
  .case-study-modal { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .case-study-modal-shell { max-height: calc(100dvh - 20px); padding: 58px 24px 34px; }
  .case-study-work-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .case-study-work-viewer iframe { height: 68dvh; }
  .case-study-work-viewer[data-work-type="genially"] iframe { height: auto; min-height: 0; }
  .case-study-modal-footer { align-items: stretch; flex-direction: column; }
  .case-study-modal-footer .button { width: 100%; }
  .case-study-modal-context { display: grid; }
  .infographic-modal { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .infographic-modal-shell { max-height: calc(100dvh - 20px); }
  .case-study-detail-section { grid-template-columns: 36px minmax(0,1fr); gap: 16px; }
  .case-study-results,
  .case-study-results-five,
  .case-study-results-two { grid-template-columns: 1fr; max-width: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width:520px) {
  .change ul { grid-template-columns: 1fr; }
  .about-list div { grid-template-columns: 1fr; gap: 5px; }
  .hero-identity .hero-name,
  .hero-identity .hero-role { display: block; }
  .hero-identity .hero-divider { display: none; }
  .hero-identity .hero-role { margin-top: 2px; }
  .hero h1 {
    max-width: 9ch;
    font-size: clamp(3.35rem,15vw,5rem);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.075em;
  }
  .hero-copy {
    font-family: Poppins,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
  .mobile-title-break { display: block; }
  .case-study-card-copy { padding: 24px; }
  .case-study-stack { --mobile-stack-step: 20px; }
  .case-study-card { top: calc(66px + var(--stack-index)*var(--mobile-stack-step)); margin-bottom: 58px; }
  .case-study-card-image { min-height: clamp(170px,48vw,220px); }
  .case-study-labels { gap: 10px; }
  .case-study-labels span { padding: 3px 0; font-size: 8px; }
  .case-study-work-viewer[data-work-type="pdf"] iframe { display: none; }
  .case-study-work-pages {
    display: grid;
    gap: 12px;
    max-height: 68svh;
    margin-top: 24px;
    padding: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #c8d1d4;
    scrollbar-width: auto;
    scrollbar-color: var(--violet) #eef2f3;
  }
  .case-study-work-pages::-webkit-scrollbar { width: 10px; }
  .case-study-work-pages::-webkit-scrollbar-track { background: #eef2f3; }
  .case-study-work-pages::-webkit-scrollbar-thumb { background: var(--violet); border: 2px solid #eef2f3; }
  .case-study-work-pages figure { margin: 0; background: white; }
  .case-study-work-pages img { display: block; width: 100%; height: auto; }
  .case-study-work-pages figcaption { padding: 9px 11px; color: #4d4d54; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .case-study-detail h2 { font-size: clamp(40px,14vw,58px); }
  .case-study-detail-section { grid-template-columns: 1fr; }
  .case-study-results div { min-height: 0; }
  .resume-modal { width: calc(100% - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); overflow: hidden; }
  .resume-modal-header h2 { font-size: 13px; }
  .resume-modal iframe { display: none; }
  .resume-pages { display: block; min-height: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #25282c; }
  .resume-pages img { display: block; width: 100%; height: auto; margin: 0 0 8px; background: white; }
  .resume-pages img:last-child { margin-bottom: 0; }
  .resume-modal-download { justify-self: stretch; margin: 10px 12px; }
  .infographic-modal { width: calc(100% - 12px); max-height: calc(100dvh - 12px); }
  .infographic-modal-shell { max-height: calc(100dvh - 12px); }
  .infographic-modal-header { padding: 12px 14px; }
  .infographic-modal-header h2 { font-size: 13px; line-height: 18px; }
  .infographic-modal-header p { display: none; }
  .infographic-modal-canvas { padding: 6px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
  .reveal { opacity: 1; transform: none; }
  .case-study-card { position: relative; top: auto; }
}
