/* ===== Tokens ===== */
:root{
  --bg-dark: #15120f;
  --bg-dark-2: #1a1613;
  --bg-light: #f3eee3;
  --text-light: #f5f0e6;
  --text-dark: #1a1713;
  --text-muted-dark: #8c8479;
  --text-muted-light: #6f6a61;
  --accent: #c9a25a;
  --accent-2: #b98d4e;
  --border-dark: rgba(245,240,230,0.14);
  --border-light: rgba(26,23,19,0.12);
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Plus Jakarta Sans', sans-serif;
  --container: 1280px;
  --gutter: 80px;

  /* Surfaces: the editorial dark/cream rhythm, remapped as one unit by the theme toggle */
  --surface-0: #030403;   /* hero gradient start */
  --surface-0b: #060909;  /* hero gradient end */
  --surface-1: #100d0b;   /* destino / servicios / portafolio */
  --surface-2: #0e0b09;   /* cta / footer */
  --surface-card: #130f0c;
  --surface-card-2: #171310;
  --nav-tint: 16,13,11;
  --theme-transition: background .5s ease, color .5s ease, border-color .5s ease;
}

:root[data-theme="light"]{
  --bg-dark: #efe9db;
  --bg-dark-2: #e8e1d0;
  --text-light: #1c1712;
  --text-muted-dark: #6b6255;
  --border-dark: rgba(28,23,18,0.14);
  --accent: #a97c2f;
  --accent-2: #8f6825;

  --surface-0: #f7f2e6;
  --surface-0b: #efe7d4;
  --surface-1: #fbf8f0;
  --surface-2: #f3eee3;
  --surface-card: #ffffff;
  --surface-card-2: #ffffff;
  --nav-tint: 247,242,230;
}

body, .topnav__inner, .btn, a, .back-to-top, .sobre__panel, .work__media,
header.hero, .destino, .servicios, .portafolio, .reviews, .footer, .cta,
.svc-hero, .svc-detail, .svc-pager, .svc-price, .press, .award, .ig{
  transition: var(--theme-transition);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip;}
body{
  font-family: var(--sans);
  background: var(--bg-dark);
  color: var(--text-light);
  font-weight: 300;
  overflow-x:hidden; overflow-x:clip;
}
main{display:block;}
main:focus{outline:none;}

/* ===== Accessibility ===== */
.skip-link{
  position:absolute;
  left:50%;
  top:-60px;
  transform:translateX(-50%);
  background:var(--accent);
  color:var(--bg-dark);
  padding:10px 20px;
  border-radius:0 0 8px 8px;
  font-size:13px;
  font-weight:600;
  z-index:1000;
  transition: top .25s ease;
}
.skip-link:focus{top:0;}

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.back-to-top:focus-visible{outline-offset:4px;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
em{font-style:italic;}
.accent{font-family:var(--serif);color:var(--accent);font-style:italic;font-weight:500;}

section, header.hero{
  position: relative;
  padding: 0 var(--gutter);
}
/* anchors must land below the floating pill, never under it */
section[id], header.hero[id]{ scroll-margin-top: 104px; }

/* ===== Shared bits ===== */
.label{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.label i{width:34px;height:1px;background:currentColor;display:inline-block;}
.label--right{margin-left:auto;text-align:right;}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 40px 0 0;
  flex-wrap: wrap;
  gap: 16px;
}

.section-foot{
  display:flex;
  justify-content:space-between;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--text-muted-light);
  padding: 40px 0 48px;
  border-top: 1px solid var(--border-light);
  margin-top: 60px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 16px 30px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.btn span{transition: transform .35s ease;}
.btn:hover span{transform: translateX(4px);}
.btn--outline-light:hover{background: var(--text-light); color: var(--bg-dark);}
.btn--gold{background: var(--accent); color: var(--bg-dark); border-color: var(--accent);}
.btn--gold:hover{background: var(--accent-2); border-color: var(--accent-2);}

.bg-word{
  position:absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 260px;
  color: rgba(0,0,0,0.05);
  right: 6%;
  top: 40%;
  line-height: 1;
  pointer-events:none;
  z-index:0;
  user-select:none;
}

/* ===== TOP NAV =====
   Fluid, scroll-linked: --t (0..1) is written every scroll frame in JS,
   so every property below interpolates continuously — no class-toggle snap. */
.topnav{
  --t: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: calc(20px - (var(--t) * 6px)) 24px 0;
  pointer-events: none;
}
.topnav-spacer{ display: none; }
.topnav__inner{
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: calc(66px - (var(--t) * 6px));
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 calc(30px - (var(--t) * 6px));
  border-radius: 999px;
  background: rgba(var(--nav-tint), calc(0.42 + (var(--t) * 0.34)));
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 calc(6px + (var(--t) * 8px)) calc(18px + (var(--t) * 16px)) rgba(0,0,0, calc(0.12 + (var(--t) * 0.12)));
}
.topnav__logo{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.topnav__links{
  display:flex;
  gap: 36px;
  font-size: 13.5px;
  color: var(--text-muted-dark);
}
.topnav__links a:hover{color:var(--text-light);}
.btn--pill-outline{
  padding: 11px 24px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
}
.btn--pill-outline:hover{background:var(--text-light);color:var(--bg-dark);}

.topnav__right{display:flex;align-items:center;gap:20px;}
.topnav__controls{display:flex;align-items:center;gap:10px;}

.lang-toggle{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--border-dark);border-radius:999px;
  padding:6px 4px;cursor:pointer;color:var(--text-muted-dark);
  font-family:var(--sans);font-size:10.5px;letter-spacing:0.06em;
}
.lang-toggle span{padding:3px 8px;border-radius:999px;transition:background .25s ease,color .25s ease;}
.lang-toggle span.is-active{background:var(--accent);color:var(--bg-dark);font-weight:600;}
.lang-toggle i{width:1px;height:12px;background:var(--border-dark);display:inline-block;}

.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid var(--border-dark);cursor:pointer;
  color:var(--text-light);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block;}

.label--gold{color:var(--accent) !important;margin-bottom:22px;display:inline-flex;}
.label--gold i{background:var(--accent);}

.bg-word--hero{
  right: -6%;
  top: -2%;
  font-size: 520px;
  background: linear-gradient(100deg, rgba(245,240,230,0) 0%, rgba(245,240,230,0.05) 35%, rgba(230,190,130,0.16) 70%, rgba(230,190,130,0.22) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(6px);
}

.hero__tags li.is-accent{color:var(--accent);}
/* the tags sit on the photo, which stays dark in both themes */
:root[data-theme="light"] .hero__tags{color:rgba(245,240,230,0.7);text-shadow:0 1px 6px rgba(0,0,0,0.45);}
:root[data-theme="light"] .hero__tags li.is-accent{color:#e8c988;}

/* ===== HERO ===== */
header.hero{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  padding-top: 120px;
  padding-bottom: 110px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-0b) 100%);
}
.hero__photo{
  position:absolute;
  right: 0;
  /* bottom-anchored and shorter than the hero, so the figure reads as a
     portrait standing in the frame instead of a wall of image */
  top: auto;
  bottom: 0;
  height: 86%;
  width: 36%;
  object-fit: cover;
  object-position: center 12%;
  z-index:1;
  /* fade the photo's own alpha, so the hero background (dark OR light)
     shows through instead of painting a fixed colour over it */
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  mask-image: linear-gradient(to left, #000 62%, transparent 100%);
}
.hero__content{
  position:relative;
  z-index:2;
  max-width: 720px;
}
.hero__headline{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero__headline em{font-style:italic;}
.hero__headline em.accent{color:var(--accent);}
.hero__sub{
  margin-top: 26px;
  font-size: 17px;
  color: var(--text-muted-dark);
  max-width: 400px;
  line-height:1.55;
}
.hero__content .btn{margin-top: 34px;}
.hero__tags{
  position:absolute;
  right: var(--gutter);
  bottom: 40px;
  list-style:none;
  text-align:right;
  font-size: 11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--text-muted-dark);
  z-index:2;
  line-height: 1.9;
}
.hero__scroll{
  position:absolute;
  left: var(--gutter);
  bottom: 40px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  line-height: 1.6;
  z-index:2;
}

/* ===== PROPÓSITO ===== */
.proposito{
  background: var(--bg-light);
  color: var(--text-dark);
  padding-top: 0;
}
.proposito .label{color:var(--text-muted-light);}
.proposito__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 120px 0 100px;
  position:relative;
  z-index:1;
}
.proposito__headline{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 68px;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.proposito__copy{
  align-self:center;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted-light);
  display:flex;
  flex-direction:column;
  gap: 22px;
}
.proposito .section-foot{border-top-color:var(--border-light);color:var(--text-muted-light);}

/* parallax: the layers travel at different rates as the section passes by */
.proposito .bg-word,
.sobre .bg-word{
  transform: translate3d(0, calc(var(--p, 0) * 240px), 0);
  will-change: transform;
}
.proposito__headline{
  transform: translate3d(0, calc(var(--p, 0) * -70px), 0);
}
.proposito__copy{
  transform: translate3d(0, calc(var(--p, 0) * 58px), 0);
}

/* ===== DESTINO ===== */
.destino{
  background: var(--surface-1);
  padding-top: 90px;
  padding-bottom: 90px;
}
/* --- The boarding pass --- */
.boarding{
  --stub: 320px;
  --notch: 26px;
  position:relative;
  display:grid;
  grid-template-columns: 1fr var(--stub);
  background: var(--surface-card);
  border: 1px solid var(--border-dark);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.65);
}
.boarding__glow{
  position:absolute;
  inset:auto -10% -40% 30%;
  height:70%;
  background: radial-gradient(50% 60% at 60% 50%, rgba(230,180,110,0.22) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events:none;
  z-index:0;
}
.boarding__body{
  position:relative;
  z-index:1;
  padding: 44px 52px 46px;
}
.boarding__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:22px;
  margin-bottom:26px;
  border-bottom:1px solid var(--border-dark);
  flex-wrap:wrap;
}
.boarding__airline{
  font-family:var(--sans);
  font-weight:600;
  font-size:17px;
  letter-spacing:-0.01em;
  color:var(--text-light);
}
.boarding__airline i{
  font-style:normal;
  font-weight:400;
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-left:4px;
  vertical-align:2px;
}
.boarding__head .badge{margin-bottom:0;}

/* route: SDQ ---✈--- JFK */
.route{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  margin-bottom:34px;
}
.route__end strong{
  display:block;
  font-family:var(--serif);
  font-size:38px;
  font-weight:500;
  line-height:1;
  letter-spacing:0.02em;
  color:var(--text-light);
}
.route__end span{
  display:block;
  margin-top:6px;
  font-size:9.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted-dark);
}
.route__end--to{text-align:right;}
.route__path{
  position:relative;
  height:1px;
  background-image: linear-gradient(to right, var(--border-dark) 0 6px, transparent 6px 12px);
  background-size:12px 1px;
  background-repeat:repeat-x;
}
.route__plane{
  position:absolute;
  top:50%;
  font-size:14px;
  color:var(--accent);
  animation: route-fly 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes route-fly{
  0%   { left:0;    transform:translate(-50%,-50%); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { left:100%; transform:translate(-50%,-50%); opacity:0; }
}

.boarding__data{
  display:flex;
  gap:44px;
  flex-wrap:wrap;
  padding-top:24px;
  margin-bottom:32px;
  border-top:1px solid var(--border-dark);
}

/* perforation between body and stub */
.boarding__perf{
  position:absolute;
  top:0;
  bottom:0;
  right: var(--stub);
  width:0;
  border-left:2px dashed var(--border-dark);
  z-index:2;
}
.boarding__perf::before,
.boarding__perf::after{
  content:"";
  position:absolute;
  left:0;
  width:var(--notch);
  height:var(--notch);
  border-radius:50%;
  background: var(--surface-1);
  transform:translate(-50%,-50%);
}
.boarding__perf::before{top:0;}
.boarding__perf::after{top:100%;}

/* stub */
.boarding__stub{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:22px 22px 26px;
  background: rgba(0,0,0,0.12);
}
.stub__window{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  flex:1;
  min-height:240px;
}
.stub__window img{
  width:100%;height:100%;object-fit:cover;
  animation: ken-burns 26s ease-in-out infinite alternate;
  animation-delay:-9s;
  /* the photo is landscape and the window tall: keep his face in frame */
  object-position:47% 30%;
  transform-origin:47% 30%;
}
.stub__meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 2px 16px;
}
.stub__barcode{
  height:44px;
  border-radius:4px;
  background-image: repeating-linear-gradient(90deg,
    var(--text-light) 0 2px, transparent 2px 5px,
    var(--text-light) 5px 8px, transparent 8px 10px,
    var(--text-light) 10px 11px, transparent 11px 15px);
  opacity:.5;
}

.badge{
  display:inline-block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  color: var(--text-muted-dark);
  margin-bottom: 24px;
}
.destino .label{margin-bottom:16px; display:block;}
.destino__headline{
  font-family: var(--serif);
  font-weight:500;
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.boarding__body > p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted-dark);
  max-width: 460px;
  margin-bottom: 30px;
}
.destino__actions{display:flex;gap:16px;flex-wrap:wrap;}
.ticket-label{
  display:block;
  font-size: 9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--text-muted-dark);
  margin-bottom:6px;
}
.ticket-value{
  display:block;
  font-size: 12px;
  color: var(--text-light);
}
@keyframes ken-burns{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.14) translate(-1.5%, 1%); }
}
.destino__status{
  position:absolute;
  left:12px;
  bottom:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: rgba(15,12,10,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}
.destino__status-left{display:flex;align-items:center;gap:9px;min-width:0;}
.destino__status small{display:block;font-size:7.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(245,240,230,0.6);}
.destino__status strong{display:block;font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:#f5f0e6;font-weight:500;}
.destino__altitude{
  text-align:right;
  font-variant-numeric: tabular-nums;
  flex-shrink:0;
}
.destino__altitude small{display:block;font-size:7.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(245,240,230,0.6);}
.destino__altitude strong{display:block;font-size:10px;color:#e8c988;font-weight:600;}
.dot{
  width:7px;height:7px;border-radius:50%;background:#6fcf7a;box-shadow:0 0 8px #6fcf7a;flex-shrink:0;
  animation: dot-pulse 2.6s ease-in-out infinite;
  animation-delay: -1.1s;
}
@keyframes dot-pulse{
  0%,100%{opacity:1; box-shadow:0 0 8px #6fcf7a;}
  50%{opacity:.55; box-shadow:0 0 3px #6fcf7a;}
}

/* ===== SERVICIOS ===== */
.servicios{background:var(--surface-1);padding-bottom:100px;}
/* Services read as an index: one row per service, hairline separated.
   Scales to any number of services without breaking the grid rhythm. */
.servicios__list{
  list-style:none;
  padding-top:52px;
}
.servicio{border-top:1px solid var(--border-dark);}
.servicio:last-child{border-bottom:1px solid var(--border-dark);}
.servicio__row{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  align-items:center;
  gap:24px;
  padding:30px 20px 30px 8px;
  border-radius:10px;
  transition: background .4s ease, padding .4s cubic-bezier(.2,.7,.3,1);
}
.servicio__row:hover{
  background: rgba(var(--nav-tint), 0.5);
  padding-left:24px;
  padding-right:24px;
}
.servicio__n{
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 26px;
  line-height:1;
}
.servicio h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height:1.15;
  letter-spacing:-0.005em;
  transition: color .3s ease;
}
.servicio__row:hover h3{color:var(--accent);}
.servicio__go{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted-dark);
  white-space:nowrap;
  transition: color .3s ease;
}
.servicio__go i{font-style:normal;transition: transform .35s cubic-bezier(.2,.7,.3,1);}
.servicio__row:hover .servicio__go{color:var(--text-light);}
.servicio__row:hover .servicio__go i{transform:translateX(5px);}

/* ===== PORTAFOLIO ===== */
.portafolio{background:var(--surface-1);padding-bottom:60px;}

.portafolio__intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  padding: 64px 0 64px;
  flex-wrap:wrap;
}
.portafolio__intro h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:56px;
  line-height:1.14;
  max-width:700px;
}
.stats{
  list-style:none;
  display:flex;
  gap:36px;
}
.stats strong{
  display:block;
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
}
.stats span{
  display:block;
  font-size:9.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted-dark);
  margin-top:6px;
}

/* --- Work: image-led, editorial scale --- */
.work{display:block;}
.work--hero{margin-bottom:96px;position:relative;}

.work__media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:10px;
  background:var(--surface-card);
}
.work--hero .work__media{aspect-ratio: 16/8;}
.work__pair .work__media{aspect-ratio: 4/3;}
.work__media img{
  width:100%;height:100%;object-fit:cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
.work__media:hover img{transform:scale(1.045);}

/* soft grain keeps large photography from reading flat */
.work__grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.work__badge{
  position:absolute;top:22px;left:22px;z-index:2;
  background:rgba(15,12,10,0.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  color:#f5f0e6;
}

/* hero case: copy sits on the image (wide screens only — below 900px it
   drops under the photo, where it stays readable instead of overflowing) */
.work__overlay{
  position:absolute;
  left:0;right:0;top:0;
  /* matches the media's own ratio, so the scrim covers the photo exactly
     and never spills onto the meta row below it */
  aspect-ratio: 16/8;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  z-index:2;
  padding:48px 52px 44px;
  border-radius:10px;
  background:linear-gradient(to top, rgba(8,6,5,0.92) 0%, rgba(8,6,5,0.72) 45%, rgba(8,6,5,0) 100%);
  pointer-events:none;
}
.work__overlay .link-arrow{pointer-events:auto;}
.work__overlay p{
  font-size:14.5px;line-height:1.7;
  color:rgba(245,240,230,0.74);
  max-width:600px;
  margin:14px 0 22px;
}
.work__n{
  display:block;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.work__overlay h3{
  font-family:var(--serif);font-weight:500;
  font-size:44px;line-height:1.12;
  color:#f7f3ea;
  max-width:760px;
}
.work__overlay .link-arrow{color:#f7f3ea;}
.work__meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding-top:22px;
}
.work__impact{
  font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted-light);
}

/* the pair: big image, copy below */
.work__pair{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:90px;}
.work__body{padding-top:26px;}
.work__body h3{
  font-family:var(--serif);font-weight:500;
  font-size:28px;line-height:1.2;margin-bottom:14px;
}
.work__body > p{
  font-size:14px;line-height:1.7;color:var(--text-muted-dark);margin-bottom:20px;max-width:520px;
}
.work__foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--border-dark);
  font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted-light);
}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.tags li{
  font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--border-dark);border-radius:999px;
  color:var(--text-muted-dark);
}
.work__meta .tags{margin-bottom:0;}
.link-arrow{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;display:inline-flex;gap:8px;color:var(--text-light);}
.link-arrow span{transition:transform .3s;}
.link-arrow:hover span{transform:translateX(4px);}
.work__media:hover .link-arrow span{transform:translateX(4px);}


/* ===== SOBRE MÍ ===== */
.sobre{background:var(--bg-light);color:var(--text-dark);padding-top:100px;padding-bottom:100px;}
.sobre .label{color:var(--text-muted-light);}
/* Portrait bleeds off the left edge; the copy floats over it on a raised
   panel. The overlap is what makes the composition read as designed. */
.sobre__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  margin-top:60px;
  position:relative;
  z-index:1;
}
/* Full-figure cut-out standing free on the cream field: no frame, no crop.
   The warm halo behind and the contact shadow below stop it from floating. */
.sobre__portrait{
  position:relative;
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:20px;
}
.sobre__portrait img{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  height:auto;
  transform: translate3d(0, calc(var(--p, 0) * -30px), 0);
}
.sobre__portrait-glow{
  position:absolute;
  left:50%;
  top:6%;
  width:88%;
  height:70%;
  transform:translateX(-50%);
  background: radial-gradient(52% 50% at 50% 42%, rgba(201,162,90,0.30) 0%, rgba(201,162,90,0.10) 48%, transparent 72%);
  filter: blur(26px);
  pointer-events:none;
  z-index:0;
}
/* contact shadow so the figure is grounded, not pasted */
.sobre__portrait-floor{
  position:absolute;
  bottom:44px;
  left:50%;
  width:46%;
  height:26px;
  transform:translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(26,23,19,0.30) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events:none;
  z-index:0;
}
.sobre__caption{
  display:block;
  margin-top:10px;
  font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-muted-light);
}

.sobre__panel{
  position:relative;
  grid-column:2;
  grid-row:1;
  margin-left:-14%;
  padding:60px 56px 54px;
  background:var(--bg-light);
  border:1px solid var(--border-light);
  border-radius:16px;
  box-shadow:0 50px 90px -46px rgba(26,23,19,0.55);
  transform: translate3d(0, calc(var(--p, 0) * 26px), 0);
}
.sobre__quote-mark{
  position:absolute;
  top:-26px;
  left:48px;
  font-family:var(--serif);
  font-size:110px;
  line-height:1;
  color:var(--accent);
  opacity:.34;
  pointer-events:none;
}
.sobre__panel h2{
  font-family:var(--serif);font-weight:500;
  font-size:46px;line-height:1.1;margin-bottom:26px;
}
.sobre__panel > p{
  font-size:16.5px;line-height:1.75;color:var(--text-muted-light);max-width:470px;
}
.sobre__sign{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--border-light);
}
/* Signature: the name set in a slanted script (Ephesis), close to the
   handwritten original; the ink colour lives here. */
.signature{
  display:block;
  width:max-content;max-width:100%;
  font-family:'Ephesis', cursive;font-weight:400;font-style:normal;
  font-size:clamp(40px, 6vw, 58px);line-height:1.1;letter-spacing:0;word-spacing:.22em;
  white-space:nowrap;
  color:#2a2118;
  margin:4px 0 2px -2px;
}
.sobre__sign.sign-ready .signature{clip-path:inset(-20% 100% -20% 0);}
.sobre__sign.sign-ready.is-signed .signature{
  clip-path:inset(-20% 0 -20% 0);
  transition:clip-path 2.2s cubic-bezier(.45,.05,.3,1);
}
.signature-caption{display:block;margin-top:6px;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted-light);}

/* ===== CTA ===== */
.cta{
  background:var(--surface-2);
  min-height: 70vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
  position:relative;
}
/* Background reel: Enmanuel on stage, graded warm in ffmpeg and veiled with
   the section colour, so it reads as atmosphere in either theme and the
   centred type never loses contrast. */
.cta__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 34%;
  /* kept as a whisper of motion: low opacity and a soft blur, so it never
     competes with the headline or reads as a zoomed-in face */
  opacity:.28;
  filter:blur(3px) saturate(.8);
  transform:scale(1.06);
  z-index:0;
  pointer-events:none;
}
.cta__veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--surface-2) 0%, transparent 22%, transparent 78%, var(--surface-2) 100%),
    radial-gradient(ellipse 60% 55% at 50% 50%, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface-2) 52%, transparent));
}
:root[data-theme="light"] .cta__veil{
  background:
    linear-gradient(180deg, var(--surface-2) 0%, transparent 22%, transparent 78%, var(--surface-2) 100%),
    radial-gradient(ellipse 60% 55% at 50% 50%, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
}
.cta__particles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.cta__particles canvas{display:block;}
.cta .label{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:2;}
.cta__bg{
  position:absolute;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:150px;color:rgba(245,240,230,0.045);
  filter:blur(2px);
  white-space:nowrap;
  z-index:1;
}
.cta__headline{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:64px;position:relative;z-index:2;
}
.cta__sub{margin-top:18px;font-size:14px;color:var(--text-muted-dark);position:relative;z-index:2;}
.cta .btn{margin-top:40px;position:relative;z-index:2;}

/* ===== FOOTER ===== */
.footer{background:var(--surface-2);padding:60px var(--gutter) 0;position:relative;}
.footer__top{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:40px;border-bottom:1px solid var(--border-dark);
  flex-wrap:wrap;gap:20px;
}
.footer__logo{font-family:var(--serif);font-style:italic;font-size:20px;}
.footer__nav{display:flex;gap:28px;font-size:12.5px;color:var(--text-muted-dark);}
.footer__nav a:hover{color:var(--text-light);}
.footer__social{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--text-muted-dark);}
.footer__social a{
  width:30px;height:30px;border:1px solid var(--border-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;text-transform:uppercase;
}
.footer__bottom{
  display:flex;justify-content:space-between;
  padding: 28px 0 40px;
  font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted-light);
  line-height:1.6;flex-wrap:wrap;gap:12px;
}

/* ===== BACK TO TOP ===== */
.back-to-top{
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: rgba(var(--nav-tint),0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-light);
  font-size: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .3s ease, border-color .3s ease;
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{background:var(--text-light);color:var(--bg-dark);border-color:var(--text-light);}
.back-to-top span{transform:translateY(-1px);}

/* ===== SERVICES DROPDOWN ===== */
.navdrop{position:relative;}
.navdrop__btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:300;
  color:var(--text-muted-dark);
  transition:color .3s ease;
}
.navdrop__btn:hover,.navdrop.is-open .navdrop__btn{color:var(--text-light);}
.navdrop__caret{transition:transform .3s ease;}
.navdrop.is-open .navdrop__caret{transform:rotate(180deg);}

.navdrop__menu{
  position:absolute;
  /* clears the bottom edge of the nav pill, which is taller than the button */
  top:calc(100% + 28px);
  left:50%;
  width:340px;
  transform:translate(-50%,-8px);
  padding:10px;
  border-radius:18px;
  background:rgba(var(--nav-tint),0.92);
  border:1px solid var(--border-dark);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 18px 44px rgba(0,0,0,0.30);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  z-index:10;
}
.navdrop.is-open .navdrop__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
/* invisible bridge, so the pointer can cross the gap without closing */
.navdrop__menu::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px;}

.navdrop__menu a{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;line-height:1.35;
  color:var(--text-muted-dark);
  transition:background .25s ease,color .25s ease;
}
.navdrop__menu a:hover{background:rgba(201,162,90,0.10);color:var(--text-light);}
.navdrop__n{
  font-family:var(--serif);font-style:italic;font-size:13px;
  color:var(--accent);flex:none;min-width:20px;
}
.navdrop__all{
  margin-top:6px;
  border-top:1px solid var(--border-dark);
  border-radius:0 0 12px 12px !important;
  font-size:10.5px !important;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent) !important;
  justify-content:space-between;
}
.navdrop__all i{transition:transform .3s ease;}
.navdrop__all:hover i{transform:translateX(4px);}

/* ===== SERVICE PAGES =====
   Same chrome as the home page; the body is a two-column brief so the
   promise (benefits) and the mechanics (how it works, what's included,
   price) never compete for the same column. */
/* The hero follows the "Propósito Central" layout: copy on the left behind a
   thin gold rule, the cut-out portrait standing on the right, the name
   lockup boxed over it and the byline closing the column. */
.svc-hero{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 0.82fr;
  align-items:end;
  min-height: 92vh;
  padding: 168px var(--gutter) 0;
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-0b) 100%);
  overflow:hidden;
}
.bg-word--svc{
  right: 4%;
  top: -6%;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 400px;
  color: rgba(245,240,230,0.035);
}
:root[data-theme="light"] .bg-word--svc{color:rgba(26,23,19,0.05);}

.svc-hero__text{
  position:relative;
  z-index:2;
  padding: 0 66px 96px 0;
}
/* the vertical gold rule dividing copy from portrait */
.svc-hero__text::after{
  content:'';
  position:absolute;
  right:0;top:6px;bottom:76px;
  width:1px;
  background: linear-gradient(180deg, transparent, var(--accent) 16%, var(--accent) 84%, transparent);
  opacity:.5;
}
.svc-crumb{
  /* its own line: the kicker label below must never sit beside it */
  display:flex;width:max-content;align-items:center;gap:9px;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-muted-dark);
  margin-bottom:30px;
  transition: color .3s ease;
}
.svc-crumb:hover{color:var(--accent);}
.svc-title{font-size:68px;line-height:1.06;position:relative;}
/* the tinted panel sitting behind the italic clause, as in the reference */
.svc-title em{
  background: rgba(201,162,90,0.11);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.02em 0.2em 0.1em;
  margin-left: -0.14em;
}
.svc-tagline{
  margin-top:26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--accent);
}
.svc-intro{
  margin-top:20px;
  font-size:16.5px;line-height:1.75;
  color:var(--text-muted-dark);
  max-width:540px;
}
.svc-hero__foot{
  display:flex;gap:44px;
  margin-top:48px;padding-top:20px;
  max-width:400px;
  border-top:1px solid rgba(201,162,90,0.5);
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-muted-dark);
}

.svc-hero__photo{position:relative;align-self:end;z-index:1;}
.svc-hero__photo img{
  display:block;
  width:100%;max-width:560px;
  margin-left:auto;
  filter: drop-shadow(0 26px 56px rgba(0,0,0,0.45));
}
:root[data-theme="light"] .svc-hero__photo img{filter:drop-shadow(0 26px 46px rgba(26,23,19,0.28));}
.svc-lockup{
  position:absolute;
  right:26px;
  bottom:16%;
  padding:12px 26px 16px;
  text-align:center;
  border:1px solid rgba(201,162,90,0.55);
  background: rgba(8,7,5,0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.svc-lockup__sur{
  display:block;
  font-family:var(--serif);font-style:italic;font-size:15px;
  color:#efe4d2;
}
.svc-lockup__name{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:38px;line-height:1.1;
  color:#fff;
}

.svc-detail{
  background: var(--surface-1);
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 80px;
  padding-top: 92px;
  padding-bottom: 100px;
}
.svc-col h2{font-family:var(--serif);font-weight:500;font-size:30px;margin-bottom:24px;}
.svc-col__second{margin-top:54px;}
.svc-how{font-size:16.5px;line-height:1.8;color:var(--text-muted-dark);max-width:580px;}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:15px;}
.svc-list li{
  position:relative;
  padding-left:28px;
  font-size:15.5px;line-height:1.65;
  color:var(--text-muted-dark);
}
.svc-list li::before{
  content:'';
  position:absolute;left:0;top:12px;
  width:12px;height:1px;background:var(--accent);
}
.svc-list--check li{color:var(--text-light);font-size:16.5px;}

.svc-price{
  margin-top:50px;
  padding:22px 28px;
  border:1px solid var(--border-dark);
  border-radius:14px;
  background: var(--surface-card);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  max-width:420px;
}
.svc-price strong{font-family:var(--serif);font-weight:500;font-size:34px;color:var(--accent);}
.svc-cta{margin-top:36px;}

.svc-pager{
  background: var(--surface-1);
  border-top:1px solid var(--border-dark);
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  padding: 42px var(--gutter) 72px;
}
.svc-pager__item{display:flex;flex-direction:column;gap:7px;max-width:320px;}
.svc-pager__item--next{align-items:flex-end;text-align:right;margin-left:auto;}
.svc-pager__item strong{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;transition:color .3s ease;}
.svc-pager__item:hover strong{color:var(--accent);}
.svc-pager__all{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-muted-dark);transition:color .3s ease;
}
.svc-pager__all:hover{color:var(--accent);}

/* ===== TESTIMONIOS =====
   One quote at a time, set big enough to actually read, with every client's
   face on the rail underneath. The rail carries the proof (twelve real
   people), the stage carries the story. Chosen over a card grid because
   these quotes run from one line to a full paragraph — a grid would either
   clip the long ones or leave holes under the short ones. */
.reviews{
  background: var(--surface-2);
  padding-bottom: 110px;
  overflow: hidden;
}
.reviews__headline{
  font-size: 56px;
  line-height: 1.08;
  margin: 26px 0 64px;
  max-width: 900px;
}

.rev{position:relative;}
.rev__stage{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 68px;
  align-items:center;
  min-height: 340px;
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.rev__stage.is-in{opacity:1;transform:none;}

.rev__portrait{position:relative;width:300px;height:300px;flex:none;}
.rev__portrait img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  position:relative;
  z-index:1;
}
.rev__portrait-ring{
  position:absolute;
  inset:-16px;
  border-radius:50%;
  border:1px solid var(--border-dark);
  z-index:0;
}
/* warm halo, so the cut-out circle sits in the dark instead of floating on it */
.rev__portrait-ring::after{
  content:'';
  position:absolute;
  inset:-34px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,90,0.20), transparent 70%);
}

.rev__quote{position:relative;max-width:720px;}
.rev__mark{
  position:absolute;
  top:-62px;
  /* parked in the gutter between portrait and quote, so it never sits
     underneath the first line of the text */
  left:-54px;
  font-family: var(--serif);
  font-size:150px;
  line-height:1;
  color: var(--accent);
  opacity:.22;
  pointer-events:none;
}
.rev__lead{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.32;
  color: var(--text-light);
  position:relative;
}
.rev__body{
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted-dark);
}
.rev__by{margin-top:32px;display:flex;flex-direction:column;gap:5px;}
.rev__name{font-style:normal;font-weight:600;font-size:15px;letter-spacing:-0.01em;}
.rev__role{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}

.rev__controls{display:flex;align-items:center;gap:22px;margin-top:58px;}
.rev__arrow{
  flex:none;
  width:44px;height:44px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--border-dark);
  color: var(--text-muted-dark);
  cursor:pointer;
  font-size:15px;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.rev__arrow:hover{background:var(--text-light);color:var(--bg-dark);border-color:var(--text-light);}

.rev__rail{
  display:flex;
  gap:12px;
  flex:1;
  overflow-x:auto;
  padding:8px 2px;
  scrollbar-width:none;
}
.rev__rail::-webkit-scrollbar{display:none;}
.rev__dot{
  flex:none;
  width:52px;height:52px;
  padding:0;
  border-radius:50%;
  border:1px solid transparent;
  background:none;
  cursor:pointer;
  opacity:.38;
  filter:grayscale(1);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease, border-color .35s ease;
}
.rev__dot img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.rev__dot:hover{opacity:.85;filter:none;}
.rev__dot.is-active{opacity:1;filter:none;border-color:var(--accent);transform:scale(1.14);}

.rev__progress{height:1px;background:var(--border-dark);margin-top:28px;}
.rev__progress span{display:block;height:100%;width:0;background:var(--accent);}
@keyframes rev-progress{from{width:0;}to{width:100%;}}

/* ===== HERO: nomination pill ===== */
.hero__award{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:26px;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  border:1px solid rgba(201,162,90,0.45);
  background:rgba(201,162,90,0.08);
  font-size:11.5px;letter-spacing:0.02em;
  color:var(--text-light);
  transition:background .3s ease,border-color .3s ease;
}
.hero__award:hover{background:rgba(201,162,90,0.18);border-color:var(--accent);}
.hero__award i{color:var(--accent);font-style:normal;transition:transform .3s ease;}
.hero__award:hover i{transform:translateX(3px);}
.hero__award-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(201,162,90,0.6);
  animation:award-pulse 2.4s ease-out infinite;
}
@keyframes award-pulse{
  0%{box-shadow:0 0 0 0 rgba(201,162,90,0.55);}
  70%{box-shadow:0 0 0 9px rgba(201,162,90,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,90,0);}
}
.hero__content .label--gold{display:flex;width:max-content;}

/* ===== CONOCE MÁS: interview + nomination =====
   The interview carries the voice (wide column), the nomination carries the
   proof (narrow, tall card) — one reads, the other asks for an action. */
.press{background:var(--surface-2);padding-bottom:110px;}
.press__headline{font-size:56px;line-height:1.08;margin:26px 0 60px;}
.press__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:stretch;}

.yt{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;padding:0;border:0;cursor:pointer;
  border-radius:16px;overflow:hidden;background:#000;
}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s ease;filter:brightness(.82);}
.yt:hover img{transform:scale(1.04);filter:brightness(.7);}
.yt__play{
  position:absolute;left:50%;top:50%;
  width:84px;height:84px;margin:-42px 0 0 -42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(201,162,90,0.92);color:#15120f;
  box-shadow:0 0 0 10px rgba(201,162,90,0.18);
  transition:transform .35s ease, box-shadow .35s ease;
}
.yt__play svg{margin-left:4px;}
.yt:hover .yt__play{transform:scale(1.08);box-shadow:0 0 0 16px rgba(201,162,90,0.14);}
.yt__len{
  position:absolute;right:14px;bottom:14px;
  padding:4px 9px;border-radius:6px;
  background:rgba(0,0,0,0.7);color:#fff;
  font-size:11.5px;font-weight:500;letter-spacing:0.04em;
}
.yt__frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000;}
.press__meta{padding-top:28px;}
.press__meta h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.2;margin:10px 0 14px;}
.press__meta p{font-size:15px;line-height:1.75;color:var(--text-muted-dark);max-width:640px;margin-bottom:22px;}

.award{
  position:relative;display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(201,162,90,0.35);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201,162,90,0.16), transparent 60%),
    var(--surface-card);
}
.award__photo{height:300px;overflow:hidden;position:relative;}
.award__photo img{width:100%;height:100%;object-fit:cover;object-position:center 14%;}
.award__photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, var(--surface-card) 100%);
}
.award__body{padding:0 34px 34px;margin-top:-34px;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1;}
.award__laurel{color:var(--accent);}
.award__kicker{margin-top:12px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);}
.award__title{font-size:34px;line-height:1.1;margin-top:12px;}
.award__org{margin-top:12px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted-dark);}
.award__note{margin:16px 0 26px;font-size:14.5px;line-height:1.65;color:var(--text-muted-dark);max-width:320px;}
.award__cta{margin-top:auto;}
.award__how{margin-top:12px;font-size:11.5px;color:var(--text-muted-dark);}

/* ===== INSTAGRAM ===== */
.ig{background:var(--surface-1);padding-bottom:100px;}
.ig__layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:64px;
  align-items:start;
  margin-top:56px;
}
.ig__profile{position:sticky;top:120px;}
.ig__avatar{
  width:96px;height:96px;border-radius:50%;
  object-fit:cover;object-position:center 18%;
  border:1px solid var(--accent);
  padding:3px;
  background:var(--surface-card);
}
.ig__handle{
  display:inline-block;margin-top:22px;
  font-weight:600;font-size:22px;letter-spacing:-0.02em;
  transition:color .3s ease;
}
.ig__handle:hover{color:var(--accent);}
.ig__bio{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-muted-dark);}
.ig__bio em{font-size:1.15em;}
.ig__stats{margin-top:18px;font-size:12px;letter-spacing:0.04em;color:var(--text-muted-dark);}
.ig__stats strong{color:var(--text-light);font-weight:600;}
.ig__follow{margin-top:28px;}

.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ig__tile{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/5;
  border-radius:10px;
  background:var(--surface-card);
}
.ig__tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.ig__tile::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,6,4,0.82));
  opacity:0;transition:opacity .4s ease;
}
.ig__tile:hover img{transform:scale(1.06);}
.ig__tile:hover::after,.ig__tile:focus-visible::after{opacity:1;}
.ig__type{position:absolute;top:12px;right:12px;z-index:1;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.ig__cap{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:1;
  font-size:12.5px;line-height:1.45;color:#f5f0e6;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.ig__tile:hover .ig__cap,.ig__tile:focus-visible .ig__cap{opacity:1;transform:none;}
/* a single real post (before the live feed is connected) is shown as the
   vertical reel it is, with its caption always visible, not a lone square */
.ig__grid[data-count="1"]{grid-template-columns:minmax(0,340px);}
.ig__grid[data-count="1"] .ig__tile{aspect-ratio:9/16;}
.ig__grid[data-count="1"] .ig__tile::after,
.ig__grid[data-count="1"] .ig__cap{opacity:1;transform:none;}
.ig__grid[data-count="1"] .ig__cap{font-size:13.5px;bottom:20px;left:20px;right:20px;}

/* ===== DISPLAY TYPE: the sans + serif-italic mix =====
   Every statement headline is built the same way: the plain clause is set
   in Plus Jakarta Sans, tight and semibold, and the clause that carries the
   idea falls into Cormorant italic. The contrast IS the voice, so it is
   defined once here rather than repeated per section. Declared after the
   section rules so it overrides their older all-serif font-family. */
.hero__headline,
.proposito__headline,
.destino__headline,
.portafolio__intro h2,
.reviews__headline,
.press__headline,
.award__title,
.case-title,
.bio-title,
.bio-h2,
.svc-title,
.sobre__panel h2{
  /* project titles are deliberately NOT in this list: with no emphasised
     clause to play against, the sans alone just reads flat */
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.hero__headline em,
.proposito__headline em,
.destino__headline em,
.portafolio__intro h2 em,
.reviews__headline em,
.press__headline em,
.award__title em,
.case-title em,
.bio-title em,
.bio-h2 em,
.svc-title em,
.sobre__panel h2 em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  /* Cormorant's x-height is far smaller than Jakarta's; without the optical
     bump the italic clause reads a size down from the sans one */
  font-size: 1.12em;
  letter-spacing: -0.005em;
}

/* ===== Reveal animation ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  :root{--gutter:48px;}
  .hero__headline{font-size:48px;}
  .proposito__grid{grid-template-columns:1fr;gap:48px;}
  /* stacked columns must not parallax into each other */
  .proposito__headline, .proposito__copy, .sobre__panel{transform:none;}
  .proposito__headline{font-size:44px;}
  .proposito__copy{font-size:16.5px;}
  /* portrait and panel unstack: the panel slides under the photo */
  .sobre__grid{grid-template-columns:1fr;gap:0;}
  .sobre__portrait{grid-column:1;grid-row:1;padding-top:0;}
  .sobre__portrait img{max-width:400px;}
  .sobre__panel{grid-column:1;grid-row:2;margin-left:0;margin-top:34px;padding:44px 36px 40px;}
  .proposito__headline{font-size:38px;}
  .boarding{--stub:260px;}
  .boarding__body{padding:36px 34px 38px;}
  .servicio h3{font-size:26px;}
  .servicio__row{grid-template-columns:60px 1fr;gap:16px;padding:24px 8px;}
  .servicio__go{grid-column:2;}
  .work__pair{grid-template-columns:1fr;gap:56px;}
  .portafolio__intro h2{font-size:40px;}
  .work--hero .work__media{aspect-ratio:4/3;}
  .work__overlay{
    position:static;
    aspect-ratio:auto;
    padding:26px 0 0;
    background:none;
    border-radius:0;
  }
  .work__overlay h3{font-size:30px;color:var(--text-light);}
  .work__overlay p{color:var(--text-muted-dark);max-width:none;}
  .work__overlay .link-arrow{color:var(--text-light);}
  .portafolio__intro{flex-direction:column;align-items:flex-start;}
  .cta__bg{font-size:90px;}
  .cta__headline{font-size:46px;}
  .bg-word{font-size:160px;}
}

@media (max-width: 640px){
  :root{--gutter:24px;}
  body{font-size:15px;}
  header.hero{padding-top:96px;padding-bottom:40px;}
  .hero__photo{width:100%;height:60%;top:auto;bottom:0;object-position:top center;
    -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
    mask-image: linear-gradient(to top, black 40%, transparent 100%);
    opacity:.55;
  }
  .hero__content{max-width:100%;}
  .hero__headline{font-size:36px;}
  .hero__tags{position:static;text-align:left;margin-top:32px;}
  .hero__scroll{position:static;margin-top:20px;display:block;}
  .hero{display:flex;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .label--right{margin-left:0;text-align:left;}
  .proposito__headline{font-size:30px;}
  .destino__headline{font-size:30px;}
  .destino__actions{flex-direction:column;align-items:stretch;}
  .destino__actions .btn{justify-content:center;}
  /* the pass folds: stub drops below, perforation turns horizontal.
     The dashed edge rides the stub itself, so it never needs a magic offset. */
  .boarding{grid-template-columns:1fr;}
  .boarding__body{padding:28px 24px 30px;}
  .boarding__data{gap:22px;}
  .boarding__perf{display:none;}
  .boarding__stub{
    padding:20px;
    border-top:2px dashed var(--border-dark);
  }
  .boarding__stub::before,
  .boarding__stub::after{
    content:"";
    position:absolute;
    top:0;
    width:var(--notch);
    height:var(--notch);
    border-radius:50%;
    background:var(--surface-1);
    transform:translate(-50%,-50%);
  }
  .boarding__stub::before{left:0;}
  .boarding__stub::after{left:100%;}
  .stub__window{min-height:230px;}
  .route__end strong{font-size:30px;}
  .portafolio__intro h2{font-size:28px;}
  .stats{gap:24px;flex-wrap:wrap;}

  .sobre__panel h2{font-size:30px;}
  .cta__bg{font-size:52px;}
  .cta__headline{font-size:34px;}
  .footer__bottom{flex-direction:column;}
  .footer__top{flex-direction:column;align-items:flex-start;gap:24px;}
  .bg-word{display:none;}

  .topnav{padding: calc(14px - (var(--t) * 4px)) 12px 0;}
  .topnav__inner{
    padding: 0 calc(18px - (var(--t) * 4px));
    height: calc(60px - (var(--t) * 4px));
  }
  .topnav__links{display:none;}
  .topnav__right{gap:10px;}
  .topnav__controls{gap:6px;}
  .back-to-top{right:20px;bottom:20px;width:44px;height:44px;}
}

/* ===== Touch targets ===== */
@media (pointer: coarse){
  .btn{min-height:44px;}

  .footer__social a{width:40px;height:40px;}
  .back-to-top{width:48px;height:48px;}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{opacity:1 !important; transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ===== Testimonios: responsive ===== */
@media (max-width: 1024px){
  .reviews__headline{font-size:40px;margin-bottom:48px;}
  .rev__stage{grid-template-columns:1fr;gap:34px;justify-items:start;min-height:0;}
  .rev__portrait{width:190px;height:190px;}
  /* stacked layout: no gutter left for the mark, and it would land on the text */
  .rev__mark{display:none;}
  .rev__lead{font-size:27px;}
}
@media (max-width: 640px){
  .reviews{padding-bottom:70px;}
  .reviews__headline{font-size:30px;margin:20px 0 36px;}
  .rev__portrait{width:140px;height:140px;}
  .rev__lead{font-size:21px;line-height:1.38;}
  .rev__body{font-size:14.5px;}
  .rev__controls{gap:12px;margin-top:40px;}
  .rev__arrow{width:40px;height:40px;}
  .rev__dot{width:44px;height:44px;}
}
@media (prefers-reduced-motion: reduce){
  .rev__stage{transition:none;opacity:1;transform:none;}
  .rev__progress{display:none;}
}

/* ===== Service pages: responsive ===== */
@media (max-width: 1024px){
  .svc-hero{grid-template-columns:1fr;min-height:0;padding:140px var(--gutter) 0;}
  .svc-hero__text{padding:0 0 46px;}
  .svc-hero__text::after{display:none;}
  .svc-hero__photo img{max-width:420px;margin:0 auto;}
  .svc-lockup{right:50%;transform:translateX(50%);bottom:10%;}
  .svc-title{font-size:48px;}
  .svc-tagline{font-size:22px;}
  .svc-detail{grid-template-columns:1fr;gap:54px;padding-top:70px;padding-bottom:76px;}
  .svc-col__second{margin-top:44px;}
  .bg-word--svc{font-size:260px;}
}
@media (max-width: 640px){
  .svc-hero{padding:118px var(--gutter) 0;}
  .svc-hero__photo img{max-width:300px;}
  .svc-lockup{padding:9px 18px 12px;bottom:8%;}
  .svc-lockup__name{font-size:28px;}
  .svc-lockup__sur{font-size:12px;}
  .svc-hero__foot{gap:22px;font-size:9.5px;margin-top:34px;}
  .svc-title{font-size:34px;}
  .svc-tagline{font-size:19px;margin-top:18px;}
  .svc-intro{font-size:15.5px;}
  .svc-col h2{font-size:25px;}
  .svc-price{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px;}
  .svc-price strong{font-size:28px;}
  .svc-pager{padding:34px var(--gutter) 54px;gap:20px;}
  .svc-pager__item{max-width:100%;}
  .svc-pager__item--next{align-items:flex-start;text-align:left;margin-left:0;}
  .svc-pager__item strong{font-size:19px;}
  .bg-word--svc{font-size:170px;}
}

/* ===== Instagram: responsive ===== */
@media (max-width: 1024px){
  .ig__layout{grid-template-columns:1fr;gap:40px;}
  .ig__profile{position:static;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center;}
  .ig__avatar{grid-row:span 3;}
  .ig__handle{margin-top:0;}
  .ig__stats,.ig__follow{grid-column:1 / -1;}
  .ig__grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 640px){
  .ig{padding-bottom:70px;}
  .ig__grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ig__avatar{width:72px;height:72px;}
  .ig__handle{font-size:19px;}
  .ig__grid[data-count="1"]{grid-template-columns:minmax(0,300px);}
}
@media (max-width: 640px){
  .cta__video{object-position:center 30%;}
}

/* ===== Conoce más: responsive ===== */
@media (max-width: 1024px){
  .press__headline{font-size:40px;margin-bottom:44px;}
  .press__grid{grid-template-columns:1fr;gap:40px;}
  .award{max-width:520px;}
}
@media (max-width: 640px){
  .press{padding-bottom:70px;}
  .press__headline{font-size:30px;margin:20px 0 32px;}
  .yt__play{width:64px;height:64px;margin:-32px 0 0 -32px;}
  .press__meta h3{font-size:23px;}
  .award__photo{height:240px;}
  .award__body{padding:0 22px 28px;}
  .award__title{font-size:28px;}
  .hero__award{font-size:10px;padding:7px 12px 7px 10px;gap:8px;max-width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .hero__award-dot{animation:none;}
}

/* ===== MOBILE MENU ===== */
.burger{display:none;}
.mnav{display:none;}

@media (max-width: 640px){
  /* the CTA moves into the panel; the pill keeps logo, language, theme, menu */
  .topnav__right > .btn--pill-outline{display:none;}

  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:40px;height:40px;padding:0 10px;
    border-radius:50%;
    border:1px solid var(--border-dark);
    background:transparent;cursor:pointer;
  }
  .burger span{
    display:block;height:1.5px;border-radius:2px;
    background:var(--text-light);
    transition:transform .35s cubic-bezier(.7,0,.2,1), width .35s ease;
  }
  .burger span:last-child{width:62%;margin-left:auto;}
  .mnav-open .burger span:first-child{transform:translateY(3.75px) rotate(45deg);}
  .mnav-open .burger span:last-child{width:100%;transform:translateY(-3.75px) rotate(-45deg);}

  .mnav{
    display:block;
    position:fixed;inset:0;z-index:99;
    overflow-y:auto;overscroll-behavior:contain;
    padding:100px 24px 40px;
    background:
      radial-gradient(90% 50% at 0% 0%, rgba(201,162,90,0.14), transparent 60%),
      var(--surface-1);
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .35s ease, transform .35s ease;
  }
  .mnav[hidden]{display:none;}
  .mnav-open .mnav{opacity:1;transform:none;}
  .mnav-open body{overflow:hidden;}

  .mnav__inner{display:flex;flex-direction:column;min-height:100%;}
  .mnav__main{list-style:none;}
  .mnav__main > li{
    border-bottom:1px solid var(--border-dark);
    opacity:0;transform:translateY(10px);
    transition:opacity .45s ease, transform .45s ease;
  }
  .mnav-open .mnav__main > li{opacity:1;transform:none;}
  .mnav-open .mnav__main > li:nth-child(2){transition-delay:.05s;}
  .mnav-open .mnav__main > li:nth-child(3){transition-delay:.10s;}
  .mnav-open .mnav__main > li:nth-child(4){transition-delay:.15s;}
  .mnav-open .mnav__main > li:nth-child(5){transition-delay:.20s;}
  .mnav__main > li > a{
    display:block;padding:18px 0;
    font-weight:600;font-size:30px;letter-spacing:-0.035em;line-height:1.1;
    color:var(--text-light);
  }
  .mnav__main > li > a:active{color:var(--accent);}
  .mnav__svc{list-style:none;padding:0 0 16px;margin-top:-6px;}
  .mnav__svc a{
    display:flex;gap:12px;align-items:baseline;
    padding:9px 0;
    font-size:15px;line-height:1.35;color:var(--text-muted-dark);
  }
  .mnav__n{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--accent);min-width:20px;}
  .mnav__foot{
    margin-top:auto;padding-top:36px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .mnav__ig{font-size:13px;color:var(--text-muted-dark);}
}

/* ===== LOGO =====
   The official wordmark, used as a mask so one file takes whatever colour
   the context needs: cream on dark, near-black on light, gold as accent. */
.logo-mark{
  display:inline-block;
  height:1em;
  aspect-ratio:888 / 198;
  background:currentColor;
  -webkit-mask:url("../assets/img/logo-enma.png") center / contain no-repeat;
          mask:url("../assets/img/logo-enma.png") center / contain no-repeat;
  vertical-align:middle;
}
.logo-mark--gold{background:var(--accent);}
.topnav__logo{display:inline-flex;align-items:center;font-size:19px;line-height:1;}
.topnav__logo .logo-mark{height:19px;}
.footer__logo{display:inline-flex;color:var(--text-light);}
.footer__logo .logo-mark{height:24px;}
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===== WHERE AM I: current section in the nav ===== */
.topnav__links > a,.navdrop{position:relative;}
.topnav__links > a.is-current,
.navdrop.is-current .navdrop__btn{color:var(--text-light);}
.topnav__links > a::after,
.navdrop::after{
  content:'';
  position:absolute;left:50%;bottom:-10px;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--accent);
  opacity:0;transform:scale(.4);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.navdrop::after{margin-left:-6px;} /* centre under the label, not the caret */
.topnav__links > a.is-current::after,
.navdrop.is-current::after{opacity:1;transform:none;}
.mnav__main a.is-current{color:var(--accent);}

/* ===== READING PROGRESS =====
   --progress (0..1) is written on every scroll frame in main.js. */
.progress{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:101;
  pointer-events:none;
}
.progress span{
  display:block;height:100%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin:0 50%;
  transform:scaleX(var(--progress, 0));
  box-shadow:0 0 10px rgba(201,162,90,0.55);
}
.back-to-top__ring{
  position:absolute;inset:-1px;
  width:calc(100% + 2px);height:calc(100% + 2px);
  transform:rotate(-90deg);
  pointer-events:none;
}
.back-to-top__ring circle{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:138.23;
  stroke-dashoffset:calc(138.23 * (1 - var(--progress, 0)));
}

/* ===== CASE STUDY PAGES (/proyectos) =====
   Name, cover, the client's own quote, then what we did beside the story
   in the client's words, and the rest of the work. */
.case-hero{
  position:relative;overflow:hidden;
  padding:168px var(--gutter) 56px;
  background:linear-gradient(180deg, var(--surface-0) 0%, var(--surface-0b) 100%);
}
.case-title{font-size:96px;line-height:1;position:relative;}
.case-tagline{
  margin-top:18px;
  font-family:var(--serif);font-style:italic;font-size:26px;
  color:var(--text-muted-dark);
}
.case-client{display:flex;align-items:center;gap:16px;margin-top:40px;}
.case-client img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--accent);padding:2px;}
.case-client strong{display:block;font-weight:600;font-size:15px;margin:3px 0 2px;}
.case-client span:last-child{font-size:12.5px;color:var(--text-muted-dark);}

.case-cover{
  padding:0 var(--gutter);
  background:linear-gradient(180deg, var(--surface-0b) 50%, var(--surface-1) 50%);
}
.case-cover img{
  width:100%;height:auto;aspect-ratio:1252 / 508;object-fit:cover;
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}

.case-quote{
  background:var(--surface-1);
  padding-top:110px;padding-bottom:40px;
  text-align:center;
}
.case-quote__mark{
  display:block;
  font-family:var(--serif);font-size:140px;line-height:.6;height:60px;
  color:var(--accent);opacity:.5;
}
.case-quote blockquote{max-width:900px;margin:0 auto;}
.case-quote p{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:42px;line-height:1.25;
}
.case-quote footer{margin-top:22px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);}

.case-body{
  background:var(--surface-1);
  display:grid;grid-template-columns:1fr 1.6fr;gap:80px;
  padding-top:80px;padding-bottom:90px;
}
.case-did{align-self:start;position:sticky;top:120px;}
.case-body h2{font-family:var(--serif);font-weight:500;font-size:28px;margin-bottom:24px;}
.case-story p{font-size:17px;line-height:1.85;color:var(--text-muted-dark);max-width:680px;}
.case-story p + p{margin-top:20px;}

.case-gallery{
  background:var(--surface-1);
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;
  padding-bottom:100px;
}
.case-gallery img{width:100%;height:auto;border-radius:16px;}

.case-cta{
  background:var(--surface-2);
  text-align:center;
  padding-top:100px;padding-bottom:100px;
}
.case-cta h2{font-size:48px;line-height:1.1;font-weight:600;letter-spacing:-0.035em;margin-bottom:34px;}
.case-cta h2 em{font-family:var(--serif);font-weight:500;letter-spacing:0;font-size:1.12em;}

@media (max-width: 1024px){
  .case-title{font-size:64px;}
  .case-quote p{font-size:32px;}
  .case-body{grid-template-columns:1fr;gap:48px;}
  .case-did{position:static;}
}
@media (max-width: 640px){
  .case-hero{padding:124px var(--gutter) 40px;}
  .case-title{font-size:44px;}
  .case-tagline{font-size:20px;}
  .case-cover img{border-radius:12px;}
  .case-quote{padding-top:70px;}
  .case-quote__mark{font-size:100px;height:44px;}
  .case-quote p{font-size:24px;}
  .case-body{padding-top:56px;padding-bottom:60px;}
  .case-story p{font-size:15.5px;}
  .case-gallery{grid-template-columns:1fr;gap:16px;padding-bottom:70px;}
  .case-cta{padding-top:70px;padding-bottom:70px;}
  .case-cta h2{font-size:30px;}
}