/* Daniel's family band. One trace on entry; the static PNG is the fallback.
   Two halves keep all four scenes readable on phones without stretching. */
.home-family-band.dio-graffiti-field {
  --dio-graffiti-opacity: .14;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 4px;
  padding: 46px clamp(20px, 4vw, 52px) 40px;
  margin-block: 32px 0;
  background-color: #203846;
  color: #fff;
  text-align: center;
}
/* Home only (2026-11-12, Daniel: "extend this out so it isnt plate sized and more matched the footer"): the band runs edge to edge
   across the window like the footer under it, with square corners and no plate shadow. The side padding grows by the page margin,
   so the headline, drawing and closing call sit exactly where they sat inside the content column. The consultation page's copy
   (.dio-consult-invest, built from this markup without the wrap class) keeps its own fitted card. */
.home-family-band.wrap.dio-graffiti-field:not(.dio-consult-invest) {
  width: auto;
  margin-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: calc((100% - var(--dio-col, calc(100% - 96px))) / 2 + clamp(20px, 4vw, 52px));
}
.home-family-band #family-title {
  margin: 0 0 26px;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}
.home-family-band #family-title > span { display: block; }
.home-family-band #family-title em {
  font-style: normal;
  color: #ed873c;
}
@supports (-webkit-text-stroke: 1px #ed873c) {
  .home-family-band #family-title em {
    color: transparent;
    -webkit-text-stroke: 1.5px #ed873c;
  }
}
.home-family-drawing { width: 100%; max-width: 1120px; margin-inline: auto; }
.home-family-scene {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: clamp(70px, 13vw, 150px);
  background: #e9eef0;
  -webkit-mask: url('assets/family-line.png') center / contain no-repeat;
  mask: url('assets/family-line.png') center / contain no-repeat;
}
.home-family-scene--second { display: none; }
.home-family-trace { display: none; }
.home-family-drawing.is-ready .home-family-scene { background: none; mask: none; -webkit-mask: none; }
.home-family-drawing.is-ready .home-family-trace {
  display: block;
  width: 100%;
  height: 100%;
  color: #e9eef0;
}
/* The approved trace is the only motion inside this otherwise still band. */
.home-family-band .home-family-trace path {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: .9;
  stroke-opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) calc(var(--x) * 2.6s),
    fill-opacity .5s ease calc(var(--x) * 2.6s + .8s),
    stroke-opacity .5s ease calc(var(--x) * 2.6s + 1s) !important;
}
.home-family-drawing.is-drawn .home-family-trace path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
.home-family-drawing.is-trace-still .home-family-trace path,
html:is(.reduce-motion,.dio-alive-off) .home-family-band .home-family-trace path {
  transition: none !important;
  stroke-dashoffset: 0;
  fill-opacity: 1;
  stroke-opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .home-family-band .home-family-trace path { transition: none !important; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}
.home-family-band .home-family-sub {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: #e9eef0;
}
@media (max-width: 600px) {
  .home-family-band.dio-graffiti-field { padding-block: 34px 30px; }
  .home-family-drawing { display: grid; gap: 18px; max-width: 420px; }
  .home-family-scene { height: auto; aspect-ratio: 1300 / 424; mask-size: 200% 100%; -webkit-mask-size: 200% 100%; }
  .home-family-scene--first { mask-position: left center; -webkit-mask-position: left center; }
  .home-family-scene--second { display: block; mask-position: right center; -webkit-mask-position: right center; }
  .home-family-drawing.is-ready .home-family-trace { width: 200%; max-width: none; }
  .home-family-scene--second .home-family-trace { margin-left: -100%; }
}
@media (forced-colors: active) {
  .home-family-band #family-title em { color: CanvasText; -webkit-text-stroke: 0; }
  .home-family-scene { background: CanvasText; }
  .home-family-drawing.is-ready .home-family-trace { color: CanvasText; }
}