/* =========================================================
   page.css — work index · about · case study
   ========================================================= */

.wrap { width: var(--rail); margin: 0 auto; }
.wrap--narrow { width: var(--rail-narrow); margin: 0 auto; }

.section { padding: clamp(56px, 8vw, 120px) var(--gut); }
.section--tight { padding-top: clamp(30px, 4vw, 56px); }

/* ---------- page head ---------- */

.phead {
  position: relative;
  padding: clamp(120px, 17vh, 200px) var(--gut) clamp(40px, 6vw, 76px);
  overflow: hidden;
}
.phead__inner { width: var(--rail); margin: 0 auto; position: relative; z-index: 2; }
.phead h1 { margin: .16em 0 .3em; }
.phead .lede { max-width: 52ch; opacity: .8; }
.phead__doodle {
  position: absolute;
  right: 3vw;
  top: 22%;
  width: clamp(120px, 16vw, 240px);
  color: var(--blue);
  opacity: .35;
  z-index: 1;
  animation: drift 9s var(--e-soft) infinite;
}

/* ---------- work grid ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 46px);
}
.filters__label { margin-right: 8px; color: var(--blue); }
.chip {
  padding: .48em 1.05em;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: -.006em;
  color: var(--navy);
  background: transparent;
  border: 1.6px solid rgba(18, 41, 93, .22);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--e-out);
}
.chip:hover { border-color: var(--navy); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--paper); border-color: var(--navy); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: clamp(34px, 4.5vw, 60px) clamp(24px, 3vw, 44px);
}

.tile { position: relative; display: block; }
.tile[hidden] { display: none; }

.tile__frame {
  position: relative;
  border: 1px solid rgba(18, 41, 93, .12);
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-tint);
  transition: box-shadow .45s var(--e-out), transform .45s var(--e-out), border-color .45s;
}
.tile:hover .tile__frame,
.tile:focus-visible .tile__frame {
  transform: translateY(-6px);
  border-color: rgba(18, 41, 93, .2);
  box-shadow: 0 22px 44px -20px rgba(18, 41, 93, .38);
}

.tile__shot { aspect-ratio: 16 / 11; overflow: hidden; display: block; }
.tile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .9s var(--e-out); }
.tile:hover .tile__shot img { transform: scale(1.035); }

/* a project whose cover is drawn in markup rather than exported.
   The frame keeps the grid's aspect ratio and the screen inside is
   scaled to fit, so a mock cover sits at the same size as a photo. */
.tile__shot--mock {
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6% 8%;
  background: linear-gradient(160deg, #EAF3FF, #DCE9FB);
  container-type: inline-size;
}
.tile__shot--mock > * {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: .8em;
  box-shadow: 0 14px 30px -14px rgba(18, 41, 93, .4);
}

.tile__body { padding: 20px 2px 0; }
.tile__cat {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}
.tile__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: .18em 0 .3em;
}
.tile__line { font-size: .95rem; opacity: .74; line-height: 1.6; max-width: 46ch; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38em .78em;
  color: var(--blue);
  border: 1px solid rgba(63, 111, 151, .3);
  border-radius: 100px;
}

.empty {
  padding: 60px 0;
  text-align: center;
  color: var(--blue);
}
.empty .doodle { width: 120px; margin: 0 auto 14px; }

/* ---------- about page ---------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 820px) { .about-hero { grid-template-columns: 1fr; } }

.about-hero__photo { position: relative; }
.about-hero__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 55%;
  border-radius: 20px;
  border: 1px solid rgba(18, 41, 93, .16);
}

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 22px 30px;
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 620px;
}
.spec .wide { grid-column: 1 / -1; }
.spec div strong {
  display: block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--navy);
  line-height: 1.36;
}
.spec div span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .8;
}

.klutz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.klutz__card {
  position: relative;
  padding: 30px 26px 28px;
  border: 2.2px solid var(--navy);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--paper);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.klutz__card:nth-child(even) { border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px; }
.klutz__card:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: 7px 9px 0 var(--blue); }
.klutz__card .doodle { width: 52px; color: var(--accent); margin-bottom: 14px; }
.klutz__card h3 { font-size: 1.16rem; margin-bottom: .38em; }
.klutz__card p { font-size: .93rem; opacity: .78; line-height: 1.6; }

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 8px, transparent 8px 16px);
  opacity: .4;
}
.timeline li { position: relative; padding-bottom: 30px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -32px; top: 7px;
  width: 15px; height: 15px;
  background: var(--paper);
  border: 2.6px solid var(--accent);
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
}
.timeline h3 { font-size: 1.14rem; margin-bottom: .2em; }
.timeline .label { display: block; margin-bottom: .42em; }
.timeline p { font-size: .95rem; opacity: .78; max-width: 60ch; }

/* ---------- case study ---------- */

.cs-back {
  position: fixed;
  left: var(--gut);
  bottom: 22px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .62em 1.1em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .86rem;
  color: var(--paper);
  background: var(--navy);
  border-radius: 100px;
  box-shadow: 0 8px 22px -10px rgba(18, 41, 93, .7);
  transition: transform .3s var(--e-out), box-shadow .3s, opacity .3s;
}
.cs-back:hover { transform: translateY(-3px); }
/* stands down once you reach the footer, which has its own way out */
.cs-back.is-away { opacity: 0; pointer-events: none; transform: translateY(12px); }

.cs-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 70;
  background: transparent;
}
.cs-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.cs-hero {
  position: relative;
  padding: clamp(130px, 20vh, 230px) var(--gut) clamp(46px, 6vw, 80px);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}
.cs-hero__inner { width: var(--rail); margin: 0 auto; position: relative; z-index: 2; }
.cs-hero h1 { margin: .2em 0 .26em; }
.cs-hero .lede { max-width: 46ch; color: rgba(252, 250, 245, .78); }

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px 28px;
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(214, 241, 255, .22);
}
.meta div strong {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(.94rem, 1.1vw, 1.04rem);
  color: var(--sky);
  line-height: 1.42;
  margin-top: 6px;
}

/* the cover straddles the navy hero and the paper body */
.cs-cover {
  background: linear-gradient(var(--navy) 0 130px, var(--paper) 130px);
  padding: 0 var(--gut);
}
.cs-cover figure { width: var(--rail); margin: 0 auto; }
.shot--cover img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; }

.cs-cover--mobile { background: linear-gradient(var(--navy) 0 210px, var(--paper) 210px); }
.cs-cover--mobile figure { display: flex; justify-content: center; }
.cs-cover--mobile .phone__frame { width: min(310px, 64vw); }

/* image frames — quiet, so the work is the loud thing */
.shot {
  position: relative;
  border: 1px solid rgba(18, 41, 93, .14);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-tint);
  box-shadow: 0 24px 50px -30px rgba(18, 41, 93, .5);
}
.shot img { width: 100%; display: block; }

.shot--browser { padding-top: 30px; background: var(--paper); }
.shot--browser::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 30px;
  border-bottom: 1px solid rgba(18, 41, 93, .12);
  background: #F1EFE9;
}
.shot--browser::after {
  content: "";
  position: absolute;
  top: 11px; left: 13px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E0DDD4;
  box-shadow: 14px 0 0 #E0DDD4, 28px 0 0 #E0DDD4;
}

/* long screenshots get their own little scroll window */
.shot--long { max-height: min(78vh, 760px); overflow-y: auto; scrollbar-width: thin; }
.shot--long img { border-radius: 0; }
.shot--scrollhint {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .34em .82em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--paper);
  background: rgba(18, 41, 93, .82);
  border-radius: 100px;
  pointer-events: none;
  transition: opacity .3s;
}

figure { position: relative; }
figcaption {
  margin-top: 14px;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--blue);
  max-width: 62ch;
}

.cs-body { padding: clamp(56px, 8vw, 110px) var(--gut) 0; }
.cs-block { width: var(--rail); margin: 0 auto clamp(56px, 8vw, 110px); }
.cs-block--text { width: var(--rail-narrow); }
.cs-block h2 { margin-bottom: .58em; }

.cs-note {
  max-width: 62ch;
  margin: -.2em 0 2.2em;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .68;
}

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.phones {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  overflow-x: auto;
  padding: 8px 4px 20px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.phone { flex: 0 0 auto; width: clamp(170px, 19vw, 232px); scroll-snap-align: center; }
.phone__frame {
  border: 2.6px solid var(--navy);
  border-radius: 26px;
  overflow: hidden;
  background: var(--navy);
  padding: 7px;
  transition: transform .4s var(--e-out);
}
.phone:hover .phone__frame { transform: translateY(-8px); }
.phone__frame img { border-radius: 19px; width: 100%; display: block; }
.phone figcaption { font-size: .84rem; text-align: center; margin-inline: auto; }

.phones .phone__frame { max-height: min(58vh, 540px); overflow-y: auto; scrollbar-width: none; }
.phones .phone__frame::-webkit-scrollbar { display: none; }
.phone.is-scrollable { position: relative; }
.phone.is-scrollable::after {
  content: "scroll ↕";
  position: absolute;
  left: 50%; bottom: 44px;
  transform: translateX(-50%);
  padding: .24em .72em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .7rem;
  color: var(--paper);
  background: rgba(18, 41, 93, .8);
  border-radius: 100px;
  pointer-events: none;
  transition: opacity .3s;
}
.phone.is-scrollable.is-read::after { opacity: 0; }

.cs-cover--mobile .phone__frame img { aspect-ratio: 9 / 16; object-fit: cover; object-position: center top; }

.points { margin-top: .4em; }
.points li {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  line-height: 1.62;
}
.points li + li { border-top: 1px solid rgba(63, 111, 151, .18); }
/* a short rule stands in for the bullet */
.points li::before {
  content: "";
  flex: 0 0 16px;
  height: 1.5px;
  margin-top: .85em;
  background: var(--accent);
}

.pull {
  width: var(--rail-narrow);
  margin: 0 auto clamp(56px, 8vw, 110px);
  padding: clamp(30px, 4vw, 50px) 0;
  border-top: 1px solid rgba(63, 111, 151, .26);
  border-bottom: 1px solid rgba(63, 111, 151, .26);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.26;
  letter-spacing: -.018em;
  color: var(--navy);
  text-wrap: balance;
}

.rolebox {
  position: relative;
  padding: clamp(26px, 3.6vw, 40px) clamp(24px, 3.4vw, 38px);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--paper-warm);
}
.rolebox .label { display: block; margin-bottom: .7em; }
.rolebox p {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -.014em;
}

/* ---------- outcome numbers ---------- */

.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3.4vw, 48px);
  padding: clamp(28px, 4vw, 46px) 0;
  border-top: 1px solid rgba(63, 111, 151, .26);
  border-bottom: 1px solid rgba(63, 111, 151, .26);
}
.statband strong {
  display: block;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--navy);
}
.statband span {
  display: block;
  margin-top: .6em;
  font-size: .88rem;
  line-height: 1.5;
  opacity: .7;
}

/* ---------- decisions grid ---------- */

.splitgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: rgba(63, 111, 151, .22);
  border: 1px solid rgba(63, 111, 151, .22);
  border-radius: 12px;
  overflow: hidden;
}
.splitgrid__cell { padding: clamp(22px, 2.8vw, 32px); background: var(--paper); }
.splitgrid__cell h3 { font-size: 1.04rem; margin-bottom: .5em; }
.splitgrid__cell p { font-size: .93rem; line-height: 1.62; opacity: .78; }

/* ---------- journey map ---------- */

.journey { position: relative; }
.journey__rail {
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(63,111,151,.45) 0 7px, transparent 7px 14px);
}
.journey__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
  gap: clamp(20px, 2.1vw, 30px);
}
.journey__stage { position: relative; padding-top: 34px; }

/* keep "Thinking" and "Design response" on the same line across every
   column, however long the copy above them runs */
@supports (grid-template-rows: subgrid) {
  /* five in-flow children per stage: number, heading, doing, feeling, response
     (the dot is absolutely positioned and takes no track) */
  .journey__row { grid-template-rows: repeat(5, auto); }
  .journey__stage { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
}
.journey__dot {
  position: absolute;
  top: 3px; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.4px solid var(--accent);
}
.journey__n {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--blue);
  opacity: .75;
  margin-bottom: .5em;
}
.journey__stage h3 { font-size: 1.06rem; margin-bottom: .55em; }
.journey__stage p { font-size: .89rem; line-height: 1.6; }
.journey__doing { opacity: .78; margin-bottom: 1em; }
.journey__feel,
.journey__move {
  padding-top: .85em;
  border-top: 1px solid rgba(63, 111, 151, .18);
  margin-bottom: .9em;
}
.journey__feel { font-style: italic; opacity: .78; }
.journey__move { color: var(--navy); }
.journey__feel .label,
.journey__move .label { display: block; margin-bottom: .45em; font-style: normal; }

/* ---------- state flow ---------- */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.flow__step {
  flex: 1 1 150px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(63, 111, 151, .3);
  border-radius: 12px;
  background: var(--paper);
}
.flow__step.is-optional { border-style: dashed; background: transparent; }
.flow__step strong { display: block; font-size: .98rem; font-weight: 600; margin-bottom: .35em; }
.flow__step span { font-size: .84rem; line-height: 1.5; opacity: .72; }
/* a plain connector between steps — the order is left to right already */
.flow__link {
  flex: 0 0 26px;
  align-self: center;
  height: 1.5px;
  background: var(--accent);
  opacity: .55;
}
@media (max-width: 700px) {
  .flow { flex-direction: column; }
  .flow__link { flex-basis: auto; width: 1.5px; height: 22px; margin: 0 auto; }
}

/* ---------- next project ---------- */

.nextup {
  position: relative;
  padding: clamp(60px, 9vw, 120px) var(--gut);
  background: var(--paper-warm);
  overflow: hidden;
}
.nextup__inner { width: var(--rail); margin: 0 auto; }
.nextup a { display: inline-block; }
.nextup__title {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  margin: .16em 0 .24em;
  transition: transform .5s var(--e-out);
}
.nextup a:hover .nextup__title { transform: translateX(16px); }
.nextup__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nextup__cat { font-size: .9rem; color: var(--blue); }
.nextup__cat { position: relative; padding-bottom: 3px; }
.nextup__cat::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--e-out);
}
.nextup a:hover .nextup__cat::after { transform: scaleX(1); }

/* =========================================================
   .mk — Disney Store screens, rebuilt in markup

   Sized in em against a container-relative root font-size, so a
   mock stays legible whether it is full width or half of a duo.
   ========================================================= */

.shot--mock,
.phone__frame--mock { container-type: inline-size; }
.shot--mock { background: #fff; }
.duo--mock { align-items: start; }

.mk {
  --d-blue: #1266DD;
  --d-blue-dk: #0B3B8C;
  --d-ink: #1B1B1B;
  --d-line: #E3E7EC;
  font-family: var(--f-body);
  font-size: clamp(7px, 2.05cqi, 14px);
  line-height: 1.5;
  color: var(--d-ink);
  background: #fff;
  letter-spacing: normal;
  text-align: center;
  padding: 2.6em 2.4em 2.4em;
  position: relative;
}

.mk-x {
  position: absolute;
  top: 1em; right: 1.2em;
  font-size: 1.6em;
  line-height: 1;
  color: #8A9099;
}

/* the wordmark, set rather than imaged */
.mk-dsw { display: inline-block; color: var(--d-blue-dk); white-space: nowrap; }
.mk-dsw em {
  font-family: var(--f-hand);
  font-style: normal;
  font-weight: 700;
  font-size: 1.9em;
  letter-spacing: -.02em;
  margin-right: .12em;
  vertical-align: -.08em;
}
.mk-dsw { font-size: 1.15em; font-weight: 400; }
.mk-logo { margin-bottom: 1.4em; }
.mk-logo--light .mk-dsw { color: #fff; }
.mk-logo--sm { margin: 0; }

.mk-h {
  font-family: var(--f-body);
  font-size: 1.65em;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.018em;
  margin-bottom: .5em;
}
.mk-h--sm { font-size: 1.3em; }
.mk-h--light { color: #fff; }

.mk-p { font-size: 1em; line-height: 1.55; color: #3D444D; margin-bottom: .9em; }
.mk-p--sm { font-size: .95em; }
.mk-p--light { color: rgba(255, 255, 255, .92); }

.mk-note { font-size: .82em; color: #6B727B; line-height: 1.5; margin-top: 1.1em; }
.mk-note u, .mk-p u { text-underline-offset: .18em; }

.mk-link { display: inline-block; color: var(--d-blue); text-decoration: underline; text-underline-offset: .2em; font-size: .95em; }
.mk-link--quiet { display: block; margin-top: 1.1em; text-decoration: none; font-weight: 500; }

.mk-btn {
  display: block;
  width: fit-content;
  margin: 1.5em auto 0;
  padding: .82em 1.9em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  color: #fff;
  background: var(--d-blue);
  border: 0;
  border-radius: 100px;
}

/* Real dialogs are ~660px wide. Capping the content in em keeps that
   proportion whether the mock is full-bleed or half of a duo. */
.mk-modal { max-width: 46em; margin-inline: auto; border-radius: 1em; }
.mk-modal--sm { max-width: 38em; padding-inline: 3.2em; }
.mk-picker .mk-card { max-width: 46em; margin-inline: auto; }
.mk-picker > .mk-logo { max-width: 46em; margin-inline: auto; }

.mk-band {
  margin: 0 0 1.4em;
  padding: 2em 1.8em 1.8em;
  border-radius: .7em;
  background: linear-gradient(105deg, #0F9BF0, #1148CC);
}
.mk-band .mk-logo { margin-bottom: 1em; }
.mk-band .mk-p { margin-bottom: 0; }

.mk-panel {
  padding: 1.4em 1.4em 1.2em;
  border-radius: .7em;
  background: #EDF4FB;
}
.mk-panel .mk-p { margin-bottom: 0; }

/* two ears and a sparkle — the shape, not the character */
.mk-ears {
  display: block;
  width: 1.7em; height: 1.2em;
  margin: 0 auto .7em;
  background:
    radial-gradient(circle at 16% 22%, var(--d-blue-dk) 0 .32em, transparent .33em),
    radial-gradient(circle at 84% 22%, var(--d-blue-dk) 0 .32em, transparent .33em),
    radial-gradient(circle at 50% 72%, var(--d-blue-dk) 0 .46em, transparent .47em);
}

.mk-hero-art {
  height: 6.4em;
  margin-bottom: 1.3em;
  border-radius: .6em;
  background: linear-gradient(105deg, #7FC5F5, #2E6FE0);
}
.mk-hero-art--grey { background: linear-gradient(105deg, #D8DEE6, #AFB9C6); }

/* --- the personalisation picker --- */

.mk-picker { padding-bottom: 2.8em; }
.mk-card {
  padding: 1.8em 1.6em 1.6em;
  border: 1px solid #CFE2FA;
  border-radius: .7em;
  background: #EAF3FE;
}
.mk-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9em;
  margin: 1.4em 0 .4em;
}
.mk-tile { display: block; }
.mk-thumb {
  display: block;
  aspect-ratio: 5 / 4;
  border-radius: .35em;
  background: linear-gradient(150deg, #C9D6E6, #8FA3BC);
}
.mk-thumb--1 { background: linear-gradient(150deg, #B9BEC6, #61666E); }
.mk-thumb--2 { background: linear-gradient(150deg, #7FC9E8, #2F7FA8); }
.mk-thumb--3 { background: linear-gradient(150deg, #E7A8C4, #9C4E86); }
.mk-thumb--4 { background: linear-gradient(150deg, #7FB2E8, #2C4C86); }
.mk-thumb--5 { background: linear-gradient(150deg, #4A5B78, #10161F); }
.mk-thumb--6 { background: linear-gradient(150deg, #F0C98A, #B87C2E); }
.mk-pill {
  display: block;
  margin-top: .55em;
  padding: .45em .3em;
  font-size: .82em;
  color: var(--d-blue);
  background: #fff;
  border: 1px solid #B9D4F5;
  border-radius: 100px;
}
.mk-tile.is-on .mk-pill { background: var(--d-blue); border-color: var(--d-blue); color: #fff; }
.mk-tile.is-on .mk-thumb { outline: .18em solid var(--d-blue); outline-offset: .14em; }

/* --- my account --- */

.mk-acct { padding: 0; text-align: left; }
.mk-topbar {
  padding: .7em 1em;
  font-size: .82em;
  text-align: center;
  color: #fff;
  background: var(--d-blue);
}
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .9em 1.4em;
  border-bottom: 1px solid var(--d-line);
}
.mk-nav__links { font-size: .8em; color: #4A525C; }
.mk-acct__body { display: grid; grid-template-columns: 15em 1fr; gap: 1.4em; padding: 1.4em; }
.mk-side__me { display: flex; align-items: center; gap: .7em; font-size: .85em; margin-bottom: 1.1em; }
.mk-side__me small { color: #6B727B; }
.mk-avatar { width: 2.4em; height: 2.4em; border-radius: 50%; background: #D7DEE7; flex: none; }
.mk-side__nav { font-size: .88em; }
.mk-side__nav li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  padding: .68em .8em;
  border-radius: .4em;
  color: #3D444D;
}
.mk-side__nav li.is-on { background: #EAF3FE; color: var(--d-blue-dk); font-weight: 600; }
.mk-badge {
  font-size: .78em;
  padding: .16em .6em;
  border-radius: 100px;
  background: var(--d-blue);
  color: #fff;
  font-weight: 500;
}
.mk-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.2em;
  font-size: .88em;
  border: 1px solid var(--d-line);
  border-radius: .5em;
  margin-bottom: 1em;
}
.mk-strip small { color: #6B727B; }
.mk-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.mk-perk {
  padding: 1em;
  font-size: .85em;
  border: 1px solid var(--d-line);
  border-radius: .5em;
}
.mk-perk b { display: block; margin-bottom: .25em; }
.mk-perk small { color: #6B727B; }
.mk-leave { margin-top: 1.4em; color: #6B727B; text-decoration: underline; }

@container (max-width: 380px) {
  .mk-tiles { grid-template-columns: repeat(2, 1fr); }
  .mk-acct__body { grid-template-columns: 1fr; }
  .mk-perks { grid-template-columns: 1fr; }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .shot--long { max-height: 60vh; }
  .phone { width: 62vw; }
  .cs-back { bottom: 14px; }
  .journey__rail { display: none; }
}