/* Initial Tru Way design. Keep page rules here until the redesign sheets are merged. */
.tru-way-page .container {
  margin-inline: auto;
  max-width: var(--max-width);
  padding-inline: 1rem;
  width: 100%;
}
@media (min-width: 640px) { .tru-way-page .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .tru-way-page .container { padding-inline: 2rem; } }

.tru-way-page .crumbs { border-bottom: 1px solid rgba(255,255,255,0.05); }
.tru-way-page .crumbs__inner { padding-block: 12px; }

.tru-way-page .crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 0.5rem; row-gap: 0.25rem;
  list-style: none; margin: 0; padding: 0; font-size: 12px;
}
.tru-way-page .crumbs__list li { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.tru-way-page .crumbs__list a { color: #fff; transition: color 0.2s; }
.tru-way-page .crumbs__list a:hover { color: var(--tru-pink); }

.tru-way-page .crumbs__list .current { color: #fff; font-weight: 700; }
.tru-way-page .crumbs__sep { color: #6b7280; }

.tru-way-page .ess-hero { position: relative; height: 75vh; min-height: 540px; display: flex; align-items: center; overflow: hidden; }
.tru-way-page .ess-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tru-way-page .ess-hero__grad { position: absolute; inset: 0; background: linear-gradient(to right, rgba(9,33,62,0.4), rgba(9,33,62,0.6) 50%, rgba(9,33,62,0.95)); }

.tru-way-page .ess-hero__inner { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; }
.tru-way-page .ess-hero__text { max-width: 36rem; text-align: right; }
.tru-way-page .ess-hero__eyebrow { color: var(--tru-pink); font-family: 'Montserrat', sans-serif; font-size: 0.75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin: 0 0 1.25rem; }
.tru-way-page .ess-hero__title { font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 900; text-transform: uppercase; color: #fff; line-height: 0.95; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .tru-way-page .ess-hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .tru-way-page .ess-hero__title { font-size: 4.5rem; } }
.tru-way-page .ess-hero__title span { color: var(--tru-pink); }
.tru-way-page .ess-hero__rule { margin: 0 0 1.5rem auto; height: 1px; width: 4rem; background: var(--tru-pink); }
.tru-way-page .ess-hero__quote { color: #e5e7eb; font-size: 1rem; font-style: italic; font-weight: 300; line-height: 1.625; max-width: 28rem; margin: 0 0 0 auto; }
@media (min-width: 640px) { .tru-way-page .ess-hero__quote { font-size: 1.125rem; } }

.tru-way-page .ess-wm { position: absolute; pointer-events: none; user-select: none; filter: brightness(0) invert(1); }

.tru-way-page .ess-eyebrow { color: var(--tru-pink); font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 0.75rem; }
.tru-way-page .ess-h2 { font-family: 'Montserrat', sans-serif; font-size: 1.875rem; font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 1rem; }
@media (min-width: 640px) { .tru-way-page .ess-h2 { font-size: 2.25rem; } }
.tru-way-page .ess-h2 span { color: var(--tru-pink); }

.tru-way-page .tw-sec { position: relative; overflow: hidden; }
.tru-way-page .tw-sec--first { padding: 4rem 0 5rem; }
.tru-way-page .tw-sec--next { padding: 0 0 5rem; }
.tru-way-page .tw-sec--last { padding: 0 0 6rem; }

.tru-way-page .tw-head { margin-bottom: 3rem; }
@media (min-width: 640px) { .tru-way-page .tw-head { margin-bottom: 4rem; } }

.tru-way-page .tw-head .ess-h2 { font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 640px) { .tru-way-page .tw-head .ess-h2 { font-size: 3rem; } }
.tru-way-page .tw-intro { color: #9ca3af; max-width: 42rem; margin: 1rem 0 0; font-size: 1rem; line-height: 1.625; }
.tru-way-page .tw-intro > :first-child { margin-top: 0; }
.tru-way-page .tw-intro > :last-child { margin-bottom: 0; }
@media (min-width: 640px) { .tru-way-page .tw-intro { font-size: 1.125rem; } }

.tru-way-page .tw-rows { display: grid; gap: 4rem; }
@media (min-width: 640px) { .tru-way-page .tw-rows { gap: 6rem; } }


.tru-way-page .tw-row { --a: #FF3F99; --a-soft: rgba(255,63,153,0.13); --a-line: rgba(255,63,153,0.4); --a-tick: rgba(255,63,153,0.15);
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.tru-way-page .tw-row--tint { border: 1px solid; border-radius: 16px; padding: 1.25rem; }
@media (min-width: 640px) { .tru-way-page .tw-row--tint { padding: 2rem; } }
@media (min-width: 1024px) {
  .tru-way-page .tw-row { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; row-gap: 1rem; align-items: center; }
  .tru-way-page .tw-row--tint { padding: 2.5rem; }
  .tru-way-page .tw-row__title { grid-column: 2; grid-row: 1; align-self: end; }
  .tru-way-page .tw-row__gal { grid-column: 1; grid-row: 1 / span 2; }
  .tru-way-page .tw-row__body { grid-column: 2; grid-row: 2; align-self: start; }
  .tru-way-page .tw-row--alt .tw-row__title { grid-column: 1; }
  .tru-way-page .tw-row--alt .tw-row__gal { grid-column: 2; }
  .tru-way-page .tw-row--alt .tw-row__body { grid-column: 1; }
  .tru-way-page .tw-row--no-gallery { grid-template-columns: 1fr; }
  .tru-way-page .tw-row--no-gallery .tw-row__title,
  .tru-way-page .tw-row--no-gallery .tw-row__body { grid-column: 1; }
}

.tru-way-page .tw-row__icon { margin-bottom: 1rem; height: 3.5rem; width: 3.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--a-soft); border: 1px solid var(--a-line); }
.tru-way-page .tw-row__icon svg { height: 1.75rem; width: 1.75rem; color: var(--a); }

.tru-way-page .tw-row__icon-bare { margin-bottom: 1rem; }
.tru-way-page .tw-row__icon-bare img { height: 4rem; width: 4rem; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }

.tru-way-page .tw-row__eyebrow { color: var(--a); font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin: 0 0 0.75rem; }
.tru-way-page .tw-row__eyebrow--exp { color: inherit; font-size: inherit; letter-spacing: normal; margin: 0 0 0.5rem; }
.tru-way-page .tw-exp-name { display: block; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em; line-height: 1; color: #fff; }
@media (min-width: 640px) { .tru-way-page .tw-exp-name { font-size: 1.875rem; } }
.tru-way-page .tw-exp-sub { display: block; margin-top: 0.375rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--tru-pink); }

.tru-way-page .tw-row__h3 { font-family: 'Montserrat', sans-serif; font-size: 1.875rem; font-weight: 900; color: #fff; text-transform: uppercase; line-height: 1.05; margin: 0; }
@media (min-width: 640px) { .tru-way-page .tw-row__h3 { font-size: 2.25rem; } }

.tru-way-page .tw-row__p { color: #d1d5db; font-size: 0.875rem; line-height: 1.625; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .tru-way-page .tw-row__p { font-size: 1rem; } }
.tru-way-page .tw-row__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.tru-way-page .tw-row__list li { display: flex; align-items: flex-start; gap: 0.75rem; color: #d1d5db; font-size: 0.875rem; }
.tru-way-page .tw-row__tick { margin-top: 0.25rem; height: 1rem; width: 1rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--a-tick); }
.tru-way-page .tw-row__tick svg { height: 0.625rem; width: 0.625rem; color: var(--a); }


.tru-way-page .tw-gal { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-soft); }
.tru-way-page .tw-gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tru-way-page .tw-gal__slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; }
.tru-way-page .tw-gal__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tru-way-page .tw-gal__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1) 50%, transparent); }
.tru-way-page .tw-gal__cap { position: absolute; bottom: 2.25rem; left: 1.25rem; right: 1.25rem; margin: 0; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
@media (min-width: 640px) { .tru-way-page .tw-gal__cap { font-size: 1rem; } }
.tru-way-page .tw-gal__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 27px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.tru-way-page .tw-gal__arrow svg { width: 26px; height: 26px; }
.tru-way-page .tw-gal__arrow--prev { left: 10px; }
.tru-way-page .tw-gal__arrow--next { right: 10px; }
.tru-way-page .tw-gal__dots { position: absolute; bottom: 0.75rem; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 0.5rem; }
.tru-way-page .tw-gal__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #fff; opacity: 0.4; cursor: pointer; }
.tru-way-page .tw-gal__dot.is-on { background: var(--tru-pink); opacity: 1; }


.tru-way-page .tw-ico-grid { list-style: none; margin: 0 0 3.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .tru-way-page .tw-ico-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .tru-way-page .tw-ico-grid { grid-template-columns: repeat(5, 1fr); } }
.tru-way-page .tw-ico { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); padding: 1.25rem 0.75rem; }
.tru-way-page .tw-ico img { height: 3rem; width: 3rem; object-fit: contain; margin-bottom: 0.75rem; }
.tru-way-page .tw-ico p { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; color: #fff; }

.tru-way-page .tw-promise { border-radius: 16px; border: 1px solid var(--border-soft); overflow: hidden; background: linear-gradient(to bottom right, var(--tru-navy), var(--tru-navy) 50%, rgba(255,63,153,0.04)); }
.tru-way-page .tw-promise__in { padding: 1.5rem; }
@media (min-width: 640px) { .tru-way-page .tw-promise__in { padding: 2.5rem; } }
.tru-way-page .tw-promise__head { text-align: center; margin-bottom: 2.5rem; }
.tru-way-page .tw-promise__badge { margin: 0 auto 1rem; height: 3.5rem; width: 3.5rem; border-radius: 999px; background: rgba(255,63,153,0.15); border: 1px solid rgba(255,63,153,0.3); display: flex; align-items: center; justify-content: center; }
.tru-way-page .tw-promise__badge svg { height: 1.75rem; width: 1.75rem; color: var(--tru-pink); }
.tru-way-page .tw-promise__h { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
@media (min-width: 640px) { .tru-way-page .tw-promise__h { font-size: 2.25rem; } }
.tru-way-page .tw-promise__h span { color: var(--tru-pink); }
.tru-way-page .tw-promise__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .tru-way-page .tw-promise__grid { gap: 1.5rem; } }
@media (min-width: 768px) { .tru-way-page .tw-promise__grid { grid-template-columns: repeat(3, 1fr); } }
.tru-way-page .tw-pcard { border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); padding: 1.5rem; text-align: center; transition: border-color 0.2s, background 0.2s; }
.tru-way-page .tw-pcard:hover { border-color: rgba(255,63,153,0.3); background: rgba(255,255,255,0.05); }
.tru-way-page .tw-pcard__ico { height: 3rem; width: 3rem; border-radius: 999px; background: rgba(255,63,153,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.tru-way-page .tw-pcard__ico svg { height: 1.5rem; width: 1.5rem; color: var(--tru-pink); }
.tru-way-page .tw-pcard__eyebrow { color: var(--tru-pink); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 0.5rem; }

.tru-way-page .tw-pcard__t { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; margin: 0 0 0.5rem; white-space: pre-line; }
@media (min-width: 640px) { .tru-way-page .tw-pcard__t { font-size: 1.125rem; } }
.tru-way-page .tw-pcard__p { color: #9ca3af; font-size: 0.75rem; line-height: 1.625; margin: 0; }

.tru-way-page .tw-cta { position: relative; max-width: 48rem; margin: 0 auto; padding: 0 1rem 6rem; text-align: center; }
@media (min-width: 640px) { .tru-way-page .tw-cta { padding-left: 1.5rem; padding-right: 1.5rem; } }
.tru-way-page .tw-cta__h { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .tru-way-page .tw-cta__h { font-size: 2.25rem; } }
.tru-way-page .tw-cta__h span { color: var(--tru-pink); }
.tru-way-page .tw-cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 10px; background: var(--tru-pink); color: #fff; padding: 0.75rem 1.5rem; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: background 0.2s; }
.tru-way-page .tw-cta__btn:hover { background: var(--tru-pink-light); }
.tru-way-page .tw-cta__btn svg { height: 1rem; width: 1rem; }

/* Keep stickers behind content and allow native touch scrolling in each gallery. */
.tru-way-page .tw-sec { isolation: isolate; }
.tru-way-page .tw-sec > .container { position: relative; z-index: 1; }
.tru-way-page .tw-row > * { min-width: 0; }
.tru-way-page .tw-gal__track::-webkit-scrollbar { display: none; }
.tru-way-page .tw-gal__slide { scroll-snap-align: start; }
.tru-way-page .tw-row__p > :first-child { margin-top: 0; }
.tru-way-page .tw-row__p > :last-child { margin-bottom: 0; }
.tru-way-page .tw-row--tint { background: var(--a-bg); border-color: var(--a-border); }
.tru-way-page .tw-gal:focus-visible,
.tru-way-page .tw-gal button:focus-visible,
.tru-way-page .tw-cta__btn:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.tru-way-page .tw-gal__dot { position: relative; }
.tru-way-page .tw-gal__dot::before { content: ''; display: block; position: absolute; width: 24px; height: 24px; transform: translate(-8px, -8px); }

.tru-way-page [data-experience-type="local_lens"] {
	--a: var(--tru-exp-colour-local_lens);
	--a-tick: var(--tru-exp-opacity-12-local_lens);
	--a-bg: var(--tru-exp-opacity-5-local_lens);
	--a-border: var(--tru-exp-semi-transparent-local_lens);
}

.tru-way-page [data-experience-type="rise_up"] {
	--a: var(--tru-exp-colour-rise_up);
	--a-tick: var(--tru-exp-opacity-12-rise_up);
	--a-bg: var(--tru-exp-opacity-5-rise_up);
	--a-border: var(--tru-exp-semi-transparent-rise_up);
}

.tru-way-page [data-experience-type="bucket_list"] {
	--a: var(--tru-exp-colour-bucket_list);
	--a-tick: var(--tru-exp-opacity-12-bucket_list);
	--a-bg: var(--tru-exp-opacity-5-bucket_list);
	--a-border: var(--tru-exp-semi-transparent-bucket_list);
}

.tru-way-page [data-experience-type="truly_unique"] {
	--a: var(--tru-exp-colour-truly_unique);
	--a-tick: var(--tru-exp-opacity-12-truly_unique);
	--a-bg: var(--tru-exp-opacity-5-truly_unique);
	--a-border: var(--tru-exp-semi-transparent-truly_unique);
}

.tru-way-page [data-experience-type="unplugged"] {
	--a: var(--tru-exp-colour-unplugged);
	--a-tick: var(--tru-exp-opacity-12-unplugged);
	--a-bg: var(--tru-exp-opacity-5-unplugged);
	--a-border: var(--tru-exp-semi-transparent-unplugged);
}
