/* ============================================================
   Lunamé — Visual Identity (Part 2 of 3)
   case-study-luname-visual-identity.css  (loads last)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

.lcs { color: #1a1a1a; overflow-x: clip; }
.lcs .container-fluid {
    width: 100%; max-width: 1440px; margin: 0 auto;
    padding-left: clamp(20px, 6.94vw, 100px); padding-right: clamp(20px, 6.94vw, 100px);
}
.lcs img { max-width: 100%; }
.lcs .ttc-em { font-family: 'Source Serif 4', serif !important; font-style: italic !important; font-weight: 400; }
.lcs .lcs-blue { color: #005eb8; }
.lcs .lcs-orange { color: #f96815; }
.lcs .lcs-green { color: #2fb98d; }
.lcs .lcs-gold { color: #e4ca97; }
.lcs .lcs-label {
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2.5px;
    text-transform: uppercase; color: #8a8a8a; margin: 0 0 18px;
}
.lcs .lcs-label--light { color: #b3aca4; }

/* ---------------- HERO ---------------- */
.lcs-hero { background: #120d0d; }
.lcs-hero .container-fluid { padding-top: 120px; padding-bottom: 84px; }
.lcs-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.lcs-hero__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 52px; line-height: 1.12; color: #fff; margin: 0; }
.lcs-hero__accent { display: block; font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 400; font-size: 46px; line-height: 1.2; color: #ead7a0; margin-top: 6px; }
.lcs-hero__lead { font-size: 18px; line-height: 1.6; color: #e6e2dd; margin: 26px 0 0; }
.lcs-hero__tags { font-family: 'Poppins', sans-serif; font-size: 15px; color: #cfc9c3; margin: 26px 0 0; }
.lcs-hero__media img { width: 100%; height: 460px; object-fit: cover; border-radius: 10px; display: block; }

/* ---------------- THE NAME ---------------- */
.vi-name { background: #fff; }
.vi-name .container-fluid { padding: 84px 100px; padding-left: clamp(20px,6.94vw,100px); padding-right: clamp(20px,6.94vw,100px); }
.vi-name__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.vi-name__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: #120d0d; margin: 0 0 34px; }
.vi-etymology { display: flex; align-items: center; gap: 14px; }
.vi-ety { background: #191617; border-radius: 4px; padding: 26px 8px 18px; text-align: center; flex: 1 1 0; min-width: 0; }
.vi-ety__word { font-family: 'Playfair Display', serif; font-size: 30px; color: #fff; line-height: 1; }
.vi-ety__gloss { font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #e4ca97; margin-top: 12px; }
.vi-ety__plus { font-size: 22px; color: #120d0d; flex: 0 0 auto; }
.vi-name__cap { font-size: 15px; line-height: 1.6; color: #555; margin: 20px 0 0; }
.vi-name__cap em { font-style: italic; }
.vi-name__right > p { font-size: 18px; line-height: 1.65; color: #333; margin: 0; }
.vi-callout { background: #fbeae7; border-radius: 8px; padding: 26px 28px; margin-top: 26px; font-size: 17px; line-height: 1.6; color: #3a2f2c; }

/* ---------------- BRINGING THE BRAND TO LIFE ---------------- */
.vi-bring { background: #f2f2f2; }
.vi-bring .container-fluid { padding: 72px clamp(20px,6.94vw,100px) 80px; text-align: center; }
.vi-bring__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; color: #120d0d; margin: 0 0 16px; }
.vi-bring__sub { font-size: 17px; line-height: 1.6; color: #555; max-width: 760px; margin: 0 auto 40px; }
.vi-video { background: #0e0c0d; border-radius: 6px; padding: clamp(16px,2.6vw,36px); max-width: 1100px; margin: 0 auto; }
.vi-video__inner { background: #191617; border-radius: 4px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.vi-video__mark { width: min(46%, 300px); height: auto; }

/* ---------------- THE LOGO / COLOR / TYPE (dark) ---------------- */
.vi-logo { background: #191617; color: #fff; }
.vi-logo .container-fluid { padding: 84px clamp(20px,6.94vw,100px); }
.vi-logo__top { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.vi-logo__text { display: flex; flex-direction: column; gap: 22px; }
.vi-logo__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: #fff; margin: 0; }
.vi-logo__copy { font-size: 16px; line-height: 1.65; color: #cbc6c2; margin: 0; }
.vi-logo__showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin: 44px 0 0; }
.vi-logo__anim { background: #0e0c0d; border-radius: 6px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vi-logo__anim video { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.vi-logo__caption { font-size: 16px; line-height: 1.6; color: #b3ada8; margin: 40px 0 0; }
.vi-rule { border: 0; border-top: 1px solid rgba(255,255,255,.13); margin: 56px 0; }

.vi-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.vi-palette__intro p { font-size: 16px; line-height: 1.65; color: #cbc6c2; margin: 0; }
.vi-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 6px; overflow: hidden; }
.vi-swatch { min-height: 150px; padding: 18px; display: flex; flex-direction: column; color: #191617; }
.vi-swatch--dark { color: #fff; }
.vi-swatch__name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: auto; }
.vi-swatch__row { font-family: 'Poppins', sans-serif; font-size: 12px; margin-top: 3px; opacity: .92; }
.vi-swatch__row b { display: inline-block; width: 34px; opacity: .7; font-weight: 600; }

.vi-type { border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 34px 40px; margin-top: 56px; }
.vi-type__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 20px; }
.vi-type__item { display: flex; gap: 26px; align-items: flex-start; }
.vi-type__aa { font-size: 66px; line-height: 1; flex: 0 0 auto; }
.vi-type__aa--sans { font-family: 'DM Sans', sans-serif; color: #fff; font-weight: 500; }
.vi-type__aa--serif { font-family: 'Playfair Display', serif; color: #e4ca97; }
.vi-type__name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; color: #fff; }
.vi-type__role { font-size: 14px; color: #9c968f; margin: 2px 0 12px; }
.vi-type__body p { font-size: 15px; line-height: 1.6; color: #c3beb9; margin: 0; }

/* ---------------- BRAND APPLICATIONS ---------------- */
.vi-apps { background: #f2f2f2; }
.vi-apps .container-fluid { padding: 80px clamp(20px,6.94vw,100px); }
.vi-apps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vi-apps__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: #120d0d; margin: 0 0 22px; }
.vi-apps__text p { font-size: 17px; line-height: 1.65; color: #333; margin: 0; }
.vi-apps__media img { width: 100%; border-radius: 10px; display: block; }

/* ---------------- WHAT THE IDENTITY DELIVERED ---------------- */
.vi-deliver { background: #fff; }
.vi-deliver .container-fluid { padding: 80px clamp(20px,6.94vw,100px); }
.vi-deliver__head { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; margin-bottom: 40px; }
.vi-deliver__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: #120d0d; margin: 0; }
.vi-deliver__copy { font-size: 17px; line-height: 1.6; color: #333; margin: 0; align-self: center; }
.vi-gallery { display: flex; flex-direction: column; gap: 20px; }
.vi-gallery__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vi-gallery__row2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.vi-gallery__full { position: relative; }
.vi-gallery__full img { width: 100%; border-radius: 8px; display: block; }
.vi-gallery__tag { position: absolute; top: 16px; left: 18px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #191617; }

/* ---------------- SERIES NAV ---------------- */
.lcs-series { background: #fff; }
.lcs-series .container-fluid { padding: 16px clamp(20px,6.94vw,100px) 24px; display: flex; justify-content: flex-end; gap: 20px; }
.lcs-series--pair .container-fluid { justify-content: space-between; }
.lcs-series__card { display: flex; align-items: center; gap: 22px; justify-content: space-between; width: 400px; max-width: 100%; padding: 22px 24px; border: 1px solid #e3e3e3; border-radius: 12px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.lcs-series__card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.08); transform: translateY(-2px); }
.lcs-series__meta { display: flex; flex-direction: column; gap: 3px; }
.lcs-series__meta--r { text-align: right; }
.lcs-series__part { font-family: 'Poppins', sans-serif; font-size: 13px; color: #8a8a8a; }
.lcs-series__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 19px; color: #120d0d; }
.lcs-series__sub { font-family: 'Poppins', sans-serif; font-size: 14px; color: #555; }
.lcs-series__arrow { color: #120d0d; flex: 0 0 auto; display: flex; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991px) {
    .lcs-hero .container-fluid { padding-top: 100px; padding-bottom: 56px; }
    .lcs-hero__grid, .vi-name__grid, .vi-logo__top, .vi-logo__showcase, .vi-palette,
    .vi-type__grid, .vi-apps__grid, .vi-deliver__head, .vi-gallery__row2 { grid-template-columns: 1fr; gap: 28px; }
    .lcs-hero__title { font-size: 38px; }
    .lcs-hero__accent { font-size: 32px; }
    .lcs-hero__media img { height: 300px; }
    .vi-name__title, .vi-bring__title, .vi-logo__title, .vi-apps__title, .vi-deliver__title { font-size: 30px; }
    .vi-ety__word { font-size: 24px; }
    .vi-swatches { grid-template-columns: repeat(2, 1fr); }
    .vi-type__aa { font-size: 52px; }
    .vi-logo__anim { aspect-ratio: 16/9; grid-column: auto; }
    .lcs-series .container-fluid, .lcs-series--pair .container-fluid { flex-direction: column; }
    .lcs-series__card { width: 100%; }
    .lcs-series__card--prev { order: 2; }
}
@media (max-width: 520px) {
    .lcs-hero__title { font-size: 31px; }
    .lcs-hero__accent { font-size: 27px; }
    .vi-swatches { grid-template-columns: 1fr; }
    .vi-etymology { gap: 8px; }
    .vi-ety { padding: 18px 4px 12px; }
    .vi-ety__word { font-size: 20px; }
}

/* luname-task-20260727: CTA mobile overflow fix */
@media (max-width: 991px){
  .lcs .cta-section .cta-image{ max-width:100% !important; height:auto !important; }
  .lcs .cta-section .cta-image-wrapper{ text-align:center !important; padding:0; }
}
.vi-video__player{ width:100%; height:100%; object-fit:contain; background:#191617; border-radius:4px; display:block; }