/* =========================================================
   Dental Web Now brand assets: THE ONE PLACE the logo and mark are referenced.
   Logo: option C, the app-icon monogram (picked Nov 12 2026).
   v4 "Night studio" is dark-first, so every spot uses the DARK variants
   (white tile, white "dental", blue "web", orange "now").
   To swap the logo: replace the files in this folder, or point these variables at new ones.
   URLs resolve relative to this file, so keep the classes that use them here too.
   Favicons, the web manifest and the JSON-LD logo live at the site root (see README).
   ========================================================= */
:root{
  --logo: url("dwn-C-horizontal-dark.svg");                    /* header, footer, legal pages */
  --logo-animated: url("dwn-C-horizontal-animated-dark.svg");  /* header entrance */
  --logo-ratio: 849.652 / 109.242;
  --logo-stacked: url("dwn-C-stacked-dark.svg");               /* final call to action */
  --logo-stacked-ratio: 724.702 / 296.696;
  --mark: url("dwn-C-mark-dark.svg");                          /* white rounded-square monogram */
  --mark-animated: url("dwn-C-mark-animated-dark.svg");
  --mark-loading: url("dwn-C-mark-loading-dark.svg");
  --mark-ratio: 1 / 1;
}
.brand-logo{
  display:inline-block; vertical-align:middle; height:36px; width:auto; aspect-ratio:var(--logo-ratio);
  background:var(--logo) left center / contain no-repeat;
}
.brand-logo.is-animated{ background-image:var(--logo-animated); }
.brand-stacked{
  display:inline-block; vertical-align:middle; width:220px; height:auto; aspect-ratio:var(--logo-stacked-ratio);
  background:var(--logo-stacked) center / contain no-repeat;
}
.brand-mark{
  display:inline-block; vertical-align:middle; width:24px; height:auto; aspect-ratio:var(--mark-ratio);
  background:var(--mark) center / contain no-repeat;
}
.brand-mark.is-animated{ background-image:var(--mark-animated); }
.brand-mark.is-loading{ background-image:var(--mark-loading); }
/* Animated SVGs used as images may ignore the visitor's setting, so swap in the static files. */
@media (prefers-reduced-motion: reduce){
  .brand-logo.is-animated{ background-image:var(--logo); }
  .brand-mark.is-animated, .brand-mark.is-loading{ background-image:var(--mark); }
}