/* Omnicomp — responsive site styles (replaces res/main.css) */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours: exactly the OC logo's orange and blue. Every orange and blue on the site is one of these,
     or a deeper shade of the same hue where small text needs more contrast to stay readable. */
  --orange: #F86619;        /* logo orange */
  --orange-ink: #B8470B;    /* orange for text: 4.6:1 on the grey page, 5.3:1 on white */
  --orange-active: #F86619; /* slider pager: logo orange */
  --title: #F86619;         /* page titles: logo orange; large text only (3:1 on white) */
  --blue: #0274B3;          /* logo blue */
  --lead: #0274B3;          /* intro paragraphs: logo blue */
  --lead-dark: #02679E;     /* small blue text on tinted boxes: a deeper shade of the logo blue */
  --box-title: #0274B3;     /* logo blue */
  --ink: #333333;
  --nav-ink: #393939;
  --muted: #5F6670;
  --menu-ink: #787178;
  --menu-hover: #B8470B;
  --sub-ink: #495869;

  /* Surfaces: light grey page, white cards, light grey boxes nested in cards */
  --page-bg: #EDEFF2;
  --surface: #FFFFFF;
  --surface-alt: #F5F6F8;
  --card-line: #D9DDE3;     /* card borders and dividers on the grey page */
  --line: #E3E3E3;          /* dividers inside white cards */
  --card-shadow: 0 1px 3px rgba(16, 24, 40, .10), 0 4px 12px rgba(16, 24, 40, .07); /* cards on the grey page */
  --box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06);   /* boxes inside cards */

  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --font: "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  /* Type scale for paragraphs, boxes, buttons and the sidebar: one size per role, whole pixels only */
  --fs-xs: 13px;   /* captions, slideshow numbers */
  --fs-sm: 14px;   /* small box text: checklist lines, partner descriptions, sidebar sub-links */
  --fs-md: 15px;   /* box paragraphs, sidebar links */
  --fs-body: 16px; /* page paragraphs, buttons */
  --fs-lg: 17px;   /* intro paragraphs, small box titles */
  --fs-xl: 20px;   /* large box and section titles */

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page-bg);
}
img { max-width: 100%; border: 0; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wrap {
  width: min(var(--page-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.link-accent { color: var(--orange-ink); }
.link-accent:hover { color: var(--orange-ink); }

/* ---------- Header ---------- */
.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo  toggle"
    "phone phone"
    "nav   nav";
  align-items: center;
  gap: 10px 16px;
  padding-block: 12px 10px;
}
.logo { grid-area: logo; justify-self: start; }
.logo img {
  display: block;
  width: clamp(170px, 26vw, 350px);
  height: auto;
}

.phone {
  grid-area: phone;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  color: #222;
}
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--box-shadow);
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-text-stroke: .15px #000; /* the thinnest black outline that still shows on standard screens (0.1px all but disappears) */
}
.phone-link:hover { text-decoration: none; border-color: #C7E0EE; }
/* Phone icon: solid black handset, standing upright with a slight lean to the left (45deg would be straight up);
   the stroke thickens it a little */
.phone-link svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: #000;
  stroke: #000;
  stroke-width: 1.5;
  stroke-linejoin: round;
  transform: rotate(40deg);
}
.phone-link .area-code { color: var(--orange); }

.nav-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--nav-ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
html:not(.js) .nav-toggle { display: none; }

.site-nav { grid-area: nav; }
.nav-list, .submenu { list-style: none; margin: 0; padding: 0; }
.nav-list a { color: var(--nav-ink); }
.nav-list a[aria-current="page"] { color: var(--orange-ink); }
.nav-list a:hover { color: var(--orange-ink); text-decoration: none; }
.nav-item-row { display: flex; align-items: center; }
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nav-ink);
  cursor: pointer;
}
.submenu-toggle svg { width: 10px; height: 6px; transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu a { color: var(--menu-ink); }
.submenu a:hover { color: var(--menu-hover); }

/* Mobile / tablet nav: collapsible list */
@media (max-width: 879.98px) {
  html.js .site-nav { display: none; }
  html.js .site-nav.is-open { display: block; }
  .nav-list { border-top: 1px solid var(--card-line); }
  .nav-list > li { border-bottom: 1px solid var(--card-line); }
  .nav-list a { display: block; padding: 12px 4px; font-size: 17px; }
  .nav-item-row { justify-content: space-between; }
  .nav-item-row a { flex: 1; }
  .submenu-toggle { width: 44px; height: 44px; border-radius: 8px; }
  .submenu-toggle svg { width: 14px; height: 8px; }
  .submenu { display: none; padding: 0 0 8px 16px; }
  .has-submenu.is-open .submenu,
  html:not(.js) .submenu { display: block; }
  .submenu a { padding: 9px 4px; font-size: 16px; }
}

/* Desktop nav: horizontal bar with dropdown */
@media (min-width: 880px) {
  .site-header .wrap {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo phone"
      "logo nav";
    row-gap: 6px;
  }
  .phone { justify-self: end; justify-content: flex-end; }
  .nav-toggle { display: none; }
  .site-nav { justify-self: end; align-self: end; }
  .nav-list { display: flex; align-items: center; }
  .nav-list > li { position: relative; }
  .nav-list > li + li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1px; height: 8px;
    margin-top: -4px;
    background: #C8C8C8;
  }
  .nav-list > li > a,
  .nav-item-row > a { display: block; padding: 6px 20px; font-size: 15px; }
  .nav-item-row > a { padding-right: 6px; }
  .submenu-toggle { width: 22px; height: 30px; margin-right: 10px; border-radius: 4px; }

  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 12px;
    z-index: 100;
    min-width: 200px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  }
  .has-submenu.is-open .submenu { display: block; }
  .submenu li + li { border-top: 1px solid #EBEBEB; }
  .submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .submenu a::after {
    content: "";
    width: 5px; height: 5px;
    border: solid currentColor;
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg);
    opacity: .6;
  }
}
@media (min-width: 880px) and (hover: hover) {
  .has-submenu:hover .submenu { display: block; }
}

/* ---------- Cross-fade (banners, logo strip, testimonials) ---------- */
[data-fader] { display: grid; }
[data-fader] > .fade-item { grid-area: 1 / 1; }
html.js [data-fader] > .fade-item {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade, 1s) ease, visibility 0s linear var(--fade, 1s);
}
html.js [data-fader] > .fade-item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade, 1s) ease, visibility 0s;
}
html:not(.js) [data-fader] > .fade-item:not(:first-child) { display: none; }

.dots { display: flex; justify-content: center; gap: 8px; }
.dots button {
  width: 12px; height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C9D3DC;
  cursor: pointer;
  /* larger hit area without a larger dot */
  box-shadow: 0 0 0 8px transparent;
}
.dots button[aria-current="true"] { background: var(--orange-active); }
html:not(.js) .dots { display: none; }

/* ---------- Home hero slider ---------- */
.hero { position: relative; }
.hero-viewport { overflow: hidden; touch-action: pan-y; border-radius: 10px; box-shadow: var(--card-shadow); }
.hero-track {
  display: flex;
  transition: transform .8s ease;
}
.hero-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
}
.hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
/* Slide numbers: a small dark pill in the image's corner on wider screens. Phones don't show them;
   the slides change on their own every 3 seconds there and can be swiped (res/site.js). */
.hero-pager { display: none; }
@media (min-width: 640px) {
  .hero-pager {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 12px; bottom: 15px;
    z-index: 2;
    gap: 2px;
    padding: 3px 5px;
    background: rgba(0, 0, 0, .6);
    border-radius: 999px;
  }
  html:not(.js) .hero-pager { display: none; }
  .hero-pager button {
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 var(--fs-xs)/1 var(--font);
    cursor: pointer;
  }
  .hero-pager button[aria-current="true"] { background: var(--orange-ink); color: #fff; } /* 5.3:1 */
}

/* ---------- Home service boxes ---------- */
/* One white card: three columns on wide screens (stacked rows below 1180px), each with an illustration,
   a royal-blue title and an orange-ticked list. Thin dividers stop short of the card edges. */
.services {
  display: grid;
  grid-template-columns: 1fr;
  margin: 16px 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 40, 80, .06), 0 10px 24px -8px rgba(16, 60, 140, .28);
}
.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
}
.service-card + .service-card::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: 1px solid #D5DBE4; }
.service-card:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 14px; }
.service-card a:focus-visible { outline: none; }
.service-art { display: block; width: 96px; height: 96px; }

.service-card h2 {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
}
.service-card h2 a { color: inherit; transition: color .15s; }
.service-card:hover h2 a, .service-card:focus-within h2 a { color: var(--orange); } /* blue, orange only on hover */
.service-card h2 a::after { content: ""; position: absolute; inset: 0; } /* whole column is clickable */
.service-card:hover h2 a { text-decoration: underline; }

/* list with orange check marks */
.ticks { margin: 0; padding: 0; list-style: none; font-size: var(--fs-md); line-height: 1.4; color: #1A1A1A; }
.ticks li { position: relative; padding: 3px 0 3px 25px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(3px + .15em);
  width: 17px; height: 17px;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 479.98px) {
  .service-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .service-card + .service-card::before { left: 16px; right: 16px; }
  .service-art { width: 72px; height: 72px; }
}
@media (min-width: 1180px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 26px 0; }
  .service-card { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 4px 14px 4px 18px; }
  .service-card > div { align-self: start; } /* text starts at the top of every column */
  .service-card + .service-card::before { top: 4%; bottom: 4%; left: 0; right: auto; border-top: 0; border-left: 1px solid #D5DBE4; }
  .service-art { width: 110px; height: 110px; }
}
/* Shared rows: the three titles and each of the four ticked points sit on rows that run across all columns,
   so a title or point that wraps in one column keeps the matching lines level in the others. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1180px) {
    .service-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-items: stretch; }
    .service-art { grid-row: 1 / -1; align-self: center; }
    .service-card > div { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-self: stretch; }
    .service-card h2 { align-self: start; }
    .service-card .ticks { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }
  }
}

/* ---------- "Submit A Ticket" call to action (home) ---------- */
.ticket-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
.ticket-cta p { margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.ticket-cta strong { display: block; font-size: var(--fs-lg); font-weight: 700; color: #222; }
.ticket-cta .btn svg { width: 20px; height: 20px; fill: currentColor; transition: fill .15s ease; }
.ticket-cta .btn:hover svg { fill: var(--orange); } /* only the ticket icon turns orange; the words stay white */
@media (max-width: 639.98px) { .ticket-cta .btn { width: 100%; } }

/* ---------- Partner logo strip (home) ---------- */
/* The logo artwork has a white background, so it sits in a white card */
.partner-strip {
  margin-top: 16px;
  padding: 14px clamp(12px, 3vw, 24px);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
/* Slow, endless carousel. The logos (alphabetical, equally spaced) are followed by an identical copy,
   so sliding the track left by exactly half loops seamlessly. Logos fade in/out at the bar's ends.
   --gap and --duration are set in inc/pages/home.php. */
.logo-marquee {
  overflow: hidden;
  overflow: clip; /* never scrolled sideways by focusing a link */
  height: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: logo-scroll var(--duration, 120s) linear infinite;
}
/* Each logo links to the brand's Wikipedia article */
.logo-track a { position: relative; flex: none; display: block; margin-right: var(--gap, 50px); border-radius: 3px; }
.logo-track img { display: block; max-width: none; }
/* On hover a logo turns orange: the span is the same image used as a mask over an orange fill */
.logo-hover { display: none; }
@supports (mask-image: url("x.png")) or (-webkit-mask-image: url("x.png")) {
  .logo-hover {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--orange);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    opacity: 0;
    transition: opacity .15s;
  }
  /* the orange fades in over the blue, then the blue hides (and comes straight back on the way out), so the logo never dims */
  .logo-track a:hover img, .logo-track a:focus-visible img { opacity: 0; transition: opacity 0s .15s; }
  .logo-track a:hover .logo-hover, .logo-track a:focus-visible .logo-hover { opacity: 1; }
}
.logo-track a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* hold still while the pointer or keyboard is on a logo */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
/* Keyboard users: the strip stops sliding and scrolls to whichever logo has focus */
.logo-marquee:has(a:focus-visible) { overflow-x: auto; scrollbar-width: none; }
.logo-marquee:has(a:focus-visible) .logo-track { animation: none; }
.logo-marquee:has(a:focus-visible) .dup { display: none; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }

/* ---------- Inner page banners ---------- */
.page-banner {
  overflow: hidden;
  background: #DDE2E8;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  --fade: 3s;
}
.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 4.5);
  object-fit: cover;
  object-position: var(--focus, 50%) 50%;
}
/* Phones: crop to the half of the banner that carries its headline */
@media (max-width: 639.98px) {
  .page-banner img { aspect-ratio: 2.25; }
  .page-banner { --shown: 2.25; }
}

/* Logos in the banner art link to Wikipedia: a layer with the art's full proportions,
   cropped the same way as the image (object-position), holds a link over each logo */
.banner-slide { position: relative; }
.banner-links {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(100% * var(--ratio, 4.5) / var(--shown, var(--ratio, 4.5)));
  left: var(--focus, 50%);
  translate: calc(var(--focus, 50%) * -1) 0;
}
.banner-link { position: absolute; border-radius: 6px; }
.banner-link:hover,
.banner-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Content panels & typography ---------- */
.panel {
  margin-top: 12px;
  padding: clamp(20px, 3.5vw, 36px);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
.page-title {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--title);
}
.section-title {
  margin: 36px 0 14px;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #222;
}
.prose { font-size: var(--fs-body); line-height: 1.65; }
.prose p { margin: 0 0 1em; }
.prose ul { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin-bottom: .25em; }
.lead { color: var(--lead); font-weight: 600; font-size: var(--fs-lg); line-height: 1.55; }
.callout {
  margin: 8px 0 0;
  padding: 14px 18px;
  background: #F0F7FA;
  border-left: 4px solid var(--lead);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--box-shadow);
}

/* Text beside a diagram; stacks when the column is narrow */
.media-split { display: grid; gap: 24px; }
.media-split > figure { margin: 0; justify-self: center; }
/* Diagrams render at their width attribute (never enlarged) and shrink to fit */
.media-split img,
.figure-wide img { display: block; max-width: 100%; height: auto; }
.figure-wide { margin: 28px 0 0; }
/* Desktop Management and Security circles: a click spins the diagram a full turn (res/site.js) */
.spin-diagram { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.spin-diagram img { border-radius: 50%; transition: transform 1.4s cubic-bezier(.3, .05, .2, 1); }
.spin-diagram:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 50%; } /* a round focus ring */

/* ---------- Services section layout ---------- */
.services-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.services-content {
  container-type: inline-size;
  min-width: 0;
  padding: clamp(20px, 3.5vw, 36px);
}
@container (min-width: 700px) {
  .media-split { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.section-nav { background: var(--surface-alt); border-bottom: 1px solid var(--line); padding: 14px; }
.section-nav ul { list-style: none; margin: 0; padding: 0; }
.section-nav a { color: var(--ink); }
.section-nav a:hover { color: var(--orange-ink); text-decoration: none; }
.section-nav a[aria-current="page"] { color: var(--orange-ink); }

/* Phones/tablets: wrapping chips */
@media (max-width: 879.98px) {
  .section-nav > ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .section-nav .has-children { display: contents; }
  .section-nav a {
    display: inline-block;
    padding: 7px 13px;
    font-size: 14px;
    line-height: 1.3;
    background: #fff;
    border: 1px solid #DCDFE3;
    border-radius: 999px;
  }
  .section-nav a[aria-current="page"] { border-color: var(--orange); background: #FFF4EF; }
  .section-nav .sub {
    order: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding-top: 4px;
  }
  .section-nav .sub a { font-size: 13px; padding: 5px 11px; color: var(--sub-ink); }
}
/* Desktop: sidebar */
@media (min-width: 880px) {
  .services-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .section-nav { padding: 28px 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .section-nav a {
    display: block;
    padding: 9px 20px 9px 18px;
    font-size: var(--fs-md);
    line-height: 1.35;
    border-left: 3px solid transparent;
  }
  .section-nav a[aria-current="page"] { border-left-color: var(--orange); background: #fff; }
  .section-nav .sub a { padding: 6px 16px 6px 32px; font-size: var(--fs-sm); color: var(--sub-ink); }
  .section-nav .sub a[aria-current="page"] { color: var(--orange-ink); }
}

/* ---------- Home & Small Business tiles ---------- */
.tile-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
/* Two even columns once there's room: the 8 boxes form 4 full rows, with both boxes in a row the same height */
@container (min-width: 560px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tile-grid > li {
  padding: 16px 18px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}
.tile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tile-head img { flex: none; width: 72px; height: 72px; border-radius: 10px; } /* same icon size and shape site-wide */
.tile-grid h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; color: #222; }
.tile-grid p { margin: 0 0 .6em; font-size: var(--fs-md); line-height: 1.55; color: #444; }
.tile-grid p:last-child { margin-bottom: 0; }

/* ---------- Corporate checklist & partners ---------- */
.check-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.check-grid li {
  position: relative;
  padding: 11px 14px 11px 46px;
  background: #EEF1F4;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  line-height: 1.35;
}
.check-grid li::before {
  content: "";
  position: absolute;
  left: 13px; top: 13px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.3 2.3L9.5 3.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* Every other checkmark is orange. Set per item in corp.php (not :nth-child) so each box keeps its colour while the carousel moves boxes around */
.check-grid li.check-alt::before { background-color: var(--orange); }
.check-grid strong { display: block; font-size: var(--fs-lg); font-weight: 700; color: #111; }
.check-grid span { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--lead-dark); }

.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.partner-grid li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.partner-grid p { margin: 0; }
/* White logo tile; each logo keeps its own size (width/height attributes) and shrinks only if the tile is narrower */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
}
.partner-logo img { display: block; max-width: 100%; height: auto; }
a.partner-logo { transition: border-color .15s, box-shadow .15s; }
a.partner-logo:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
a.partner-logo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Network page: grid of partner logos beside the text */
.brand-wall { margin: 0; width: min(100%, 380px); }
.brand-wall figcaption {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sub-ink);
}
.brand-wall ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.brand-wall li {
  height: 76px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  transition: border-color .15s, box-shadow .15s;
}
/* the whole tile is the link to the brand's Wikipedia article */
.brand-wall li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px 16px;
  border-radius: inherit;
}
.brand-wall li:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--box-shadow); }
.brand-wall li a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.brand-wall li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Corporate page carousels: a window a few rows tall that rotates one row at a time
   (rows set by data-rows / data-rows-mobile; the script adds .is-rotating and the height).
   Without the script, or with reduced motion, every box is simply shown. */
.box-carousel > ul { grid-auto-rows: 1fr; } /* equal-height rows so each step moves exactly one row */
.box-carousel.is-rotating { overflow: hidden; padding: 4px; margin: -4px; } /* room for the box shadows */

/* ---------- Who we are ---------- */
.who-top { display: grid; gap: 12px; }
@media (min-width: 760px) {
  .who-top { grid-template-columns: 2fr 1fr; }
  .who-top .page-banner img { height: 100%; min-height: 220px; aspect-ratio: auto; }
}
.testimonials {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 22px 16px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
.quotes { --fade: .8s; }
.quotes figure { margin: 0; }
.quotes blockquote { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: #222; }
.quotes blockquote p { margin: 0 0 .6em; }
.quotes figcaption { margin-top: 10px; line-height: 1.3; }
.quote-author { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--orange-ink); }
.quote-company { display: block; font-size: var(--fs-xs); color: #555; }

.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.values li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.values img { display: block; width: 72px; height: 72px; border-radius: 10px; } /* same icon size and shape site-wide */
.values h2 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 700; color: var(--title); } /* 20px bold = large text for contrast */
.values p { margin: 0; font-size: var(--fs-md); line-height: 1.55; }
@media (max-width: 479.98px) {
  .values li { gap: 14px; align-items: start; }
}

.boxes-3 {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.box {
  padding: 20px 22px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}
.box h2 { margin: 0 0 12px; font-size: var(--fs-xl); font-weight: 700; text-align: center; color: var(--box-title); }
.box p { margin: 0 0 1em; font-size: var(--fs-md); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  font: 600 var(--fs-body)/1.2 var(--font);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }               /* 5.1:1 */
/* hover: the button keeps its blue and gains an orange ring (a thin white gap keeps the orange crisp against the blue) */
.btn-primary { transition: box-shadow .15s ease; }
.btn-primary:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--orange); }
/* light button (e.g. "Play again"): logo-blue text, same orange-ring hover */
.btn-secondary { background: var(--surface); color: var(--blue); border-color: var(--card-line); transition: box-shadow .15s ease; }
.btn-secondary:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--orange); }
.btn svg { flex: none; }

/* ---------- Contact Us ---------- */
.contact-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 800px) { .contact-grid { grid-template-columns: 260px minmax(0, 1fr); } }
.contact-info { font-size: var(--fs-body); line-height: 1.6; }
.contact-info address { font-style: normal; margin-bottom: 1em; }
.contact-info .address-link { display: inline-block; }
.contact-info p { margin: 0; }
.contact-info .label { color: var(--orange-ink); }
.contact-info .info-label { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: 700; color: #222; }
.contact-info .info-label:not(:first-child) { margin-top: 22px; }
.contact-info .email { display: inline-block; }
.hours-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.hours-box svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: var(--blue); }
.hours-box p { margin: 0; }
.hours-box strong { color: #222; }
.contact-logo { display: block; width: 200px; height: auto; margin-top: 28px; }
@media (max-width: 799.98px) { .contact-logo { display: none; } } /* the header already shows the logo */

/* Help desk form: a light grey box inside the white panel */
.support-form {
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  scroll-margin-top: 16px;
}
.support-form h2 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 700; color: #222; }
.form-intro { margin: 0 0 18px; font-size: var(--fs-md); color: #444; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #222; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid #7E8894; /* 3.3:1 against the box */
  border-radius: 6px;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field-error { margin: 6px 0 0; font-size: 14px; color: #B3261E; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* While someone is typing in the form, the rest of the page dims by 25% and the form stays bright */
.page-contact::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none; /* clicks pass through, so clicking elsewhere ends the dimming */
  transition: opacity .3s ease;
}
.page-contact.is-form-focus::after { opacity: 1; }
.support-form { position: relative; z-index: 51; transition: box-shadow .3s ease; }
.is-form-focus .support-form { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

.form-alert {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid;
  border-radius: 8px;
}
.form-alert p { margin: 0; }
.form-alert ul { margin: 6px 0 0; padding-left: 1.2em; }
.form-alert a { color: inherit; text-decoration: underline; }
.form-alert--success { background: #E8F5E9; border-color: #A9D5AC; color: #1E5E20; }
.form-alert--error { background: #FDECEA; border-color: #F1B5AE; color: #8C1D18; }
.form-alert:focus { outline: 2px solid currentColor; outline-offset: 2px; }

.contact-note { margin: 28px 0 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.45; text-align: center; }

/* ---------- Easter egg (every page; the note only appears on Contact Us) ---------- */
main.wrap { position: relative; } /* the "?" sits in the bottom-right corner of the page content */
/* Deliberately faint and tiny (that's the point), but still a real, keyboard-reachable button */
.egg {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #DCDFE3;
  font: 600 11px/18px var(--font);
  cursor: help;
}
.egg:hover { color: #B9BEC5; }
html:not(.js) .egg { display: none; }

.logo-shower { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
.logo-shower img { position: absolute; height: auto; will-change: transform; }

.egg-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
/* The note slides up from below the screen while the page behind it dims */
.egg-dialog[open] { animation: egg-slide-up 1.5s cubic-bezier(.33, 1, .68, 1); } /* gentle ease-out so the full 1.5s reads as motion */
.egg-dialog::backdrop { background: rgba(20, 28, 38, .75); animation: egg-dim 1s ease-out; }
@keyframes egg-slide-up { from { transform: translateY(100vh); } }
@keyframes egg-dim { from { background: rgba(20, 28, 38, 0); } }
.egg-card { padding: 28px 28px 24px; text-align: center; }
.egg-card img { display: block; width: 120px; height: auto; margin: 0 auto 16px; }
.egg-card p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; }
.egg-card .egg-challenge { margin: -10px 0 16px; font-weight: 700; color: #222; }
/* "Prove it!" opens the hidden game (res/site.js) */
.egg-card .egg-signature {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 20px;
  font: 700 16px/1.3 Consolas, "Courier New", monospace;
  letter-spacing: .04em;
  color: #39FF14;            /* neon green on black */
  background: #000;
  border: 0;
  border-radius: 6px;
  text-shadow: 0 0 6px rgba(57, 255, 20, .7);
  cursor: pointer;
  transition: box-shadow .15s ease;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.egg-card .egg-signature:hover { box-shadow: 0 0 0 2px #39FF14, 0 0 14px rgba(57, 255, 20, .55); }   /* glows brighter, never darker */
.egg-card .egg-signature:focus-visible { outline: 2px solid #39FF14; outline-offset: 3px; }
.egg-card form { margin: 0; }

/* ---------- OC Virus Removal (hidden game page) ---------- */
.game-page .lead { margin: 0 0 16px; }
.game { max-width: 800px; margin: 0 auto; }
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.game-help { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.game-help kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px;
  font: 600 12px/1.5 var(--font); text-align: center; color: #222;
  background: var(--surface-alt); border: 1px solid var(--card-line); border-bottom-width: 2px; border-radius: 5px;
}
.game-sound {
  padding: 5px 12px; font: 600 var(--fs-sm)/1.2 var(--font); color: var(--blue);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 999px; cursor: pointer;
}
.game-sound[aria-pressed="false"] { color: var(--muted); }
.game-stage { position: relative; border-radius: 14px; }
.game-screen {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  background: #01273D; border-radius: 14px; box-shadow: var(--card-shadow);
  touch-action: none; cursor: pointer;
  transition: box-shadow .25s ease;
}
/* CRT look: fine scanlines plus a soft darkening toward the edges, laid over the game screen */
.game-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .38) 100%);
}
/* the box glows logo blue while a game is running, logo orange while paused */
.game-stage[data-state="play"] .game-screen { box-shadow: 0 0 0 3px var(--blue), 0 0 22px 2px rgba(2, 116, 179, .55); }
.game-stage[data-state="pause"] .game-screen { box-shadow: 0 0 0 3px var(--orange), 0 0 22px 2px rgba(248, 102, 25, .55); }
/* pop-up after every cleared wave */
.game-popup {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(86%, 440px); padding: clamp(12px, 3vw, 22px) clamp(14px, 3vw, 24px); text-align: center;
  background: #fff; border: 3px solid var(--orange); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 15, 24, .45);
  animation: game-pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
  pointer-events: none;
  z-index: 2;   /* above the scanlines */
}
.game-popup[hidden] { display: none; }
.game-popup img { display: block; width: clamp(40px, 9vw, 72px); height: auto; margin: 0 auto 8px; }
.game-popup p { margin: 0; line-height: 1.2; }
.game-popup-title { font-size: clamp(16px, 3.4vw, 26px); font-weight: 700; color: var(--blue); }
.game-popup-next { margin-top: 10px !important; font-size: var(--fs-sm); color: var(--muted); }
/* the victory window (all 10 waves cleared): message, map to OmniComp, directions */
.game-win {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 18px; overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 15, 24, .5);
}
.game-win[open] { animation: game-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.game-win::backdrop { background: rgba(1, 39, 61, .72); }
.game-win-card { padding: clamp(18px, 4vw, 30px); text-align: center; border-top: 6px solid var(--orange); }
.game-win-card > img { display: block; width: 96px; height: auto; margin: 0 auto 10px; }
.game-win h2 { margin: 0; font-size: clamp(22px, 4.4vw, 30px); font-weight: 800; line-height: 1.2; color: var(--orange); }
.game-win-msg { margin: 8px 0 0; font-size: var(--fs-lg); font-weight: 600; color: #222; }
.game-win-score { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.game-win-map { margin-top: 16px; }
.game-win-map iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 0; border-radius: 12px; box-shadow: var(--box-shadow); }
.game-win-address { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.game-win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 18px; }
.game-win-actions form { margin: 0; }
@media (prefers-reduced-motion: reduce) { .game-win[open] { animation: none; } }
/* the 'You Lost' card */
.game-lost-title { font-size: clamp(22px, 4.6vw, 34px); font-weight: 800; color: var(--orange); }
.game-lost-msg { margin-top: 6px !important; font-size: clamp(15px, 3vw, 20px); font-weight: 600; color: #222; }
@keyframes game-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .game-popup { animation: none; } }
/* the pile of OC logos behind the page (one per virus removed); it shows through the frosted glass below */
.logo-pile { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Frosted-glass page: soft logo-blue and logo-orange light behind everything, and the header, the game
   panel and the footer as panes of frosted glass over it (and over the OC pile). The light stays away from
   the top left, where the orange page title sits, so the title keeps the same contrast as on other pages. */
.page-virus-removal {
  background:
    radial-gradient(ellipse 60vmax 45vmax at 100% 0%, rgba(2, 116, 179, .32), transparent 70%),
    radial-gradient(ellipse 45vmax 55vmax at 0% 62%, rgba(2, 116, 179, .22), transparent 70%),
    radial-gradient(ellipse 65vmax 50vmax at 88% 100%, rgba(248, 102, 25, .26), transparent 70%),
    radial-gradient(ellipse 45vmax 35vmax at 8% 100%, rgba(248, 102, 25, .16), transparent 70%),
    var(--page-bg);
  background-attachment: fixed;
}
.page-virus-removal .site-header,
.page-virus-removal .panel,
.page-virus-removal .site-footer {
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.page-virus-removal .panel { background: rgba(255, 255, 255, .52); }
.page-virus-removal .site-header {
  position: relative; z-index: 5;           /* keeps the Services menu above the panel (the glass makes a new layer) */
  border-bottom: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 12px rgba(1, 39, 61, .06);
}
.page-virus-removal .panel {
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(1, 39, 61, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.page-virus-removal .site-footer {
  margin-top: 24px; padding: 16px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .75);
}
.page-virus-removal .footer-meta { padding-top: 0; border-top: 0; color: #4A5059; }
.page-virus-removal .footer-meta a { color: #4A5059; }
.page-virus-removal .game-help,
.page-virus-removal .game-sound[aria-pressed="false"] { color: #4A5059; }   /* a shade darker so it stays readable on the glass */
.page-virus-removal .lead { color: var(--lead-dark); }
/* browsers without frosted glass get near-solid panes instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-virus-removal .site-header,
  .page-virus-removal .panel,
  .page-virus-removal .site-footer { background: rgba(255, 255, 255, .9); }
}

/* the shared Top 10 scoreboard under the game */
.game-board { max-width: 560px; margin: 28px auto 0; }
.game-board h2 { margin: 0 0 10px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; text-align: center; color: var(--blue); }
.game-board-list {
  margin: 0; padding: 0; list-style: none; overflow: hidden;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85); border-radius: 12px;
  box-shadow: var(--box-shadow);
}
.game-board-list[hidden] { display: none; }
.game-board-list li {
  display: grid; grid-template-columns: 2em minmax(0, 1fr) auto 4.6em; align-items: center; gap: 12px;
  padding: 8px 16px; font-size: var(--fs-md);
}
.game-board-list li + li { border-top: 1px solid rgba(16, 24, 40, .08); }
.game-board-list .rank { font-weight: 700; text-align: right; color: #4A5059; }
.game-board-list li:nth-child(-n+3) .rank { color: var(--orange-ink); }   /* the top three */
.game-board-list .who { font-weight: 600; color: #222; overflow-wrap: anywhere; }
.game-board-list .wave { font-size: var(--fs-sm); color: #4A5059; }
.game-board-list .won {
  padding: 2px 9px; border-radius: 999px; background: var(--orange-ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.game-board-list .pts { font-weight: 700; text-align: right; color: var(--lead-dark); font-variant-numeric: tabular-nums; }
.game-board-list .is-new { background: rgba(248, 102, 25, .14); animation: board-new 2s ease-out; }
@keyframes board-new { from { background: rgba(248, 102, 25, .45); } }
.game-board-note { margin: 0; padding: 14px 16px; text-align: center; font-size: var(--fs-sm); color: #4A5059; }
.game-board-note[hidden] { display: none; }
@media (max-width: 479.98px) {
  .game-board-list li { gap: 8px; padding: 8px 12px; grid-template-columns: 1.6em minmax(0, 1fr) auto 4.2em; }
}

/* name entry for a top-10 score: its own window after a loss, inside the victory window after a win */
.game-entry {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 18px; overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 15, 24, .5);
}
.game-entry[open] { animation: game-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.game-win::backdrop, .game-entry::backdrop {
  background: rgba(1, 39, 61, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.game-entry-card { padding: clamp(18px, 4vw, 28px); text-align: center; border-top: 6px solid var(--orange); }
.game-entry-card > img { display: block; width: 72px; height: auto; margin: 0 auto 8px; }
.game-entry h2 { margin: 0; font-size: clamp(22px, 4.4vw, 28px); font-weight: 800; line-height: 1.2; color: var(--orange); }
.game-entry-score { margin: 6px 0 0; font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.game-entry-skip { margin: 16px 0 0; }
.game-name { max-width: 400px; margin: 18px auto 0; text-align: left; }
.game-name-form { margin: 0; }
.game-name label { display: block; margin-bottom: 6px; font-size: var(--fs-md); font-weight: 600; color: #222; }
.game-name-row { display: flex; gap: 10px; }
.game-name input {
  flex: 1; min-width: 0; padding: 10px 12px;
  font: 600 16px/1.3 var(--font); color: var(--ink);   /* 16px stops iOS zooming in on focus */
  background: #fff; border: 1px solid #7E8894; border-radius: 8px;
}
.game-name input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.game-name input[aria-invalid="true"] { border-color: #B3261E; }
.game-name .btn { flex: none; }
.game-name-hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.game-name-error { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; color: #B3261E; }
.game-name-done { margin: 0; text-align: center; font-size: var(--fs-lg); font-weight: 700; color: var(--lead-dark); }
.game-name [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .game-entry[open], .game-board-list .is-new { animation: none; } }
/* on-screen controls for phones and tablets */
.game-pad { display: none; gap: 10px; justify-content: center; margin-top: 12px; }
@media (pointer: coarse) {
  .game-pad { display: flex; }
  .game-help { display: none; }
}
.game-pad button {
  flex: 1; max-width: 130px; min-height: 58px; border: 0; border-radius: 14px;
  font: 700 var(--fs-lg)/1 var(--font); color: #fff; background: var(--blue);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.game-pad .fire { background: var(--orange); letter-spacing: .06em; }
.game-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--fs-md);
}
.game-legend li { display: flex; align-items: center; gap: 8px; }
.game-legend canvas { display: block; image-rendering: pixelated; }
.game-legend strong { color: var(--orange-ink); }

/* ---------- Policy (SMS) page ---------- */
.page-sms main.wrap { width: min(860px, 100% - 2 * var(--gutter)); } /* keeps the easter egg "?" in the card's corner */
.policy { max-width: 860px; margin-inline: auto; background: #fff; }
.policy h1 {
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  color: var(--title);
  border-bottom: 2px solid #EEEEEE;
}
.policy h2 { margin: 28px 0 8px; font-size: 20px; color: var(--blue); }
.policy p, .policy li { margin-bottom: 10px; }
.policy ul { margin: 5px 0 15px; padding-left: 20px; }
.policy a { color: var(--blue); text-decoration: underline; }
.policy .highlight {
  margin: 15px 0;
  padding: 15px 18px;
  background: #EEF1F3;
  border-left: 4px solid var(--blue);
  border-radius: 0 6px 6px 0;
  box-shadow: var(--box-shadow);
}
.policy .highlight p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { padding: 24px 0 56px; }
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--card-line);
}
.footer-meta address { display: inline; font-style: normal; }
.footer-meta a { color: var(--muted); }
/* Who we are: a credit in the page's own background colour, so it is invisible unless selected */
.footer-credit { margin: 8px 0 0; font-size: 11px; line-height: 1.4; text-align: center; color: var(--page-bg); }
@media (min-width: 640px) {
  .footer-meta { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 0; }
  .footer-meta li + li::before { content: "|"; margin: 0 14px; color: #A9B0B9; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-track, .submenu-toggle svg { transition: none; }
  html.js [data-fader] > .fade-item { transition: none; }
  /* No carousel: the logos sit still and can be scrolled sideways by hand */
  .logo-track { animation: none; }
  .logo-track .dup { display: none; }
  .logo-marquee { height: auto; overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .egg-dialog[open], .egg-dialog::backdrop { animation: none; }
  .page-contact::after, .support-form { transition: none; }
}