/* ==========================================================================
   DaVinci Technologies — website styles
   Built on the "Ink in Motion" direction. Loaded after base.css (tokens, reset,
   font faces). Sections, top to bottom:
     1. Page tokens        6. Home hero             11. Process & schematics
     2. Type               7. Page hero (inner)     12. Glossary, facts, lists
     3. Buttons & links    8. Blue/navy bands       13. Contact & form
     4. Header & nav       9. Product split/sheets  14. CTA band & footer
     5. Section scaffolds 10. Applications index
   ========================================================================== */

/* 1. Page tokens ------------------------------------------------------------ */
.site {
  --sans: "Archivo", var(--font-system);
  --sec: clamp(80px, 10vw, 160px);
  --gap: clamp(16px, 2vw, 32px);
  --header-h: 72px;
  /* Photographic "ink" treatment: greyscale → sepia rotated to the logo's hue */
  --ink-filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.6) brightness(.92) contrast(1.05);
  background: var(--white);
  color: var(--graphite);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.6 var(--sans);
}
@media (min-width: 1680px) { .site { --max: 1560px; } }

/* 2. Type --------------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 700 .75rem/1.2 var(--sans); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.on-dark .eyebrow { color: #fff; }

.display {
  font: 800 clamp(2.4rem, .4rem + 11vw, 8.6rem)/.9 var(--sans); font-stretch: 125%;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--navy);
}
.h1 {
  font: 800 clamp(2.3rem, .6rem + 6vw, 6.25rem)/.92 var(--sans); font-stretch: 125%;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--navy); text-wrap: balance;
}
.h2 { font: 800 clamp(2rem, 1rem + 3.8vw, 4.5rem)/.96 var(--sans); font-stretch: 122%; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem)/1.02 var(--sans); font-stretch: 118%; letter-spacing: -.01em; }
.display, .h1, .h2, .h3 { overflow-wrap: break-word; hyphens: auto; }
.h4 { font: 700 1.1875rem/1.2 var(--sans); font-stretch: 112%; }
.lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.45; max-width: 36ch; }
.note { font-size: .875rem; color: var(--grey-text); }
.on-dark .note { color: #B7C3D8; }
.prose { display: grid; gap: 1em; max-width: 58ch; }
.mark { color: var(--blue); }

/* "To be confirmed" placeholder chip */
.tbc { display: inline-block; padding: 2px 8px; border: 1px dashed currentColor; font-size: .8125rem; line-height: 1.5; opacity: .8; }

/* 3. Buttons & links -------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 10px 24px;
  font: 700 .875rem/1.15 var(--sans); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; text-align: left;
  border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transition: transform .3s var(--ease-out); }
.btn:hover::before { transform: scale(1.6); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--navy); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--blue); }
.btn--line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--line:hover { background: var(--navy); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--navy); color: #fff; }
.btn--line-light { border-color: #fff; color: #fff; background: transparent; }
.btn--line-light:hover { background: #fff; color: var(--navy); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Arrow link — the arrow is drawn with a mask so it matches the text colour */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 700 .9375rem/1.2 var(--sans); font-stretch: 110%; color: inherit; text-decoration: none;
}
.link-arrow::after {
  content: ""; flex: none; width: 18px; height: 12px; background: currentColor; transition: transform .25s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 5h14.2L10.6 1.4 12 0l6 6-6 6-1.4-1.4L14.2 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 5h14.2L10.6 1.4 12 0l6 6-6 6-1.4-1.4L14.2 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link-arrow:hover { color: var(--blue); }
.link-arrow:hover::after { transform: translateX(5px); }
.on-dark .link-arrow:hover { color: var(--blue-soft); }

.inline-link { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Model names (DV-C500, DV-L500A…) never break at their hyphen */
.model { white-space: nowrap; }
.inline-link:hover { text-decoration-thickness: 2px; }
.on-dark .inline-link { color: #fff; }

/* 4. Header & navigation ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--grey-tech); }
.site-header__bar { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { --logo-w: clamp(150px, 42vw, 210px); margin-right: auto; }
.site-header__cta { display: none; }

.menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: var(--blue-pale); color: var(--blue); }
.menu-toggle svg { width: 24px; height: 24px; transition: transform .35s var(--ease-out); }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.nav { display: none; }
.nav[data-open] {
  display: block; position: fixed; inset: var(--header-h) 0 0 0; padding: 32px var(--gutter) 48px;
  background: var(--blue); color: #fff; overflow-y: auto;
}
.nav ul { display: grid; gap: 4px; }
.nav ul a { text-decoration: none; }
.nav[data-open] ul a { display: block; padding: 10px 0; font: 800 clamp(2rem, 9vw, 3rem)/1.05 var(--sans); font-stretch: 125%; text-transform: uppercase; }
.nav[data-open] ul a[aria-current="page"] { color: var(--blue-pale); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.nav__cta { margin-top: 32px; }
.nav__contact { margin-top: 28px; font-size: .9375rem; color: #DCE5F4; }
.nav__contact a { color: #fff; }
.nav-open { overflow: hidden; }

@media (min-width: 960px) {
  .menu-toggle, .nav__cta, .nav__contact { display: none; }
  .site-header__cta { display: inline-flex; min-height: 44px; }
  .nav, .nav[data-open] { display: block; position: static; padding: 0; background: none; color: inherit; overflow: visible; }
  .nav ul { display: flex; gap: clamp(16px, 2.2vw, 32px); }
  .nav ul a, .nav[data-open] ul a {
    display: block; padding: 12px 0; font: 600 .8125rem/1 var(--sans); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase;
    background: radial-gradient(circle, var(--blue) 2.5px, transparent 3px) 50% 100% / 0 0 no-repeat;
    transition: background-size .2s, color .2s;
  }
  .nav ul a:hover, .nav ul a:focus-visible, .nav ul a[aria-current="page"] { background-size: 8px 8px; color: var(--blue); text-decoration: none; }
}

/* 5. Section scaffolds ----------------------------------------------------------------------- */
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(56px, 7vw, 112px); }
.section--pale { background: var(--blue-pale); }
.section--blue { background: var(--blue); color: #fff; }
.section--navy { background: var(--navy); color: #fff; }
.section--rule { border-top: 1px solid var(--grey-tech); }
.section--top { padding-bottom: 0; }
.mt-actions { margin-top: clamp(32px, 4vw, 48px); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--split { align-items: end; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
  .section-head--split > :first-child { grid-column: 1 / -1; }
}
.on-dark { color: #fff; }
.on-dark p { color: #E3EAF6; }
.on-dark .h1, .on-dark .h2, .on-dark .h3 { color: #fff; }

/* 6. Home hero ------------------------------------------------------------------------------- */
.hero { padding-block: clamp(32px, 6vw, 88px) var(--sec); overflow: hidden; }
.hero__grid { display: grid; gap: 40px; }
.hero__copy { position: relative; z-index: 2; display: grid; gap: 28px; align-content: center; }
.hero .display > span { display: block; }
.hero .display > span:nth-child(2) { color: var(--blue); }

/* The full stop is a droplet that falls into place once, on load */
.falling-drop {
  display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%;
  background: var(--blue); transform-origin: 50% 100%;
  animation: fall 1.2s .5s cubic-bezier(.55, 0, .45, 1) both;
}
@keyframes fall {
  0%   { transform: translateY(-3.2em) scale(.7, 1.35); opacity: 0; }
  12%  { opacity: 1; }
  68%  { transform: translateY(0) scale(.85, 1.2); }
  80%  { transform: translateY(0) scale(1.35, .7); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Scattered drops → halftone grid → photograph */
.hero__visual { position: relative; aspect-ratio: 4 / 5; margin: 0; background: #fff; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__photo--full {
  -webkit-mask-image: linear-gradient(to bottom, transparent 46%, #000 70%);
          mask-image: linear-gradient(to bottom, transparent 46%, #000 70%);
}
/* The same photo through a 40 × 50 dot grid — matches the 400 × 500 SVG at a 10-unit pitch */
.hero__photo--halftone {
  filter: var(--ink-filter);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 70%, transparent 76%), linear-gradient(to bottom, transparent 18%, #000 34%, #000 58%, transparent 72%);
  -webkit-mask-size: 2.5% 2%, 100% 100%;
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(circle closest-side, #000 70%, transparent 76%), linear-gradient(to bottom, transparent 18%, #000 34%, #000 58%, transparent 72%);
          mask-size: 2.5% 2%, 100% 100%;
          mask-composite: intersect;
}
.scatter { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--blue); overflow: visible; }
.scatter circle, .dotband circle { animation: settle .9s var(--d, 0ms) var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(-14px); } }


@media (min-width: 600px) and (max-width: 959px) { .hero__visual { width: min(100%, 500px); justify-self: end; } }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .hero__copy { grid-column: 1 / 9; grid-row: 1; padding-block: 40px; }
  .hero__visual { grid-column: 8 / -1; grid-row: 1; }
}

/* 7. Page hero (inner pages) ------------------------------------------------------------------- */
.page-hero { padding-block: clamp(40px, 7vw, 112px) clamp(48px, 6vw, 96px); border-bottom: 1px solid var(--grey-tech); overflow: hidden; }
.page-hero__grid { display: grid; gap: 32px; align-items: end; }
.page-hero__copy { display: grid; gap: 24px; }
.dotband { width: 100%; height: auto; aspect-ratio: 600 / 200; fill: var(--blue); overflow: visible; }
@media (min-width: 960px) {
  .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); }
  .dotband { margin-bottom: 8px; }
}

/* 8. Technology band & dot matrix --------------------------------------------------------------- */
.tech-band__grid { display: grid; gap: 48px; align-items: center; }
.tech-band__head .h2 { max-width: 16ch; }
.tech-band__copy { display: grid; gap: 20px; max-width: 46ch; }
@media (min-width: 960px) {
  .tech-band__grid { grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(48px, 6vw, 88px); }
  .tech-band__head { grid-column: 1 / -1; }
}

.matrix svg { width: 100%; height: auto; overflow: visible; }
.matrix figcaption { margin-top: 24px; font-size: .8125rem; color: #CFDAF0; }
.matrix .m-grid { fill: rgba(255, 255, 255, .22); }
.matrix .m-ink { fill: #fff; }
.matrix .m-ink circle {
  transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)); transform-box: fill-box; transform-origin: center;
  opacity: .55; transition: transform 1.3s var(--d) cubic-bezier(.2, .8, .2, 1), opacity 1.3s var(--d);
}
.matrix .m-sat circle { fill: #fff; opacity: .5; transition: opacity 1s .4s; }
.matrix svg.is-in .m-ink circle { transform: none; opacity: 1; }
.matrix svg.is-in .m-sat circle { opacity: 0; }
.no-js .matrix .m-ink circle { transform: none; opacity: 1; }
.matrix--light .m-grid { fill: var(--grey-tech); }
.matrix--light .m-ink, .matrix--light .m-sat circle { fill: var(--blue); }

/* Four stages: droplet → stream → matrix → code */
.stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.stages li { display: grid; gap: 14px; align-content: start; }
.stages svg { width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--blue-pale); }
.stages p { font-size: .9375rem; line-height: 1.45; padding-top: 12px; border-top: 2px solid var(--navy); }
.stages b { display: block; font: 800 1.0625rem/1.2 var(--sans); font-stretch: 115%; margin-bottom: 4px; }
.st-ink { fill: var(--blue); }
.st-line { fill: none; stroke: var(--grey-logo); stroke-width: 1; }
.st-ghost { fill: none; stroke: #A9B6CC; }
.st-solid { fill: var(--navy); }
.stages .st-ink { transition: transform 1.1s var(--ease-out), opacity .8s; }
.stages:not(.is-in) .st-ink { opacity: 0; transform: translateY(-8px); }
.stages li:nth-child(2) .st-ink { transition-delay: .15s; }
.stages li:nth-child(3) .st-ink { transition-delay: .3s; }
.stages li:nth-child(4) .st-ink { transition-delay: .45s; }
.no-js .stages .st-ink { opacity: 1; transform: none; }
@media (min-width: 960px) { .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 9. Products: home split teaser, mechanism diagrams, comparison sheets ------------------------- */
.split { display: grid; }
.split__half { display: grid; gap: 22px; align-content: start; padding: clamp(56px, 8vw, 112px) var(--gutter); }
.split__half--cij { background: var(--blue-pale); }
.split__half--dod { background: var(--navy); color: #fff; }
.split__half--dod p { color: #D6DEEC; }
.split__half > * { max-width: 560px; }
.split__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: end; gap: 12px; }
.split__head .code-mark { font-size: clamp(3.2rem, .8rem + 6vw, 7.5rem); }
.split__photo { position: relative; z-index: 1; width: clamp(110px, 14vw, 210px); max-width: 100%; height: auto; justify-self: end; filter: drop-shadow(0 18px 24px rgba(18, 33, 58, .22)); }
.split__half--dod .split__photo { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); }
.mini-figs { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-figs li { padding: 6px 12px; border: 1.5px solid rgba(48, 88, 155, .45); font-size: .875rem; }
.mini-figs b { font-weight: 800; font-stretch: 112%; }
.split__half--dod .mini-figs li { border-color: rgba(255, 255, 255, .35); color: #fff; }
.split .link-arrow { justify-self: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split__half--cij { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .split__half--dod { padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-left: clamp(40px, 5vw, 80px); }
}

.code-mark { font: 900 clamp(5rem, 2rem + 12vw, 13rem)/.78 var(--sans); font-stretch: 125%; letter-spacing: -.04em; color: var(--blue); }
.split__half--dod .code-mark, .sheet--dod .code-mark { color: var(--blue-soft); }

.mech { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.mech__head { fill: var(--graphite); }
.mech__ink { fill: var(--blue); }
.mech__off { fill: var(--grey-logo); }
.mech__line { fill: none; stroke: var(--grey-logo); }
.mech__slots { fill: none; stroke: #9AA7BD; }
.mech__signal { fill: none; stroke: var(--blue); stroke-width: 1.25; }
.mech text { font: 600 10px var(--sans); fill: var(--grey-text); letter-spacing: .02em; }
.on-navy .mech__head { fill: #fff; }
.on-navy .mech__ink { fill: var(--blue-soft); }
.on-navy .mech__slots { stroke: rgba(255, 255, 255, .35); }
.on-navy .mech__signal { stroke: var(--blue-soft); }
.on-navy .mech text { fill: #A9B4C7; }

/* Comparison sheets: two columns whose rows stay aligned (subgrid) */
.compare { display: grid; gap: 24px; }
.sheet { display: grid; gap: 24px; align-content: start; padding: clamp(24px, 4vw, 48px); background: var(--blue-pale); scroll-margin-top: calc(var(--header-h) + 16px); }
.sheet--dod { background: var(--navy); color: #fff; }
.sheet__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.sheet__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--ink-filter); transition: filter .5s; }
.sheet__photo:hover img { filter: none; }
.sheet__photo figcaption {
  position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: #fff; color: var(--navy);
  font: 700 .6875rem/1.2 var(--sans); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase;
}
.sheet__title { display: grid; gap: 14px; }
.sheet__rows { border-top: 2px solid currentColor; }
.sheet__rows div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(38, 42, 48, .16); }
.sheet--dod .sheet__rows div { border-bottom-color: rgba(255, 255, 255, .18); }
.sheet__rows dt { font: 700 .75rem/1.3 var(--sans); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.sheet--dod .sheet__rows dt { color: var(--blue-soft); }
.sheet--dod .sheet__rows dd { color: #E3EAF6; }
.sheet .actions { align-self: end; }
@media (min-width: 560px) { .sheet__rows div { grid-template-columns: 10.5em 1fr; gap: 16px; } }
@media (min-width: 1100px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  /* 3 blocks (title, diagram, link) + 9 data rows = 12 shared rows */
  .sheet { grid-row: span 12; grid-template-rows: subgrid; row-gap: 0; }
  .sheet__title, .sheet .mech { margin-bottom: 28px; }
  .sheet__rows { grid-row: span 9; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .sheet .actions { margin-top: 28px; }
}

/* Product feature sections (products page) */
.product { padding-block: var(--sec); background: var(--blue-pale); scroll-margin-top: var(--header-h); overflow: hidden; }
.product--dark { background: var(--navy); color: #fff; }
.product__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.product__media { position: relative; display: grid; place-items: center; margin: 0; min-height: 280px; }
.product__media .code-mark { position: absolute; left: 0; top: 0; font-size: clamp(6rem, 3rem + 14vw, 17rem); opacity: .16; }
.product--dark .product__media .code-mark { color: var(--blue-soft); opacity: .22; }
.product__media > img { position: relative; width: min(100%, 460px); height: auto; filter: drop-shadow(0 28px 36px rgba(18, 33, 58, .25)); }
.product--dark .product__media > img { filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .5)); }
/* Photo gallery: thumbnails swap the main image (main.js). Without JS only the first photo shows. */
.gallery { gap: 20px; }
.gallery__thumbs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gallery__thumb { width: 68px; height: 68px; padding: 4px; border: 1px solid rgba(48, 88, 155, .28); background: rgba(255, 255, 255, .7); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.gallery__thumb img { width: 100%; height: 100%; }
.gallery__thumb:hover { border-color: var(--blue); }
.gallery__thumb[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #fff; }
.product--dark .gallery__thumb { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.product--dark .gallery__thumb:hover { border-color: var(--blue-soft); }
.product--dark .gallery__thumb[aria-pressed="true"] { border-color: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue-soft); background: rgba(255, 255, 255, .12); }
.no-js .gallery__thumbs { display: none; }
.product__body { display: grid; gap: 22px; justify-items: start; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; border-top: 2px solid currentColor; }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 12px 16px 0; border-bottom: 1px solid rgba(38, 42, 48, .16); }
.product--dark .figures div { border-bottom-color: rgba(255, 255, 255, .18); }
.figures dt { font-size: .8125rem; color: var(--grey-text); }
.product--dark .figures dt { color: #B7C3D8; }
.figures dd { white-space: nowrap; font: 800 clamp(1.6rem, 1.2rem + 1vw, 2.25rem)/1 var(--sans); font-stretch: 122%; letter-spacing: -.02em; color: var(--blue); }
.product--dark .figures dd { color: #fff; }
.figures dd span { margin-left: .2em; font-size: .45em; font-weight: 700; letter-spacing: 0; }
.highlights { display: grid; gap: 10px; }
.highlights li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.highlights li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--blue); }
.product--dark .highlights li::before { background: var(--blue-soft); }
@media (min-width: 960px) {
  .product__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .product--dark .product__media { order: 2; }
}

.shared { display: grid; gap: 18px; margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border: 2px solid var(--navy); }
.shared__list { display: grid; gap: 10px 32px; }
.shared__list li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.shared__list li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--blue); }
@media (min-width: 700px) { .shared__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shared__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 10. Applications index (hover / focus / tap an entry to change the plate) ---------------- */
.apps { display: grid; gap: 28px; }
.apps__plate { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); margin: 0; }
.apps__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.apps__plate img.is-active { opacity: 1; }
.apps__plate figcaption {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff;
  font: 700 .8125rem/1.2 var(--sans); font-stretch: 110%; color: var(--navy);
}
.apps__plate figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.apps__list { border-top: 2px solid var(--navy); }
.apps__list li { border-bottom: 1px solid var(--grey-tech); }
.apps__item {
  display: grid; grid-template-columns: 2.6em 1fr; column-gap: 12px; width: 100%; padding: 18px 0; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.apps__item span { grid-row: span 2; padding-top: .45em; font: 700 .8125rem/1 var(--sans); font-stretch: 112%; color: var(--blue); }
.apps__item strong { font: 800 clamp(1.25rem, 1rem + 1.1vw, 2rem)/1.1 var(--sans); font-stretch: 122%; letter-spacing: -.01em; transition: color .2s; }
.apps__item em { font-style: normal; font-size: .9375rem; color: var(--grey-text); }
.apps__item[aria-pressed="true"] strong, .apps__item:hover strong { color: var(--blue); }
.apps__item[aria-pressed="true"] span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--blue); }
@media (max-width: 959px) { .apps__plate { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; } }
@media (min-width: 960px) {
  .apps { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .apps__plate { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; }
  .apps__body { grid-column: 7 / -1; }
  .apps__item { grid-template-columns: 3.5em 1fr; padding: 22px 0; }
}

/* About teaser / photo + text rows */
.media-row { display: grid; gap: 40px; align-items: center; }
.media-row__photo { position: relative; aspect-ratio: 16 / 11; overflow: hidden; margin: 0; }
.media-row__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--ink-filter); transition: filter .5s; }
.media-row__photo:hover img { filter: none; }
/* Photos of DaVinci's own printers keep their true colours (no ink treatment) */
.media-row__photo--true img, .media-row__photo--true:hover img { filter: none; }
.media-row__body { display: grid; gap: 22px; justify-items: start; max-width: 50ch; }
@media (min-width: 1100px) { .media-row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); } }
.media-row__body { min-width: 0; }
.media-row .h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3.6rem); }

/* 11. Process steps & simplified schematics ------------------------------------------------- */
.switch { display: inline-flex; padding: 4px; background: #fff; border: 1px solid var(--grey-tech); justify-self: start; }
.switch button {
  min-width: 76px; min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--navy);
  font: 700 .8125rem/1 var(--sans); font-stretch: 115%; letter-spacing: .08em;
}
.switch button[aria-selected="true"] { background: var(--blue); color: #fff; }
.switch button:not([aria-selected="true"]):hover { background: var(--blue-pale); }

.process { display: grid; gap: clamp(32px, 4vw, 56px); }

/* Detailed schematics. Labels are sized for a 720 px-wide drawing, so on narrow
   screens the drawing keeps that width and pans sideways instead of shrinking. */
.schematic { min-width: 0; margin: 0; background: #fff; border: 1px solid var(--grey-tech); }
.schematic__pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--blue-soft) transparent; }
.schematic__pan:focus-visible { outline-offset: -3px; }
.schematic__hint { padding: 12px 16px 0; font: 700 .6875rem/1 var(--sans); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
@media (min-width: 760px) { .schematic__hint { display: none; } }
.schematic figcaption { padding: 14px 18px; border-top: 1px solid var(--grey-tech); font-size: .875rem; color: var(--grey-text); }
.schematic figcaption b { color: var(--navy); }
.sx { display: block; width: 100%; min-width: 720px; height: auto; padding: clamp(8px, 2vw, 24px); }

.sx-casing { fill: none; stroke: #9AA7BD; stroke-width: 1.5; stroke-dasharray: 8 6; }
.sx-tag { font: 700 12px var(--sans); font-stretch: 115%; letter-spacing: .12em; fill: #7D8AA1; }
.sx-label { font: 600 15px var(--sans); font-stretch: 108%; fill: var(--navy); }
.sx-small { font: 600 13px var(--sans); font-stretch: 105%; fill: var(--grey-text); }
.sx-body { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.sx-pale { fill: var(--blue-pale); stroke: var(--navy); stroke-width: 2; }
.sx-fluid { fill: var(--blue); opacity: .85; }
.sx-fillnavy { fill: var(--navy); }
.sx-hatch { fill: var(--blue-soft); stroke: var(--navy); stroke-width: 1.5; }
.sx-part { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.sx-plate { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; }
.sx-product { fill: var(--blue-pale); stroke: var(--navy); stroke-width: 2; }
.sx-inset { fill: #fff; stroke: var(--grey-tech); stroke-width: 1.5; }
.sx-ink { fill: var(--blue); }
.sx-jet { stroke: var(--blue); stroke-width: 6; stroke-linecap: round; }
.sx-cl { fill: none; stroke: #B5BECC; stroke-dasharray: 16 5 3 5; }
.sx-lead { fill: none; stroke: #8E99AB; stroke-width: 1.25; }
.sx-pipe { fill: none; stroke: #D3DBE8; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sx-pipe-thin { fill: none; stroke: var(--blue); stroke-width: 3; }
.sx-flow { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 7 9; stroke-linecap: round; stroke-linejoin: round; animation: flow 1s linear infinite paused; }
.sx-flow--return { stroke: var(--blue-soft); }
@keyframes flow { to { stroke-dashoffset: -32; } }
.sx-gear { fill: #fff; stroke: var(--navy); stroke-width: 2; animation: spin 2.4s linear infinite paused; }
.sx-gear rect { fill: var(--navy); stroke: none; }
.sx-gear__hub { fill: var(--blue); stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sx-coil { fill: var(--blue-pale); stroke: var(--navy); stroke-width: 1.5; }
.sx-coil-wind { stroke: var(--blue-soft); stroke-width: 1.5; }
.sx-led { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.sx-led--on { fill: var(--blue); stroke: var(--blue); opacity: 0; }
.sx-into { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.sx-badge circle { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.sx-badge text { font: 800 14px var(--sans); font-stretch: 112%; fill: #fff; text-anchor: middle; }

/* Droplets in flight: a dotted, round-capped stroke whose offset moves while visible */
.sx-flight { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 22; animation: flight 1.2s linear infinite paused; }
.sx-flight--1 { animation-duration: 1.32s; } .sx-flight--2 { animation-duration: 1.44s; }
.sx-flight--off { stroke: #A3ADBD; stroke-width: 7; }
@keyframes flight { to { stroke-dashoffset: -44; } }

/* Front view: each dot column fades in as it is printed, then fades as the next pass begins */
.fv-col { opacity: .25; animation: fv var(--T) linear infinite paused; animation-delay: calc(var(--i) * var(--step)); animation-fill-mode: backwards; }
@keyframes fv { 0% { opacity: .25; } 1% { opacity: 1; } 88% { opacity: 1; } 92%, 100% { opacity: .25; } }

.schematic.is-live .sx .sx-flight, .schematic.is-live .sx .sx-flow, .schematic.is-live .sx .sx-gear, .schematic.is-live .sx .fv-col, .schematic.is-live .sx [class*="dod-r"] { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .fv-col { animation: none; opacity: 1; }
  .sx-led--on { animation: none !important; opacity: 0; }
  .dod-row { animation: none !important; opacity: .45; }
}

.steps { display: grid; padding: 0; list-style: none; }
.steps li { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-content: start; padding-bottom: 26px; }
.steps li::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: repeating-linear-gradient(var(--blue) 0 2px, transparent 2px 7px); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::before { display: none; }
.steps__n {
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue); color: #fff; font: 800 1rem/1 var(--sans); font-stretch: 112%;
}
.steps h3 { padding-top: 10px; }
.steps p { color: #3E434B; max-width: 46ch; margin-top: 4px; }
[data-mode="cij"] [data-dod], [data-mode="dod"] [data-cij] { display: none !important; }
.steps p { animation: swap .35s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
  .steps li { grid-template-columns: 1fr; row-gap: 14px; padding-bottom: 0; }
  .steps li::before { left: 56px; right: calc(-1 * clamp(16px, 2vw, 32px)); top: 23px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 7px); }
  .steps__n { grid-row: auto; }
  .steps h3 { padding-top: 0; }
}

/* Precision principles on navy */
.principles { display: grid; gap: 1px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); }
.principles li { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px); background: var(--navy); }
.principles svg { width: 100%; max-width: 220px; height: auto; }
.principles p { color: #D6DEEC; }
.pr-line { fill: none; stroke: #6C7C99; }
.pr-ring { fill: none; stroke: #6C7C99; stroke-dasharray: 3 3; }
.pr-trace { fill: none; stroke: var(--blue-soft); stroke-width: 1.5; stroke-dasharray: 2 5; }
.pr-ink { fill: var(--blue-soft); }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 12. Glossary, facts, numbered questions ---------------------------------------------------- */
.glossary { display: grid; border-top: 2px solid var(--navy); }
.glossary div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--grey-tech); }
.glossary dt { font: 800 1.125rem/1.2 var(--sans); font-stretch: 115%; }
.glossary dd { color: #3E434B; max-width: 60ch; }
@media (min-width: 760px) { .glossary div { grid-template-columns: minmax(12em, 1fr) 2.2fr; gap: 24px; } }

.facts { display: grid; border-top: 2px solid currentColor; }
.facts div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.facts dt { font: 700 .75rem/1.3 var(--sans); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-soft); }
.facts dd { font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1.05 var(--sans); font-stretch: 120%; letter-spacing: -.01em; color: #fff; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } }

.questions { display: grid; gap: 0; counter-reset: q; border-top: 2px solid var(--navy); }
.questions li { display: grid; grid-template-columns: 3em 1fr; gap: 4px 16px; align-content: start; padding: 22px 0; border-bottom: 1px solid var(--grey-tech); counter-increment: q; }
.questions li::before {
  content: counter(q, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%;
  border: 2px solid var(--blue); color: var(--blue); font: 700 .875rem/1 var(--sans); font-stretch: 112%;
}
.questions p { color: var(--grey-text); }
@media (min-width: 960px) { .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); } }

/* Location card */
.location { display: grid; gap: 28px; }
.location__card { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 4vw, 44px); background: var(--blue-pale); }
.location__card address { font-style: normal; font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.25 var(--sans); font-stretch: 112%; }
.coords { width: 100%; max-width: 360px; height: auto; }
.coords .c-ring { fill: none; stroke: var(--blue); stroke-width: 1; }
.coords .c-ring--dash { stroke-dasharray: 3 4; }
.coords .c-cross { stroke: var(--grey-logo); stroke-width: 1; }
.coords .c-dot { fill: var(--blue); }
.coords text { font: 600 12px var(--sans); font-stretch: 112%; fill: var(--grey-text); letter-spacing: .04em; }
@media (min-width: 900px) { .location { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); } }

/* 13. Contact & form -------------------------------------------------------------------------- */
.contact { display: grid; gap: clamp(48px, 6vw, 80px); }
.contact__aside { display: grid; gap: 32px; align-content: start; }
.contact__block { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--navy); }
.contact__block h2 { font: 700 .75rem/1.3 var(--sans); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.contact__block address { font-style: normal; }
.contact__email { font: 800 clamp(1.25rem, 1rem + 1vw, 1.625rem)/1.2 var(--sans); font-stretch: 112%; color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 4px; word-break: break-word; }
.contact__email:hover { color: var(--blue); }
.checklist { display: grid; gap: 8px; }
.checklist li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.checklist li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--blue); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 112px); } }

.form { display: grid; gap: 22px; }
.form[hidden] { display: none; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font: 700 .8125rem/1.3 var(--sans); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.field label span { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #9AA4B4; border-radius: 0; background: #fff;
  font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s;
}
.field select {
  appearance: none; padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2330589B' d='M6 8 0 1.4 1.3 0 6 5.2 10.7 0 12 1.4z'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
.field textarea { min-height: 168px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48, 88, 155, .25); }
.field [aria-invalid="true"] { border-color: #B42318; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.field__hint { font-size: .8125rem; color: var(--grey-text); }
.field__error { display: flex; gap: 8px; align-items: center; font-size: .875rem; font-weight: 600; color: #B42318; }
.field__error:empty { display: none; }
.field__error::before { content: "!"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #B42318; color: #fff; font-size: .75rem; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__status { font-size: .9375rem; }
.form__status:empty { display: none; }
.form__status--error { padding: 14px 16px; border-left: 4px solid #B42318; background: #FDF0EF; color: #7A1A12; }
.form__status--info { padding: 14px 16px; border-left: 4px solid var(--blue); background: var(--blue-pale); }
.form-success { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4vw, 48px); background: var(--blue-pale); }
.form-success:focus { outline: none; }
.form-success svg { width: 64px; height: 64px; }
.form-success[hidden] { display: none; }

/* 14. CTA band & footer ---------------------------------------------------------------------- */
.cta-band { background: var(--blue); color: #fff; padding-block: var(--sec); }
.cta-band__grid { display: grid; gap: 40px; align-items: end; }
.cta-band__title { font: 800 clamp(2.2rem, .8rem + 5.6vw, 6.25rem)/.92 var(--sans); font-stretch: 125%; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.cta-band__side { display: grid; gap: 28px; justify-items: start; max-width: 40ch; color: #E3EAF6; }
.cta-band__side a:not(.btn) { color: #fff; }
@media (min-width: 960px) { .cta-band__grid { grid-template-columns: 8fr 4fr; gap: 56px; } }

.site-footer { padding-top: 64px; font-size: .9375rem; }
.site-footer__grid { display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; max-width: 36ch; --logo-w: 240px; }
.site-footer__col { display: grid; gap: 10px; align-content: start; }
.site-footer__col h2 { font: 700 .75rem/1.3 var(--sans); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.site-footer__col ul { display: grid; gap: 8px; }
.site-footer__col address { font-style: normal; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blue); text-decoration: underline; }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px;
  margin-top: 56px; padding-block: 20px 32px; border-top: 1px solid var(--grey-tech); font-size: .8125rem; color: var(--grey-text);
}
.ripple { width: 96px; height: auto; }
.ripple ellipse { fill: none; stroke: var(--blue); stroke-width: 1; }
.ripple ellipse:nth-child(1) { opacity: .25; } .ripple ellipse:nth-child(2) { opacity: .5; }
.ripple circle { fill: var(--blue); }
@media (min-width: 960px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .site-footer__brand { grid-column: auto; }
}

/* 404 */
.notfound { display: grid; gap: 28px; justify-items: start; }
.notfound .matrix { width: min(100%, 420px); }

/* >>> generated:dod-timing */
/* --- Generated by the page builder: DOD row timing for the 'DV' demo (do not edit by hand) --- */
@keyframes dod-r0 { 0.000% { opacity: 1; } 8.333% { opacity: 1; } 16.667% { opacity: 1; } 25.000% { opacity: 1; } 33.333% { opacity: 0; } 41.667% { opacity: 0; } 50.000% { opacity: 1; } 58.333% { opacity: 0; } 66.667% { opacity: 0; } 75.000% { opacity: 0; } 83.333% { opacity: 1; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r0 { animation: dod-r0 var(--T) step-end infinite paused; }
.sx-flight.dod-r0 { animation: flight 1.2s linear infinite paused, dod-r0 var(--T) step-end infinite paused; }
@keyframes dod-r1 { 0.000% { opacity: 1; } 8.333% { opacity: 0; } 16.667% { opacity: 0; } 25.000% { opacity: 0; } 33.333% { opacity: 1; } 41.667% { opacity: 0; } 50.000% { opacity: 1; } 58.333% { opacity: 0; } 66.667% { opacity: 0; } 75.000% { opacity: 0; } 83.333% { opacity: 1; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r1 { animation: dod-r1 var(--T) step-end infinite paused; }
.sx-flight.dod-r1 { animation: flight 1.2s linear infinite paused, dod-r1 var(--T) step-end infinite paused; }
@keyframes dod-r2 { 0.000% { opacity: 1; } 8.333% { opacity: 0; } 16.667% { opacity: 0; } 25.000% { opacity: 0; } 33.333% { opacity: 1; } 41.667% { opacity: 0; } 50.000% { opacity: 1; } 58.333% { opacity: 0; } 66.667% { opacity: 0; } 75.000% { opacity: 0; } 83.333% { opacity: 1; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r2 { animation: dod-r2 var(--T) step-end infinite paused; }
.sx-flight.dod-r2 { animation: flight 1.2s linear infinite paused, dod-r2 var(--T) step-end infinite paused; }
@keyframes dod-r3 { 0.000% { opacity: 1; } 8.333% { opacity: 0; } 16.667% { opacity: 0; } 25.000% { opacity: 0; } 33.333% { opacity: 1; } 41.667% { opacity: 0; } 50.000% { opacity: 1; } 58.333% { opacity: 0; } 66.667% { opacity: 0; } 75.000% { opacity: 0; } 83.333% { opacity: 1; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r3 { animation: dod-r3 var(--T) step-end infinite paused; }
.sx-flight.dod-r3 { animation: flight 1.2s linear infinite paused, dod-r3 var(--T) step-end infinite paused; }
@keyframes dod-r4 { 0.000% { opacity: 1; } 8.333% { opacity: 0; } 16.667% { opacity: 0; } 25.000% { opacity: 0; } 33.333% { opacity: 1; } 41.667% { opacity: 0; } 50.000% { opacity: 1; } 58.333% { opacity: 0; } 66.667% { opacity: 0; } 75.000% { opacity: 0; } 83.333% { opacity: 1; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r4 { animation: dod-r4 var(--T) step-end infinite paused; }
.sx-flight.dod-r4 { animation: flight 1.2s linear infinite paused, dod-r4 var(--T) step-end infinite paused; }
@keyframes dod-r5 { 0.000% { opacity: 1; } 8.333% { opacity: 0; } 16.667% { opacity: 0; } 25.000% { opacity: 0; } 33.333% { opacity: 1; } 41.667% { opacity: 0; } 50.000% { opacity: 0; } 58.333% { opacity: 1; } 66.667% { opacity: 0; } 75.000% { opacity: 1; } 83.333% { opacity: 0; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r5 { animation: dod-r5 var(--T) step-end infinite paused; }
.sx-flight.dod-r5 { animation: flight 1.2s linear infinite paused, dod-r5 var(--T) step-end infinite paused; }
@keyframes dod-r6 { 0.000% { opacity: 1; } 8.333% { opacity: 1; } 16.667% { opacity: 1; } 25.000% { opacity: 1; } 33.333% { opacity: 0; } 41.667% { opacity: 0; } 50.000% { opacity: 0; } 58.333% { opacity: 0; } 66.667% { opacity: 1; } 75.000% { opacity: 0; } 83.333% { opacity: 0; } 91.667% { opacity: 0; } 100% { opacity: 0; } }
.dod-r6 { animation: dod-r6 var(--T) step-end infinite paused; }
.sx-flight.dod-r6 { animation: flight 1.2s linear infinite paused, dod-r6 var(--T) step-end infinite paused; }
/* <<< generated:dod-timing */