:root {
    --ink: #060606;
    --paper: #FFFFFF;
    --paper-2: #EFEFEE;
    --cream: #F7F7F4;
    --muted: #8A8A8A;
    --line: rgba(6,6,6,.14);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: 'Jost', 'Helvetica Neue', Helvetica, sans-serif;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
  }
  body.locked { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--ink); color: var(--cream); }

  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  [data-reveal].in { opacity: 1; transform: none; }

  /* En esta pagina la cabecera es oscura, asi que la barra fija tambien:
     si fuera blanca quedaria una franja clara flotando sobre el negro. */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: rgba(6,6,6,.86); backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent; transition: border-color .4s ease, background .4s ease;
  }
  body.scrolled header { border-bottom-color: rgba(247,247,244,.16); background: rgba(6,6,6,.95); }
  header a, header .nav a { color: var(--cream); }
  .burger span { background: var(--cream) !important; }
  .nav a { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; position: relative; padding: 6px 0; }
  .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--cream); transition: width .4s cubic-bezier(.2,.7,.2,1); }
  .nav a:hover::after, .nav a.active::after { width: 100%; }
  .nav a.active { font-weight: 500; }

  /* --- grid --- */
  .card {
    display: block; width: 100%; padding: 0; border: none; background: none;
    cursor: pointer; text-align: left; position: relative;
    /* Con 27 tarjetas altas, saltear el pintado de las que estan fuera
       de pantalla es lo que mas se nota al desplazarse. El alto estimado
       evita que la barra de scroll salte.
       Solo el ALTO: contain-intrinsic-size con un unico valor fija
       tambien el ancho, y las tarjetas fuera de pantalla se plantaban
       en 620 px, desbordando la grilla. */
    content-visibility: auto;
    contain-intrinsic-height: auto 620px;
  }
  /* Sin esto, una ciudad larga ensancha su columna: en una grilla los
     elementos no se achican por debajo de su contenido salvo que se les
     diga, y la pagina entera terminaba con scroll horizontal. */
  .card { min-width: 0; }
  .card[hidden] { display: none; }
  .frame { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); }
  .frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
  .card:hover .frame img { transform: scale(1.045); filter: grayscale(0) contrast(1); }
  .frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,6,6,0) 55%, rgba(6,6,6,.42) 100%); opacity: 0; transition: opacity .6s ease; }
  .card:hover .frame::after { opacity: 1; }
  .num { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: .1em; color: var(--cream); mix-blend-mode: difference; }
  .view { position: absolute; right: 14px; bottom: 14px; z-index: 2; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
  .card:hover .view { opacity: 1; transform: none; }
  .meta { padding: 16px 2px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .name { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(20px,2vw,27px); line-height: 1.1; }
  .sub { font-size: 10px; letter-spacing: .22em; color: var(--muted); white-space: nowrap; }
  .city {
    margin: 7px 2px 0; font-size: 10px; line-height: 1.6; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted);
    /* Se parte en dos lineas antes que recortarse: "Ciudad del Este -
       Paraguay" no entra en una columna de la grilla y con puntos
       suspensivos se perdia la mitad. */
    overflow-wrap: anywhere;
  }
  .rule { margin-top: 12px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  .rule::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--ink); transition: width .7s cubic-bezier(.2,.7,.2,1); }
  .card:hover .rule::after { width: 100%; }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px,3.4vw,54px); }
  .grid > *:nth-child(3n+2) { transform: translateY(46px); }

  /* Los tres segmentos viven en paginas separadas: staff.html,
     new-faces.html y scouted.html. Comparten esta hoja y este script,
     y cada pagina declara el suyo en <body data-seg>. */
  .seg__empty {
    margin: 0; padding: clamp(38px,7vh,70px) clamp(22px,4vw,44px);
    border: 1px solid var(--line); background: var(--paper-2);
    font-size: 14px; line-height: 1.8; color: var(--muted); font-weight: 300; text-align: center;
  }
  /* La cabecera va sobre negro. En vez de repintar cada regla se
     redefinen las variables dentro del bloque: el titulo, el buscador,
     los contadores y las lineas pasan solos al claro. El fondo se pone
     con el color literal porque aca --ink ya significa lo contrario. */
  .roster {
    --ink: #F7F7F4;
    --muted: rgba(247,247,244,.6);
    --line: rgba(247,247,244,.18);
    background: #060606; color: var(--cream);
    padding: clamp(104px,13vh,136px) clamp(20px,4vw,48px) clamp(34px,5vh,52px);
  }
  .roster input::placeholder { color: rgba(247,247,244,.5); }
  /* El autocompletado de Chrome pinta el campo de azul claro */
  .roster input:-webkit-autofill { -webkit-text-fill-color: var(--cream); -webkit-box-shadow: 0 0 0 60px #060606 inset; }

  /* --- cabecera del listado ---
     Compacta a proposito: antes el titular ocupaba 115 px y la primera
     foto arrancaba a 825 px, o sea que en una pantalla de 900 no se veia
     ninguna modelo sin bajar. */
  .roster__head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 28px;
    animation: rise .8s cubic-bezier(.2,.7,.2,1) both;
  }
  .roster__title {
    margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(38px,5vw,68px); line-height: .95;
    text-transform: uppercase; letter-spacing: -.015em;
  }
  .roster__title em { font-style: italic; }
  .roster__meta { margin: 0; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  .roster__intro {
    margin: 14px 0 0; max-width: 68ch; font-size: 14px; line-height: 1.8;
    color: var(--muted); font-weight: 300;
    animation: rise .8s cubic-bezier(.2,.7,.2,1) .08s both;
  }

  /* Barra con el buscador y los atajos a cada bloque */
  .roster__bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 16px clamp(20px,3vw,48px);
    margin-top: clamp(22px,3vh,32px); padding-bottom: clamp(14px,2vh,20px);
    border-bottom: 1px solid var(--ink);
    animation: rise .8s cubic-bezier(.2,.7,.2,1) .16s both;
  }
  .segnav { display: flex; flex-wrap: wrap; gap: clamp(14px,2.4vw,34px); }
  /* Ya no son botones que saltan dentro de la pagina: son enlaces a las
     otras dos vistas, y hacen de pestanias. */
  .segnav__b {
    display: flex; align-items: baseline; gap: 9px;
    padding: 6px 0; background: none; border: none; cursor: pointer;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .35s ease, opacity .35s ease;
  }
  .segnav__b.is-current { border-bottom-color: var(--ink); }
  /* La vista actual nunca se atenua, aunque todavia no tenga perfiles:
     atenuada parecia deshabilitada. */
  .segnav__b.is-current[data-vacio] { opacity: 1; }
  .segnav__b.is-current span { color: var(--ink); }
  .segnav__b b {
    font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .segnav__b span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .segnav__b:hover { border-bottom-color: var(--ink); }
  .segnav__b:hover span { color: var(--ink); }
  /* Un bloque sin perfiles no invita a saltar hacia el */
  .segnav__b[data-vacio] { opacity: .38; cursor: default; }
  .segnav__b[data-vacio]:hover { border-bottom-color: transparent; }
  .segnav__b[data-vacio]:hover span { color: var(--muted); }

  @media (max-width: 860px) {
    .roster__bar { flex-direction: column; align-items: stretch; }
  }

  /* --- buscador --- */
  .buscador {
    position: relative; display: flex; align-items: center;
    /* Crece hasta 420px pero no se encoge por debajo de 240: dentro del
       flex de la barra, si no, se achica al ancho del texto. */
    flex: 1 1 260px; max-width: 420px; min-width: 240px;
    border-bottom: 1px solid var(--ink);
  }
  .buscador__lupa { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
  .buscador input {
    flex: 1; min-width: 0; min-height: 46px; padding: 0 6px 0 12px;
    background: transparent; border: none; outline: none; border-radius: 0;
    font: inherit; font-size: 15px; font-weight: 300; color: var(--ink);
    -webkit-appearance: none; appearance: none;
  }
  .buscador input::placeholder { color: var(--muted); font-weight: 300; }
  /* La X nativa de Safari y Chrome duplica el boton propio */
  .buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .buscador button {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted);
  }
  .buscador button:hover { color: var(--ink); }
  .buscador__nota { margin: 14px 0 0; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
  /* Va despues de la regla base a proposito: con la misma especificidad
     gana la ultima, y en columna el flex-basis pasa a ser ALTO. */
  @media (max-width: 860px) {
    .buscador { flex: 0 0 auto; max-width: none; min-width: 0; }
  }

  /* Con el bloque vacio la grilla no debe dejar un hueco */
  .grid:empty { display: none; }
  /* Acceso al formulario de scouting: visible haya o no perfiles */
  .seg__cta {
    display: inline-flex; align-items: center; gap: 18px;
    margin-top: clamp(26px,4vh,42px); padding: 18px 28px;
    background: var(--ink); color: var(--cream);
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    transition: background .4s ease, color .4s ease;
    border: 1px solid var(--ink);
  }
  .seg__cta:hover { background: transparent; color: var(--ink); }
  .seg__cta-a { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .seg__cta:hover .seg__cta-a { transform: translateX(6px); }

  /* --- detalle --- */
  #detail { position: fixed; inset: 0; z-index: 90; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; }
  #detail.open { display: block; }
  .dbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 12px clamp(18px,4vw,44px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .dwrap { max-width: 1560px; margin: 0 auto; padding: clamp(24px,4vh,52px) clamp(18px,4vw,44px) clamp(70px,10vh,110px); display: grid; grid-template-columns: 1.28fr 1fr; gap: clamp(30px,4.5vw,84px); align-items: start; }

  /* galeria: rail vertical de miniaturas + foto principal */
  .dgallery { display: grid; grid-template-columns: 78px 1fr; gap: 14px; }
  /* El marco toma la proporcion real del book (2:3), no el 3/4 de antes:
     con 3/4 y object-fit:cover a cada foto se le recortaba un quinto,
     casi siempre de la cabeza o de los pies. Con 2:3 y contain la foto
     entra justa, sin recorte y sin franjas a los costados.
     El ancho se limita a lo que permita el alto de pantalla, para que en
     monitores anchos la foto no salga del alto visible. */
  .dmain {
    position: relative; margin: 0 auto; overflow: hidden;
    width: min(100%, calc(min(84vh, 900px) * 2 / 3));
    aspect-ratio: 2 / 3; background: var(--paper);
  }
  .dmain img { width: 100%; height: 100%; object-fit: contain; }
  .dcount {
    position: absolute; right: 14px; bottom: 12px; z-index: 2;
    font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: .12em;
    color: var(--cream); mix-blend-mode: difference;
  }
  .thumbs { display: flex; flex-direction: column; gap: 10px; }
  .thumb { position: relative; padding: 0; border: none; background: var(--paper-2); cursor: pointer; aspect-ratio: 3/4; overflow: hidden; opacity: .42; transition: opacity .4s ease; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s ease; }
  .thumb.sel, .thumb:hover { opacity: 1; }
  .thumb.sel img, .thumb:hover img { filter: grayscale(0); }
  .thumb::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .thumb.sel::after { transform: scaleY(1); }

  /* panel de datos */
  .dinfo { position: sticky; top: 96px; }
  .dhead { position: relative; padding-top: 4px; }
  .dghost {
    position: absolute; right: 0; top: -18px; z-index: 0; pointer-events: none;
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(90px,11vw,170px); line-height: 1; color: rgba(6,6,6,.055);
  }
  .dhead > *:not(.dghost) { position: relative; z-index: 1; }

  .measure { display: grid; grid-template-columns: repeat(3,1fr); margin: 30px 0 6px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
  .measure div { padding: 18px 0 16px; position: relative; }
  .measure div + div { border-left: 1px solid var(--line); padding-left: 18px; }
  .measure b { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px,3.2vw,44px); line-height: 1; }
  .measure span { display: block; margin-top: 9px; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

  .spec { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .spec dt { margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .spec dd { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 300; text-align: right; }
  .dnote { margin: 16px 0 0; font-size: 11px; line-height: 1.8; color: var(--muted); font-weight: 300; }
  .cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 56px; margin-top: 30px; background: var(--ink); color: var(--cream); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--ink); transition: background .4s, color .4s; }
  .cta:hover { background: transparent; color: var(--ink); }
  .round { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(6,6,6,.22); border-radius: 50%; cursor: pointer; font-size: 13px; padding: 0; transition: background .3s, border-color .3s, color .3s; }
  .round:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

  /* Tipografía unificada: el estilo del botón "Quiero formar parte".
     Jost en mayúsculas con letterspacing amplio para toda la UI.
     Los títulos (h1-h3) mantienen la serif Cormorant. */
  .nav a, footer a, .sub, .age, .view, .cta,
  .spec dt, .measure span, #dIndex, #dAge, #count,
  [style*="text-transform:uppercase"]:not(h1):not(h2):not(h3),
  [style*="text-transform: uppercase"]:not(h1):not(h2):not(h3) {
    font-family: 'Jost', 'Helvetica Neue', Helvetica, sans-serif !important;
    letter-spacing: .32em !important;
    font-weight: 400 !important;
    text-transform: uppercase;
  }
  .num { letter-spacing: .32em !important; }

  /* Menu movil: sin esto, al entrar desde el menu del inicio se pierde
     toda la navegacion y hay que volver con el boton atras. */
  .burger { display: none; width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; align-items: flex-end; }
  .burger span { display: block; width: 26px; height: 1px; background: var(--ink); transition: transform .3s ease; }
  .mmenu {
    position: fixed; inset: 0; z-index: 80; background: var(--paper);
    display: none; flex-direction: column;
  }
  .mmenu.open { display: flex; animation: fade .3s ease both; }
  .mmenu__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px,5vw,40px); border-bottom: 1px solid var(--line); }
  .mmenu__bar img { height: 48px; width: auto; }
  .mmenu__bar button { width: 44px; height: 44px; background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); }
  .mmenu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 clamp(20px,6vw,40px) 60px; }
  .mmenu__nav a {
    font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 300;
    letter-spacing: normal !important; text-transform: none;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  @media (max-width: 980px) { .burger { display: flex; } }

  /* Credito de desarrollo */
  .ls-credit {
    font-size: 11px !important; letter-spacing: .18em !important;
    text-transform: uppercase; color: var(--muted); transition: color .4s ease;
  }
  .ls-credit strong { font-weight: 500; color: #D8D8D8; transition: color .4s ease; }
  .ls-credit:hover, .ls-credit:hover strong { color: #F7F7F4; }

  /* --- franja CTA --- */
  .band {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: clamp(150px, 20vh, 210px); padding: 40px 24px; overflow: hidden;
    background:
      linear-gradient(104deg,
        #232932 0%, #171C23 18%, #2C333D 34%, #1A1F27 52%,
        #262D37 68%, #191E25 84%, #2F3742 100%);
    text-align: center; isolation: isolate;
  }
  .band::before, .band::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(255,255,255,.16); z-index: 0;
  }
  .band::before { width: 260px; height: 260px; left: 2%; top: -46%; }
  .band::after  { width: 190px; height: 190px; left: 9%; top: 22%; }
  .band .halo {
    position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    width: 150px; height: 150px; left: 15%; top: -30%;
    border: 1px solid rgba(255,255,255,.12);
  }
  .band .sheen {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(76deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.09) 55%, rgba(255,255,255,0) 68%);
  }
  .band .inner { position: relative; z-index: 1; }
  .band .label {
    font-size: clamp(12px,1.5vw,17px); letter-spacing: .32em; text-transform: uppercase;
    color: var(--cream); font-weight: 400; transition: letter-spacing .5s cubic-bezier(.2,.7,.2,1);
  }
  .band:hover .label { letter-spacing: .4em; }
  .band .dash { display: block; width: 62px; height: 1px; margin: 18px auto 0; background: rgba(247,247,244,.5); transition: width .5s cubic-bezier(.2,.7,.2,1); }
  .band:hover .dash { width: 104px; }
  @media (max-width: 700px) { .band::before, .band::after, .band .halo { display: none; } }

  @media (max-width: 980px) {
    .nav { display: none !important; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .grid > *:nth-child(3n+2) { transform: none; }
    .grid > *:nth-child(2n) { transform: translateY(32px); }
    .dwrap { grid-template-columns: 1fr; gap: 28px; }
    .dinfo { position: static; }
    /* el rail vertical pasa a fila horizontal debajo de la foto */
    .dgallery { grid-template-columns: 1fr; gap: 10px; }
    /* La fila de miniaturas se desliza sola. Con doce fotos y un ancho
       minimo por miniatura, la fila medía 734 px dentro de una pantalla
       de 375: el que se ensanchaba era el panel entero, y en el celular
       eso se ve como si la pagina estuviera desencajada. Por eso pasaba
       en unos perfiles si y en otros no: depende de cuantas fotos tenga. */
    .dgallery .thumbs {
      order: 2; flex-direction: row;
      overflow-x: auto; overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .dgallery .thumbs::-webkit-scrollbar { display: none; }
    .dgallery .dmain { order: 1; width: min(100%, calc(min(70vh, 620px) * 2 / 3)); }
    /* Crecen para llenar la fila cuando son pocas, pero nunca se achican
       por debajo de 56 px: con doce quedaban en 20 px y no se distinguia
       nada. Si no entran, la fila se desliza. */
    .thumbs .thumb { flex: 1 0 56px; }
    .thumb::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
    .thumb.sel::after { transform: scaleX(1); }
  }
  @media (max-width: 620px) {
    .grid { grid-template-columns: 1fr; }
    .grid > * { transform: none !important; }
    .measure { gap: 18px; }

    /* Areas tactiles minimas de 44px */
    .round { width: 44px; height: 44px; }
    #dClose { min-height: 44px; padding: 0 18px; }
    footer a { padding: 13px 0; }
    .ls-credit { padding: 10px 0; }

    /* iOS hace zoom al enfocar un campo con fuente menor a 16px */
    input, select, textarea { font-size: 16px !important; }

    .thumbs .thumb { flex-basis: 52px; }
    .band { min-height: 130px; padding: 30px 18px; }
  }

  .ls-foot__base { border-top: 1px solid rgba(216,216,216,.14); color: var(--muted); }

  /* Rotulos del footer como chip: en gris pequenio se perdian */
  .fcol-h {
    display: inline-block; margin-bottom: 6px; padding: 7px 14px;
    background: rgba(247,247,244,.12); border: 1px solid rgba(247,247,244,.22);
    border-radius: 999px;
    font-size: 11px !important; letter-spacing: .24em !important;
    text-transform: uppercase; color: #F7F7F4 !important; font-weight: 500 !important;
  }