:root{
    --mx-orange-dark:#F97D30;
    --mx-orange-light:#FFB053;
    --mx-blue:#0880C4;
    --mx-navy:#0F2A63;
    --row-gap:0px;
  }


  .journey-wrap{
    background:#ffffff;
   /* padding:56px 16px 70px;
    font-family:'Poppins',sans-serif;*/
  }

  .journey-inner{
    position:relative;
/*    max-width:640px;*/
    margin:0 auto;overflow: hidden;
  }

  /* left accent border, full height of component */
/*  .journey-inner::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:var(--mx-blue);
    z-index:2;
  }*/

  /* ---------- background architecture line-art ---------- */
  .arch-bg{
    position:absolute;
    pointer-events:none;
    opacity:.55;
    z-index:0;
  }
  .arch-bg.top{
     top: -10px;
    right: 0%;
    width: 31%;
  }
  .arch-bg.bottom{
    bottom:6%;
    right:-16%;
    width:58%;
  }
  .arch-bg.mid-left{
    left: 1%;
    top: 27.5%;
    width: 40%;
  }
  @media (max-width:575.98px){
    .arch-bg.top{ width:38%; opacity:.35; }
    .arch-bg.bottom{ width:44%; opacity:.35; }
    .arch-bg.mid-left{ display:none; }
  }

  /* ---------- heading ---------- */
  .journey-head{
    position:relative;
    z-index:2;
    padding-left:41%;
    margin-bottom:22px;
  }
  .journey-badge-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(90deg,#fdece0,#fdf8f4);
    padding:8px 16px 8px 10px;
    font-weight:700;
    font-size:clamp(.95rem,2.6vw,1.15rem);
    color:#1a1a1a;
  }
  .journey-badge-title .bar{
    width:5px;
    align-self:stretch;
    background:var(--mx-orange-dark);
    border-radius:1px;
  }
  .journey-sub{
    font-size:clamp(.68rem,1.7vw,.78rem);
    color:#8a8f98;
    margin:6px 0 0;
  }

  /* ---------- grid ---------- */
  .journey-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:83fr 84fr 82fr 82fr 82fr 100fr 84fr;
    aspect-ratio:420/593;
    margin-left:3px;
  }

  .cell{
    position:relative;
    overflow:hidden;
    display:flex;
/*    flex-direction:column;*/
    justify-content:center;
  }

  .cell.photo{
    background-size:cover;
    background-position:center;
  }
  .cell.photo::after{
    content:"";
    position:absolute; inset:0;
    background:rgba(10,20,40,.08);
  }

  .cell.box{
    color:#fff;
    padding:6% 9%;
    justify-content:center;
  }
  .cell.box .label{
    font-size: 24.63px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 22%;
    text-align: center;
  }
  .cell.box .year{
font-weight: 800;
    font-size: 75.39px;
    line-height: 1;
    letter-spacing: -.5px;
    bottom: 10px;
    position: absolute;
    text-align: center;
    justify-content: center;
    justify-content: center;
    padding-left: 3%;
  }

  .bg-o1{ background:var(--mx-orange-dark); }
  .bg-o2{ background:var(--mx-orange-light); }
  .bg-b1{ background:var(--mx-blue); }

  /* badge (18 years) cell */
  .cell.badge{
    background:linear-gradient(160deg,#eef1f6,#dde3ec);
    align-items:center;
    text-align:center;
    padding:6%;
  }
  .cell.badge .num{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.7rem,7.5vw,3.1rem);
    color:var(--mx-navy);
    line-height:.85;
  }
  .cell.badge .eyebrow{
    font-size:clamp(.4rem,1.1vw,.5rem);
    letter-spacing:1.5px;
    font-weight:600;
    color:#333;
    margin-top:2px;
  }
  .cell.badge .main{
    font-size:clamp(.55rem,1.9vw,.85rem);
    font-weight:700;
    color:var(--mx-navy);
    margin-top:1px;
  }
  .cell.badge .script{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(.5rem,1.7vw,.78rem);
    color:var(--mx-navy);
    line-height:1.15;
    margin-top:1px;
  }

  /* explicit grid placement — mirrors the reference exactly */
  .g-2008   { grid-column:1; grid-row:1; }
  .p-person { grid-column:2; grid-row:1; }

  .g-2009   { grid-column:2; grid-row:2; }
  .p-hands  { grid-column:3; grid-row:2; }

  .g-2011   { grid-column:3; grid-row:3; }
  .p-payment{ grid-column:4; grid-row:3; }
  .g-2012   { grid-column:5; grid-row:3; }

  .g-2013   { grid-column:5; grid-row:4; }

  .p-world  { grid-column:2; grid-row:5; }
  .g-2015   { grid-column:3; grid-row:5; }
  .p-shake  { grid-column:4; grid-row:5; }
  .g-2014   { grid-column:5; grid-row:5; }

  .g-badge  { grid-column:1; grid-row:6; }
  .g-2020   { grid-column:2; grid-row:6; }

  .g-2026   { grid-column:1; grid-row:7; }

  /* ---------- mobile: collapse to a clean stacked list ---------- */
  @media (max-width:575.98px){
    .journey-head{ padding-left:0; text-align:left; }
    .journey-grid{
      display:flex;
      flex-direction:column;
      aspect-ratio:auto;
/*      gap:2px;*/
    }
    .journey-grid > *{ grid-column:auto !important; grid-row:auto !important; }
    .stack-pair{ display:grid; grid-template-columns:1fr 1fr; }
    .cell.photo{              min-height: 409px;}
    .cell.box{ min-height:110px; padding:20px; }
    .cell.badge{ min-height:130px; }
    .cell.box .year{ font-size:2.2rem; }
  }

  .cell.badge{
  background-size:cover;
  background-position:center;
  align-items:center;
  text-align:center;
  padding:6%;
  position:relative;
}

/* dark/light overlay so text stays legible over the photo */
.cell.badge::before{
  content:"";
  position:absolute;
  inset:0;

  z-index:0;
}

.cell.badge .num,
.cell.badge .eyebrow,
.cell.badge .main,
.cell.badge .script{
  position:relative;
  z-index:1;
}