/* =========================================================
   IslandTravelAtlas Homepage Reference Parity v2

   Calibrated against the approved 1536 x 1024 reference.
   ========================================================= */


body.ita-home-reference-v2 {
  --ref-navy: #07343b;
  --ref-navy-deep: #032f35;
  --ref-teal: #08756c;
  --ref-gold: #ca963c;
  --ref-paper: #f5f0e5;
  --ref-paper-2: #fbf8f1;
  --ref-ink: #0a3338;
  --ref-copy: #3d5359;
  --ref-muted: #708084;
  --ref-line: #d5ddd9;

  background: #fff;
  color: var(--ref-ink);
}


/* Remove legacy home-page geometry from main only. */

body.ita-home-reference-v2
#main-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


body.ita-home-reference-v2
.ita-ref-main {
  overflow: hidden;
  background: #fff;
}


body.ita-home-reference-v2
.ita-ref-main *,
body.ita-home-reference-v2
.ita-ref-main *::before,
body.ita-home-reference-v2
.ita-ref-main *::after {
  box-sizing: border-box;
}


/* Make existing header match the approved reference frame. */

body.ita-home-reference-v2
.pm-header {
  position: relative;
  z-index: 100;

  background: rgba(255,255,255,.99) !important;

  border-bottom:
    1px solid
    rgba(6,52,59,.08) !important;

  box-shadow: none !important;
}


body.ita-home-reference-v2
.pm-header-inner {
  min-height: 88px;
}


body.ita-home-reference-v2
.pm-brand-copy small {
  display: none !important;
}


body.ita-home-reference-v2
.pm-brand-copy strong {
  font-size: 1.05rem !important;
}


body.ita-home-reference-v2
.pm-header-cta {
  min-height: 52px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding:
    0 26px !important;

  border-radius:
    15px !important;

  background:
    #078475 !important;

  color: #fff !important;
}


/* =========================================================
   HERO
   Reference:
   header ~88px
   hero ~575px
   cream ~43%, ocean ~57%
   ========================================================= */

.ita-ref-hero {
  position: relative;

  height: 575px;

  display: grid;

  grid-template-columns:
    43% 57%;

  overflow: visible;

  background: var(--ref-paper);
}


/* parchment topographic field */

.ita-ref-hero::before {
  content: "";

  position: absolute;

  inset:
    0 57% 0 0;

  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 9% 10%,
      transparent 0 39px,
      rgba(18,78,73,.08) 40px,
      transparent 42px
    ),
    radial-gradient(
      circle at 9% 10%,
      transparent 0 65px,
      rgba(18,78,73,.045) 66px,
      transparent 68px
    ),
    repeating-radial-gradient(
      ellipse at 37% 43%,
      transparent 0 40px,
      rgba(18,78,73,.03) 41px,
      transparent 42px
    );

  opacity: .72;
}


.ita-ref-copy {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding:
    43px
    42px
    40px
    clamp(
      56px,
      9.05vw,
      139px
    );
}


.ita-ref-kicker {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 24px;

  color: var(--ref-teal);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: .15em;
}


.ita-ref-kicker i {
  width: 61px;
  height: 2px;

  background: var(--ref-gold);
}


.ita-ref-copy h1 {
  margin: 0;

  color: var(--ref-ink);

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    "Book Antiqua",
    Georgia,
    serif;

  font-size:
    clamp(
      58px,
      5.1vw,
      78px
    );

  font-weight: 500;

  line-height: .92;

  letter-spacing: -.055em;
}


.ita-ref-copy > p {
  margin:
    25px 0 0;

  color: #344c52;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 20px;

  line-height: 1.47;
}


/* =========================================================
   RIGHT MAP
   ========================================================= */

.ita-ref-map {
  position: relative;

  height: 575px;

  overflow: hidden;

  background:
    #76b3b8;
}


.ita-ref-water {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      ellipse at 70% 52%,
      rgba(255,255,255,.12) 0 15%,
      transparent 15.5%
    ),
    radial-gradient(
      ellipse at 61% 42%,
      rgba(255,255,255,.10),
      transparent 38%
    ),
    linear-gradient(
      130deg,
      #b8d9d9 0%,
      #8cc3c5 23%,
      #61a8ae 58%,
      #3e8f99 100%
    );
}


.ita-ref-water::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: .17;

  background-image:
    linear-gradient(
      rgba(255,255,255,.24) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.18) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


.ita-ref-water::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(245,240,229,.78) 0%,
      rgba(245,240,229,.18) 16%,
      transparent 35%
    );
}


.ita-ref-contours,
.ita-ref-routes {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.ita-ref-contours ellipse {
  fill: none;

  stroke:
    rgba(
      255,
      255,
      255,
      .23
    );

  stroke-width: 1.1;
}


.ita-ref-routes .route {
  fill: none;

  stroke-width: 3;

  stroke-linecap: round;

  stroke-dasharray:
    3 7;
}


.ita-ref-routes
.route.aruba {
  stroke: #0a4b50;
}


.ita-ref-routes
.route.barbados {
  stroke: var(--ref-gold);
}


.ita-ref-routes
.route.jamaica {
  stroke:
    rgba(
      255,
      255,
      255,
      .96
    );
}


.ita-ref-routes .node {
  fill: rgba(255,255,255,.94);

  stroke-width: 3;
}


.ita-ref-routes
.node.aruba {
  stroke: #075159;
}


.ita-ref-routes
.node.barbados {
  stroke: var(--ref-gold);
}


.ita-ref-routes
.node.jamaica {
  stroke: #fff;
}


/* origin */

.ita-ref-origin {
  position: absolute;

  z-index: 7;

  left: 8.8%;
  top: 36.2%;

  width: 59px;

  text-align: center;
}


.ita-ref-origin strong {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: var(--ref-navy);

  color: #fff;

  font-family:
    Arial,
    sans-serif;

  font-size: 16px;
}


.ita-ref-origin span {
  display: block;

  margin-top: 7px;

  color: var(--ref-navy);

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 800;
}


/* =========================================================
   ISLAND GRAPHICS
   ========================================================= */

.ita-ref-island {
  position: absolute;

  z-index: 5;

  background-image:
    url(
      "/assets/caribbean/caribbean-carriacou-island.webp"
    );

  background-size: cover;

  filter:
    saturate(.86)
    contrast(1.08)
    drop-shadow(
      0 8px 8px
      rgba(4,47,53,.27)
    );
}


.ita-ref-island::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      145deg,
      rgba(201,213,143,.08),
      rgba(17,82,63,.23)
    );

  clip-path: inherit;
}


.ita-ref-island-aruba {
  width: 74px;
  height: 57px;

  left: 56.2%;
  top: 25.5%;

  background-position:
    46% 43%;

  clip-path:
    polygon(
      13% 47%,
      26% 15%,
      47% 3%,
      69% 13%,
      92% 39%,
      81% 72%,
      56% 94%,
      30% 82%,
      6% 63%
    );

  transform:
    rotate(8deg);
}


.ita-ref-island-barbados {
  width: 104px;
  height: 82px;

  left: 67.2%;
  top: 42.6%;

  background-position:
    69% 45%;

  clip-path:
    polygon(
      36% 1%,
      62% 6%,
      84% 27%,
      95% 55%,
      75% 79%,
      49% 99%,
      24% 88%,
      6% 63%,
      12% 32%
    );

  transform:
    rotate(13deg);
}


.ita-ref-island-jamaica {
  width: 139px;
  height: 91px;

  left: 62.8%;
  top: 65.8%;

  background-image:
    url(
      "/assets/cinematic-coastal/hero-caribbean.webp"
    );

  background-position:
    center 54%;

  clip-path:
    polygon(
      1% 50%,
      11% 29%,
      31% 16%,
      48% 22%,
      62% 8%,
      78% 17%,
      96% 38%,
      89% 65%,
      70% 79%,
      51% 75%,
      34% 94%,
      15% 80%
    );

  transform:
    rotate(-3deg);
}


/* labels */

.ita-ref-map-label {
  position: absolute;

  z-index: 8;

  min-width: 84px;

  padding:
    10px 14px 8px;

  border-radius: 10px;

  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  box-shadow:
    0 5px 13px
    rgba(5,48,53,.1);

  font-family:
    Arial,
    sans-serif;
}


.ita-ref-map-label strong {
  display: block;

  color: #142b31;

  font-size: 14px;
  line-height: 1;
}


.ita-ref-map-label span {
  display: block;

  margin-top: 5px;

  color: #647579;

  font-size: 10px;
}


.ita-ref-map-label.aruba {
  left: 60.2%;
  top: 16.2%;
}


.ita-ref-map-label.barbados {
  left: 72.5%;
  top: 39.2%;
}


.ita-ref-map-label.jamaica {
  left: 79.1%;
  top: 61.3%;
}


/* =========================================================
   ROUTE LENS
   ========================================================= */

.ita-ref-route-lens {
  position: absolute;

  z-index: 9;

  top: 24px;
  right: 25px;

  width: 164px;
  height: 164px;
}


.ita-ref-route-lens svg {
  display: block;

  width: 100%;
  height: 100%;
}


.ita-ref-route-lens
.outer,
.ita-ref-route-lens
.inner {
  fill:
    rgba(
      255,
      255,
      255,
      .09
    );

  stroke: var(--ref-navy);

  stroke-width: 1.35;
}


.ita-ref-route-lens
.needle-a {
  fill: var(--ref-navy);
}


.ita-ref-route-lens
.needle-b {
  fill: #8ab1a9;
}


.ita-ref-route-lens text {
  fill: var(--ref-navy);

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}


/* =========================================================
   CONTEXT STRIP
   Reference approx x58 → x840
   ========================================================= */

.ita-ref-context {
  position: absolute;

  z-index: 30;

  left: 59px;
  bottom: -64px;

  width: 782px;
  max-width:
    calc(
      100% - 118px
    );

  min-height: 84px;

  display: grid;

  grid-template-columns:
    1.1fr
    1fr
    .9fr
    .9fr
    auto;

  align-items: center;

  gap: 0;

  padding:
    13px 16px;

  border-radius: 15px;

  background:
    linear-gradient(
      90deg,
      #05383e,
      #075851
    );

  box-shadow:
    0 15px 33px
    rgba(5,48,53,.24);
}


.ita-ref-context-item {
  min-width: 0;

  display: grid;

  grid-template-columns:
    27px 1fr;

  align-items: center;

  gap: 10px;

  padding:
    0 14px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      .13
    );
}


.ita-ref-context-item svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke: var(--ref-gold);

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.ita-ref-context-item span {
  display: block;

  color: #a6bdb9;

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .09em;
}


.ita-ref-context-item strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color: #fff;

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.ita-ref-context-action {
  min-height: 46px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-left: 12px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .43
    );

  border-radius: 8px;

  color: #fff;

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  text-decoration: none;
}


.ita-ref-context-action svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: #fff;

  stroke-width: 1.5;
}


/* =========================================================
   SCENIC SECTION
   Begins exactly under hero.
   ========================================================= */

.ita-ref-scene {
  position: relative;

  min-height: 480px;

  overflow: hidden;

  background:
    #275f63;
}


.ita-ref-scene-image {
  position: absolute;

  inset: 0;

  background-image:
    url(
      "/assets/cinematic-coastal/st-john-trunk-bay.webp"
    );

  background-size: cover;

  background-position:
    center 54%;

  filter:
    saturate(.9)
    brightness(.83)
    contrast(.98);
}


.ita-ref-scene-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,45,48,.03),
      rgba(5,45,48,.12) 34%,
      rgba(4,43,48,.33) 60%,
      rgba(3,42,47,.53) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,42,47,.01),
      rgba(3,42,47,.17)
    );
}


.ita-ref-scene-grid {
  position: relative;

  z-index: 5;

  width:
    calc(
      100% - 118px
    );

  max-width: 1420px;

  min-height: 480px;

  margin: auto;

  display: grid;

  grid-template-columns:
    42% 29% 29%;

  gap: 44px;

  align-items: center;

  padding:
    86px 0 28px;
}


/* Journey card */

.ita-ref-journey {
  align-self: start;

  min-height: 289px;

  padding:
    27px 30px 21px;

  overflow: hidden;

  border:
    1px solid
    rgba(6,70,65,.14);

  border-radius: 16px;

  background:
    rgba(
      250,
      247,
      239,
      .96
    );

  box-shadow:
    0 17px 38px
    rgba(4,43,48,.17);
}


.ita-ref-journey-kicker {
  display: block;

  color: var(--ref-teal);

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .12em;
}


.ita-ref-journey-svg {
  width: 100%;

  margin-top: 8px;
}


.ita-ref-journey-svg
.rings circle {
  fill: none;

  stroke:
    rgba(
      8,
      85,
      76,
      .08
    );

  stroke-width: 1;
}


.ita-ref-journey-svg
.jroute {
  fill: none;

  stroke-width: 2.5;

  stroke-linecap: round;
}


.ita-ref-journey-svg
.jroute.aruba {
  stroke: #075a53;
}


.ita-ref-journey-svg
.jroute.barbados {
  stroke: var(--ref-gold);
}


.ita-ref-journey-svg
.jroute.jamaica {
  stroke: #adb4b0;
}


.ita-ref-journey-svg
.jorigin,
.ita-ref-journey-svg
.jend {
  fill: #fff;

  stroke-width: 3;
}


.ita-ref-journey-svg
.jorigin,
.ita-ref-journey-svg
.jend.aruba {
  stroke: #075a53;
}


.ita-ref-journey-svg
.jend.barbados {
  stroke: var(--ref-gold);
}


.ita-ref-journey-svg
.jend.jamaica {
  stroke: #adb4b0;
}


.ita-ref-journey-svg
.plane path {
  fill: none;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.ita-ref-journey-svg
.plane.aruba path {
  stroke: #075a53;
}


.ita-ref-journey-svg
.plane.barbados path {
  stroke: var(--ref-gold);
}


.ita-ref-journey-svg
.plane.jamaica path {
  stroke: #9fa7a3;
}


.ita-ref-journey-svg
text.main {
  fill: #172e32;

  font-family:
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 800;
}


.ita-ref-journey-svg
text.sub {
  fill: #708084;

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 600;
}


/* centre editorial text */

.ita-ref-scene-copy {
  align-self: center;

  max-width: 330px;

  padding-top: 12px;
}


.ita-ref-scene-copy > i {
  display: block;

  width: 61px;
  height: 2px;

  margin-bottom: 17px;

  background: var(--ref-gold);
}


.ita-ref-scene-copy h2 {
  margin: 0;

  color: #fff;

  font-family:
    Georgia,
    serif;

  font-size:
    30px;

  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -.025em;

  text-transform: uppercase;
}


.ita-ref-scene-copy p {
  max-width: 290px;

  margin:
    17px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      .91
    );

  font-family:
    Arial,
    sans-serif;

  font-size: 16px;

  line-height: 1.58;
}


/* right stack */

.ita-ref-scene-actions {
  align-self: center;

  display: grid;

  gap: 26px;
}


.ita-ref-independent {
  display: grid;

  grid-template-columns:
    58px 1fr;

  align-items: center;

  gap: 17px;

  min-height: 132px;

  padding: 22px 25px;

  border-radius: 14px;

  background:
    rgba(
      4,
      52,
      57,
      .94
    );

  box-shadow:
    0 17px 36px
    rgba(3,39,44,.25);
}


.ita-ref-fingerprint svg {
  width: 52px;
  height: 52px;

  fill: none;

  stroke: var(--ref-gold);

  stroke-width: 1.75;

  stroke-linecap: round;
}


.ita-ref-independent strong {
  display: block;

  color: #fff;

  font-family:
    Arial,
    sans-serif;

  font-size: 15px;

  line-height: 1.5;
}


.ita-ref-independent a {
  display: inline-block;

  margin-top: 12px;

  color: var(--ref-gold);

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  text-decoration: none;
}


.ita-ref-build {
  min-height: 59px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    0 20px;

  border-radius: 12px;

  background:
    rgba(
      4,
      52,
      57,
      .97
    );

  color: #fff;

  box-shadow:
    0 14px 32px
    rgba(3,39,44,.22);

  font-family:
    Arial,
    sans-serif;

  text-decoration: none;
}


.ita-ref-build span {
  font-size: 16px;
  font-weight: 600;
}


.ita-ref-build strong {
  font-size: 22px;
  font-weight: 300;
}


/* =========================================================
   BELOW FOLD
   ========================================================= */

.ita-ref-below {
  padding:
    86px 28px;

  background: #fff;
}


.ita-ref-below-shell,
.ita-ref-atlas-shell {
  width:
    min(
      1180px,
      100%
    );

  margin: auto;
}


.ita-ref-below-kicker {
  display: block;

  margin-bottom: 10px;

  color: var(--ref-teal);

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .14em;
}


.ita-ref-below h2,
.ita-ref-atlas h2 {
  margin: 0;

  color: var(--ref-ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      36px,
      4vw,
      52px
    );

  font-weight: 500;

  letter-spacing: -.035em;
}


.ita-ref-lens-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  margin-top: 39px;

  border:
    1px solid
    var(--ref-line);

  border-radius: 16px;

  overflow: hidden;
}


.ita-ref-lens-grid a {
  min-height: 210px;

  padding: 27px;

  color: inherit;

  text-decoration: none;
}


.ita-ref-lens-grid
a + a {
  border-left:
    1px solid
    var(--ref-line);
}


.ita-ref-lens-grid span {
  color: var(--ref-gold);

  font-family:
    Georgia,
    serif;

  font-size: 13px;
}


.ita-ref-lens-grid strong {
  display: block;

  margin-top: 22px;

  color: var(--ref-ink);

  font-family:
    Georgia,
    serif;

  font-size: 24px;

  font-weight: 500;
}


.ita-ref-lens-grid p {
  max-width: 210px;

  margin:
    11px 0 0;

  color: var(--ref-muted);

  font-family:
    Arial,
    sans-serif;

  font-size: 13px;

  line-height: 1.55;
}


/* destination imagery */

.ita-ref-atlas {
  padding:
    84px 28px 94px;

  background: var(--ref-paper-2);
}


.ita-ref-atlas-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 16px;

  margin-top: 37px;
}


.ita-ref-atlas-grid a {
  position: relative;

  height: 330px;

  overflow: hidden;

  border-radius: 16px;

  background: var(--ref-navy);

  text-decoration: none;
}


.ita-ref-atlas-grid img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ita-ref-atlas-grid
> a > span {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(3,41,45,.87) 100%
    );
}


.ita-ref-atlas-grid
> a > div {
  position: absolute;

  z-index: 3;

  left: 25px;
  right: 25px;
  bottom: 25px;
}


.ita-ref-atlas-grid small {
  color: var(--ref-gold);

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .11em;
}


.ita-ref-atlas-grid strong {
  display: block;

  margin-top: 7px;

  color: #fff;

  font-family:
    Georgia,
    serif;

  font-size: 22px;

  font-weight: 500;

  line-height: 1.2;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1050px
) {

  .ita-ref-hero {
    height: auto;

    grid-template-columns: 1fr;
  }


  .ita-ref-copy {
    min-height: 520px;

    padding:
      55px 42px 65px;
  }


  .ita-ref-map {
    height: 560px;
  }


  .ita-ref-context {
    left: 24px;

    width:
      calc(
        100% - 48px
      );

    max-width: none;
  }


  .ita-ref-scene-grid {
    width:
      calc(
        100% - 48px
      );

    grid-template-columns:
      1fr 1fr;

    padding-top: 105px;
  }


  .ita-ref-journey {
    grid-row: span 2;
  }


  .ita-ref-scene-actions {
    grid-column: 2;
  }

}


@media (
  max-width: 760px
) {

  .ita-ref-copy {
    min-height: 465px;

    padding:
      45px 21px 55px;
  }


  .ita-ref-copy h1 {
    font-size: 50px;
  }


  .ita-ref-copy > p {
    font-size: 16px;
  }


  .ita-ref-map {
    height: 445px;
  }


  .ita-ref-route-lens {
    width: 112px;
    height: 112px;

    right: 13px;
    top: 15px;
  }


  .ita-ref-origin {
    left: 7%;
  }


  .ita-ref-map-label.aruba {
    left: 56%;
  }


  .ita-ref-map-label.barbados {
    left: 68%;
  }


  .ita-ref-map-label.jamaica {
    left: 70%;
  }


  .ita-ref-context {
    position: relative;

    left: auto;
    bottom: auto;

    width:
      calc(
        100% - 24px
      );

    margin:
      -45px auto 0;

    grid-template-columns:
      1fr 1fr;

    gap: 13px;
  }


  .ita-ref-context-item {
    border: 0;
  }


  .ita-ref-context-action {
    grid-column:
      1 / -1;

    margin: 0;
  }


  .ita-ref-scene {
    margin-top: -1px;
  }


  .ita-ref-scene-grid {
    width:
      calc(
        100% - 24px
      );

    grid-template-columns: 1fr;

    padding:
      78px 0 30px;
  }


  .ita-ref-journey {
    grid-row: auto;
  }


  .ita-ref-scene-actions {
    grid-column: auto;
  }


  .ita-ref-lens-grid,
  .ita-ref-atlas-grid {
    grid-template-columns: 1fr;
  }


  .ita-ref-lens-grid
  a + a {
    border-left: 0;

    border-top:
      1px solid
      var(--ref-line);
  }

}


/* keyboard focus */

.ita-ref-main
a:focus-visible {
  outline:
    2px solid
    var(--ref-teal);

  outline-offset:
    3px;
}



/* =========================================================
   TEXT CONTRAST / LEGIBILITY PASS v3
   2026-08-20

   Purpose:
   - preserve current design/layout
   - improve small-text visibility
   - improve text over photography
   - improve dark-panel hierarchy
   - improve CTA and metadata legibility
   ========================================================= */


/* ---------------------------------------------------------
   BASE TEXT
   --------------------------------------------------------- */

body.ita-home-reference-v2 {
  --ref-copy: #30484e;
  --ref-muted: #556a6f;
  --ref-gold-text: #956815;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

body.ita-home-reference-v2
.pm-header {
  color: #102f34;
}

body.ita-home-reference-v2
.pm-header a,
body.ita-home-reference-v2
.pm-header button {
  color: #102f34;
}

body.ita-home-reference-v2
.pm-header-cta {
  background: #06796d !important;
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   HERO LEFT SIDE
   --------------------------------------------------------- */

.ita-ref-kicker {
  color: #06685f;
}

.ita-ref-copy h1 {
  color: #082f35;
}

.ita-ref-copy > p {
  color: #263f45;
  font-weight: 450;
}


/* ---------------------------------------------------------
   MAP ORIGIN + DESTINATION LABELS
   --------------------------------------------------------- */

.ita-ref-origin strong {
  background: #052f35;
  color: #ffffff;
}

.ita-ref-origin span {
  color: #07343b;
  font-weight: 850;
}

.ita-ref-map-label {
  background: rgba(255,255,255,.98);

  box-shadow:
    0 5px 15px
    rgba(3,40,45,.18);
}

.ita-ref-map-label strong {
  color: #092c32;
}

.ita-ref-map-label span {
  color: #40585e;
  font-weight: 750;
}


/* Route Lens seal made easier to read against water */

.ita-ref-route-lens {
  filter:
    drop-shadow(
      0 2px 7px
      rgba(255,255,255,.48)
    );
}

.ita-ref-route-lens
.outer,
.ita-ref-route-lens
.inner {
  fill: rgba(255,255,255,.22);
  stroke: #062f35;
}

.ita-ref-route-lens text {
  fill: #062f35;
  font-weight: 900;
}


/* ---------------------------------------------------------
   TRAVEL CONTEXT BAR
   --------------------------------------------------------- */

.ita-ref-context {
  background:
    linear-gradient(
      90deg,
      #032f35 0%,
      #07544f 100%
    );
}

.ita-ref-context-item span {
  color: #d3e1de;

  font-weight: 800;
}

.ita-ref-context-item strong {
  color: #ffffff;

  font-weight: 700;
}

.ita-ref-context-action {
  border-color:
    rgba(
      255,
      255,
      255,
      .7
    );

  background:
    rgba(
      255,
      255,
      255,
      .07
    );

  color: #ffffff;

  font-weight: 700;
}

.ita-ref-context-action:hover {
  background:
    rgba(
      255,
      255,
      255,
      .14
    );
}


/* ---------------------------------------------------------
   SCENIC IMAGE SECTION
   Increase localized darkening where white text appears.
   Do not darken Journey Intelligence card.
   --------------------------------------------------------- */

.ita-ref-scene-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(3,36,40,.04) 0%,
      rgba(3,36,40,.14) 31%,
      rgba(3,36,40,.50) 54%,
      rgba(2,31,36,.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,30,34,.02) 0%,
      rgba(2,30,34,.12) 48%,
      rgba(2,30,34,.28) 100%
    );
}


/* Centre heading */

.ita-ref-scene-copy h2 {
  color: #ffffff;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.34);
}

.ita-ref-scene-copy p {
  color: #ffffff;

  font-weight: 500;

  text-shadow:
    0 1px 8px
    rgba(0,0,0,.34);
}


/* gold divider remains decorative */

.ita-ref-scene-copy > i {
  background: #e1ad49;
}


/* ---------------------------------------------------------
   JOURNEY INTELLIGENCE CARD
   --------------------------------------------------------- */

.ita-ref-journey {
  background:
    rgba(
      253,
      250,
      243,
      .985
    );
}

.ita-ref-journey-kicker {
  color: #06675f;
}

.ita-ref-journey-svg
text.main {
  fill: #102d32;
}

.ita-ref-journey-svg
text.sub {
  fill: #53676b;

  font-weight: 750;
}


/* ---------------------------------------------------------
   INDEPENDENCE/TRUST CARD
   --------------------------------------------------------- */

.ita-ref-independent {
  background:
    rgba(
      2,
      43,
      48,
      .97
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .16
    );
}

.ita-ref-independent strong {
  color: #ffffff;

  font-weight: 650;
}

.ita-ref-independent a {
  color: #f0bc55;

  font-weight: 750;
}


/* ---------------------------------------------------------
   BUILD ROUTE CTA
   --------------------------------------------------------- */

.ita-ref-build {
  background: #032f35;

  color: #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .16
    );
}

.ita-ref-build:hover {
  background: #064149;
}

.ita-ref-build span {
  color: #ffffff;

  font-weight: 700;
}

.ita-ref-build strong {
  color: #ffffff;
}


/* ---------------------------------------------------------
   BELOW-FOLD SECTION HEADINGS
   --------------------------------------------------------- */

.ita-ref-below-kicker {
  color: #06685f;
}

.ita-ref-below h2,
.ita-ref-atlas h2 {
  color: #082f35;
}


/* Lens cards */

.ita-ref-lens-grid strong {
  color: #092f35;
}

.ita-ref-lens-grid p {
  color: #455b60;
}

.ita-ref-lens-grid span {
  color: #8d6111;

  font-weight: 700;
}


/* ---------------------------------------------------------
   DESTINATION IMAGE CARDS
   Stronger gradient so labels work across any photography.
   --------------------------------------------------------- */

.ita-ref-atlas-grid
> a > span {
  background:
    linear-gradient(
      180deg,
      rgba(2,32,36,.03) 10%,
      rgba(2,32,36,.13) 38%,
      rgba(2,32,36,.58) 66%,
      rgba(2,29,33,.94) 100%
    );
}

.ita-ref-atlas-grid small {
  color: #f0bd58;

  font-weight: 850;

  text-shadow:
    0 1px 5px
    rgba(0,0,0,.38);
}

.ita-ref-atlas-grid strong {
  color: #ffffff;

  text-shadow:
    0 2px 8px
    rgba(0,0,0,.48);
}


/* ---------------------------------------------------------
   LINKS / INTERACTIVE STATES
   --------------------------------------------------------- */

.ita-ref-main a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ita-ref-main a:focus-visible {
  outline:
    3px solid
    #0b796e;

  outline-offset:
    4px;
}


/* ---------------------------------------------------------
   SMALL TEXT SAFETY
   --------------------------------------------------------- */

@media (min-width: 761px) {

  .ita-ref-map-label span,
  .ita-ref-origin span,
  .ita-ref-context-item span,
  .ita-ref-journey-svg text.sub {
    font-size: 10px;
  }

}


/* ---------------------------------------------------------
   MOBILE CONTRAST
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .ita-ref-copy > p {
    color: #253e44;
  }

  .ita-ref-context {
    background: #03383e;
  }

  .ita-ref-scene-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(2,32,36,.15) 0%,
        rgba(2,32,36,.48) 42%,
        rgba(2,29,33,.78) 100%
      );
  }

  .ita-ref-scene-copy {
    padding:
      20px;

    border-radius:
      12px;

    background:
      rgba(
        3,
        41,
        46,
        .66
      );

    backdrop-filter:
      blur(3px);
  }

}


/* =========================================================
   DARK BACKGROUND CONTRAST v4
   Force WCAG-oriented readability on dark surfaces.
   Layout and geometry remain unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   TRAVEL CONTEXT BAR
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-context {
  background:
    linear-gradient(
      90deg,
      #022b31 0%,
      #034a47 100%
    ) !important;
}


/* Primary values */

body.ita-home-reference-v2
.ita-ref-context
.ita-ref-context-item strong {
  color: #ffffff !important;

  opacity: 1 !important;

  font-weight: 700 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.35) !important;
}


/* Small metadata labels */

body.ita-home-reference-v2
.ita-ref-context
.ita-ref-context-item span {
  color: #e7f2ef !important;

  opacity: 1 !important;

  font-weight: 800 !important;
}


/* Context icons */

body.ita-home-reference-v2
.ita-ref-context
.ita-ref-context-item svg {
  stroke: #f0bd55 !important;

  opacity: 1 !important;
}


/* Change context button */

body.ita-home-reference-v2
.ita-ref-context-action,
body.ita-home-reference-v2
.ita-ref-context-action span {
  color: #ffffff !important;

  opacity: 1 !important;

  font-weight: 700 !important;
}


body.ita-home-reference-v2
.ita-ref-context-action {
  border-color:
    rgba(
      255,
      255,
      255,
      .85
    ) !important;

  background:
    rgba(
      255,
      255,
      255,
      .10
    ) !important;
}


body.ita-home-reference-v2
.ita-ref-context-action:hover {
  background:
    rgba(
      255,
      255,
      255,
      .18
    ) !important;
}


body.ita-home-reference-v2
.ita-ref-context-action svg {
  stroke: #ffffff !important;
}


/* ---------------------------------------------------------
   SCENIC INTELLIGENCE SECTION

   The image is attractive, but text cannot rely on the image
   itself for contrast. Give the text area a stronger scrim.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-scene-overlay {
  background:
    linear-gradient(
      90deg,

      rgba(
        1,
        25,
        29,
        .05
      ) 0%,

      rgba(
        1,
        25,
        29,
        .16
      ) 28%,

      rgba(
        1,
        25,
        29,
        .55
      ) 51%,

      rgba(
        1,
        25,
        29,
        .80
      ) 72%,

      rgba(
        1,
        25,
        29,
        .88
      ) 100%
    ) !important;
}


/* Editorial heading */

body.ita-home-reference-v2
.ita-ref-scene-copy h2 {
  color: #ffffff !important;

  opacity: 1 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.55),
    0 4px 18px rgba(0,0,0,.38) !important;
}


/* Editorial paragraph */

body.ita-home-reference-v2
.ita-ref-scene-copy p {
  color: #ffffff !important;

  opacity: 1 !important;

  font-weight: 550 !important;

  text-shadow:
    0 1px 3px rgba(0,0,0,.70),
    0 3px 14px rgba(0,0,0,.42) !important;
}


/* Gold rule */

body.ita-home-reference-v2
.ita-ref-scene-copy > i {
  background: #f0bd55 !important;

  opacity: 1 !important;
}


/* ---------------------------------------------------------
   INDEPENDENT ANALYSIS CARD
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-independent {
  background:
    rgba(
      1,
      37,
      42,
      .98
    ) !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .22
    ) !important;
}


/* Catch every text element in the card */

body.ita-home-reference-v2
.ita-ref-independent,
body.ita-home-reference-v2
.ita-ref-independent p,
body.ita-home-reference-v2
.ita-ref-independent span,
body.ita-home-reference-v2
.ita-ref-independent strong,
body.ita-home-reference-v2
.ita-ref-independent small {
  color: #ffffff !important;

  opacity: 1 !important;
}


body.ita-home-reference-v2
.ita-ref-independent strong {
  font-weight: 650 !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.5) !important;
}


/* Gold action link */

body.ita-home-reference-v2
.ita-ref-independent a {
  color: #ffd166 !important;

  opacity: 1 !important;

  font-weight: 750 !important;

  text-decoration-color:
    rgba(
      255,
      209,
      102,
      .65
    ) !important;
}


body.ita-home-reference-v2
.ita-ref-fingerprint svg {
  stroke: #ffd166 !important;

  opacity: 1 !important;
}


/* ---------------------------------------------------------
   BUILD THIS ROUTE
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-build {
  background: #022b31 !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .20
    ) !important;

  color: #ffffff !important;
}


body.ita-home-reference-v2
.ita-ref-build span,
body.ita-home-reference-v2
.ita-ref-build strong {
  color: #ffffff !important;

  opacity: 1 !important;
}


body.ita-home-reference-v2
.ita-ref-build span {
  font-weight: 700 !important;
}


body.ita-home-reference-v2
.ita-ref-build:hover {
  background: #06444b !important;
}


/* ---------------------------------------------------------
   ANY DARK SURFACE WITH ACCIDENTALLY INHERITED MUTED TEXT
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-context small,
body.ita-home-reference-v2
.ita-ref-context em,
body.ita-home-reference-v2
.ita-ref-independent small,
body.ita-home-reference-v2
.ita-ref-independent em,
body.ita-home-reference-v2
.ita-ref-build small,
body.ita-home-reference-v2
.ita-ref-build em {
  color: #e9f2f0 !important;

  opacity: 1 !important;
}


/* ---------------------------------------------------------
   DESTINATION IMAGE CARDS

   Ensure text remains readable regardless of photograph.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-atlas-grid > a > span {
  background:
    linear-gradient(
      180deg,

      rgba(0,24,28,.02) 0%,

      rgba(0,24,28,.12) 35%,

      rgba(0,24,28,.68) 68%,

      rgba(0,20,24,.96) 100%
    ) !important;
}


body.ita-home-reference-v2
.ita-ref-atlas-grid small {
  color: #ffd166 !important;

  opacity: 1 !important;

  font-weight: 850 !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.75) !important;
}


body.ita-home-reference-v2
.ita-ref-atlas-grid strong {
  color: #ffffff !important;

  opacity: 1 !important;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.75) !important;
}


/* ---------------------------------------------------------
   MOBILE

   On a narrow viewport the scenic image moves behind more
   text, so create an explicit dark glass panel.
   --------------------------------------------------------- */

@media (max-width: 760px) {

  body.ita-home-reference-v2
  .ita-ref-scene-copy {
    padding: 21px !important;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        .14
      ) !important;

    border-radius: 12px !important;

    background:
      rgba(
        1,
        35,
        40,
        .88
      ) !important;

    backdrop-filter:
      blur(5px) !important;
  }


  body.ita-home-reference-v2
  .ita-ref-scene-copy h2,
  body.ita-home-reference-v2
  .ita-ref-scene-copy p {
    color: #ffffff !important;
  }

}


/* =========================================================
   HOMEPAGE LAYOUT + NAVIGATION FIX v5

   Scope:
   - scenic grid overflow
   - right-side clipping
   - header/navigation contrast
   - dropdown contrast
   - duplicate sticky CTA support
   - horizontal overflow
   ========================================================= */


/* ---------------------------------------------------------
   PAGE OVERFLOW SAFETY
   --------------------------------------------------------- */

html,
body.ita-home-reference-v2 {
  overflow-x: hidden !important;
}


/* ---------------------------------------------------------
   HEADER

   Header itself is ALWAYS white.
   Top-level navigation is ALWAYS dark.
   This prevents the hero/scenic background from bleeding
   through or making navigation unreadable.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.pm-header {
  position: relative !important;

  z-index: 1000 !important;

  background: #ffffff !important;

  color: #092f35 !important;

  border-bottom:
    1px solid
    rgba(
      7,
      47,
      53,
      .11
    ) !important;

  box-shadow:
    0 1px 0
    rgba(
      7,
      47,
      53,
      .03
    ) !important;
}


body.ita-home-reference-v2
.pm-header-inner {
  position: relative;

  z-index: 1001;

  background: #ffffff !important;
}


/* brand */

body.ita-home-reference-v2
.pm-brand,
body.ita-home-reference-v2
.pm-brand-copy,
body.ita-home-reference-v2
.pm-brand-copy strong {
  color: #092f35 !important;
}


/* top-level desktop navigation */

body.ita-home-reference-v2
.pm-nav > a,

body.ita-home-reference-v2
.pm-nav > button,

body.ita-home-reference-v2
.pm-nav > details > summary,

body.ita-home-reference-v2
.pm-nav .pm-nav-link,

body.ita-home-reference-v2
.pm-nav .pm-nav-trigger {
  color: #102f34 !important;

  opacity: 1 !important;

  font-weight: 650 !important;
}


body.ita-home-reference-v2
.pm-nav > a:hover,

body.ita-home-reference-v2
.pm-nav > button:hover,

body.ita-home-reference-v2
.pm-nav > details > summary:hover {
  color: #08756c !important;
}


/* carets / navigation icons inherit correct text color */

body.ita-home-reference-v2
.pm-nav > a svg,

body.ita-home-reference-v2
.pm-nav > button svg,

body.ita-home-reference-v2
.pm-nav > details > summary svg {
  color: currentColor !important;

  stroke: currentColor !important;
}


/* Start Planning remains high contrast */

body.ita-home-reference-v2
.pm-header-cta {
  background: #087b6f !important;

  color: #ffffff !important;

  border-color: #087b6f !important;
}


body.ita-home-reference-v2
.pm-header-cta:hover {
  background: #05675e !important;

  color: #ffffff !important;
}


/* ---------------------------------------------------------
   HEADER DROPDOWN PANELS

   Some legacy navigation CSS uses a dark dropdown surface.
   Force all text on those surfaces to white.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.pm-nav details[open] > div,

body.ita-home-reference-v2
.pm-nav-dropdown,

body.ita-home-reference-v2
.pm-dropdown,

body.ita-home-reference-v2
.pm-dropdown-panel,

body.ita-home-reference-v2
.pm-nav-menu,

body.ita-home-reference-v2
.pm-mega-menu {
  background: #06343b !important;

  color: #ffffff !important;

  border-color:
    rgba(
      255,
      255,
      255,
      .12
    ) !important;

  box-shadow:
    0 18px 44px
    rgba(
      3,
      35,
      40,
      .25
    ) !important;
}


/* primary dropdown text */

body.ita-home-reference-v2
.pm-nav details[open] > div a,

body.ita-home-reference-v2
.pm-nav details[open] > div strong,

body.ita-home-reference-v2
.pm-nav-dropdown a,

body.ita-home-reference-v2
.pm-nav-dropdown strong,

body.ita-home-reference-v2
.pm-dropdown a,

body.ita-home-reference-v2
.pm-dropdown strong,

body.ita-home-reference-v2
.pm-dropdown-panel a,

body.ita-home-reference-v2
.pm-dropdown-panel strong,

body.ita-home-reference-v2
.pm-nav-menu a,

body.ita-home-reference-v2
.pm-nav-menu strong,

body.ita-home-reference-v2
.pm-mega-menu a,

body.ita-home-reference-v2
.pm-mega-menu strong {
  color: #ffffff !important;

  opacity: 1 !important;
}


/* secondary dropdown descriptions */

body.ita-home-reference-v2
.pm-nav details[open] > div p,

body.ita-home-reference-v2
.pm-nav details[open] > div small,

body.ita-home-reference-v2
.pm-nav-dropdown p,

body.ita-home-reference-v2
.pm-nav-dropdown small,

body.ita-home-reference-v2
.pm-dropdown p,

body.ita-home-reference-v2
.pm-dropdown small,

body.ita-home-reference-v2
.pm-dropdown-panel p,

body.ita-home-reference-v2
.pm-dropdown-panel small,

body.ita-home-reference-v2
.pm-nav-menu p,

body.ita-home-reference-v2
.pm-nav-menu small,

body.ita-home-reference-v2
.pm-mega-menu p,

body.ita-home-reference-v2
.pm-mega-menu small {
  color: #dbe9e6 !important;

  opacity: 1 !important;
}


/* hovered dropdown item */

body.ita-home-reference-v2
.pm-nav details[open] > div a:hover,

body.ita-home-reference-v2
.pm-nav-dropdown a:hover,

body.ita-home-reference-v2
.pm-dropdown a:hover,

body.ita-home-reference-v2
.pm-dropdown-panel a:hover,

body.ita-home-reference-v2
.pm-nav-menu a:hover,

body.ita-home-reference-v2
.pm-mega-menu a:hover {
  color: #ffd166 !important;
}


/* ---------------------------------------------------------
   SCENIC SECTION GRID

   Previous:
      42% + 29% + 29% + gaps
   which exceeded the container width.

   New:
      proportional fr tracks calculated AFTER gaps.

   This is the primary reason the right cards were clipped.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-scene-grid {
  width:
    calc(
      100% - 118px
    ) !important;

  max-width: 1420px !important;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(260px, 22fr)
    minmax(320px, 22fr)
    !important;

  column-gap: 6.5% !important;

  row-gap: 28px !important;

  overflow: visible !important;
}


/* Grid children must be allowed to shrink */

body.ita-home-reference-v2
.ita-ref-journey,

body.ita-home-reference-v2
.ita-ref-scene-copy,

body.ita-home-reference-v2
.ita-ref-scene-actions {
  min-width: 0 !important;

  max-width: 100% !important;
}


/* ---------------------------------------------------------
   JOURNEY CARD

   Keep card within its grid track.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-journey {
  width: 100% !important;

  overflow: hidden !important;
}


body.ita-home-reference-v2
.ita-ref-journey-svg {
  display: block;

  width: 100% !important;

  max-width: 100% !important;
}


/* ---------------------------------------------------------
   CENTRE EDITORIAL BLOCK

   Prevent OVER ITINERARIES splitting onto a third line.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-scene-copy {
  width: 100% !important;
}


body.ita-home-reference-v2
.ita-ref-scene-copy h2 {
  font-size:
    clamp(
      26px,
      1.85vw,
      30px
    ) !important;

  line-height: 1.04 !important;
}


body.ita-home-reference-v2
.ita-ref-scene-copy h2 span {
  white-space: nowrap !important;
}


body.ita-home-reference-v2
.ita-ref-scene-copy p {
  max-width: 290px !important;
}


/* ---------------------------------------------------------
   RIGHT-HAND STACK

   Explicitly contain both cards inside column three.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-ref-scene-actions {
  width: 100% !important;

  justify-self: stretch !important;

  align-self: center !important;
}


body.ita-home-reference-v2
.ita-ref-independent,

body.ita-home-reference-v2
.ita-ref-build {
  width: 100% !important;

  max-width: 100% !important;
}


/* Avoid trust-card text forcing column wider */

body.ita-home-reference-v2
.ita-ref-independent {
  grid-template-columns:
    58px
    minmax(0, 1fr)
    !important;
}


body.ita-home-reference-v2
.ita-ref-independent strong {
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   REMOVE DUPLICATE / LEGACY FLOATING CTA
   JS adds this class only to the unwanted fixed/sticky copy.
   --------------------------------------------------------- */

body.ita-home-reference-v2
.ita-layout-v5-hide-floating {
  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* Common legacy sticky CTA classes, homepage only */

body.ita-home-reference-v2
.pm-mobile-sticky-cta,

body.ita-home-reference-v2
.pm-sticky-cta,

body.ita-home-reference-v2
.route-sticky-cta,

body.ita-home-reference-v2
.route-fixed-cta {
  display: none !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (
  max-width: 1050px
) {

  body.ita-home-reference-v2
  .ita-ref-scene-grid {
    width:
      calc(
        100% - 48px
      ) !important;

    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(0, .85fr)
      !important;

    column-gap: 38px !important;
  }


  body.ita-home-reference-v2
  .ita-ref-journey {
    grid-row:
      1 / span 2;
  }


  body.ita-home-reference-v2
  .ita-ref-scene-copy {
    grid-column: 2;
    grid-row: 1;
  }


  body.ita-home-reference-v2
  .ita-ref-scene-actions {
    grid-column: 2;
    grid-row: 2;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (
  max-width: 760px
) {

  body.ita-home-reference-v2
  .ita-ref-scene-grid {
    width:
      calc(
        100% - 24px
      ) !important;

    grid-template-columns:
      1fr !important;

    gap: 22px !important;
  }


  body.ita-home-reference-v2
  .ita-ref-journey,
  body.ita-home-reference-v2
  .ita-ref-scene-copy,
  body.ita-home-reference-v2
  .ita-ref-scene-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }


  body.ita-home-reference-v2
  .ita-ref-scene-copy h2 span {
    white-space: normal !important;
  }


  /*
   * Open/mobile navigation panel:
   * dark surface => white text.
   */

  body.ita-home-reference-v2
  .pm-mobile-nav,

  body.ita-home-reference-v2
  .pm-mobile-menu,

  body.ita-home-reference-v2
  [data-mobile-nav] {
    background: #06343b !important;

    color: #ffffff !important;
  }


  body.ita-home-reference-v2
  .pm-mobile-nav a,

  body.ita-home-reference-v2
  .pm-mobile-nav button,

  body.ita-home-reference-v2
  .pm-mobile-menu a,

  body.ita-home-reference-v2
  .pm-mobile-menu button,

  body.ita-home-reference-v2
  [data-mobile-nav] a,

  body.ita-home-reference-v2
  [data-mobile-nav] button {
    color: #ffffff !important;
  }

}