/* OXO revision 5 — clear glass navigation and polished metal actions.
   Load after all current public stylesheets. No sizing changes to the header,
   logo or homepage scene; no form fields or About playback controls are styled. */

:root {
  --oxo-v5-metal: repeating-linear-gradient(0deg, #ffffff06 0 1px, #20364a04 1px 2px),
    linear-gradient(168deg, #ffffff 0%, #e8eff5 26%, #b0beca 47%, #edf3f7 52%, #cbd6df 77%, #91a2b1 100%);
  --oxo-v5-metal-hover: repeating-linear-gradient(0deg, #ffffff08 0 1px, #20364a03 1px 2px),
    linear-gradient(168deg, #ffffff 0%, #f1f5f9 26%, #bcc9d3 47%, #f8fbfd 52%, #d4dfe7 77%, #a2b3c1 100%);
  --oxo-v5-metal-press: linear-gradient(168deg, #a7b6c3, #d5dfe7 48%, #becbd5 100%);
  --oxo-v5-metal-ink: #142838;
  --oxo-v5-glass: linear-gradient(155deg, #dbeefa14 0%, #a9c8dc05 42%, #08131e12 100%), #172532e6;
  --oxo-v5-glass-hover: linear-gradient(155deg, #e8f5ff20 0%, #b0d0e00a 42%, #07121b12 100%), #223645e8;
  --oxo-v5-glass-press: linear-gradient(155deg, #0a1622e6, #213342f2);
  --oxo-v5-glass-line: #b5c9d568;
  --oxo-v5-text: #f0f5f8;
  --oxo-v5-focus: #c8eaff;
}

/* Keep the existing 52px body-action geometry. The material has a crisp
   reflected band and a fine lower bevel; its sheen does not animate. */
body :is(.button, .header .nav-contact, .header .mobile-start,
  .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
  .case-next .case-links a, .case-next .case-links a:first-child,
  .oxo-app-nav .app-nav-bottom > a) {
  --oxo-action-fill: var(--oxo-v5-glass);
  --oxo-action-fill-hover: var(--oxo-v5-glass-hover);
  --oxo-action-fill-press: var(--oxo-v5-glass-press);
  --oxo-action-border: var(--oxo-v5-glass-line);
  --oxo-action-border-hover: #d7e7f2a1;
  --oxo-action-label: var(--oxo-v5-text);
  background: var(--oxo-action-fill);
  border-color: var(--oxo-action-border);
  border-radius: 12px;
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #f0f8ff36, inset 0 -1px 0 #0000004d,
    0 2px 2px #00000026, 0 8px 20px #00000026;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 1px #0000005c;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

body :is(.button-primary, .oxo-footer .oxo-footer-cta, .insight-help .button,
  .case-next .case-links a:first-child) {
  --oxo-action-fill: var(--oxo-v5-metal);
  --oxo-action-fill-hover: var(--oxo-v5-metal-hover);
  --oxo-action-fill-press: var(--oxo-v5-metal-press);
  --oxo-action-border: #eaf6ffcf;
  --oxo-action-border-hover: #ffffff;
  --oxo-action-label: var(--oxo-v5-metal-ink);
  background: var(--oxo-action-fill);
  border-color: var(--oxo-action-border);
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 2px #3d53664d,
    0 1px 0 #607487, 0 4px 7px #00000038, 0 9px 20px #00000029;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 0 #ffffffb8;
}

body #edit-enquiry {
  --oxo-action-fill: var(--oxo-v5-glass);
  --oxo-action-fill-hover: var(--oxo-v5-glass-hover);
  --oxo-action-fill-press: var(--oxo-v5-glass-press);
  --oxo-action-border: var(--oxo-v5-glass-line);
  --oxo-action-border-hover: #d7e7f2a1;
  --oxo-action-label: var(--oxo-v5-text);
  background: var(--oxo-action-fill);
  border-color: var(--oxo-action-border);
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #f0f8ff36, inset 0 -1px 0 #0000004d, 0 8px 20px #00000026;
  text-shadow: 0 1px 1px #0000005c;
}

body :is(.button, .header .nav-contact, .header .mobile-start,
  .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
  .case-next .case-links a, .case-next .case-links a:first-child,
  .oxo-app-nav .app-nav-bottom > a):is(:hover, :focus-visible),
body #edit-enquiry:is(:hover, :focus-visible) {
  background: var(--oxo-action-fill-hover);
  border-color: var(--oxo-action-border-hover);
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #f5fbff66, inset 0 -1px 0 #00000038,
    0 3px 5px #00000030, 0 9px 22px #00000030;
  transform: none;
}
body :is(.button-primary, .oxo-footer .oxo-footer-cta, .insight-help .button,
  .case-next .case-links a:first-child):is(:hover, :focus-visible) {
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 2px #3d53664d,
    0 1px 0 #71889a, 0 4px 8px #00000040, 0 10px 24px #00000030;
  text-shadow: 0 1px 0 #ffffffb8;
}
body :is(.button, .header .nav-contact, .header .mobile-start,
  .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
  .case-next .case-links a, .case-next .case-links a:first-child,
  .oxo-app-nav .app-nav-bottom > a):active,
body #edit-enquiry:active {
  background: var(--oxo-action-fill-press);
  box-shadow: inset 0 2px 4px #07162440, 0 1px 2px #00000030;
  transform: translateY(1px);
}

/* Plain directional glyphs replace the raised round arrow sockets. The text
   label and direction stay intact, including the submit button's loading state. */
body :is(.button, .header .nav-contact, .header .mobile-start,
  .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
  .case-next .case-links a, .case-next .case-links a:first-child) > span[aria-hidden="true"],
body .oxo-app-nav .app-nav-bottom > a > span,
body #edit-enquiry > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
  text-shadow: inherit;
  transform: none;
  transition: none;
}
body :is(.button, .header .nav-contact, .header .mobile-start)::before,
body :is(.button, .header .nav-contact, .header .mobile-start)::after {
  content: none;
  display: none;
  animation: none;
}

/* Retain the exact established homepage CTA and its vertical contribution. */
body .phoenix-stage .phoenix-intro .button {
  min-height: 49px;
  padding: 8px 10px 8px 18px;
  font-size: 13px;
  letter-spacing: -.01em;
}
body .phoenix-stage .phoenix-intro .button > span[aria-hidden="true"] {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}
body .enquiry form .button[type="submit"]:disabled > span[aria-hidden="true"] {
  border-radius: 50%;
}

/* The opaque tint is a readable fallback. Supported browsers reveal a
   softened portion of the scene through the glass, not through the lettering. */
body .header[data-oxo-glass="5"] {
  isolation: isolate;
  border: 1px solid #bed7e75c !important;
  border-radius: 20px;
  background: linear-gradient(115deg, #d8ecfa16, #d8ecfa00 42%, #d8ecfa0b), #111d29f5 !important;
  box-shadow: inset 0 1px 0 #edf8ff52, inset 0 -1px 0 #02081066,
    0 1px 0 #a9ccdf17, 0 10px 30px #00000047 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
body .header[data-oxo-glass="5"]::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(177deg, #effaff12 0%, #effaff03 32%, transparent 47%),
    linear-gradient(90deg, #d4edff0b, transparent 24%, transparent 78%, #d4edff08);
}
body .header[data-oxo-glass="5"]::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #e6f7ff8c 16%, #e6f7ff29 72%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .header[data-oxo-glass="5"] {
    background: linear-gradient(115deg, #d8ecfa15, #d8ecfa00 42%, #d8ecfa0a),
      linear-gradient(180deg, #111e2bbd, #09131fba) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }
}
body .header[data-oxo-glass="5"] .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 4px;
}
body .header[data-oxo-glass="5"] .brand img {
  display: block;
  filter: drop-shadow(0 1px 1px #0000005c);
}
body .header[data-oxo-glass="5"] nav[aria-label="Main navigation"] > a:not(.nav-contact),
body .header[data-oxo-glass="5"] .nav-group > summary {
  min-height: 44px;
  color: #eaf1f6;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 2px #00000066;
}
body .header[data-oxo-glass="5"] nav > a:not(.nav-contact):is(:hover, :focus-visible),
body .header[data-oxo-glass="5"] .nav-group > summary:is(:hover, :focus-visible),
body .header[data-oxo-glass="5"] .nav-group[open] > summary {
  background: #eff7ff12 !important;
  color: #ffffff !important;
}
body .header[data-oxo-glass="5"] .nav-group > summary::after { color: #c1d2de; }
body .header[data-oxo-glass="5"] nav > a:not(.nav-contact)::after { background: #d6ebf8; }

/* The concise header invitation is deliberately quieter than body actions. */
body .header[data-oxo-glass="5"] a:is(.nav-contact, .mobile-start) {
  --oxo-action-fill: linear-gradient(155deg, #eef8ff18, #d1e8f006 54%), #1b2c3a8c;
  --oxo-action-fill-hover: linear-gradient(155deg, #eef8ff26, #d1e8f00c 54%), #293f50b3;
  --oxo-action-fill-press: #142633e0;
  --oxo-action-border: #c0d9e75c;
  --oxo-action-border-hover: #e6f5ff9e;
  --oxo-action-label: #f1f7fb;
  min-height: 46px;
  padding: 10px 14px;
  gap: 12px;
  border-radius: 11px;
  background: var(--oxo-action-fill);
  border-color: var(--oxo-action-border);
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #eff9ff3b, inset 0 -1px 0 #00000040, 0 3px 8px #0000001f;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-shadow: 0 1px 1px #00000066;
  white-space: nowrap;
}
body .header[data-oxo-glass="5"] a:is(.nav-contact, .mobile-start):is(:hover, :focus-visible) {
  background: var(--oxo-action-fill-hover);
  border-color: var(--oxo-action-border-hover);
  color: var(--oxo-action-label);
  box-shadow: inset 0 1px 0 #eff9ff57, inset 0 -1px 0 #00000040, 0 3px 10px #00000026;
  text-shadow: 0 1px 1px #00000066;
  transform: none;
}
body .header[data-oxo-glass="5"] a:is(.nav-contact, .mobile-start):active {
  background: var(--oxo-action-fill-press);
  box-shadow: inset 0 1px 3px #0000004d;
  transform: none;
}
body .header[data-oxo-glass="5"] a:is(.nav-contact, .mobile-start) > span[aria-hidden="true"] {
  flex-basis: 16px;
  width: 16px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  font-size: 18px;
  text-shadow: inherit;
  transform: none;
}
body .header[data-oxo-glass="5"] .mobile-menu {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  border-color: #c0d9e75c;
  border-radius: 11px;
  background: linear-gradient(155deg, #eef8ff13, #d1e8f004 54%), #1525338c;
  box-shadow: inset 0 1px 0 #eff9ff33, inset 0 -1px 0 #00000040;
}
body .header[data-oxo-glass="5"] .mobile-menu:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: #314858c7;
  border-color: #d6eaf894;
}

/* Keep the existing dropdown drawings and their layout. Only the outer
   material and hover displacement follow the quieter navigation treatment. */
body .header[data-oxo-glass="5"] .nav-submenu {
  background: linear-gradient(135deg, #d7efff0d, transparent 50%), #0e1b28f2 !important;
  border-color: #bad4e563 !important;
  box-shadow: inset 0 1px 0 #eff8ff38, 0 20px 48px #0000007a !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body .header[data-oxo-glass="5"] .nav-submenu a:is(:hover, :focus-visible) {
  background: #d9ecfa12 !important;
  border-color: #b1d0e373 !important;
  transform: none;
}

body :is(.button, .header .nav-contact, .header .mobile-start,
  .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
  .case-next .case-links a, .oxo-app-nav .app-nav-bottom > a):focus-visible,
body .header[data-oxo-glass="5"] :is(a, summary, button):focus-visible {
  outline: 3px solid var(--oxo-v5-focus);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  body .header[data-oxo-glass="5"] { border-radius: 15px; }
  body .header[data-oxo-glass="5"] a.mobile-start {
    min-height: 44px;
    padding: 9px 12px;
    gap: 9px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .header .nav-contact, .header .mobile-start,
    .oxo-footer .oxo-footer-cta, .case-visit-button, .ai-edge .ai-edge-link,
    .case-next .case-links a, .oxo-app-nav .app-nav-bottom > a) { transition: none; }
  body :is(.button, .oxo-footer .oxo-footer-cta, .case-visit-button,
    .ai-edge .ai-edge-link, .case-next .case-links a,
    .oxo-app-nav .app-nav-bottom > a):active { transform: none; }
}
@media (forced-colors: active) {
  body .header[data-oxo-glass="5"] {
    background: Canvas !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body .header[data-oxo-glass="5"]::before,
  body .header[data-oxo-glass="5"]::after { display: none; }
  body .header[data-oxo-glass="5"] a:is(.nav-contact, .mobile-start),
  body .header[data-oxo-glass="5"] .mobile-menu {
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
  }
  body .header[data-oxo-glass="5"] nav > a:not(.nav-contact),
  body .header[data-oxo-glass="5"] .nav-group > summary { color: LinkText !important; }
}