/* Explanatory service figures: live text, quiet rules and no stock imagery. */
.detail-image.service-visual {
  display: flex;
  flex-direction: column;
  height: 490px;
  padding: 29px 32px 25px;
  margin: 0;
  min-width: 0;
  background: var(--sand);
  color: var(--ink);
  border: 1px solid #deddd3;
  isolation: isolate;
}

.service-visual-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 19px;
  border-bottom: 1px solid #d5d4c9;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sv-service-number {
  color: var(--gold);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.service-visual-body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding-block: 26px;
}

.service-visual .service-visual-note {
  padding-top: 16px;
  margin: 0;
  border-top: 1px solid #d5d4c9;
  color: #595e54;
  font-size: 11px;
  line-height: 1.55;
}

.sv-formation,
.sv-advisory,
.sv-tax,
.sv-transactions {
  width: 100%;
  min-width: 0;
}

/* Formation: progressively broader foundations for a company. */
.sv-formation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 19px;
}

.service-visual .sv-formation-idea {
  color: var(--ink);
  text-align: center;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
}

.sv-formation-stack {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.sv-foundation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 12px 10px 11px;
  background: var(--paper);
  border: 1px solid #d1d2c5;
  text-align: center;
}

.sv-foundation--1 { width: 82%; }
.sv-foundation--2 { width: 91%; }
.sv-foundation--3 { width: 100%; border-bottom: 2px solid var(--gold); }

.sv-foundation-rule {
  position: absolute;
  top: -1px;
  left: calc(50% - 11px);
  width: 22px;
  height: 1px;
  background: var(--gold);
}

.sv-node-title {
  font-size: 13px;
  line-height: 1.35;
}

.sv-node-detail {
  color: #60665b;
  font-size: 10px;
  line-height: 1.4;
}

/* Advisory: examine alternatives before defining the next steps. */
.sv-advisory {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
}

.sv-advisory-lines,
.sv-tax-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  stroke: #b7b9aa;
  stroke-width: 1;
}

.sv-advisory-lines path,
.sv-advisory-lines circle,
.sv-tax-lines path,
.sv-tax-lines circle {
  vector-effect: non-scaling-stroke;
}

.sv-advisory-lines circle { fill: var(--gold-light); stroke: var(--gold); }

.sv-decision-question,
.sv-decision-next {
  display: flex;
  justify-content: center;
  text-align: center;
}

.sv-decision-question > span {
  padding: 13px 16px;
  background: var(--sand);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.3;
}

.sv-decision-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

.sv-decision-options > span {
  display: grid;
  place-items: center;
  min-height: 59px;
  padding: 12px 6px;
  border: 1px solid #c6c9ba;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.sv-decision-next > span {
  min-width: 53%;
  padding: 13px 18px;
  border-block: 1px solid var(--gold-light);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.4;
}

/* Tax: connect parties, documents and authority correspondence. */
.sv-tax {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1.5fr 1fr;
  align-items: center;
}

.sv-tax-lines { stroke: #c4c5b8; }
.sv-tax-lines .sv-tax-orbit { stroke: #d8d7cc; }

.sv-tax-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.sv-tax-pair > span {
  width: 43%;
  padding: 12px 5px;
  background: var(--sand);
  color: #484f43;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.sv-tax-centre {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 158px;
  height: 104px;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.3;
}

/* Transactions: three parallel workstreams held in one structure. */
.sv-transactions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.service-visual .sv-transaction-parties {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
}

.sv-transaction-tracks {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 9px;
  list-style: none;
}

.sv-transaction-tracks::before,
.sv-transaction-tracks::after {
  position: absolute;
  top: 25px;
  bottom: 25px;
  width: 1px;
  background: #b9beac;
  content: '';
}

.sv-transaction-tracks::before { left: 9px; }
.sv-transaction-tracks::after { right: 9px; }

.sv-transaction-tracks li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  gap: 15px;
}

.sv-transaction-tracks li::before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #b9beac;
  content: '';
  z-index: -1;
}

.sv-track-index {
  position: absolute;
  left: -8px;
  padding: 6px 0;
  color: var(--gold);
  background: var(--sand);
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sv-track-name {
  padding: 8px 16px;
  color: var(--ink);
  background: var(--sand);
  font-size: 14px;
  line-height: 1.4;
}

.sv-track-end {
  position: absolute;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--sand);
}

.service-visual .sv-transaction-structure {
  align-self: center;
  padding: 10px 16px;
  border-block: 1px solid var(--gold-light);
  color: #4c5445;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 1100px) {
  .detail-image.service-visual { height: 440px; padding: 24px; }
  .service-visual-body { padding-block: 19px; }
  .service-visual-caption { font-size: 9px; padding-bottom: 15px; }
  .sv-decision-options { gap: 18px; }
  .sv-decision-options > span { font-size: 12px; }
  .sv-node-title { font-size: 12px; }
  .sv-formation { gap: 16px; }
  .sv-foundation { min-height: 61px; padding-block: 10px; }
  .service-visual .sv-formation-idea { font-size: 25px; }
  .sv-transactions { gap: 17px; }
  .service-visual .sv-transaction-parties { font-size: 23px; }
}

@media (max-width: 650px) {
  .detail-image.service-visual { height: 330px; padding: 19px 20px 17px; }
  .service-visual-caption { gap: 12px; padding-bottom: 12px; font-size: 8px; letter-spacing: .065em; }
  .sv-service-number { font-size: 10px; }
  .service-visual-body { padding-block: 13px; }
  .service-visual .service-visual-note { padding-top: 11px; font-size: 10px; line-height: 1.4; }
  .sv-formation { gap: 9px; }
  .service-visual .sv-formation-idea { font-size: 22px; }
  .sv-formation-stack { gap: 5px; }
  .sv-foundation { min-height: 46px; gap: 2px; padding: 7px 5px; }
  .sv-foundation--1 { width: 86%; }
  .sv-foundation--2 { width: 93%; }
  .sv-node-title { font-size: 11px; }
  .sv-node-detail { font-size: 9px; line-height: 1.3; }
  .sv-decision-question > span { padding: 7px 10px; font-size: 24px; }
  .sv-decision-options { gap: 25px; }
  .sv-decision-options > span { min-height: 43px; padding: 9px 5px; font-size: 12px; }
  .sv-decision-next > span { padding: 8px 13px; font-size: 13px; }
  .sv-tax-pair > span { padding: 7px 2px; font-size: 12px; }
  .sv-tax-centre { width: 136px; height: 82px; font-size: 22px; }
  .sv-tax-lines .sv-tax-orbit { display: none; }
  .sv-transactions { gap: 11px; }
  .service-visual .sv-transaction-parties { font-size: 22px; }
  .sv-transaction-tracks li { min-height: 37px; }
  .sv-transaction-tracks::before,
  .sv-transaction-tracks::after { top: 18.5px; bottom: 18.5px; }
  .sv-track-name { padding: 6px 11px; font-size: 12px; }
  .service-visual .sv-transaction-structure { padding: 7px 12px; font-size: 12px; }
}

@media (forced-colors: active) {
  .service-visual * { border-color: CanvasText; }
  .sv-advisory-lines,
  .sv-tax-lines { stroke: CanvasText; }
  .sv-foundation-rule,
  .sv-transaction-tracks::before,
  .sv-transaction-tracks::after,
  .sv-transaction-tracks li::before { background: CanvasText; }
}