/* ─── Case study (project landing) ─── */

:root { --script:'Sloop','Allura',cursive; --hand:'Allura','Sloop',cursive; --paper-line:rgba(30,25,22,0.08); }

.nav-logo .script { transform:translateY(0); margin-right:0; font-size:21px; line-height:1; }
.nav-logo { gap:1px; }
.nav-logo-img { padding:0; display:inline-flex; align-items:center; }
.logo-svg { height:42px; width:auto; display:block; transition:opacity .2s; }
.nav .logo-svg { height:38px; }
.footer .logo-svg { height:54px; }
.logo-svg-light { filter:invert(1) brightness(1.05); }

.nav { transition: background .4s ease, border-bottom-color .4s ease; }
.nav .logo-svg, .nav-links a, .lang-switch, .lang-switch .is-on, .nav-burger span {
  transition: color .4s ease, filter .4s ease, background .4s ease, border-color .4s ease;
}
.nav.is-on-dark {
  background: rgba(15,13,11,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(245,240,235,0.08);
}
.nav.is-on-dark .logo-svg { filter: invert(1) brightness(1.05); }
.nav.is-on-dark .nav-links a { color: rgba(240,234,226,0.62); }
.nav.is-on-dark .nav-links a:hover,
.nav.is-on-dark .nav-links a.is-active { color: var(--b-ink); }
.nav.is-on-dark .nav-burger span { background: var(--b-ink); }
.nav.is-on-dark .lang-switch { color: rgba(245,240,235,0.5); }
.nav.is-on-dark .lang-switch button { color: inherit; }
.nav.is-on-dark .lang-switch .is-on { color: var(--b-ink); border-bottom-color: var(--b-ink); }

.skip-link { position:absolute; top:-100px; left:8px; background:var(--ink); color:var(--bg); padding:10px 16px; z-index:200; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; }
.skip-link:focus { top:8px; }

/* ─── HERO ─── */
.cs-hero {
  position:relative;
  background:var(--dark); color:var(--b-ink);
  min-height:100vh;
  padding:140px 48px 80px;
  display:grid; grid-template-rows: auto 1fr auto auto;
  overflow:hidden;
  border-bottom:1px solid rgba(245,240,235,0.05);
}
.cs-hero-art {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 30%;
  filter:grayscale(0.15) contrast(1.02) brightness(0.7);
}
.cs-hero-art::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,11,0.55) 0%, rgba(15,13,11,0.3) 30%, rgba(15,13,11,0.9) 100%);
}
.cs-hero-inner {
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; width:100%;
  display:contents;
}
.cs-crumbs {
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; width:100%;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:rgba(240,234,226,0.55);
  display:flex; gap:14px; align-items:center;
}
.cs-crumbs a { color:inherit; text-decoration:none; transition:color .2s; }
.cs-crumbs a:hover { color:var(--gold); }
.cs-crumbs .sep { opacity:0.4; }
.cs-hero > div.cs-title-wrap, .cs-hero > .cs-meta { position:relative; z-index:2; max-width:1280px; margin:0 auto; width:100%; }

.cs-hero .cs-hero-inner > * { position:relative; z-index:2; }
.cs-hero .cs-hero-inner > div:nth-of-type(1) { /* title block */
  max-width:1280px; margin:auto auto 0; width:100%;
  align-self:end;
  display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap:80px; align-items:end;
  padding-top:48px;
}
.cs-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:14px; margin-bottom:32px;
}
.cs-eyebrow::before { content:''; width:48px; height:1px; background:currentColor; }
.cs-title {
  font-size:clamp(56px, 8.5vw, 132px);
  line-height:0.92; font-weight:300;
  color:var(--b-ink); letter-spacing:-0.015em;
  margin-bottom:24px;
  text-wrap:balance;
}
.cs-title .script {
  font-family:var(--script); font-weight:400; color:var(--gold);
  font-size:1.05em; line-height:0.85; display:inline-block;
}
.cs-title .amp {
  font-family:var(--script); color:var(--gold); font-size:1.2em; font-weight:400; padding:0 0.05em;
}
.cs-sub {
  font-size:17px; font-weight:300; line-height:1.65;
  color:rgba(240,234,226,0.78);
  max-width:48ch;
}

.cs-meta {
  align-self:end;
  display:flex; flex-direction:column; gap:0;
  padding-bottom:8px;
}
.cs-meta-row {
  display:grid; grid-template-columns: 100px 1fr;
  gap:24px; padding:12px 0;
  border-top:1px solid rgba(245,240,235,0.1);
  align-items:baseline;
}
.cs-meta-row:last-child { border-bottom:1px solid rgba(245,240,235,0.1); }
.cs-meta-k {
  font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(240,234,226,0.55);
}
.cs-meta-v {
  font-size:14px; font-weight:300; line-height:1.4; color:var(--b-ink);
}
.cs-meta-v b { font-weight:500; }
.cs-meta-v .pill {
  display:inline-block; padding:3px 8px; font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
  background:var(--gold); color:var(--dark); font-weight:700; margin-right:8px;
}

.cs-scroll {
  position:relative; z-index:2;
  max-width:1280px; margin:48px auto 0; width:100%;
  display:flex; align-items:center; gap:14px;
  padding-top:20px; border-top:1px solid rgba(245,240,235,0.1);
  font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(240,234,226,0.55);
  flex-wrap:wrap;
}
.cs-scroll .l { flex:1; height:1px; background:rgba(245,240,235,0.15); min-width:40px; }
.cs-scroll .num { font-size:11px; color:var(--gold); font-weight:700; }

/* ─── STORY ─── */
.cs-story {
  background:var(--bg); color:var(--ink);
  padding:140px 48px 120px;
}
.cs-story-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns: minmax(0,0.32fr) minmax(0,0.68fr);
  gap:80px; align-items:start;
}
.cs-story-side {
  position:sticky; top:120px;
  display:flex; flex-direction:column; gap:20px;
}
.cs-story-num {
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink3);
}
.cs-story-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--accent);
}
.cs-story-script {
  font-family:var(--script); color:var(--accent);
  font-size:56px; line-height:0.9; font-weight:400;
}
.cs-story-script br { display:block; content:''; margin-top:-4px; }

.cs-story-body p {
  font-size:17px; line-height:1.8; font-weight:300;
  color:var(--ink2); margin-bottom:24px; max-width:62ch;
  text-wrap:pretty;
}
.cs-story-body .lead {
  font-size:clamp(28px, 2.6vw, 36px); font-weight:300; line-height:1.25;
  color:var(--ink); letter-spacing:-0.005em;
  margin-bottom:40px; text-wrap:balance; max-width:none;
}
.cs-story-body .lead em.script { font-family:var(--script); color:var(--accent); font-style:normal; font-size:1.25em; line-height:0.85; }

/* ─── GALLERY ─── */
.cs-gallery {
  background:var(--bg); padding:0 0 120px;
}
.cs-gallery .row {
  max-width:1280px; margin:0 auto;
  padding:0 48px;
  display:grid; gap:32px; margin-bottom:32px;
}
.cs-gallery .row.r-12 { grid-template-columns:1fr 1fr; }
.cs-gallery .row.r-21 { grid-template-columns:2fr 1fr; }
.cs-gallery .row.r-1  { grid-template-columns:1fr; }
.cs-gallery .row.r-3  { grid-template-columns:repeat(3,1fr); }

.cs-gallery figure { margin:0; display:flex; flex-direction:column; gap:0; }

.cs-img {
  position:relative; overflow:hidden;
  background:var(--bg3);
}
.cs-img img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .8s ease; }
figure:hover .cs-img img { transform:scale(1.02); }
.cs-img.is-portrait  { aspect-ratio:4/5; }
.cs-img.is-square    { aspect-ratio:1/1; }
.cs-img.is-landscape { aspect-ratio:3/2; }
.cs-img.is-wide      { aspect-ratio:21/9; }
.cs-img.is-tall      { aspect-ratio:3/4; }

.cs-img-cap {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  color:var(--ink3); margin-top:10px; line-height:1.5;
}

/* Pull quote inside gallery */
.cs-pull {
  max-width:1280px; margin:48px auto;
  padding:64px 48px;
  display:grid; grid-template-columns: 80px 1fr 80px;
  gap:32px; align-items:center;
}
.cs-pull::before, .cs-pull::after {
  content:''; height:1px; background:rgba(30,25,22,0.18);
}
.cs-pull p {
  font-family:var(--script); font-size:clamp(34px, 4.2vw, 60px); line-height:1.08;
  color:var(--accent); font-weight:400; text-align:center; max-width:28ch; margin:0 auto;
}

/* ─── CREDITS ─── */
.cs-credits {
  background:var(--bg2); color:var(--ink);
  padding:120px 48px;
}
.cs-credits-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns: minmax(0,0.32fr) minmax(0,0.68fr);
  gap:80px; align-items:start;
}
.cs-credits h3 {
  font-size:clamp(30px, 3.4vw, 44px); font-weight:300; line-height:1.1;
  letter-spacing:-0.005em;
}
.cs-credits h3 .script { font-family:var(--script); color:var(--accent); font-size:1.3em; line-height:0.85; }
.cs-credits-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0 56px;
}
.cs-credits-grid .cell {
  padding:18px 0;
  border-top:1px solid var(--paper-line);
  display:grid; grid-template-columns:130px 1fr;
  gap:16px; align-items:baseline;
}
.cs-credits-grid .cell .k {
  font-size:10px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink3);
}
.cs-credits-grid .cell .v {
  font-size:14px; line-height:1.5; color:var(--ink); font-weight:400;
}

/* ─── NEXT / PREV ─── */
.cs-nav {
  background:var(--bg); padding:0 48px;
  border-top:1px solid var(--paper-line);
}
.cs-nav-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:48px; align-items:center;
}
.cs-nav-link {
  display:flex; flex-direction:column; gap:6px;
  padding:36px 0;
  color:var(--ink); text-decoration:none;
  transition:color .25s, transform .25s;
}
.cs-nav-link.is-prev { text-align:left; }
.cs-nav-link.is-next { text-align:right; }
.cs-nav-link.is-disabled { opacity:0.3; pointer-events:none; }
.cs-nav-k {
  font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink3);
}
.cs-nav-v {
  font-size:24px; font-weight:300; letter-spacing:-0.005em;
  transition:color .25s;
}
.cs-nav-v .script { font-family:var(--script); color:var(--accent); font-size:1.3em; line-height:0.85; }
.cs-nav-link:hover .cs-nav-v { color:var(--accent); }
.cs-nav-link.is-prev:hover { transform:translateX(-4px); }
.cs-nav-link.is-next:hover { transform:translateX(4px); }
.cs-nav-center {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}
.cs-nav-center a {
  font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink2); text-decoration:none; transition:color .2s;
}
.cs-nav-center a:hover { color:var(--accent); }

/* ─── CTA ─── */
.cs-cta {
  padding:140px 48px;
  background:var(--ink); color:var(--b-ink); text-align:center;
}
.cs-cta-script {
  font-family:var(--script); color:var(--gold); font-size:clamp(48px, 5vw, 72px); line-height:0.85; margin-bottom:24px;
}
.cs-cta-h {
  font-size:clamp(36px,4.6vw,60px); font-weight:300; line-height:1.1;
  letter-spacing:-0.01em; margin-bottom:32px; text-wrap:balance;
  max-width:26ch; margin-left:auto; margin-right:auto;
}
.cs-cta-h .script { font-family:var(--script); color:var(--gold); font-size:1.18em; line-height:0.85; }
.cs-cta-buttons {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.cs-cta .btn-primary { background:var(--gold); color:var(--dark); }
.cs-cta .btn-primary:hover { background:var(--b-ink); }
.cs-cta .btn-secondary { color:var(--b-ink); border-color:rgba(240,234,226,0.3); background:transparent; }
.cs-cta .btn-secondary:hover { background:var(--b-ink); color:var(--ink); border-color:var(--b-ink); }

/* i18n */
[data-lang="en"] { display:none !important; }
html[lang="en"] [data-lang="es"] { display:none !important; }
html[lang="en"] [data-lang="en"] { display:revert !important; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .cs-hero { padding:120px 32px 60px; min-height:auto; }
  .cs-hero .cs-hero-inner > div:nth-of-type(1) { grid-template-columns:1fr; gap:40px; padding-top:32px; }
  .cs-story-inner, .cs-credits-inner { grid-template-columns:1fr; gap:48px; }
  .cs-story-side { position:static; flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; }
  .cs-story-script { font-size:44px; }
  .cs-credits-grid { grid-template-columns:1fr; }
  .cs-nav-inner { grid-template-columns:1fr; gap:0; text-align:center; padding:16px 0; }
  .cs-nav-link.is-prev, .cs-nav-link.is-next { text-align:center; padding:24px 0; border-bottom:1px solid var(--paper-line); }
  .cs-nav-center { padding:20px 0; }
  .cs-pull { grid-template-columns:1fr; padding:48px 32px; }
  .cs-pull::before, .cs-pull::after { display:none; }
}
@media (max-width: 700px) {
  .cs-hero { padding:100px 20px 48px; }
  .cs-eyebrow { font-size:10px; letter-spacing:0.22em; }
  .cs-title { font-size:clamp(44px, 12vw, 72px); margin-bottom:18px; }
  .cs-sub { font-size:15px; }
  .cs-meta-row { grid-template-columns:90px 1fr; padding:10px 0; }
  .cs-meta-k { font-size:9px; letter-spacing:0.22em; }
  .cs-meta-v { font-size:13px; }
  .cs-scroll { font-size:9px; gap:10px; }
  .cs-scroll .l { display:none; }
  .cs-story, .cs-credits, .cs-cta { padding:72px 20px; }
  .cs-story-body .lead { font-size:24px; }
  .cs-story-body p { font-size:15px; }
  .cs-gallery { padding-bottom:72px; }
  .cs-gallery .row { padding:0 20px; gap:14px; margin-bottom:14px; }
  .cs-gallery .row.r-12, .cs-gallery .row.r-21, .cs-gallery .row.r-3 { grid-template-columns:1fr; }
  .cs-pull { padding:40px 20px; margin:24px auto; }
  .cs-pull p { font-size:32px; }
  .cs-credits-grid .cell { grid-template-columns:110px 1fr; gap:12px; padding:14px 0; }
  .cs-nav { padding:0 20px; }
}