/* ==========================================================================
   SERVICE THEME — scoped to `body.uv-service`
   A light, plain-spoken look for a local service business. The colours come
   from the Undervision logo (deep teal, light aqua). The one flourish is the
   work order in the hero: a paper service ticket with its goldenrod carbon
   copy underneath. Everything else stays quiet.
   Headings: Barlow Semi Condensed. Body: Source Sans 3.
   ========================================================================== */

body.uv-service {
  --sv-paper:     #FFFFFF;
  --sv-mist:      #F2F6F7;
  --sv-ink:       #16282D;
  --sv-teal:      #0D5C68;   /* logo dark  */
  --sv-teal-deep: #093F48;
  --sv-aqua:      #6FC0C9;   /* logo light */
  --sv-aqua-wash: #E3F2F4;
  --sv-gold:      #F3C246;   /* the carbon copy */

  /* Remap the shared system's tokens */
  --uv-bench:       var(--sv-mist);
  --uv-bench-sunk:  #E8EEF0;
  --uv-paper:       var(--sv-paper);
  --uv-line:        #D3DEE1;
  --uv-line-soft:   #E6EDEF;
  --uv-slate-900:   #082F36;
  --uv-slate-800:   var(--sv-teal-deep);
  --uv-slate-700:   var(--sv-teal);
  --uv-slate-600:   var(--sv-teal);
  --uv-strap:       var(--sv-teal);
  --uv-strap-deep:  var(--sv-teal-deep);
  --uv-copper:      var(--sv-teal-deep);
  --uv-ink:         var(--sv-ink);
  --uv-ink-2:       #3C5258;
  --uv-ink-3:       #647A80;
  --uv-on-dark:     #EEF6F7;
  --uv-on-dark-2:   #B5D3D8;
  --uv-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --uv-cond: "Barlow Semi Condensed", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --uv-r:    8px;
  --uv-r-lg: 12px;
  --uv-shadow:      0 1px 2px rgba(9,63,72,.06), 0 4px 14px rgba(9,63,72,.06);
  --uv-shadow-lift: 0 2px 4px rgba(9,63,72,.08), 0 14px 32px rgba(9,63,72,.12);

  /* Bootstrap variables are resolved where they are declared, so restate them here */
  --bs-primary: var(--sv-teal);            --bs-primary-rgb: 13, 92, 104;
  --bs-warning: var(--sv-gold);            --bs-warning-rgb: 243, 194, 70;
  --bs-dark: var(--uv-slate-900);          --bs-dark-rgb: 8, 47, 54;
  --bs-light: var(--sv-mist);              --bs-light-rgb: 242, 246, 247;
  --bs-primary-text-emphasis: var(--sv-teal);
  --bs-warning-text-emphasis: #8A6608;
  --bs-primary-bg-subtle: var(--sv-aqua-wash);
  --bs-primary-border-subtle: #BFDDE2;
  --bs-body-bg: var(--sv-paper);
  --bs-body-color: var(--sv-ink);          --bs-body-color-rgb: 22, 40, 45;
  --bs-secondary-color: var(--uv-ink-2);
  --bs-secondary-bg: var(--uv-bench-sunk);
  --bs-tertiary-bg: var(--sv-mist);
  --bs-body-font-family: var(--uv-sans);
  --bs-body-font-size: 17px;
  --bs-heading-font-family: var(--uv-cond);
  --bs-border-color: var(--uv-line);
  --bs-border-radius: var(--uv-r);
  --bs-border-radius-lg: var(--uv-r-lg);
  --bs-border-radius-pill: 999px;
  --bs-link-color: var(--sv-teal);         --bs-link-color-rgb: 13, 92, 104;
  --bs-link-hover-color: var(--sv-teal-deep);
  --bs-focus-ring-color: rgba(111,192,201,.6);

  background: var(--sv-paper);
  color: var(--sv-ink);
  font-family: var(--uv-sans);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- type ---------- */
body.uv-service h1, body.uv-service h2, body.uv-service h3,
body.uv-service h4, body.uv-service h5, body.uv-service h6 { letter-spacing: 0; }
body.uv-service h1, body.uv-service h2 { font-weight: 700; line-height: 1.1; }
body.uv-service h2, body.uv-service .uv-band-title { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); }
body.uv-service h3 { font-size: 1.4rem; font-weight: 600; }
body.uv-service p { max-width: 68ch; }
body.uv-service .text-center p, body.uv-service p.text-center { margin-left: auto; margin-right: auto; }
body.uv-service a { border-bottom-color: rgba(13,92,104,.35); }
body.uv-service ::selection { background: var(--sv-aqua); color: var(--sv-ink); }
body.uv-service :focus-visible { outline: 3px solid var(--sv-aqua); outline-offset: 2px; }

/* Labels speak in the body face, sentence case. No tracked-out capitals. */
body.uv-service .uv-label,
body.uv-service .uv-eyebrow {
  font-family: var(--uv-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sv-teal);
}
body.uv-service .uv-eyebrow::before { content: none; }
body.uv-service .uv-label { font-size: .85rem; color: var(--uv-ink-3); }
body.uv-service .section-title::after { height: 4px; width: 56px; border-radius: 2px; background: var(--sv-aqua); }

/* ---------- navbar: white, with the logo's teal ---------- */
body.uv-service .navbar-modern {
  background: var(--sv-paper);
  border-bottom: 1px solid var(--uv-line);
}
body.uv-service .navbar-modern::before { content: none; }
body.uv-service .navbar-modern .site-logo { height: 38px; }
body.uv-service .navbar-modern .brand-text {
  color: var(--sv-teal-deep);
  font-size: 1.45rem;
  letter-spacing: .01em;
  text-transform: none;
}
body.uv-service .navbar-modern .navbar-brand:hover .brand-text { color: var(--sv-teal); }
body.uv-service .nav-link-modern {
  color: var(--uv-ink-2);
  font-family: var(--uv-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 0;
  padding: .6rem .15rem;
  margin: 0 .7rem;
  border-bottom: 3px solid transparent;
}
body.uv-service .nav-link-modern:hover,
body.uv-service .nav-link-modern:focus-visible { color: var(--sv-teal-deep); background: none; border-bottom-color: var(--sv-aqua); }
body.uv-service .nav-link-modern.is-active { color: var(--sv-teal-deep); background: none; border-bottom-color: var(--sv-teal); }
body.uv-service .navbar-modern .search-icon { color: var(--uv-ink-3); }
body.uv-service .navbar-modern .search-input {
  background: var(--sv-mist);
  border-color: var(--uv-line);
  color: var(--sv-ink);
  font-family: var(--uv-sans);
  font-size: .95rem;
}
body.uv-service .navbar-modern .search-input::placeholder { color: var(--uv-ink-3); }
body.uv-service .navbar-modern .search-input:focus { background: #fff; border-color: var(--sv-teal); color: var(--sv-ink); }
body.uv-service .navbar-toggler { border-color: var(--uv-line); }
body.uv-service .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23093F48' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.uv-service .navbar-modern .dropdown-menu { background: #fff; border-color: var(--uv-line); box-shadow: var(--uv-shadow-lift); }
body.uv-service .navbar-modern .dropdown-item { color: var(--sv-ink); }
body.uv-service .navbar-modern .dropdown-item:hover { background: var(--sv-mist); color: var(--sv-teal-deep); }
body.uv-service .navbar-modern .dropdown-divider { border-color: var(--uv-line); }
body.uv-service .navbar-modern .btn-light,
body.uv-service .navbar-modern .btn-outline-light {
  background: #fff; color: var(--sv-teal-deep); border-color: var(--uv-line);
}
body.uv-service .navbar-modern .btn-light:hover,
body.uv-service .navbar-modern .btn-outline-light:hover { background: var(--sv-mist); border-color: var(--sv-teal); }

/* ---------- buttons ---------- */
body.uv-service .btn {
  font-family: var(--uv-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  padding: .6rem 1.25rem;
}
body.uv-service .btn-sm { font-size: .9rem; padding: .4rem .85rem; }
body.uv-service .btn-lg { font-size: 1.1rem; padding: .8rem 1.7rem; }
body.uv-service .btn-primary,
body.uv-service .btn-warning,
body.uv-service .btn-strap,
body.uv-service .btn-hero-primary {
  background: var(--sv-teal); border-color: var(--sv-teal); color: #fff;
}
body.uv-service .btn-primary:hover,
body.uv-service .btn-warning:hover,
body.uv-service .btn-strap:hover,
body.uv-service .btn-hero-primary:hover {
  background: var(--sv-teal-deep); border-color: var(--sv-teal-deep); color: #fff;
}
body.uv-service .btn-outline-primary,
body.uv-service .btn-hero-secondary {
  background: #fff; color: var(--sv-teal-deep); border-color: #B9CDD1;
}
body.uv-service .btn-outline-primary:hover,
body.uv-service .btn-hero-secondary:hover {
  background: var(--sv-aqua-wash); color: var(--sv-teal-deep); border-color: var(--sv-teal);
}
body.uv-service .btn-hero { font-size: 1.1rem; padding: .85rem 1.6rem; }

/* ---------- home hero: light, with the ticket as the one flourish ---------- */
body.uv-service .hero-section {
  background: var(--sv-mist);
  color: var(--sv-ink);
  border-bottom: 1px solid var(--uv-line);
  overflow: visible;
}
body.uv-service .hero-section::before { content: none; }
body.uv-service .hero-section .uv-eyebrow { color: var(--sv-teal) !important; font-size: 1.05rem; }
body.uv-service .hero-title {
  color: var(--sv-ink);
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
body.uv-service .hero-title em { color: inherit; font-style: normal; }
body.uv-service .hero-subtitle { color: var(--uv-ink-2); font-size: 1.2rem; max-width: 54ch; }

/* The service ticket: white top copy, goldenrod carbon copy beneath. */
body.uv-service .uv-wo-sample {
  position: relative;
  background: #fff;
  border: 1px solid #C9D7DA;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(9,63,72,.08), 0 18px 40px rgba(9,63,72,.14);
  transform: rotate(-1.4deg);
  color: var(--sv-ink);
  overflow: visible;
}
body.uv-service .uv-wo-sample::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sv-gold);
  border: 1px solid #D9A927;
  border-radius: 6px;
  transform: rotate(3.2deg) translate(10px, 8px);
  z-index: -1;
}
body.uv-service .uv-wo-sample::after { content: none; }
body.uv-service .uv-wo-head {
  background: #fff;
  color: var(--sv-ink);
  border-radius: 6px 6px 0 0;
  border-bottom: 0;
}
body.uv-service .uv-wo-label {
  font-family: var(--uv-cond); font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--sv-ink);
}
body.uv-service .uv-wo-no { color: var(--sv-teal); font-size: 1.2rem; text-shadow: none; }
body.uv-service .uv-wo-tear { background: none; border: 0; border-top: 2px dashed #C9D7DA; height: 0; }
body.uv-service .uv-wo-fields { background: #fff; }
body.uv-service .uv-wo-row { border-color: var(--uv-line-soft); background: none; }
body.uv-service .uv-wo-row dt {
  font-family: var(--uv-sans); font-size: 1rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--uv-ink-2);
}
body.uv-service .uv-wo-row.is-live dt { color: var(--sv-ink); font-weight: 600; }
body.uv-service .uv-wo-row dd { color: var(--sv-ink); font-size: 1rem; text-shadow: none; }
body.uv-service .uv-wo-row.is-pending dd { color: #9BB0B5; }
body.uv-service .uv-wo-running {
  background: var(--sv-aqua-wash); color: var(--sv-teal-deep);
  border: 0; border-radius: 999px; box-shadow: none;
}
body.uv-service .uv-wo-pulse { background: var(--sv-teal); box-shadow: none; }
body.uv-service .uv-wo-total {
  background: var(--sv-mist); color: var(--sv-ink);
  border-top: 1px solid var(--uv-line);
  font-family: var(--uv-sans); font-size: 1rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
body.uv-service .uv-wo-total span { letter-spacing: 0; text-transform: none; }
body.uv-service .uv-wo-amount { color: var(--sv-teal-deep); font-size: .95rem; }
body.uv-service .uv-wo-caption {
  background: #fff; color: var(--uv-ink-3); font-size: .9rem;
  border-radius: 0 0 6px 6px;
}

/* ---------- bands ---------- */
body.uv-service .uv-band--paper { background: var(--sv-paper); }
body.uv-service .uv-band--bench { background: var(--sv-mist); border-color: var(--uv-line-soft); }
body.uv-service .uv-band-head { margin-bottom: 2rem; }
body.uv-service .uv-fix-title { font-size: 1.4rem; font-weight: 600; }
body.uv-service .uv-fix p { font-size: 1rem; color: var(--uv-ink-2); }
body.uv-service .uv-fix-meta {
  font-family: var(--uv-sans); font-size: .95rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--sv-teal);
}
body.uv-service .uv-clock {
  background: #fff; border: 1px solid var(--uv-line);
  border-top: 4px solid var(--sv-aqua);
  border-radius: var(--uv-r); box-shadow: none;
}
body.uv-service .uv-clock--total { border-top-color: var(--sv-teal); }
body.uv-service .uv-clock-label {
  font-family: var(--uv-cond); font-size: 1.3rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--sv-ink);
}
body.uv-service .uv-clock-desc { font-size: 1rem; }
body.uv-service .uv-area-list li {
  font-family: var(--uv-sans); font-size: .95rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  background: var(--sv-aqua-wash); color: var(--sv-teal-deep);
  border: 0; border-radius: 999px; padding: .3rem .85rem;
}
body.uv-service .uv-area-map { border-radius: var(--uv-r-lg); border: 1px solid var(--uv-line); overflow: hidden; }

/* ---------- dark bands: closer, page heads, footer ---------- */
body.uv-service .uv-closer { background: var(--sv-teal-deep); border: 0; }
body.uv-service .uv-closer .uv-eyebrow { color: var(--sv-aqua); }
body.uv-service .uv-closer .btn-primary,
body.uv-service .uv-closer .btn-warning,
body.uv-service .uv-closer .btn-hero-primary { background: #fff; border-color: #fff; color: var(--sv-teal-deep); }
body.uv-service .uv-closer .btn-primary:hover,
body.uv-service .uv-closer .btn-warning:hover,
body.uv-service .uv-closer .btn-hero-primary:hover { background: var(--sv-aqua-wash); border-color: var(--sv-aqua-wash); color: var(--sv-teal-deep); }
body.uv-service .uv-closer .btn-outline-primary,
body.uv-service .uv-closer .btn-hero-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
body.uv-service .uv-closer .btn-outline-primary:hover,
body.uv-service .uv-closer .btn-hero-secondary:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

body.uv-service .about-hero,
body.uv-service .uv-pagehead { background: var(--sv-teal-deep); border-bottom: 0; }
body.uv-service .about-hero::before,
body.uv-service .uv-pagehead::before { content: none; }

body.uv-service footer { background: var(--uv-slate-900); border-top: 0; }
body.uv-service footer .brand-text { letter-spacing: .01em !important; text-transform: none !important; font-size: 1.3rem; }
body.uv-service footer .uv-label { color: var(--sv-aqua); }
body.uv-service footer a:hover { color: #fff; }

/* ---------- cards, tables, forms ---------- */
body.uv-service .card { border-color: var(--uv-line); border-radius: var(--uv-r-lg); box-shadow: none; }
body.uv-service .card-header { font-family: var(--uv-cond); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
body.uv-service .form-control, body.uv-service .form-select { font-size: 1rem; border-color: #C3D2D6; border-radius: var(--uv-r); }
body.uv-service .form-control:focus, body.uv-service .form-select:focus { border-color: var(--sv-teal); box-shadow: 0 0 0 3px rgba(111,192,201,.45); }
body.uv-service .form-label { font-family: var(--uv-sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sv-ink); }
body.uv-service .table thead th { font-family: var(--uv-sans); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.uv-service .badge { font-family: var(--uv-sans); letter-spacing: 0; text-transform: none; font-weight: 600; }

@media (max-width: 991.98px) {
  body.uv-service .nav-link-modern { margin: 0; padding: .7rem .25rem; border-bottom-width: 0; }
  body.uv-service .uv-wo-sample { transform: none; margin-top: 1rem; }
  body.uv-service .uv-wo-sample::before { transform: rotate(1.6deg) translate(6px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  body.uv-service .uv-wo-pulse { animation: none; }
}

/* ==========================================================================
   GLASS LAYER
   The page sits on one fixed gradient (logo teal and aqua, drifting to warm
   white). Panels are frosted glass over it: translucent white, blurred
   backdrop, a light top edge. Bands stop being opaque stripes so the
   gradient reads through the whole page.
   ========================================================================== */
body.uv-service {
  --sv-glass:        rgba(255,255,255,.58);
  --sv-glass-strong: rgba(255,255,255,.74);
  --sv-glass-edge:   rgba(255,255,255,.85);
  --sv-glass-line:   rgba(13,92,104,.14);
  --sv-glass-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px rgba(9,63,72,.12);
  --sv-blur: saturate(160%) blur(18px);
  --sv-grad-teal: linear-gradient(135deg, #12798A 0%, #0D5C68 45%, #093F48 100%);

  background:
    radial-gradient(60rem 40rem at 88% -8%, rgba(111,192,201,.55), transparent 62%),
    radial-gradient(48rem 36rem at -10% 22%, rgba(13,92,104,.28), transparent 60%),
    radial-gradient(52rem 40rem at 105% 62%, rgba(243,194,70,.20), transparent 60%),
    radial-gradient(60rem 44rem at 10% 100%, rgba(111,192,201,.40), transparent 62%),
    linear-gradient(180deg, #EAF4F6 0%, #F6FAFA 45%, #EEF5F6 100%);
  background-attachment: fixed;
}

/* shared glass surface */
body.uv-service .navbar-modern,
body.uv-service .uv-clock,
body.uv-service .uv-wo-sample,
body.uv-service .card,
body.uv-service .inner-content-box,
body.uv-service .form-card,
body.uv-service .feature-card,
body.uv-service .feature-card-large,
body.uv-service .dashboard-stat-card,
body.uv-service .uv-workorder,
body.uv-service .uv-msg,
body.uv-service .list-group-item,
body.uv-service .navbar-modern .dropdown-menu {
  background: var(--sv-glass);
  -webkit-backdrop-filter: var(--sv-blur);
  backdrop-filter: var(--sv-blur);
  border: 1px solid var(--sv-glass-edge);
  box-shadow: var(--sv-glass-shadow);
}
/* a glass panel inside a glass panel should not stack blur on blur */
body.uv-service .card .card,
body.uv-service .inner-content-box .card,
body.uv-service .inner-content-box .list-group-item,
body.uv-service .card .list-group-item {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255,255,255,.5);
  border-color: var(--sv-glass-line);
  box-shadow: none;
}

/* navbar */
body.uv-service .navbar-modern {
  background: rgba(255,255,255,.62);
  border: 0;
  border-bottom: 1px solid var(--sv-glass-edge);
  box-shadow: 0 6px 24px rgba(9,63,72,.08);
}
body.uv-service .navbar-modern .dropdown-menu { background: rgba(255,255,255,.9); }
body.uv-service .navbar-modern .search-input { background: rgba(255,255,255,.55); border-color: var(--sv-glass-line); }
body.uv-service .navbar-modern .brand-text {
  background: var(--sv-grad-teal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* hero and bands let the page gradient through */
body.uv-service .hero-section { background: transparent; border-bottom: 0; }
body.uv-service .hero-title {
  background: linear-gradient(100deg, #0A2C33 0%, #0D5C68 60%, #1C8FA1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .08em;
}
body.uv-service .hero-title em { color: transparent; }
body.uv-service .uv-band--paper { background: transparent; border-color: transparent; }
body.uv-service .uv-band--bench {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border-top: 1px solid var(--sv-glass-edge);
  border-bottom: 1px solid var(--sv-glass-edge);
}
body.uv-service .uv-fixgrid { border-color: var(--sv-glass-line); }
body.uv-service .uv-fix,
body.uv-service .uv-fix + .uv-fix { border-color: var(--sv-glass-line); }

/* the ticket, as frosted glass over its gold copy */
body.uv-service .uv-wo-sample {
  background: var(--sv-glass-strong);
  border: 1px solid var(--sv-glass-edge);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 50px rgba(9,63,72,.20);
}
body.uv-service .uv-wo-sample::before {
  background: linear-gradient(135deg, #F8D777 0%, #F3C246 55%, #E3A91F 100%);
  border: 0; border-radius: 14px; opacity: .9;
}
/* The gold copy paints above the figure's own background (negative z-index
   inside a transformed element), so the frosted white lives on the sections. */
body.uv-service .uv-wo-head,
body.uv-service .uv-wo-fields,
body.uv-service .uv-wo-caption { background: rgba(255,255,255,.84); }
body.uv-service .uv-wo-head { border-radius: 14px 14px 0 0; }
body.uv-service .uv-wo-caption { border-radius: 0 0 14px 14px; }
body.uv-service .uv-wo-tear { border-top-color: var(--sv-glass-line); }
body.uv-service .uv-wo-row { border-color: var(--sv-glass-line); }
body.uv-service .uv-wo-total { background: linear-gradient(90deg, rgba(227,242,244,.92), rgba(255,255,255,.84)); border-top-color: var(--sv-glass-line); }
body.uv-service .uv-wo-running { background: rgba(111,192,201,.35); }

/* clocks, chips, map */
body.uv-service .uv-clock {
  border: 1px solid var(--sv-glass-edge);
  border-top: 0;
  border-radius: 14px;
  position: relative; overflow: hidden;
}
body.uv-service .uv-clock::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #6FC0C9, #12798A);
}
body.uv-service .uv-clock--total::before { background: linear-gradient(90deg, #0D5C68, #093F48); }
body.uv-service .uv-area-list li {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--sv-glass-edge);
  -webkit-backdrop-filter: var(--sv-blur); backdrop-filter: var(--sv-blur);
  box-shadow: 0 2px 8px rgba(9,63,72,.06);
}
body.uv-service .uv-area-map { border: 1px solid var(--sv-glass-edge); border-radius: 16px; box-shadow: var(--sv-glass-shadow); }

/* buttons: teal gradient, glass secondary */
body.uv-service .btn { border-radius: 10px; }
body.uv-service .btn-primary,
body.uv-service .btn-warning,
body.uv-service .btn-strap,
body.uv-service .btn-hero-primary {
  background: var(--sv-grad-teal);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(13,92,104,.28);
}
body.uv-service .btn-primary:hover,
body.uv-service .btn-warning:hover,
body.uv-service .btn-strap:hover,
body.uv-service .btn-hero-primary:hover {
  background: linear-gradient(135deg, #0F6B7A 0%, #0B4E59 45%, #07343B 100%);
  border-color: transparent;
}
body.uv-service .btn-outline-primary,
body.uv-service .btn-hero-secondary,
body.uv-service .navbar-modern .btn-light,
body.uv-service .navbar-modern .btn-outline-light {
  background: rgba(255,255,255,.55);
  border-color: var(--sv-glass-edge);
  -webkit-backdrop-filter: var(--sv-blur); backdrop-filter: var(--sv-blur);
  box-shadow: 0 2px 10px rgba(9,63,72,.08);
}
body.uv-service .btn-outline-primary:hover,
body.uv-service .btn-hero-secondary:hover { background: rgba(255,255,255,.85); border-color: #fff; }

/* dark bands become deep teal gradients with glass controls */
body.uv-service .uv-closer,
body.uv-service .about-hero,
body.uv-service .uv-pagehead {
  background:
    radial-gradient(40rem 22rem at 85% 0%, rgba(111,192,201,.35), transparent 65%),
    linear-gradient(120deg, #07343B 0%, #0D5C68 55%, #12798A 100%);
}
body.uv-service .uv-closer .btn-primary,
body.uv-service .uv-closer .btn-warning,
body.uv-service .uv-closer .btn-hero-primary { background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
body.uv-service .uv-closer .btn-outline-primary,
body.uv-service .uv-closer .btn-hero-secondary {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none;
}
body.uv-service footer {
  background: linear-gradient(180deg, #082F36 0%, #051F24 100%);
}

/* forms on glass */
body.uv-service .form-control, body.uv-service .form-select { background-color: rgba(255,255,255,.7); border-color: var(--sv-glass-line); }
body.uv-service .form-control:focus, body.uv-service .form-select:focus { background-color: #fff; }
body.uv-service .alert { -webkit-backdrop-filter: var(--sv-blur); backdrop-filter: var(--sv-blur); border-radius: 12px; }

/* No backdrop-filter support: fall back to near-opaque panels so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.uv-service .navbar-modern,
  body.uv-service .uv-clock,
  body.uv-service .uv-wo-sample,
  body.uv-service .card,
  body.uv-service .inner-content-box,
  body.uv-service .form-card { background: rgba(255,255,255,.94); }
}
@media (max-width: 991.98px) {
  body.uv-service { background-attachment: scroll; }
}

/* the three-up grids sit on one glass sheet */
body.uv-service .uv-fixgrid {
  background: var(--sv-glass);
  -webkit-backdrop-filter: var(--sv-blur); backdrop-filter: var(--sv-blur);
  border: 1px solid var(--sv-glass-edge);
  border-radius: 16px;
  box-shadow: var(--sv-glass-shadow);
  overflow: hidden;
}
body.uv-service .uv-fix { padding: 1.6rem 1.75rem; }

/* ---------- top navigation as real buttons ----------
   Each link is a raised glass button; the current page is the filled teal one. */
body.uv-service .navbar-modern .navbar-nav { gap: .45rem; }
body.uv-service .nav-link-modern {
  margin: 0;
  padding: .5rem 1rem;
  border: 1px solid var(--sv-glass-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(9,63,72,.10), 0 4px 10px rgba(9,63,72,.07);
  color: var(--sv-teal-deep);
  font-size: .98rem;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
body.uv-service .nav-link-modern:hover,
body.uv-service .nav-link-modern:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--sv-teal);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(9,63,72,.12), 0 8px 18px rgba(9,63,72,.12);
}
body.uv-service .nav-link-modern:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(9,63,72,.18) inset;
}
body.uv-service .nav-link-modern.is-active {
  background: var(--sv-grad-teal);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(13,92,104,.30);
}
body.uv-service .nav-link-modern.is-active:hover { color: #fff; background: var(--sv-grad-teal); }
body.uv-service .navbar-modern .btn { border-radius: 10px; padding: .5rem 1rem; font-size: .98rem; }

@media (max-width: 991.98px) {
  body.uv-service .navbar-modern .navbar-nav { gap: .5rem; padding: .75rem 0; }
  body.uv-service .nav-link-modern { display: flex; width: 100%; padding: .7rem 1rem; border-bottom-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  body.uv-service .nav-link-modern { transition: none; }
  body.uv-service .nav-link-modern:hover { transform: none; }
}

/* ---------- light Tron grid ----------
   The dark theme's grid, turned down for daylight: fine teal lines every 40px,
   a brighter line every 200px, over a cooler, less white base. */
body.uv-service {
  --sv-glass:        rgba(255,255,255,.40);
  --sv-glass-strong: rgba(255,255,255,.62);
  --sv-blur: saturate(160%) blur(7px);   /* light blur, so the grid still reads through the glass */
  background:
    linear-gradient(rgba(14,150,175,.42) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(90deg, rgba(14,150,175,.42) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(rgba(14,150,175,.17) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(14,150,175,.17) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(60rem 40rem at 88% -8%, rgba(77,224,249,.38), transparent 62%),
    radial-gradient(48rem 36rem at -10% 22%, rgba(13,92,104,.34), transparent 60%),
    radial-gradient(52rem 40rem at 105% 62%, rgba(243,194,70,.18), transparent 60%),
    radial-gradient(60rem 44rem at 10% 100%, rgba(77,224,249,.30), transparent 62%),
    linear-gradient(180deg, #D9ECF0 0%, #E6F2F4 45%, #DCEDF0 100%);
  background-attachment: fixed;
}
/* a thin line of light along the edges, as on the grid */
body.uv-service .navbar-modern { border-bottom: 1px solid rgba(77,224,249,.55); box-shadow: 0 1px 12px rgba(77,224,249,.25), 0 6px 24px rgba(9,63,72,.08); }
body.uv-service .uv-fixgrid,
body.uv-service .uv-clock,
body.uv-service .card,
body.uv-service .inner-content-box,
body.uv-service .form-card { box-shadow: 0 0 0 1px rgba(77,224,249,.22), var(--sv-glass-shadow); }
body.uv-service .uv-band--bench { background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10)); border-color: rgba(77,224,249,.35); }
@media (max-width: 991.98px) {
  body.uv-service { background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll; }
}

/* ---------- navbar offset ----------
   The shared sheet reserves a navbar's height above the first block (a spacer,
   or extra hero padding) as if the bar were fixed, but the bar is in the page
   flow, so that height showed up as an empty band under it. Here the bar
   sticks to the top instead and nothing is reserved. */
body.uv-service .navbar-modern { position: sticky; top: 0; z-index: 1030; }
body.uv-service .navbar-spacer { display: none; }
body.uv-service:has(.uv-pagehead) .uv-pagehead,
body.uv-service:has(.hero-section) .hero-section,
body.uv-service:has(.about-hero) .about-hero { padding-top: clamp(2rem, 1.2rem + 4vw, 4.5rem); }
@media (max-width: 991.98px) {
  body.uv-service:has(.uv-pagehead) .uv-pagehead,
  body.uv-service:has(.hero-section) .hero-section,
  body.uv-service:has(.about-hero) .about-hero { padding-top: 1.75rem; }
  body.uv-service .main-content-area { margin-top: 1rem; }
}

/* ---------- project cards (downloads page) on glass ---------- */
body.uv-service .uv-project {
  background: var(--sv-glass-strong);
  -webkit-backdrop-filter: var(--sv-blur); backdrop-filter: var(--sv-blur);
  border: 1px solid var(--sv-glass-edge);
  border-top: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(77,224,249,.22), var(--sv-glass-shadow);
  position: relative; overflow: hidden;
  padding-top: 1.5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.uv-service .uv-project::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #6FC0C9, #12798A);
}
body.uv-service .uv-project--android::before { background: linear-gradient(90deg, #7BD3A6, #2E9469); }
body.uv-service .uv-project--rpi::before     { background: linear-gradient(90deg, #EE9C95, #C4453C); }
body.uv-service .uv-project--both::before    { background: linear-gradient(90deg, #F8D777, #E3A91F); }
body.uv-service .uv-project--other::before   { background: linear-gradient(90deg, #B7C8CC, #647A80); }
body.uv-service .uv-project:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(77,224,249,.45), 0 16px 34px rgba(9,63,72,.16); }
body.uv-service .uv-project-name { font-size: 1.45rem; }
body.uv-service .uv-project-kind { background: rgba(255,255,255,.7); border: 1px solid var(--sv-glass-edge); color: var(--sv-teal-deep); }
body.uv-service .uv-project-actions .btn { font-size: .95rem; padding: .5rem 1rem; }
body.uv-service .inner-content-box:has(.uv-projects) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.34); }
@media (prefers-reduced-motion: reduce) {
  body.uv-service .uv-project { transition: none; }
  body.uv-service .uv-project:hover { transform: none; }
}