/* First character preview: photograph mounts and the existing four information cards. */
:root {
  --mount-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%238b6448' stroke-width='1.2'%3E%3Cpath d='M32 2 62 32 32 62 2 32Z M32 12 52 32 32 52 12 32Z'/%3E%3Cpath d='M32 22Q42 22 42 32Q42 42 32 42Q22 42 22 32Q22 22 32 22Z'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2' fill='%232e5144'/%3E%3C/svg%3E");
  --corner-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238b6448' stroke-width='1.5'%3E%3Cpath d='M80 4 156 80 80 156 4 80Z M80 20 140 80 80 140 20 80Z M80 36 124 80 80 124 36 80Z'/%3E%3Ccircle cx='80' cy='80' r='29'/%3E%3Cpath d='M80 51V109 M51 80H109'/%3E%3C/g%3E%3C/svg%3E");
}

/* Absolute mounts preserve photograph size, crop, and alternating journey positions. */
.journey-image,
.service-detail .editorial-hero .photo-frame {
  isolation:isolate;
  overflow:visible;
  box-shadow:0 20px 32px #051a184d;
}
.journey-image::before,
.journey-stop[href*="vip-jacuzzi"] .journey-image::before,
.service-detail .editorial-hero .photo-frame::before {
  inset:14px -20px -22px 14px;
  border:1px solid #f5dec0;
  border-radius:18px;
  background-color:#f0e3cc;
  background-image:var(--mount-pattern);
  background-size:64px 64px;
  box-shadow:4px 5px 0 #a57250,0 18px 30px #061b194d;
}
.journey-stop.reverse .journey-image::before {
  inset:14px 14px -22px -20px;
  box-shadow:-4px 5px 0 #a57250,0 18px 30px #061b194d;
}
.journey-image::after {
  inset:8px;
  border-color:#f3d3aaad;
  border-radius:15px;
}
.service-detail .photo-caption {
  margin-inline:0;
  background:#133c30;
  border-left:4px solid #dfa976;
  border-bottom:1px solid #dfa976;
  border-radius:0 0 10px 10px;
  color:#fff6e5;
  letter-spacing:.015em;
}

/* Two ivory faces and two sage faces, keeping the original 01–04 arrangement. */
.assembly-card {
  --box-ink:#183b31;
  --box-copy:#304c40;
  --box-accent:#86502e;
  background:#eee1cb!important;
  color:var(--box-ink);
  border:1px solid #f4d7b4;
  border-radius:16px 16px 24px 16px;
  padding:25px;
  box-shadow:0 5px 0 #936648,0 16px 26px #041c1940;
}
.assembly-card.c1,.assembly-card.c2 {
  --box-ink:#f9f2e3;
  --box-copy:#f0eddd;
  --box-accent:#f4c49c;
  background:#42695b!important;
  border-color:#93ad98;
  color:var(--box-ink);
}
.assembly-card::before,
.assembly-card.c1::before {
  inset:-36px -38px auto auto;
  width:154px;
  height:154px;
  background:var(--corner-pattern) center/contain no-repeat;
  mask-image:linear-gradient(140deg,#000 30%,transparent 80%);
  opacity:.65;
  filter:none;
}
.assembly-card.c1::before,.assembly-card.c2::before {
  background-image:var(--craft-lattice);
  opacity:.7;
}
.assembly-card:is(.c0,.c1,.c2,.c3)::after {
  content:"";
  display:block;
  inset:9px;
  border:1px solid currentColor;
  border-radius:10px 10px 18px 10px;
  opacity:.12;
  pointer-events:none;
}
.assembly-card .index,
.assembly-card.c1 .index {
  min-width:0;
  width:auto;
  height:43px;
  border:0;
  color:var(--box-accent);
  font:400 43px/1 'DM Serif',Georgia,serif;
  letter-spacing:-.05em;
  justify-content:flex-start;
}
.assembly-card h3 {
  color:var(--box-ink);
  margin:16px 0 12px;
  font-size:28px;
  line-height:1.13;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.assembly-card p,.assembly-card.c1 p {
  color:var(--box-copy);
  font-size:14px;
  line-height:1.65;
}
@media(max-width:700px) {
  .journey-image::before,
  .journey-stop[href*="vip-jacuzzi"] .journey-image::before,
  .service-detail .editorial-hero .photo-frame::before {
    inset:9px -12px -15px 9px;
    border-radius:13px;
    background-size:48px 48px;
    box-shadow:3px 4px 0 #a57250,0 12px 22px #061b194d;
  }
  .journey-stop.reverse .journey-image::before {
    inset:9px 9px -15px -12px;
    box-shadow:-3px 4px 0 #a57250,0 12px 22px #061b194d;
  }
  .assembly-card {padding:21px 18px;border-radius:13px 13px 20px 13px}
  .assembly-card::before,.assembly-card.c1::before {width:120px;height:120px;top:-30px;right:-30px}
  .assembly-card .index,.assembly-card.c1 .index {height:36px;font-size:36px}
  .assembly-card h3 {font-size:25px;margin:14px 0 10px}
  .assembly-card p,.assembly-card.c1 p {font-size:13px;line-height:1.65}
}
@media(max-width:420px) {
  .assembly-card {padding:19px 15px}
  .assembly-card h3 {font-size:23px}
  .assembly-card p,.assembly-card.c1 p {font-size:12px}
}