/* ────────────────────────────────────────────────────────────
     UPA ESTUDIO — Editorial Maximalism
     Newsprint cream + rich ink + electric vermillion
     ──────────────────────────────────────────────────────────── */

  :root {
    --paper:        #EEEAE1;
    --paper-2:      #E5DFD0;
    --paper-3:      #DCD4C0;
    --ink:          #0F0F0E;
    --ink-2:        #2A2826;
    --mute:         #8B8479;
    --rule:         #BFB6A4;
    --vermillion:   #e9a34d;
    --vermillion-2: #C07A10;
    --cobalt:       #1A2BFF;
    --cream-glow:   #F7F2E6;

    --display: "Fraunces", ui-serif, Georgia, serif;
    --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --max:    1480px;
    --pad-x:  clamp(20px, 4vw, 72px);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    overflow-x: hidden;
    font-variation-settings: "opsz" 18, "SOFT" 30;
  }

  /* Subtle grain overlay across whole page */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .065;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  }

  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  ::selection { background: var(--vermillion); color: var(--paper); }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

  .mono {
    font-family: var(--mono);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 11px;
  }

  .rule { height: 1px; background: var(--ink); opacity: .14; }
  .rule-thick { height: 1px; background: var(--ink); opacity: .9; }

  /* ─────────── MARQUEE TOP BAR ─────────── */
  .marquee {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid #000;
    overflow: hidden;
    padding: 9px 0;
  }
  .marquee-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scroll 38s linear infinite;
    width: max-content;
  }
  .marquee-item {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .marquee-item .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vermillion);
    box-shadow: 0 0 12px var(--vermillion);
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ─────────── NAV ─────────── */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(238, 234, 225, .82);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--pad-x);
    max-width: var(--max);
    margin: 0 auto;
  }
  .logo {
    display: flex; align-items: baseline; gap: 10px;
  }
  .logo-svg {
    height: 82px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }
  .logo-est {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    position: relative;
    padding: 4px 0;
    transition: color .25s ease;
  }
  .nav-links a:hover { color: var(--vermillion); }
  .nav-links a::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: var(--vermillion);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.7,0,.2,1);
  }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 20px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background .25s ease, transform .25s ease;
  }
  .nav-cta:hover { background: var(--vermillion); transform: translateY(-1px); }
  .nav-cta .arrow {
    display: inline-block;
    transition: transform .35s cubic-bezier(.7,0,.2,1);
  }
  .nav-cta:hover .arrow { transform: translate(3px, -3px); }

  /* ─────────── HERO ─────────── */
  .hero {
    padding: clamp(48px, 8vw, 130px) 0 0;
    position: relative;
    background-image: url('../images/backgrounds/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  /* Paper-tinted overlay so the headline stays readable over the photo */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(238, 234, 225, .35) 0%,
      rgba(238, 234, 225, .20) 45%,
      rgba(238, 234, 225, .30) 100%
    );
    pointer-events: none;
    z-index: 0;
  }
  .hero-grid,
  .hero-visual,
  .hero-glyph { position: relative; z-index: 1; }
  .hero-visual {
    margin-top: clamp(40px, 5vw, 72px);
    width: 100%;
    height: clamp(280px, 42vw, 620px);
    overflow: hidden;
    position: relative;
  }
  .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease, transform 10s ease;
  }
  .hero-visual img.is-active { opacity: 1; }
  .hero:hover .hero-visual img.is-active { transform: scale(1.04); }
  .hero-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 55%,
      var(--paper) 100%
    );
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    position: relative;
  }
  .hero-meta {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 24px;
    padding-top: 18px;
  }
  .hero-meta .col span:first-child {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .hero-meta .col span:last-child {
    font-family: var(--display);
    font-size: 14px;
    color: var(--ink-2);
    font-style: italic;
    font-variation-settings: "opsz" 144;
  }
  .hero-headline {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(58px, 13.4vw, 220px);
    line-height: .86;
    letter-spacing: -.045em;
    font-variation-settings: "opsz" 144, "SOFT" 0;
  }
  .hero-headline .it {
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--ink-2);
  }
  .hero-headline .marker {
    position: relative;
    display: inline-block;
    color: var(--vermillion);
  }
  .hero-headline .marker::after {
    content: "";
    position: absolute;
    left: -.04em; right: -.04em;
    bottom: .12em;
    height: .08em;
    background: var(--vermillion);
    opacity: .25;
  }

  .hero-bottom {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: end;
    margin-top: clamp(28px, 5vw, 56px);
  }
  .hero-sub {
    font-family: var(--display);
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.42;
    max-width: 56ch;
    color: var(--ink-2);
    font-weight: 400;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s cubic-bezier(.7,0,.2,1);
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--vermillion);
    color: var(--paper);
    box-shadow: 0 1px 0 var(--vermillion-2), 0 14px 30px -10px rgba(160,100,10,.55);
  }
  .btn-primary:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(15,15,14,.45);
  }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: rgba(15,15,14,.45);
  }
  .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn .arrow { display: inline-block; transition: transform .35s cubic-bezier(.7,0,.2,1); }
  .btn:hover .arrow { transform: translate(3px, -3px); }

  /* Floating star/asterisk in hero */
  .hero-glyph {
    position: absolute;
    right: var(--pad-x);
    top: clamp(60px, 6vw, 110px);
    width: clamp(70px, 7vw, 120px);
    height: auto;
    color: var(--vermillion);
    animation: spin 18s linear infinite;
  }
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

  /* ─────────── TRUST METRICS ─────────── */
  .trust {
    border-top: 1px solid rgba(15,15,14,.16);
    border-bottom: 1px solid rgba(15,15,14,.16);
    background: var(--paper-2);
  }
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .trust-cell {
    padding: 36px 28px;
    border-right: 1px solid rgba(15,15,14,.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .trust-cell:last-child { border-right: none; }
  .trust-num {
    font-family: var(--display);
    font-size: clamp(40px, 4.8vw, 76px);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 50;
  }
  .trust-num .accent { color: var(--vermillion); font-style: italic; }
  .trust-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  /* ─────────── SECTION HEADERS ─────────── */
  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
    padding: clamp(60px, 9vw, 130px) 0 clamp(28px, 4vw, 56px);
    border-bottom: 1px solid rgba(15,15,14,.16);
  }
  .section-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vermillion);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .section-eyebrow::before {
    content: "";
    width: 22px; height: 1px; background: var(--vermillion);
  }
  .section-title {
    font-family: var(--display);
    font-size: clamp(36px, 6vw, 92px);
    line-height: .92;
    letter-spacing: -.035em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 20;
    max-width: 16ch;
  }
  .section-title .it {
    font-style: italic;
    font-weight: 300;
    color: var(--ink-2);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .section-aside {
    max-width: 36ch;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.55;
    text-align: right;
  }

  /* ─────────── MANIFESTO ─────────── */
  .manifesto {
    padding: clamp(60px, 9vw, 130px) 0;
    border-bottom: 1px solid rgba(15,15,14,.16);
  }
  .manifesto-text {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 48px);
    line-height: 1.18;
    letter-spacing: -.022em;
    max-width: 26ch;
    margin: 0 auto;
    text-align: center;
    font-variation-settings: "opsz" 144, "SOFT" 40;
  }
  .manifesto-text .strike {
    position: relative;
    color: var(--mute);
  }
  .manifesto-text .strike::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 52%;
    height: 2px;
    background: var(--vermillion);
    transform: rotate(-2.5deg);
  }
  .manifesto-text .underline {
    background-image: linear-gradient(var(--vermillion), var(--vermillion));
    background-repeat: no-repeat;
    background-size: 100% .12em;
    background-position: 0 100%;
    padding-bottom: .02em;
    color: var(--ink);
  }
  .manifesto-text em {
    font-style: italic;
    font-weight: 300;
    color: var(--ink-2);
  }

  /* ─────────── CASE STUDIES ─────────── */
  .work {
    padding: 0 0 clamp(60px, 9vw, 130px);
  }
  .case {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid rgba(15,15,14,.16);
    position: relative;
    cursor: pointer;
    transition: background .4s ease, padding-left .4s ease;
  }
  .case:hover {
    background: var(--paper-2);
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .case-num {
    font-family: var(--display);
    font-size: clamp(20px, 1.6vw, 22px);
    font-style: italic;
    color: var(--mute);
    letter-spacing: -.02em;
    align-self: start;
    padding-top: 6px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .case-body { display: flex; flex-direction: column; gap: 16px; }
  .case-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .case-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(15,15,14,.2);
    border-radius: 999px;
    color: var(--ink-2);
  }
  .case-title {
    font-family: var(--display);
    font-size: clamp(38px, 5.2vw, 84px);
    line-height: .94;
    letter-spacing: -.035em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
  }
  .case-title .sector {
    display: block;
    font-size: .42em;
    font-style: italic;
    color: var(--mute);
    margin-top: 6px;
    font-weight: 300;
    letter-spacing: -.02em;
  }
  .case-outcome {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 38ch;
  }
  .case-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(15,15,14,.22);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mute);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .case-meta .arrow {
    display: inline-block;
    transition: transform .35s cubic-bezier(.7,0,.2,1);
    color: var(--vermillion);
  }
  .case:hover .case-meta .arrow { transform: translate(8px, -8px); }
  .case-meta-link {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vermillion);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .3s ease;
  }
  .case-meta-link:hover { gap: 10px; }
  .case-meta-link .arrow { color: var(--vermillion); transition: transform .35s cubic-bezier(.7,0,.2,1); }
  .case-meta-link:hover .arrow { transform: translate(4px, -4px); }

  .case-art {
    align-self: stretch;
    min-height: 280px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .case:hover .case-art { transform: scale(1.02); }

  /* Photo cover art */
  .case-art .art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .case:hover .case-art .art-img { transform: scale(1.06); }

  /* Per-case bespoke artwork — typographic / abstract */
  .art-solera {
    background: radial-gradient(120% 80% at 20% 0%, #7B2E0F 0%, #3B1404 60%, #160600 100%);
    color: #F4D4A0;
  }
  .art-verde {
    background: linear-gradient(160deg, #C8E7B0 0%, #5FA85A 60%, #1F4D2A 100%);
    color: #0F2A14;
  }
  .art-atelier {
    background: linear-gradient(180deg, #E8E2D0 0%, #C7B999 100%);
    color: #2A2620;
  }
  .art-frecuencia {
    background:
      radial-gradient(60% 60% at 70% 30%, var(--vermillion) 0%, transparent 60%),
      linear-gradient(180deg, #0F0F0E 0%, #1A1A18 100%);
    color: var(--paper);
  }

  .case-art .art-label {
    position: absolute;
    top: 16px; left: 18px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
  }
  .case-art .art-bigtype {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display);
    font-size: clamp(80px, 12vw, 200px);
    font-style: italic;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -.06em;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    opacity: .92;
  }
  .case-art .art-glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: clamp(160px, 22vw, 360px);
    line-height: 1;
    letter-spacing: -.08em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 0;
  }

  .case-art .art-glyph--italic {
    font-style: italic;
  }

  .case-art .art-glyph--light {
    font-weight: 300;
  }

  .case-art .art-bigtype--normal {
    font-style: normal;
    font-weight: 500;
  }

  /* ─────────── WORK FILTERS ─────────── */
  .work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 32px);
    border-bottom: 1px solid rgba(15,15,14,.16);
  }
  .filter-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(15,15,14,.25);
    color: var(--ink-2);
    cursor: pointer;
    background: transparent;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
  }
  .filter-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
  }
  .filter-btn.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .case.is-hidden { display: none; }

  /* ─────────── FEATURED CASE ─────────── */
  .case--featured {
    display: block;
    padding: clamp(48px, 7vw, 100px) 0;
    border-bottom: 1px solid rgba(15,15,14,.16);
    cursor: pointer;
    transition: background .4s ease;
  }
  .case--featured:hover { background: var(--paper-2); }
  .case-featured-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  .case-featured-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .case-featured-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
  }
  .case-title--featured {
    font-size: clamp(48px, 6.8vw, 110px) !important;
  }
  .case-art--featured {
    min-height: 460px !important;
  }

  /* ─────────── CASE METRICS ─────────── */
  .case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid rgba(15,15,14,.12);
    border-bottom: 1px solid rgba(15,15,14,.12);
  }
  .metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .metric-val {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 0;
  }
  .metric-unit {
    font-style: italic;
    color: var(--vermillion);
    font-size: .7em;
  }
  .metric-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
  }

  /* ─────────── NEW CASE ART PALETTES ─────────── */
  .art-kaia {
    background: linear-gradient(145deg, #F0E8DA 0%, #D4B896 55%, #9E6C40 100%);
    color: #2A1A0A;
  }
  .art-pausa {
    background: linear-gradient(160deg, #26203C 0%, #181228 45%, #0C0918 100%);
    color: #C0B8DC;
  }
  .art-owo {
    background: linear-gradient(135deg, #8258A4 0%, #5A3A7A 40%, #1A1A1A 100%);
    color: #F1592E;
  }
  .art-cultura {
    background: #111410;
    color: #E8E0CC;
  }
  .art-camino {
    background: #231F20;
    color: #CDB464;
  }

  /* ─────────── WORK FOOTER ─────────── */
  .work-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(36px, 5vw, 64px) 0;
    flex-wrap: wrap;
  }
  .work-footer-note {
    font-family: var(--display);
    font-size: 17px;
    color: var(--mute);
    font-style: italic;
    max-width: 48ch;
    font-variation-settings: "opsz" 144, "SOFT" 60;
  }
  .work-footer-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  /* ─────────── LOGOS / FEATURED IN ─────────── */
  .featured {
    padding: clamp(40px, 5vw, 64px) 0;
    border-bottom: 1px solid rgba(15,15,14,.16);
    background: var(--paper-2);
    overflow: hidden;
  }
  .featured-head {
    text-align: center;
    margin-bottom: clamp(28px, 3.5vw, 48px);
  }
  .featured-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
  }
  /* Continuous logo carousel — 5 visible at a time */
  .logo-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
  .logo-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: scroll 95s linear infinite;
  }
  .featured:hover .logo-track { animation-play-state: paused; }
  .logo-item {
    flex: 0 0 auto;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
  }
  .logo-item img {
    width: 100px;
    max-width: 100px;
    height: 48px;
    object-fit: contain;
    opacity: .6;
    transition: opacity .3s ease, transform .3s ease;
  }
  .logo-item img:hover {
    opacity: 1;
    transform: scale(1.05);
  }
  @media (max-width: 560px) { .logo-item { width: 120px; padding: 0 14px; } }

  /* ─────────── SERVICES ─────────── */
  .services {
    padding: 0 0 clamp(60px, 9vw, 130px);
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid rgba(15,15,14,.16);
  }
  .service {
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px) clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid rgba(15,15,14,.16);
    border-right: 1px solid rgba(15,15,14,.16);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    transition: background .35s ease;
  }
  .service:nth-child(even) {
    padding-right: 0;
    padding-left: clamp(24px, 3vw, 40px);
    border-right: none;
  }
  .service:hover { background: var(--paper-2); }
  .service-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--vermillion);
    letter-spacing: .15em;
  }
  .service h3 {
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    margin-bottom: 14px;
  }
  .service p {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.55;
    max-width: 42ch;
  }
  .service-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .service-list span {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(15,15,14,.18);
    border-radius: 999px;
  }

  /* ─────────── PROCESS ─────────── */
  .process {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(80px, 11vw, 160px) 0;
    position: relative;
    overflow: hidden;
  }
  .process::before {
    content: "PROCESS · METHOD · CRAFT · ";
    position: absolute;
    top: 20px; left: 0;
    white-space: nowrap;
    font-family: var(--display);
    font-style: italic;
    font-size: 18vw;
    line-height: 1;
    color: rgba(255, 255, 255, .04);
    letter-spacing: -.05em;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .process .section-head { border-bottom-color: rgba(255,255,255,.16); }
  .process .section-aside { color: rgba(255,255,255,.7); }
  .process .section-title { color: var(--paper); }
  .process .section-title .it { color: rgba(255,255,255,.6); }
  .process-steps {
    margin-top: clamp(40px, 5vw, 80px);
    position: relative;
    z-index: 2;
  }
  .step {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr;
    gap: 24px;
    padding: clamp(28px, 4vw, 44px) 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
    align-items: baseline;
  }
  .step:last-child { border-bottom: none; }
  .step-num {
    font-family: var(--display);
    font-size: clamp(60px, 8vw, 130px);
    line-height: .85;
    font-style: italic;
    color: var(--vermillion);
    letter-spacing: -.04em;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .step h4 {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1;
    font-variation-settings: "opsz" 144, "SOFT" 20;
  }
  .step p {
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.55;
    max-width: 38ch;
  }
  .step-timing {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-align: right;
  }

  /* ─────────── PRICING ─────────── */
  .pricing {
    padding: 0 0 clamp(60px, 9vw, 130px);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .tier {
    background: var(--paper-2);
    border: 1px solid rgba(15,15,14,.16);
    border-radius: 6px;
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .tier:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -25px rgba(15,15,14,.25); }
  .tier-featured {
    background: var(--ink);
    color: var(--paper);
    transform: scale(1.01);
  }
  .tier-featured:hover { transform: translateY(-4px) scale(1.01); }
  .tier-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--vermillion);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
  }
  .tier-name {
    font-family: var(--display);
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 400;
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 80;
  }
  .tier-price {
    font-family: var(--display);
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 0;
  }
  .tier-price .from {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .2em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    font-weight: 400;
  }
  .tier-featured .tier-price .from { color: rgba(255,255,255,.55); }
  .tier-desc {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 32ch;
  }
  .tier-featured .tier-desc { color: rgba(255,255,255,.72); }
  .tier-includes {
    list-style: none;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tier-includes li {
    font-family: var(--display);
    font-size: 15px;
    line-height: 1.45;
    padding-left: 22px;
    position: relative;
  }
  .tier-includes li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--vermillion);
    font-family: var(--mono);
  }
  .tier-cta {
    margin-top: auto;
    padding-top: 12px;
  }
  .tier-cta .btn { width: 100%; justify-content: space-between; }
  .tier-featured .btn-ghost { color: var(--paper); border-color: rgba(255,255,255,.35); }
  .tier-featured .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

  .tier-timing {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--mute);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15,15,14,.16);
  }
  .tier-featured .tier-timing { color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.18); }

  /* ─────────── TESTIMONIALS ─────────── */
  .testimonials {
    padding: clamp(60px, 9vw, 130px) 0;
    border-top: 1px solid rgba(15,15,14,.16);
    border-bottom: 1px solid rgba(15,15,14,.16);
    background: var(--paper-2);
  }
  .quote-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
  }
  .quote {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .quote-mark {
    font-family: var(--display);
    font-size: 96px;
    line-height: .5;
    color: var(--vermillion);
    height: 24px;
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .quote-text {
    font-family: var(--display);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.32;
    letter-spacing: -.018em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
  }
  .quote-text em {
    font-style: italic;
    color: var(--vermillion);
    font-weight: 300;
  }
  .quote-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
  }
  .quote-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vermillion), var(--ink));
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper);
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .quote-who {
    font-family: var(--display);
    font-size: 15px;
    line-height: 1.3;
  }
  .quote-who strong { font-weight: 500; }
  .quote-who span {
    display: block;
    color: var(--mute);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* ─────────── FAQ ─────────── */
  .faq {
    padding: 0 0 clamp(60px, 9vw, 130px);
  }
  .faq-list {
    border-top: 1px solid rgba(15,15,14,.16);
  }
  .faq-item {
    border-bottom: 1px solid rgba(15,15,14,.16);
    cursor: pointer;
  }
  .faq-q {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 24px;
    padding: clamp(20px, 2.5vw, 32px) 0;
    align-items: baseline;
  }
  .faq-q .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mute);
    letter-spacing: .15em;
  }
  .faq-q h4 {
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -.02em;
    font-variation-settings: "opsz" 144, "SOFT" 20;
  }
  .faq-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(15,15,14,.3);
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease, transform .35s ease;
    flex-shrink: 0;
  }
  .faq-item[data-open="true"] .faq-toggle {
    background: var(--vermillion);
    color: var(--paper);
    border-color: var(--vermillion);
    transform: rotate(45deg);
  }
  .faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(.7,0,.2,1);
  }
  .faq-item[data-open="true"] .faq-a { max-height: 400px; }
  .faq-a-inner {
    padding: 0 0 28px 84px;
    max-width: 64ch;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
  }

  /* ─────────── FINAL CTA ─────────── */
  .final-cta {
    background: var(--vermillion);
    color: var(--paper);
    padding: clamp(80px, 12vw, 180px) 0 clamp(40px, 6vw, 80px);
    position: relative;
    overflow: hidden;
  }
  .final-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(70% 50% at 20% 100%, rgba(15,15,14,.25), transparent 70%),
      radial-gradient(50% 40% at 80% 0%, rgba(255,255,255,.15), transparent 60%);
    pointer-events: none;
  }
  .final-cta-content {
    position: relative;
    z-index: 2;
  }
  .final-headline {
    font-family: var(--display);
    font-size: clamp(60px, 14vw, 230px);
    line-height: .82;
    letter-spacing: -.05em;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 0;
  }
  .final-headline .it {
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,.78);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  .final-headline em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  .final-actions {
    margin-top: clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
  }
  .final-pitch {
    font-family: var(--display);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.45;
    max-width: 44ch;
    color: rgba(255,255,255,.92);
  }
  .final-buttons {
    display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap;
  }
  .btn-inverse {
    background: var(--paper);
    color: var(--ink);
  }
  .btn-inverse:hover { background: var(--ink); color: var(--paper); }
  .btn-outline-light {
    background: transparent;
    color: var(--paper);
    border-color: rgba(255,255,255,.4);
  }
  .btn-outline-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

  /* ─────────── FOOTER ─────────── */
  footer {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(48px, 6vw, 80px) 0 24px;
    position: relative;
    background-image: url('../images/backgrounds/hand-background.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(15,15,14,.88) 0%,
      rgba(15,15,14,.78) 50%,
      rgba(15,15,14,.72) 100%
    );
    pointer-events: none;
    z-index: 0;
  }
  footer > * {
    position: relative;
    z-index: 1;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .foot-brand {
    display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  }
  .foot-logo-svg {
    height: 44px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: .9;
  }
  .foot-tag {
    color: rgba(255,255,255,.6);
    max-width: 32ch;
    font-size: 15px;
  }
  .foot-col h5 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 18px;
  }
  .foot-col a {
    display: block;
    color: var(--paper);
    margin-bottom: 10px;
    font-size: 15px;
    transition: color .25s;
  }
  .foot-col a:hover { color: var(--vermillion); }
  .foot-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }

  /* ─────────── REVEAL ON SCROLL ─────────── */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* hero entrance */
  .anim-up {
    opacity: 0;
    transform: translateY(40px);
    animation: up 1.1s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .anim-up.delay-1 { animation-delay: .08s; }
  .anim-up.delay-2 { animation-delay: .18s; }
  .anim-up.delay-3 { animation-delay: .28s; }
  .anim-up.delay-4 { animation-delay: .38s; }
  .anim-up.delay-5 { animation-delay: .48s; }
  @keyframes up {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─────────── CUSTOM CURSOR (case hover) ─────────── */
  .cursor-dot {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--vermillion);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    mix-blend-mode: normal;
  }
  .cursor-dot.show { transform: translate(-50%, -50%) scale(1); }

  /* ─────────── RESPONSIVE ─────────── */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .hero-meta { grid-template-columns: 1fr 1fr; }
    .hero-bottom { grid-template-columns: 1fr; }
    .hero-actions { justify-content: flex-start; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-cell:nth-child(2) { border-right: none; }
    .trust-cell { border-bottom: 1px solid rgba(15,15,14,.12); }
    .trust-cell:nth-child(3), .trust-cell:nth-child(4) { border-bottom: none; }
    .section-head { grid-template-columns: 1fr; gap: 16px; }
    .section-aside { text-align: left; }
    .case { grid-template-columns: 40px 1fr; }
    .case-art { grid-column: span 2; min-height: 220px; }
    .case--featured { padding-left: 0; padding-right: 0; }
    .case-featured-layout { grid-template-columns: 1fr; }
    .case-art--featured { min-height: 280px !important; }
    .work-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
    .services-grid { grid-template-columns: 1fr; }
    .service, .service:nth-child(even) {
      border-right: none;
      padding-left: 0; padding-right: 0;
    }
    .step { grid-template-columns: 60px 1fr; }
    .step-timing { grid-column: span 2; text-align: left; padding-top: 12px; }
    .step p { grid-column: span 2; }
    .pricing-grid { grid-template-columns: 1fr; }
    .quote-row { grid-template-columns: 1fr; }
    .final-actions { grid-template-columns: 1fr; }
    .final-buttons { justify-content: flex-start; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .case:hover { padding-left: 0; padding-right: 0; margin: 0; }
  }
  @media (max-width: 560px) {
    .featured-row { justify-content: flex-start; }
    .foot-grid { grid-template-columns: 1fr; }
    .faq-q { grid-template-columns: 40px 1fr auto; gap: 12px; }
    .faq-a-inner { padding-left: 52px; }
  }

/* ─────────── MOBILE NAV — HAMBURGER + OVERLAY ─────────── */
.nav-burger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 110;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  margin: 5px auto;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease, background .3s ease;
  transform-origin: center;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.nav-links-cta { display: none; }

@media (max-width: 900px) {
  /* Marquee queda relativo arriba, nav sticky por encima del overlay */
  .marquee { position: relative; z-index: 130; }
  nav.top {
    position: sticky !important;
    top: 0;
    z-index: 120;
    background: var(--paper) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .logo,
  .nav-burger { position: relative; z-index: 110; }

  .nav-burger { display: block; }
  .nav-cta-desktop { display: none; }

  /* Overlay con "drawer descending" via clip-path */
  .nav-links {
    display: flex !important;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 100px 32px 48px;
    background: var(--paper);
    z-index: 100;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: clip-path .55s cubic-bezier(.2,.7,.2,1),
                -webkit-clip-path .55s cubic-bezier(.2,.7,.2,1);
  }
  body.is-menu-open .nav-links {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    pointer-events: all;
  }

  /* Cascada de opacidad por item */
  .nav-links li {
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  body.is-menu-open .nav-links li { opacity: 1; transform: translateY(0); }
  body.is-menu-open .nav-links li:nth-child(1) { transition-delay: .38s; }
  body.is-menu-open .nav-links li:nth-child(2) { transition-delay: .46s; }
  body.is-menu-open .nav-links li:nth-child(3) { transition-delay: .54s; }
  body.is-menu-open .nav-links li:nth-child(4) { transition-delay: .62s; }
  body.is-menu-open .nav-links li:nth-child(5) { transition-delay: .70s; }
  body.is-menu-open .nav-links li:nth-child(6) { transition-delay: .85s; }

  .nav-links a {
    position: relative;
    font-family: var(--display);
    font-size: clamp(36px, 8vw, 56px);
    line-height: 1.15;
    letter-spacing: -.025em;
    text-transform: none;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 20;
    display: inline-block;
    padding: 6px 0;
    transition: color .3s ease;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: .12em;
    height: .08em;
    background: var(--vermillion);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible { color: var(--vermillion); }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    opacity: .25;
    transform: scaleX(1);
  }

  .nav-links-cta {
    display: block;
    margin-top: 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(15,15,14,.12);
  }
  .nav-links-cta a {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vermillion);
  }
  .nav-links-cta a::after { display: none; }
}

body.is-menu-open { overflow: hidden; }

/* ─────────── LANGUAGE SWITCH (EN · ES) ─────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lang-switch-link {
  color: var(--mute);
  text-decoration: none;
  transition: color .2s ease;
  padding: 4px 2px;
}
.lang-switch-link:hover { color: var(--vermillion); }
.lang-switch-link.is-active {
  color: var(--ink);
  pointer-events: none;
  cursor: default;
}
.lang-switch-sep {
  color: var(--mute);
  opacity: .45;
}

/* desktop visible, mobile hidden — and vice versa */
.lang-switch-mobile { display: none; }
.lang-switch-desktop { display: inline-flex; margin-right: 18px; }

@media (max-width: 900px) {
  .lang-switch-desktop { display: none; }
  /* Mobile lang-switch within overlay: bigger, on top of CTA */
  .nav-links-lang {
    margin-top: 8px;
    padding-bottom: 4px;
    width: 100%;
    text-align: center;
  }
  .lang-switch-mobile {
    display: inline-flex;
    font-size: 13px;
    letter-spacing: .18em;
    gap: 10px;
  }
  .lang-switch-mobile .lang-switch-link { padding: 8px 4px; }
}