/* ==========================================================================\n   SECTION 2 — CONTEXTO\n   Full-bleed 40 / 60 composition. The image owns the entire left column;\n   the editorial copy is centered inside the right column.\n   ========================================================================== */

.context-section-v2 {
  --context-coral: #eb5367;
  --context-cream: #f7eadf;
  --context-ink: #171314;
  --context-cyan: #79d9df;

  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  min-height: 760px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--context-coral);
}

.context-section-v2__image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 760px;
  overflow: hidden;
}

.context-section-v2__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 760px;
  object-fit: cover;
  object-position: center center;
}

.context-section-v2__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 760px;
  padding: 84px clamp(56px, 5.2vw, 108px);
  background: var(--context-coral);
}

.context-section-v2__content-inner {
  width: min(100%, 790px);
  margin: 0 auto;
}

.context-title-v2 {
  margin: 0 0 42px;
  max-width: 790px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: clamp(54px, 5.15vw, 82px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.072em;
}

.context-title-v2 span { display: block; }

.context-light-v2 {
  color: var(--context-cream);
  font-weight: 300;
}

.context-light-v2 strong {
  color: var(--context-ink);
  font-weight: 700;
}

.context-accent-v2 {
  color: var(--context-ink);
  font-weight: 700;
  white-space: nowrap;
}

.context-copy-v2 { max-width: 760px; }

.context-copy-v2 p {
  margin: 0 0 22px;
  max-width: 760px;
  color: rgba(23, 19, 20, .86);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.75;
}

.context-copy-v2 p:last-child { margin-bottom: 0; }

.context-statement-v2 {
  max-width: 730px;
  margin-top: 42px;
  color: var(--context-cyan);
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: clamp(25px, 2.15vw, 34px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.context-chips-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.context-chips-v2 span {
  position: relative;
  padding-left: 22px;
  color: var(--context-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.context-chips-v2 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid var(--context-ink);
  transform: translateY(-50%) rotate(7deg);
}

.context-chips-v2 span:nth-child(2)::before {
  border-radius: 50%;
  transform: translateY(-50%);
}

.context-chips-v2 span:nth-child(3)::before {
  transform: translateY(-50%) rotate(45deg) scale(.82);
}

@media (max-width: 900px) {
  .context-section-v2 {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .context-section-v2__image,
  .context-section-v2__image img {
    min-height: 72vw;
    max-height: 720px;
  }

  .context-section-v2__content {
    min-height: 0;
    padding: 72px 24px 82px;
  }

  .context-section-v2__content-inner { width: min(100%, 700px); }

  .context-title-v2 { font-size: clamp(50px, 11vw, 76px); }
  .context-accent-v2 { white-space: normal; }
}


/* =========================================================
   V51 — MOBILE BODY COPY SINGLE BASELINE
   Every paragraph is 14px on real mobile devices.
   Labels, kickers and metadata are not paragraphs and keep their own scale.
   ========================================================= */
@media (max-width: 900px) {
  html body p,
  html body .results-v27__note {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Section-specific paragraph selectors intentionally collapse to the same baseline. */
  html body .program p,
  html body .program .program-head > div:last-child > p,
  html body .program .rail-item > p,
  html body .story-v26 p,
  html body .story-v26__lead p,
  html body .story-v26__closing p,
  html body .results-v27 p,
  html body .results-v27__card-copy p,
  html body .final p,
  html body .brand-v33 p,
  html body .brand-v33__bottom p,
  html body .section-copy p,
  html body .context-copy-v2 p,
  html body .context-section-v2 p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* =========================================================
   V52 — CONTEXT SECTION: HERO GRADIENT + WHITE BOLD TYPE
   ========================================================= */

.context-section-v2,
.context-section-v2__content{
  background:linear-gradient(100deg,#E1005A 0%,#F00062 38%,#C40026 100%)!important;
}

.context-title-v2,
.context-title-v2 *,
.context-light-v2,
.context-light-v2 strong,
.context-accent-v2{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  background:none!important;
  font-weight:700!important;
  font-style:normal!important;
}

@media (max-width:900px){
  .context-section-v2,
  .context-section-v2__content{
    background:linear-gradient(180deg,#E1005A 0%,#F00062 38%,#C40026 100%)!important;
  }
}

/* V53 — CONTEXT BODY COPY: WHITE ON FILM-PINK */
.context-section-v2 .context-copy-v2 p,
.context-section-v2__content .context-copy-v2 p{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Keep the key statement cyan and metadata dark graphite. */
.context-section-v2 .context-statement-v2{
  color:#79D9DF!important;
  -webkit-text-fill-color:#79D9DF!important;
}

.context-section-v2 .context-chips-v2 span{
  color:#363433!important;
}

.context-section-v2 .context-chips-v2 span::before{
  border-color:#363433!important;
}

/* =========================================================
   V2 MOCKUP — three concepts, editorial treatment
   Same #363433 color. No background changes.
   ========================================================= */

.context-chips-v2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:30px!important;
  border-top:1px solid rgba(54,52,51,.28)!important;
}

.context-chips-v2 span{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-height:72px!important;
  padding:15px 18px 0 0!important;
  color:#363433!important;
  border-right:1px solid rgba(54,52,51,.22)!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:9px!important;
  line-height:1.4!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.context-chips-v2 span:last-child{
  border-right:0!important;
  padding-left:18px!important;
}

.context-chips-v2 span:nth-child(2){
  padding-left:18px!important;
}

.context-chips-v2 span::before{
  content:""!important;
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0 0 10px!important;
  border:0!important;
  transform:none!important;
  color:#363433!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}

.context-chips-v2 span:nth-child(1)::before{ content:"01"!important; }
.context-chips-v2 span:nth-child(2)::before{ content:"02"!important; }
.context-chips-v2 span:nth-child(3)::before{ content:"03"!important; }

@media (max-width:900px){
  .context-chips-v2{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  .context-chips-v2 span,
  .context-chips-v2 span:nth-child(2),
  .context-chips-v2 span:last-child{
    min-height:0!important;
    padding:14px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(54,52,51,.22)!important;
  }

  .context-chips-v2 span:last-child{
    border-bottom:0!important;
  }
}

/* =========================================================
   FINAL — CONTEXT ITEMS
   Minimal editorial icons + explanatory copy.
   Same #363433 throughout. No background changes.
   ========================================================= */

.context-section-v2__image img{
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}

.context-chips-v2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:34px!important;
  border-top:1px solid rgba(54,52,51,.24)!important;
}

.context-chip-v2{
  min-width:0!important;
  padding:18px 28px 0 0!important;
  border-right:1px solid rgba(54,52,51,.18)!important;
  color:#363433!important;
}

.context-chip-v2 + .context-chip-v2{
  padding-left:28px!important;
}

.context-chip-v2:last-child{
  padding-right:0!important;
  border-right:0!important;
}

.context-chip-v2__icon{
  width:22px!important;
  height:22px!important;
  margin-bottom:18px!important;
  color:#363433!important;
}

.context-chip-v2__icon svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  stroke:currentColor!important;
  stroke-width:1.25!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.context-chip-v2__index{
  margin-bottom:7px!important;
  color:#363433!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.1em!important;
  opacity:.48!important;
}

.context-chip-v2 h3{
  margin:0 0 9px!important;
  color:#363433!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.context-chip-v2 p{
  margin:0!important;
  max-width:230px!important;
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

@media (max-width:900px){
  .context-chips-v2{
    grid-template-columns:1fr!important;
    margin-top:30px!important;
  }

  .context-chip-v2,
  .context-chip-v2 + .context-chip-v2,
  .context-chip-v2:last-child{
    padding:18px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(54,52,51,.18)!important;
  }

  .context-chip-v2:first-child{
    padding-top:18px!important;
  }

  .context-chip-v2:last-child{
    border-bottom:0!important;
  }

  .context-chip-v2 p{
    max-width:520px!important;
  }
}

/* =========================================================
   FINAL COLOR FIX — context items
   White typography, cyan minimal icons, dark divider lines.
   ========================================================= */

.context-chip-v2,
.context-chip-v2__index,
.context-chip-v2 h3,
.context-chip-v2 p{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

.context-chip-v2__icon{
  color:#79D9DF!important;
}

.context-chip-v2__icon svg{
  stroke:currentColor!important;
}

.context-chips-v2{
  border-top-color:rgba(54,52,51,.28)!important;
}

.context-chip-v2{
  border-right-color:rgba(54,52,51,.22)!important;
}

@media (max-width:900px){
  .context-chip-v2{
    border-bottom-color:rgba(54,52,51,.22)!important;
  }
}

/* =========================================================
   SECTION 3 — PALETTE ALIGNMENT
   Layout, columns and light background intentionally untouched.
   ========================================================= */

/* Replace the old near-black treatment with the established warm graphite. */
.section3,
.section3 h1,
.section3 h2,
.section3 h3,
.section3 p,
.section3 .eyebrow,
.section3 .definition,
.section3 .label,
.section3 .concept,
.section3 .concept-title{
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
}

/* Brand/emphasis pink follows the Hero identity. */
.section3 .accent,
.section3 .highlight,
.section3 .pink,
.section3 .section-accent{
  color:#E1005A!important;
  -webkit-text-fill-color:#E1005A!important;
}

/* The three-column concepts keep the same minimal graphic structure. */
.section3 .concepts,
.section3 .concept-list,
.section3 .three-items,
.section3 .columns{
  color:#363433!important;
}

.section3 .concepts > *,
.section3 .concept-list > *,
.section3 .three-items > *,
.section3 .columns > *{
  border-color:rgba(54,52,51,.22)!important;
}

.section3 .concept-index,
.section3 .index,
.section3 .number{
  color:#E1005A!important;
  -webkit-text-fill-color:#E1005A!important;
}

.section3 .concept-icon,
.section3 .icon{
  color:#79D9DF!important;
}

.section3 .concept-icon svg,
.section3 .icon svg{
  stroke:currentColor!important;
}

/* Preserve the existing light section background. */
.section3{
  background:inherit!important;
}

/* Brand-section palette alignment. */
.brand-v33__lockup .brand-v33__kalibr,
.brand-v33__definition,
.brand-v33__definition p,
.brand-v33__word,
.brand-v33__bottom p,
.brand-v33__principles strong{
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
}
.brand-v33__lockup .brand-v33__ai,
.brand-v33__manifesto strong,
.brand-v33__principles span{
  color:#E1005A!important;
  -webkit-text-fill-color:#E1005A!important;
}
.brand-v33__principles > div{
  border-color:rgba(54,52,51,.22)!important;
}

/* =========================================================
   MOBILE CONTEXT — FINAL READING ORDER
   H1 → image → body copy → statement → concepts.
   The image stays full-bleed; text keeps the established
   horizontal breathing room.
   ========================================================= */
@media (max-width:900px){
  .context-section-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .context-section-v2__content,
  .context-section-v2__content-inner,
  .context-copy-v2{
    display:contents!important;
  }

  .context-title-v2{
    order:1!important;
    width:auto!important;
    margin:0 24px 30px!important;
    padding:72px 0 0!important;
  }

  .context-section-v2__image{
    order:2!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .context-section-v2__image img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
  }

  .context-copy-v2 p:nth-child(1){
    order:3!important;
    width:auto!important;
    margin:30px 24px 22px!important;
    padding:0!important;
  }

  .context-copy-v2 p:nth-child(2){
    order:3!important;
    width:auto!important;
    margin:0 24px 30px!important;
    padding:0!important;
  }

  .context-statement-v2{
    order:4!important;
    width:auto!important;
    margin:34px 24px 0!important;
    padding:0!important;
  }

  .context-chips-v2{
    order:5!important;
    width:auto!important;
    margin:30px 24px 0!important;
    padding:0!important;
  }
}