/*
 * OxygenIT brand layer for GeneratePress.
 *
 * Values come from STANDARDS.md (binding, approved 7 Aug 2026) and were
 * cross-checked against the live page's Elementor globals, which match:
 *   primary #151F2B, accent #0071A4, text #0E141C, Josefin Sans.
 *
 * Outfit is deliberately absent. It is live on the old site (18 declarations)
 * and was retired by decision D1.
 */

:root {
  /* Ink */
  --ox-ink:            #0e141c;
  --ox-ink-heading:    #1f2c3c;
  --ox-ink-muted:      #4a5666;

  /* Blue. brand is IDENTITY ONLY - 3.89:1 fails AA as text. */
  --ox-brand:          #0089c7;
  --ox-action:         #0071a4;
  --ox-action-on-dark: #5cc4f2;

  /* Grounds */
  --ox-surface:        #ffffff;
  --ox-surface-alt:    #fafafa;
  --ox-surface-tint:   #f2f5f8;
  --ox-ground-deep:    #151f2b;
  --ox-ground-navy:    #1f2c3c;
  --ox-ground-slate:   #33465e;

  --ox-container:      1280px;
  --ox-measure:        720px;
  --ox-radius-pill:    999px;
  --ox-section-y:      80px;

  --ox-font: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- type */

body,
button, input, select, textarea,
.main-navigation a {
  font-family: var(--ox-font);
  color: var(--ox-ink);
}

body { font-size: 18px; line-height: 32px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ox-font);
  color: var(--ox-ink-heading);
}

h1, .entry-content h1 { font-size: 54px; font-weight: 700; line-height: 1.1; }
h2, .entry-content h2 { font-size: 36px; font-weight: 700; line-height: 1.2; }
h3, .entry-content h3 { font-size: 24px; font-weight: 600; line-height: 1.3; }
h4, .entry-content h4 { font-size: 20px; font-weight: 600; line-height: 1.4; }

@media (max-width: 767px) {
  body { font-size: 17px; }
  h1, .entry-content h1 { font-size: 34px; }
  h2, .entry-content h2 { font-size: 28px; }
  h3, .entry-content h3 { font-size: 22px; }
  h4, .entry-content h4 { font-size: 18px; }
}

/* The lead paragraph: first paragraph after the H1. */
.entry-content h1 + p { font-size: 20px; line-height: 1.6; color: var(--ox-ink-muted); }
@media (max-width: 767px) { .entry-content h1 + p { font-size: 18px; } }

a { color: var(--ox-action); }
a:hover, a:focus { color: var(--ox-brand); }

/* Measure: body copy caps at 720px however wide the container is. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.ox-section > .wp-block-group__inner-container > p,
.ox-section > .wp-block-group__inner-container > ul,
.ox-section > .wp-block-group__inner-container > ol { max-width: var(--ox-measure); }

/* ---------------------------------------------------------- containers */

.site-content .container,
.inside-header,
.ox-section > .wp-block-group__inner-container,
.site-footer .inside-site-info,
.site-footer .footer-widgets-container {
  max-width: var(--ox-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Full-bleed bands.
   The `margin-left: calc(50% - 50vw)` trick was tried first and pushed the
   content off the left edge: that 50% resolves against the PARENT, and
   GeneratePress's content column is neither full width nor centred in the
   viewport. Dropping the container constraint on the front page instead is
   both correct and simpler - each band is then already full width, and the
   1280px measure is restored by the band's own inner container. */
/* GeneratePress puts `grid-container container` on #page ITSELF, so the width
   cap sits on the same element that carries .ox-front - a descendant selector
   never reaches it. Hence the compound `.ox-front.container`. */
.ox-front.container,
.ox-front.grid-container,
.ox-front .site-content .container,
.ox-front .site-content .content-area,
.ox-front .site-main,
.ox-front .entry-content {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.ox-front .site-content .container { display: block; }
.ox-front .entry-content > * { margin-top: 0; margin-bottom: 0; }

.ox-section {
  width: 100%;
  padding-top: var(--ox-section-y);
  padding-bottom: var(--ox-section-y);
}
/* The band is full width; its contents are not. */
.ox-section > .wp-block-group__inner-container {
  max-width: var(--ox-container);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 767px) { .ox-section { padding-top: 48px; padding-bottom: 48px; } }

.ox-section--light { background: var(--ox-surface); }
.ox-section--alt   { background: var(--ox-surface-tint); }
.ox-section--deep  { background: var(--ox-ground-deep); }
.ox-section--navy  { background: var(--ox-ground-navy); }

/* On dark grounds, flip ink and use the dark-ground blue (8.42:1). */
.ox-section--deep, .ox-section--deep p, .ox-section--deep li,
.ox-section--navy, .ox-section--navy p, .ox-section--navy li { color: #ffffff; }
.ox-section--deep h1, .ox-section--deep h2, .ox-section--deep h3, .ox-section--deep h4,
.ox-section--navy h1, .ox-section--navy h2, .ox-section--navy h3, .ox-section--navy h4 { color: #ffffff; }
.ox-section--deep a:not(.wp-block-button__link),
.ox-section--navy a:not(.wp-block-button__link) { color: var(--ox-action-on-dark); }

/* ------------------------------------------------------------- buttons */

.entry-content .wp-block-button .wp-block-button__link,
.wp-block-button__link,
.button, button, input[type="submit"] {
  background-color: var(--ox-action);
  color: #ffffff;
  border-radius: var(--ox-radius-pill);
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
  padding: 12px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid var(--ox-action);
  transition: background-color .2s ease, color .2s ease;
}
.wp-block-button__link:hover, .button:hover, button:hover {
  background-color: #005b85;
  border-color: #005b85;
  color: #ffffff;
}
/* On dark ground an outline button reads better than a solid one. */
.entry-content .ox-section--deep .wp-block-button .wp-block-button__link,
.entry-content .ox-section--navy .wp-block-button .wp-block-button__link,
.ox-section--deep .wp-block-button__link,
.ox-section--navy .wp-block-button__link {
  background-color: var(--ox-action-on-dark);
  border-color: var(--ox-action-on-dark);
  color: var(--ox-ground-deep);
}

/* ------------------------------------- header (SUPERSEDED, see below) */

/* logo.svg is a DARK-GROUND lockup: the "Oxygen" wordmark is drawn as white
   paths plus two grey-to-white gradients, so on a white header the word
   disappears and only the ring and "IT" survive. The header is therefore dark
   by necessity, not by taste.
   Specifically #1F2C3C, because one path INSIDE the ring is filled #1F2C3C and
   is meant to read as the background showing through. On any other dark value
   that detail shows up as a navy smudge. */
.site-header {
  background-color: var(--ox-ground-navy);
  border-bottom: 3px solid var(--ox-brand);
}
.site-header .site-logo img { max-height: 52px; width: auto; }
.main-navigation,
.main-navigation ul ul { background-color: var(--ox-ground-navy); }
.main-navigation .main-nav ul li a {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a {
  color: var(--ox-action-on-dark);
  background-color: transparent;
}
.main-navigation ul ul { border-top: 3px solid var(--ox-brand); min-width: 280px; }
.main-navigation ul ul li a { font-weight: 400; font-size: 15px; }

/* -------------------------------------------------------------- footer */

.site-footer {
  background-color: var(--ox-ground-deep);
  color: #ffffff;
}
.site-footer a { color: var(--ox-action-on-dark); }
.site-footer .footer-widgets { padding: 56px 0; }
.site-footer .widget-title { color: #ffffff; font-size: 20px; font-weight: 600; }
.site-info { background-color: #0d151e; color: #c9d3de; font-size: 14px; padding: 20px 0; }

/* -------------------------------------------------------------- tables */

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  background: #ffffff;
}
.wp-block-table th {
  background: var(--ox-surface-tint);
  color: var(--ox-ink-heading);
  font-weight: 600;
  text-align: left;
}
.wp-block-table th, .wp-block-table td {
  border: 1px solid #dde3ea;
  padding: 12px 16px;
}
.wp-block-table { max-width: 860px; }

/* ----------------------------------------------------------- FAQ items */

.wp-block-details {
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 10px;
  max-width: 860px;
}
.wp-block-details summary {
  font-weight: 600;
  font-size: 18px;
  color: var(--ox-ink-heading);
  cursor: pointer;
}
.wp-block-details[open] summary { color: var(--ox-action); margin-bottom: 8px; }

/* -------------------------------------------------------------- quotes */

.wp-block-quote {
  border-left: 4px solid var(--ox-brand);
  padding-left: 20px;
  font-style: normal;
  color: var(--ox-ink-muted);
  max-width: var(--ox-measure);
}
.ox-section--navy .wp-block-quote, .ox-section--deep .wp-block-quote { color: #e6edf5; }

/* -------------------------------------------------------------- images */

.wp-block-image img { border-radius: 10px; }

@media (max-width: 767px) { }


/* The logo IS the wordmark, so GeneratePress must not also print the site title
   beside it - the screenshot showed "OxygenIT" twice, once as art and once as
   grey text. */
.site-header .site-branding,
.site-header .site-title,
.site-header .site-description { display: none !important; }
.site-header .inside-header { display: flex; align-items: center; gap: 32px; }

/* Links inside a band must not inherit the hero's white. */
.ox-section--light a:not(.wp-block-button__link),
.ox-section--alt a:not(.wp-block-button__link) { color: var(--ox-action); }


/* Measured, not guessed. Walking the ancestor chain of a band showed exactly
   two things still holding the content in:
     .content-area   - a flex child of .site-content, sized 1108px not 1440px
     .inside-article - 40px of horizontal padding
   Everything above them was already full width. */
.ox-front .content-area {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}
.ox-front .inside-article {
  padding-left: 0;
  padding-right: 0;
}
.ox-front .site-content { display: block; }


/* The lead paragraph is ink-muted (#4a5666) by default, which is right on a
   light ground and almost unreadable on a dark one. The dark bands need the
   light equivalent. */
.entry-content .ox-section--deep h1 + p,
.entry-content .ox-section--navy h1 + p,
.entry-content .ox-section--deep h2 + p,
.entry-content .ox-section--navy h2 + p { color: #c5d3e2; }

/* Kill the white strip between the header and the first band: .inside-article
   carries vertical padding as well as the horizontal padding already removed. */
.ox-front .inside-article { padding-top: 0; padding-bottom: 0; }
.ox-front .site-main { margin: 0; }
.ox-front .entry-content { margin-top: 0; }
.ox-front article.page { margin: 0; padding: 0; border: 0; }
.ox-front .separate-containers .inside-article { padding: 0; }


/* The footer widget area is a separate element (#footer-widgets) with its own
   white ground, so styling .site-footer alone left white text on white. */
#footer-widgets,
.site-footer .footer-widgets,
.site-footer .inside-footer-widgets {
  background-color: var(--ox-ground-deep);
  color: #ffffff;
}
#footer-widgets .widget,
#footer-widgets p,
#footer-widgets li,
#footer-widgets strong { color: #ffffff; text-align: left; }
#footer-widgets a { color: var(--ox-action-on-dark); }
.footer-widgets-container { max-width: var(--ox-container); margin: 0 auto; padding: 0 24px; }
.site-info { text-align: center; }


/* A table sitting in a dark band inherits that band's white text, but the table
   itself keeps a white ground - so the SLA table rendered with a visible header
   row and four completely blank rows. Cells set their own colour. */
.wp-block-table td,
.ox-section--deep .wp-block-table td,
.ox-section--navy .wp-block-table td { color: var(--ox-ink); }
.ox-section--deep .wp-block-table th,
.ox-section--navy .wp-block-table th { color: var(--ox-ink-heading); }
.ox-section--deep .wp-block-table a,
.ox-section--navy .wp-block-table a { color: var(--ox-action); }


/* Mobile overflow, measured at 390px: the document was 474px wide.
   Two causes, both fixed here.
   1. The banner photo kept `width:auto; max-width:420px`, so at 390px it and
      the four head shots each measured 390px inside a flex row.
   2. The four-column SLA table has a natural minimum of ~431px. A table that
      narrow becomes unreadable, so it scrolls rather than squashes. */
.wp-block-image img,
@media (max-width: 767px) {
  .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wp-block-table table { min-width: 520px; }
}


/* =====================================================================
   Header and footer as GP Premium Block Elements.

   The native GeneratePress header no longer renders at all: a Block Element
   with _generate_block_type = site-header replaces it outright, so every
   .site-header and .main-navigation rule above is now dead. The markup is our
   own group blocks plus generateblocks-pro/classic-menu, which emits a plain
   <ul> - unstyled it renders as a vertical bulleted list, which is exactly how
   it first appeared.
   ===================================================================== */

.ox-header-inner {
  background-color: var(--ox-ground-navy);
  border-bottom: 3px solid var(--ox-brand);
  /* Full-bleed ground, 1280px of content, without a nested wrapper. */
  padding: 14px max(24px, calc((100% - var(--ox-container)) / 2));
  box-sizing: border-box;
  align-items: center;
  gap: 24px;
}
.ox-logo { display: inline-flex; line-height: 0; }
.ox-logo img { max-height: 52px; width: auto; display: block; }

.ox-header-right { align-items: center; gap: 18px; }

/* classic-menu emits the <ul> itself, so .ox-nav IS the list. */
.ox-nav,
.ox-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ox-nav { display: flex; align-items: center; gap: 2px; }
.ox-nav li { position: relative; list-style: none; margin: 0; }
.ox-nav > li > a,
.ox-nav a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
.ox-nav li:hover > a,
.ox-nav a:hover,
.ox-nav .current-menu-item > a { color: var(--ox-action-on-dark); }

/* Sub-menus: hidden until hover or focus, so the header is one row tall. */
.ox-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--ox-ground-navy);
  border-top: 3px solid var(--ox-brand);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 200;
  padding: 6px 0;
}
.ox-nav li:hover > .sub-menu,
.ox-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ox-nav .sub-menu a { font-weight: 400; font-size: 15px; padding: 9px 18px; white-space: normal; }

.ox-header-cta .wp-block-button__link {
  background-color: var(--ox-action-on-dark);
  border-color: var(--ox-action-on-dark);
  color: var(--ox-ground-deep);
  font-size: 16px;
  padding: 10px 22px;
  min-height: 44px;
}

/* Footer element */
.ox-footer-inner {
  max-width: var(--ox-container);
  margin: 0 auto;
  padding: 56px 24px;
  box-sizing: border-box;
}
.ox-footer-inner, .ox-footer-inner p, .ox-footer-inner li { color: #ffffff; }
.ox-footer-inner h3 { color: #ffffff; font-size: 18px; margin-bottom: 12px; }
.ox-footer-inner a { color: var(--ox-action-on-dark); text-decoration: none; }
.ox-footer-inner a:hover { text-decoration: underline; }
.ox-footer-inner ul { list-style: none; margin: 0; padding: 0; }
.ox-footer-inner li { margin-bottom: 8px; }
.ox-footer-logo { max-width: 200px; height: auto; margin-bottom: 16px; }

@media (max-width: 900px) {
  /* Below tablet the 7-item menu cannot sit on one row; stack it and let the
     bar grow rather than letting items overflow the viewport. */
  .ox-header-inner { flex-wrap: wrap; gap: 12px; }
  .ox-nav { flex-wrap: wrap; justify-content: flex-start; }
  .ox-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none;
                      box-shadow: none; min-width: 0; display: none; }
  .ox-header-right { flex-wrap: wrap; gap: 10px; }
}


/* GenerateBlocks Pro ships `.gb-menu--base :where(.menu-item) .gb-menu-link
   { color: inherit }` in classic-menu-style.css. `:where()` contributes no
   specificity, so that rule is (0,2,0) and beat `.ox-nav a` at (0,1,1) - and
   because the block enqueues its stylesheet at render time it also loads after
   brand.css, so it wins ties too. Hence the extra ancestor here, and the
   explicit targeting of their own class. */
.ox-header-inner .ox-nav a,
.ox-header-inner .gb-menu-link,
.ox-header-inner .ox-nav .gb-menu-link { color: #ffffff; }

.ox-header-inner .ox-nav li:hover > a,
.ox-header-inner .ox-nav a:hover,
.ox-header-inner .gb-menu-link:hover,
.ox-header-inner .ox-nav .current-menu-item > a { color: var(--ox-action-on-dark); }

.ox-header-inner .ox-nav .sub-menu a,
.ox-header-inner .ox-nav .sub-menu .gb-menu-link { color: #ffffff; font-weight: 400; }
.ox-header-inner .ox-nav .sub-menu a:hover { color: var(--ox-action-on-dark); }

/* BEGIN:hero */
/* ====================================================================
   Homepage hero
   --------------------------------------------------------------------
   The live page leads on a WHITE ground with centred type. An earlier
   pass rendered this band navy and left-aligned, which is a departure
   from the page being matched, so the hero is --light and centred here.

   Children sit inside .wp-block-group__inner-container, not directly
   under .ox-hero, so a `.ox-hero > *` selector would match nothing.
   ==================================================================== */
.ox-hero {
  padding-top: 64px;
  padding-bottom: 72px;
  text-align: center;
}

/* The shared .ox-section rule caps p/ul/ol at --ox-measure but sets no
   auto margins, so without this the capped paragraphs sit hard left
   inside a centred band. */
.ox-hero > .wp-block-group__inner-container > * {
  margin-left: auto;
  margin-right: auto;
}

.ox-hero h1 {
  /* The live H1 sets on two lines. 22ch broke it to three; min() keeps the
     two-line set on desktop without forcing a fixed width on narrow screens. */
  max-width: min(960px, 100%);
  margin-bottom: 26px;
  color: var(--ox-ink-heading);
}

/* The two link-bearing lines under the H1. --ox-action, not --ox-brand:
   brand blue is 3.89:1 and fails AA as text. */
.ox-hero .ox-kicker {
  max-width: 76ch;
  margin-bottom: 6px;
  color: var(--ox-action);
  font-size: 1.02rem;
  line-height: 1.6;
}

.ox-hero .ox-kicker a {
  color: var(--ox-action);
  text-decoration: underline;
}

.ox-hero .ox-sub,
.ox-hero .ox-body {
  max-width: 68ch;
  margin-top: 18px;
  color: var(--ox-ink);
}

.ox-hero .ox-sublink {
  margin-top: 10px;
  color: var(--ox-ink-muted);
  font-size: 0.92rem;
}

.ox-hero .ox-foot {
  max-width: 82ch;
  margin-top: 26px;
  color: var(--ox-ink-muted);
  font-size: 0.8rem;
}

/* ---- Call to action row ------------------------------------------- */
.ox-hero .ox-hero-cta {
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.ox-hero .ox-btn-primary .wp-block-button__link {
  background-color: var(--ox-action);
  border: 2px solid var(--ox-action);
  color: #ffffff;
}

.ox-hero .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--ox-action);
  color: var(--ox-action);
}

/* A tel: link that reads as a third option, not a third button. */
.ox-hero .ox-btn-tel .wp-block-button__link {
  background-color: transparent;
  border: 0;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--ox-action);
  text-decoration: underline;
}

/* ---- Proof tiles --------------------------------------------------- */
.ox-hero .ox-tiles {
  gap: 20px;
  margin-top: 38px;
}

.ox-hero .ox-tile {
  height: 100%;
  padding: 24px 18px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: var(--ox-surface);
  box-sizing: border-box;
}

.ox-hero .ox-tile-n {
  margin: 0 0 8px;
  color: var(--ox-action);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
}

.ox-hero .ox-tile-n .ox-star {
  color: var(--ox-ink-muted);
  font-size: 0.85rem;
}

.ox-hero .ox-tile-l {
  margin: 0;
  color: var(--ox-ink-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ---- Price and guarantee callouts ---------------------------------- */
.ox-hero .ox-callouts {
  gap: 34px;
  margin-top: 30px;
}

.ox-hero .ox-callout {
  padding-left: 16px;
  border-left: 3px solid var(--ox-action);
  text-align: left;
}

.ox-hero .ox-callout-t {
  margin: 0 0 5px;
  color: var(--ox-ink-heading);
  font-weight: 700;
}

.ox-hero .ox-callout-d {
  margin: 0;
  color: var(--ox-ink-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

/* Columns stack below 782px in core; keep the tiles readable when they do. */
@media (max-width: 781px) {
  .ox-hero { padding-top: 44px; padding-bottom: 52px; }
  .ox-hero h1 { max-width: none; }
  .ox-hero .ox-hero-cta { flex-direction: column; align-items: stretch; }
  .ox-hero .ox-tiles,
  .ox-hero .ox-callouts { gap: 16px; }
}
/* END:hero */

/* BEGIN:team */
/* ====================================================================
   Team band
   --------------------------------------------------------------------
   The founder's photo is a pre-composed graphic (ring + dot field), not a
   head shot, so it is centred on its own and NOT part of the row.

   The row itself is a Gutenberg flex group: `is-layout-flex` lands on the
   inner container, which is where the flex items actually live. Setting
   display:flex on the OUTER element does nothing, because a constrained
   group gives it a single child.
   ==================================================================== */
.ox-team-founder { margin: 10px auto 30px; }

.ox-team-founder img {
  display: block;
  width: min(420px, 82%);
  height: auto;
  margin: 0 auto;
}

.ox-team-row { gap: 24px; margin-top: 4px; }

.ox-team-row .ox-avatar { margin: 0; flex: 0 0 auto; }

.ox-team-row .ox-avatar img {
  display: block;
  width: clamp(104px, 12vw, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .ox-team-row { gap: 14px; }
  .ox-team-founder img { width: 74%; }

  /* Four avatars at the clamp() width wrap 3 + 1, which looks like a mistake.
     An explicit half-width basis lands them 2 + 2. */
  .ox-team-row .ox-avatar { flex: 0 0 calc(50% - 7px); }
  .ox-team-row .ox-avatar img { width: 100%; max-width: 152px; margin: 0 auto; }
}
/* END:team */

/* BEGIN:proof */
/* ====================================================================
   Proof band
   ==================================================================== */
.ox-eyebrow {
  margin-bottom: 4px;
  color: var(--ox-action);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ox-proof h2 { margin-top: 0; }

.ox-proof .ox-proof-cols { gap: 46px; margin-bottom: 40px; }

.ox-proof .ox-lead { color: var(--ox-ink); }

/* The pull quote is a heading so it carries weight in the outline, but it is
   NOT a section heading - the attribution belongs to it, not to what follows. */
.ox-proof .ox-pull {
  margin: 26px 0 6px;
  color: var(--ox-ink-heading);
  font-size: 1.65rem;
  line-height: 1.3;
}

.ox-proof .ox-cite {
  margin: 0 0 18px;
  color: var(--ox-ink-muted);
  font-size: 0.92rem;
}

/* A text link, not a button: the band's real call to action is below. */
.ox-proof .ox-readmore { margin: 0; }
.ox-proof .ox-readmore a {
  color: var(--ox-action);
  font-weight: 600;
  text-decoration: underline;
}

/* ---- YouTube facade -------------------------------------------------
   A thumbnail and a play affordance that link through to the case study.
   No iframe, so no third-party player and no cookies until the visitor
   actually chooses to watch. */
.ox-video {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}

.ox-video img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ox-video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ox-action);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* The triangle, drawn rather than shipped as an asset. */
.ox-video .play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #ffffff;
}

.ox-video .vlabel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

.ox-video:hover .play { background: var(--ox-brand); }

/* ---- SLA table ------------------------------------------------------
   Priority colours are the live page's, applied by position rather than as
   inline styles per cell: a core table block cannot carry per-cell classes.
   Ink stays dark on every swatch - all four are light enough to need it. */
.ox-sla table { width: 100%; border-collapse: collapse; }

.ox-sla thead th {
  padding: 10px 12px;
  background-color: #14374f;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.ox-sla tbody td {
  padding: 10px 12px;
  border: 1px solid #e3e9ef;
  color: var(--ox-ink);
  font-weight: 700;
  text-align: center;
}

/* The description column reads as prose, not as data. */
.ox-sla tbody td:nth-child(2) {
  font-weight: 400;
  text-align: left;
}

.ox-sla tbody tr:nth-child(1) td:first-child { background-color: #ff5c5c; }
.ox-sla tbody tr:nth-child(2) td:first-child { background-color: #fbbf45; }
.ox-sla tbody tr:nth-child(3) td:first-child { background-color: #faf07c; }
.ox-sla tbody tr:nth-child(4) td:first-child { background-color: #6fd4f5; }

.ox-proof .ox-slanote { margin-top: 14px; color: var(--ox-ink); }

.ox-proof .ox-muted {
  color: var(--ox-ink-muted);
  font-size: 0.92rem;
}

.ox-centre-cta { justify-content: center; margin-top: 26px; }

.ox-proof .ox-sub2 {
  margin-top: 10px;
  color: var(--ox-ink-muted);
  font-size: 0.86rem;
  text-align: center;
}

/* The band opens with a left-aligned "Proof" label above the heading; only the
   testimonials label is centred. A blanket rule centred both. */
.ox-proof .ox-eyebrow:first-child { margin-top: 0; text-align: left; }

.ox-proof .ox-testimonials-label { margin-top: 54px; text-align: center; }

/* ---- Testimonials ---------------------------------------------------
   The rebuild had dropped every name and role. An unattributed testimonial
   carries no weight, so the attribution is part of the block, not styling. */
.ox-proof .ox-testimonials { gap: 26px; margin-top: 10px; }

.ox-testimonial {
  height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: var(--ox-surface);
  box-sizing: border-box;
}

.ox-testimonial .ox-tquote {
  margin: 0 0 14px;
  color: var(--ox-ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ox-testimonial .ox-tquote::before {
  content: "\201C";
  margin-right: 2px;
  color: var(--ox-action);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0;
  vertical-align: -0.1em;
}

.ox-testimonial .ox-tattrib {
  margin: 0;
  color: var(--ox-ink-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.ox-testimonial .ox-tattrib strong { color: var(--ox-ink-heading); }

@media (max-width: 781px) {
  .ox-proof .ox-proof-cols { gap: 26px; }
  .ox-proof .ox-pull { font-size: 1.4rem; }
  .ox-video .play { width: 52px; height: 52px; }
  /* A four-column table below ~430px is unreadable, so it scrolls. */
  .ox-sla { overflow-x: auto; }
}
/* END:proof */

/* BEGIN:cost */
/* ====================================================================
   Cost cards
   --------------------------------------------------------------------
   Two bordered cards, each captioning its own table. The extraction had
   produced two full-width tables with the labels stranded underneath.
   ==================================================================== */
.ox-cost-cols { gap: 26px; margin-top: 18px; }

.ox-card {
  height: 100%;
  padding: 20px 20px 18px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: var(--ox-surface);
  box-sizing: border-box;
}

.ox-clabel {
  margin: 0 0 12px;
  color: var(--ox-action);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ox-ctable { margin: 0 0 12px; }
.ox-ctable table { width: 100%; border-collapse: collapse; }

.ox-ctable td {
  padding: 9px 10px;
  border: 1px solid #e8edf2;
  color: var(--ox-ink);
  font-size: 0.93rem;
}

.ox-ctable .ox-cnum,
.ox-ctable td:last-child {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
}

.ox-ctable .ox-ctotal td { background: var(--ox-surface-tint); }

.ox-cnote {
  margin: 0;
  color: var(--ox-ink-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 781px) {
  .ox-cost-cols { gap: 16px; }
}

/* The sub-caption under a centred CTA. This was scoped to .ox-proof only, so
   the copy under "See every published price" fell back to left-aligned and,
   being outside the measure cap, sat hard against the viewport edge. */
.ox-sub2 {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
  color: var(--ox-ink-muted);
  font-size: 0.86rem;
  text-align: center;
}
/* END:cost */

/* BEGIN:fixes */
/* ====================================================================
   Header contact strip
   ==================================================================== */
.ox-header-inner { align-items: center; row-gap: 10px; }

.ox-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ox-contact li { margin: 0; }

.ox-contact a {
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--ox-radius-pill);
  color: #ffffff;
  line-height: 1.15;
  text-decoration: none;
}

.ox-contact a:hover,
.ox-contact a:focus-visible {
  border-color: var(--ox-brand);
  background: rgba(255, 255, 255, 0.07);
}

.ox-contact .ox-clab {
  color: var(--ox-action-on-dark);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.ox-contact .ox-cval { font-size: 0.98rem; font-weight: 700; }

/* The sales line is the one we want dialled. */
.ox-contact .ox-c-primary {
  border-color: transparent;
  background: var(--ox-action);
}

.ox-contact .ox-c-primary:hover { background: var(--ox-brand); }

.ox-header-nav { flex: 1 1 100%; justify-content: flex-end; gap: 18px; }

@media (max-width: 900px) {
  .ox-contact .ox-clab { display: none; }
  .ox-header-nav { justify-content: flex-start; }
}

/* ====================================================================
   Hero proof tiles - were 209px tall for 71px of content
   --------------------------------------------------------------------
   The height came from the theme's paragraph margins inside the tile,
   not from the padding, so trimming padding alone would not have done it.
   ==================================================================== */
.ox-hero .ox-tile { padding: 18px 16px; }

.ox-hero .ox-tile > .wp-block-group__inner-container > * {
  margin-top: 0;
  margin-bottom: 0;
}

.ox-hero .ox-tile-n { margin-bottom: 6px; font-size: 1.45rem; }

.ox-hero .ox-tile-l { font-size: 0.82rem; line-height: 1.4; }

.ox-hero .ox-tiles { margin-top: 30px; }

/* The two callouts were stretching to a tall shared height for two lines. */
/* stretch, not start: the two blue rules read as a mistake at different
   heights, and the live page has them even. */
.ox-hero .ox-callouts { margin-top: 24px; align-items: stretch; }

.ox-hero .ox-callout { padding-top: 2px; padding-bottom: 2px; }

.ox-hero .ox-callout > .wp-block-group__inner-container > * {
  margin-top: 0;
  margin-bottom: 0;
}

.ox-hero .ox-callout-t { margin-bottom: 5px; }

/* ====================================================================
   "What you get" - four bordered cards with icons
   ==================================================================== */
.ox-getkeep .ox-lead { margin-bottom: 26px; }

.ox-getkeep .ox-grid2 { gap: 26px; }

.ox-getkeep .ox-grid2 .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ox-card2 {
  padding: 24px 24px 22px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: var(--ox-surface);
  box-sizing: border-box;
}

.ox-card2 > .wp-block-group__inner-container > * { margin-top: 0; }

/* Stroke icons, matching the live page's set. */
.ox-card2 .ox-ico {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  stroke: var(--ox-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.ox-card2 .ox-card2-t {
  margin: 0 0 10px;
  color: var(--ox-ink-heading);
  font-size: 1.05rem;
}

.ox-card2 .ox-card2-p {
  margin: 0;
  color: var(--ox-ink);
  font-size: 0.93rem;
  line-height: 1.6;
}

.ox-getkeep .ox-usedby {
  margin-top: 24px;
  color: var(--ox-ink-muted);
  font-size: 0.86rem;
  font-style: italic;
}

/* ====================================================================
   Centred band, and the FAQ aside
   ==================================================================== */
.ox-centre-band { text-align: center; }

.ox-centre-band > .wp-block-group__inner-container > * {
  margin-left: auto;
  margin-right: auto;
}

.ox-centre-band .wp-block-buttons { justify-content: center; }

/* A side note, not a call to action: it competes with "Book the 15-minute
   call" otherwise, and it was previously a filled button sitting ABOVE the
   questions it was meant to follow. */
.ox-aside {
  margin-top: 26px;
  padding-left: 14px;
  border-left: 3px solid var(--ox-brand);
  color: var(--ox-ink-muted);
  font-size: 0.88rem;
}

.ox-aside a { color: var(--ox-action); font-weight: 600; }

/* ====================================================================
   GeneratePress puts 40px of padding on EVERY .wp-block-group__inner-
   container. Every box built as a wp:group therefore carried 40px top and
   bottom that the box's own padding rule could not see: a tile with 65px of
   content measured 183px. Zero it on the boxes that set their own padding.
   ==================================================================== */
.ox-tile > .wp-block-group__inner-container,
.ox-callout > .wp-block-group__inner-container,
.ox-card > .wp-block-group__inner-container,
.ox-card2 > .wp-block-group__inner-container,
.ox-testimonial > .wp-block-group__inner-container {
  padding: 0;
}

/* align-items:stretch stretches the wp-block-COLUMN; the group inside it keeps
   its content height, so the two blue rules still differed. Make the group
   fill its column. */
.ox-hero .ox-callouts .wp-block-column { display: flex; }
.ox-hero .ox-callout { flex: 1 1 auto; }

/* ====================================================================
   Mobile menu toggle and sticky call bar
   ==================================================================== */
.ox-burger {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--ox-radius-pill);
  background: transparent;
  color: #ffffff;
  font-family: var(--ox-font);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.ox-burger-bars,
.ox-burger-bars::before,
.ox-burger-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #ffffff;
  content: "";
}

.ox-burger-bars { position: relative; }
.ox-burger-bars::before { position: absolute; top: -6px; }
.ox-burger-bars::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .ox-burger { display: inline-flex; }

  /* Collapsed by default; the toggle adds .is-open on the header. */
  .ox-header-inner .ox-header-nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 10px;
  }

  .ox-header-inner.is-open .ox-header-nav { display: flex; }

  /* `ox-nav` is a class on the UL ITSELF, not on an ancestor, so the
     descendant selector `.ox-nav .gb-menu` matched nothing. Same shape as the
     .ox-front.container bug: check where the class actually lands. */
  .ox-header-inner.is-open ul.ox-nav,
  .ox-header-inner.is-open ul.gb-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
  }

  .ox-header-inner.is-open ul.gb-menu > li { width: 100%; }

  /* GenerateBlocks Pro ships its own `span.gb-submenu-toggle` with
     role="button" and aria-expanded, which works on touch. Do NOT hide the
     sub-menus: let the plugin's accessible toggle open them, and just make an
     opened one lay out sensibly on a phone. */
  .ox-header-inner.is-open .gb-sub-menu {
    position: static;
    width: 100%;
    min-width: 0;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .ox-header-inner.is-open .gb-sub-menu .gb-menu-link { padding: 9px 4px; }

  .ox-header-inner.is-open .gb-submenu-toggle {
    float: right;
    padding: 0 6px;
    cursor: pointer;
  }

  .ox-header-inner .ox-nav .gb-menu-link,
  .ox-header-inner .ox-nav a {
    display: block;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ox-header-cta .wp-block-button__link { display: block; text-align: center; }
}

/* Closed mobile header keeps Support (0800 101 095) beside the logo and
   burger. Enquiries and Quick connect stay in the open menu panel. */
@media (max-width: 900px) {
  .ox-header-inner .ox-logo { order: 1; }
  .ox-header-inner .ox-contact { order: 2; }
  .ox-header-inner .ox-burger { order: 3; }
  .ox-header-inner .ox-header-nav { order: 4; }

  .ox-header-inner:not(.is-open) {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .ox-header-inner:not(.is-open) .ox-logo {
    flex: 0 0 auto;
  }

  .ox-header-inner:not(.is-open) .ox-logo img { max-height: 36px; }

  .ox-header-inner:not(.is-open) .ox-contact {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 0 auto;
  }

  .ox-header-inner:not(.is-open) .ox-contact > li { display: none; }

  .ox-header-inner:not(.is-open) .ox-contact > li:has(a[data-cta="header-support"]) {
    display: block;
  }

  .ox-header-inner:not(.is-open) .ox-contact a[data-cta="header-support"] {
    padding: 7px 10px;
    white-space: nowrap;
  }

  .ox-header-inner:not(.is-open) .ox-contact .ox-clab { display: none; }

  .ox-header-inner:not(.is-open) .ox-contact .ox-cval { font-size: 0.9rem; }

  .ox-header-inner:not(.is-open) .ox-burger { flex: 0 0 auto; }

  .ox-header-inner.is-open .ox-contact {
    display: flex;
    flex: 1 1 100%;
    padding-top: 10px;
  }

  .ox-header-inner.is-open .ox-contact > li {
    display: block;
    flex: 1 1 100%;
  }

  .ox-header-inner.is-open .ox-contact .ox-clab { display: block; }
  .ox-header-inner.is-open .ox-contact a { align-items: center; }
}

@media (max-width: 380px) {
  .ox-header-inner:not(.is-open) {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ox-header-inner:not(.is-open) .ox-logo img { max-height: 28px; }
  .ox-header-inner:not(.is-open) .ox-contact .ox-cval { font-size: 0.82rem; }
  .ox-header-inner:not(.is-open) .ox-contact a[data-cta="header-support"] { padding: 6px 8px; }
  .ox-header-inner:not(.is-open) .ox-burger { padding: 8px 10px; }
}

/* The script adds .ox-sub-open to the <li> when its toggle is tapped. */
@media (max-width: 900px) {
  .ox-header-inner.is-open li.ox-sub-open > .gb-sub-menu { display: block; }
}

/* ====================================================================
   Three-level menu
   --------------------------------------------------------------------
   GenerateBlocks Pro positions a THIRD-level sub-menu at left:0 / top:65px,
   i.e. directly on top of its parent panel. It has to fly out sideways.
   ==================================================================== */
.ox-header-inner .gb-sub-menu .gb-sub-menu {
  top: 0;
  left: 100%;
}

/* Flipped by script when the flyout would leave the viewport. */
.ox-header-inner .gb-sub-menu .gb-sub-menu.ox-flip {
  right: 100%;
  left: auto;
}

/* A parent of a flyout needs its chevron pointing sideways, not down. */
.ox-header-inner .gb-sub-menu > li.menu-item-has-children > .gb-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ox-header-inner .gb-sub-menu > li.menu-item-has-children > .gb-menu-link
  .gb-submenu-toggle svg {
  transform: rotate(-90deg);
}

/* Long panels must not run off the bottom of a laptop screen - but ONLY the
   deepest level may scroll. A scrolling ancestor CLIPS absolutely-positioned
   descendants, so putting overflow on level 2 made level 3 invisible even
   though it measured a correct position and full opacity. */
.ox-header-inner .gb-sub-menu .gb-sub-menu {
  max-height: min(70vh, 620px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  /* Stacked, not flying out, and the chevrons point down again. */
  .ox-header-inner.is-open .gb-sub-menu .gb-sub-menu {
    position: static;
    left: auto;
    padding-left: 12px;
  }

  .ox-header-inner.is-open .gb-sub-menu { max-height: none; overflow: visible; }

  .ox-header-inner.is-open .gb-sub-menu > li.menu-item-has-children
    > .gb-menu-link .gb-submenu-toggle svg { transform: none; }
}
/* END:fixes */

/* BEGIN:review */
/* ====================================================================
   21 Sep review fixes
   ==================================================================== */
/* The "Enquiries" eyebrow measured 2.72:1 on the blue pill and about 11px,
   under the 13px floor in STANDARDS.md. White on the primary pill, 13px all. */
.ox-contact .ox-clab { font-size: 0.8125rem; }
.ox-contact .ox-c-primary .ox-clab { color: #ffffff; }

@media (min-width: 901px) {
  /* The sub-menu chevrons are inert on desktop, where hover opens the menu,
     and measured 25x16px. Hide them, and open the menu on keyboard focus. */
  .ox-header-inner .gb-submenu-toggle { display: none; }
  .ox-header-inner .menu-item:focus-within > .gb-sub-menu { display: block; }
}

@media (max-width: 900px) {
  /* Existing-client pills open at the TOP of the menu panel, not under seven
     menu items and a button. One sales call in five is an existing client. */
  .ox-header-inner.is-open .ox-burger { order: 2; }
  .ox-header-inner.is-open .ox-contact { order: 3; padding-top: 14px; padding-bottom: 6px; }
  .ox-header-inner.is-open .ox-header-nav { order: 4; }
}

@media (max-width: 600px) {
  /* The hero's first button sat at 821px, under the sticky bar and below the
     fold. The trust paragraph repeats the three tiles beneath it, so on a phone
     it goes and the button comes up.

     SCOPED TO THE HOMEPAGE, 22 Sep. Unscoped, this caught every interior page
     built in the same band system: /discoverycall/ and /contact/ were both
     losing their opening paragraph on a phone, and on an interior page it does
     not repeat anything below it, so hiding it just deletes the answer to "what
     is this page". The body class comes from oxygenit_home_layout(). */
  .ox-home .ox-hero .ox-sub { display: none; }

  /* The SLA table ran 66px off the right edge inside a scrolling wrapper. Drop
     the "What it means" column; the priority cell already says it. */
  .ox-sla thead th:nth-child(2),
  .ox-sla tbody td:nth-child(2) { display: none; }
}
/* END:review */

/* BEGIN:centre */
/* ====================================================================
   Tim, 21 Sep: the team as one graphic, founder centred with one person
   in each corner, and "center text like the 15 minute phone call block".
   ==================================================================== */
.ox-team-graphic { margin: 8px auto 28px; }
.ox-team-graphic img {
  display: block;
  width: min(820px, 100%);
  height: auto;
  margin: 0 auto;
}

.ox-section { text-align: center; }
.ox-section > .wp-block-group__inner-container > * { margin-left: auto; margin-right: auto; }
.ox-section .wp-block-buttons { justify-content: center; }
.ox-section .wp-block-table { margin-left: auto; margin-right: auto; }

/* A list sits centred as a block; its items stay left-aligned so the bullets
   line up under each other. */
.ox-section ul,
.ox-section ol { display: inline-block; text-align: left; }

/* Card icons follow their text. */
.ox-section .ox-ico { margin-left: auto; margin-right: auto; }

/* These read better left-aligned: the cost table, the FAQ accordion, the two
   hero callouts with their blue rule, and the aside with its rule. */
.ox-section .ox-ctable,
.ox-section details,
.ox-section .ox-callout,
.ox-section .ox-aside { text-align: left; }
.ox-proof .ox-eyebrow:first-child { text-align: center; }
/* END:centre */

/* BEGIN:variant-b */
/* ====================================================================
   Homepage variant B (/home-b/): the short page. Same blocks as A.
   ==================================================================== */
.ox-hero-b .ox-tiles { margin-top: 34px; }

/* Tim and the team above the call, at half the size they take on A. */
.ox-centre-band .ox-team-graphic { display: block; width: 100%; margin: 0 auto 22px; }
/* A viewport unit, not a percentage: WordPress makes aligncenter figures
   shrink-to-fit, so a percentage width resolves against the image itself. */
.ox-team-graphic--half img { width: min(410px, 68vw); }

.ox-price-line { margin-top: 30px; font-size: 1.1rem; }
.ox-price-line strong { display: block; margin-bottom: 4px; color: var(--ox-ink-heading); font-size: 1.5rem; }
.ox-price-line a { display: inline-block; margin-left: 8px; font-weight: 600; }

/* Four stats in the hero; only the ISO one is a link. */
.ox-hero-b .ox-tile-n a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--ox-brand); }
.ox-hero-b .ox-tile-n a:hover { color: var(--ox-action); }
.ox-hero-b .ox-sublink { margin-top: 14px; }
.ox-hero-b .ox-sublink a { font-weight: 600; }

/* Service cards link out. */
.ox-card2 .ox-card2-t a { color: inherit; text-decoration: none; }
.ox-card2 .ox-card2-t a:hover { color: var(--ox-action); text-decoration: underline; }
.ox-card2 .ox-card2-more { margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; }

/* SLA accordion: numbers and the full-SLA link always visible, table on demand. */
.ox-section .ox-acc {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  text-align: center;
}
.ox-acc > summary { list-style: none; cursor: pointer; }
.ox-acc > summary::-webkit-details-marker { display: none; }
.ox-acc-head { display: block; color: var(--ox-ink-heading); font-size: 1.25rem; font-weight: 700; }
.ox-acc-sub { display: block; margin-top: 4px; color: var(--ox-ink-muted); }
.ox-acc-toggle {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  border: 2px solid var(--ox-action);
  border-radius: 999px;
  color: var(--ox-action);
  font-weight: 600;
}
.ox-acc-toggle::after { content: " \25BE"; }
.ox-acc[open] .ox-acc-toggle::after { content: " \25B4"; }
.ox-acc-link { display: block; margin-top: 12px; font-weight: 600; }
.ox-acc-body { margin-top: 18px; }
.ox-acc-body .wp-block-table { margin: 0 auto; }

/* The eight secondary questions fold into one row until asked for. */
.ox-faq-b .ox-faq-more { padding: 0; margin-top: 4px; background: transparent; border: 0; }
.ox-faq-b .ox-faq-more > summary {
  padding: 12px 20px;
  color: var(--ox-action);
  font-weight: 700;
  cursor: pointer;
}
.ox-faq-b .ox-faq-more[open] > summary { margin-bottom: 8px; }
.ox-faq-b .ox-faq-more > .wp-block-details { margin-top: 10px; }
/* END:variant-b */

/* BEGIN:a11y */
/* ====================================================================
   Audit 21 Sep, actions 2 and 3.

   L1/L2  The four service cards were two Gutenberg columns of two cards,
          so the eye read across (Managed IT, Cybersecurity) while the DOM,
          the tab order and a screen reader read down then across. One grid,
          four children, and reading order is DOM order. Equal heights fix
          the ragged left column at the same time.
   L3     Five and six line card paragraphs were centred by the blanket
          .ox-section rule. Headings and short lines stay centred.
   T2     Focus ring was the browser default 1px auto. STANDARDS.md 6 asks
          for 2px #0071a4 at 2px offset on every interactive element.
   ==================================================================== */
.ox-cards4 > .wp-block-group__inner-container,
.ox-cards4 {
  --ox-card-gap: 24px;
}
.ox-cards4 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ox-card-gap);
  align-items: stretch;
}
.ox-cards4 .ox-card2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.ox-cards4 .ox-card2 > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* The read-more line sits on the bottom edge of every card, so the four
   line up however long the paragraph above them runs. */
.ox-cards4 .ox-card2-more { margin-top: auto; padding-top: 12px; }

@media (max-width: 860px) {
  .ox-cards4 > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}

/* Card body copy reads left aligned. The heading, the icon and the read-more
   line stay centred, which is what the 21 Sep centring asked for. */
.ox-section .ox-cards4 .ox-card2-p { text-align: left; }

/* Focus ring. :focus-visible so a mouse click does not paint one, with a
   :focus fallback for engines that do not support it. */
.ox-body a:focus,
a:focus, button:focus, summary:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the navy bar #0071a4 has nothing to contrast with, so the ring goes
   white there. */
.ox-header-inner a:focus-visible,
footer a:focus-visible {
  outline-color: #ffffff;
}
/* END:a11y */

/* BEGIN:pages */
/* ====================================================================
   Interior pages built in the same band system as the homepage.
   First page across: /discoverycall/, 22 Sep.
   ==================================================================== */
.ox-dc-hero { padding-bottom: 28px; }
.ox-dc-hero h1 { margin-bottom: 14px; }
.ox-dc-hero .ox-sub { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* The booking calendar. form_embed.js sets the height, so the min-height here
   only stops the page collapsing while the third party is still loading. */
.ox-booking {
  max-width: 900px;
  margin: 8px auto 20px;
  background: #ffffff;
  border: 1px solid var(--ox-rule, #dbe3ec);
  border-radius: 14px;
  overflow: hidden;
}
/* Height is set inline by the shortcode, see the note there; repeating it here
   would only re-introduce the race. This rule carries nothing but the box. */
.ox-booking iframe { display: block; width: 100%; }

/* Three-across cards, one column on a phone. */
.ox-steps3 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .ox-steps3 > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}
.ox-step {
  background: #ffffff;
  border: 1px solid var(--ox-rule, #dbe3ec);
  border-radius: 14px;
  padding: 22px 22px 24px;
  height: 100%;
}
.ox-section--alt .ox-step { background: #ffffff; }
.ox-section .ox-step .ox-step-t,
.entry-content .ox-step-t { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.ox-step-p { margin: 0; text-align: left; font-size: 16px; }

/* The two doors at the foot of the page. */
.ox-doors > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}
@media (max-width: 767px) {
  .ox-doors > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}
.ox-door {
  border-left: 3px solid var(--ox-action, #0071a4);
  padding: 4px 0 4px 18px;
  text-align: left;
}
.ox-door-t { font-size: 18px; margin: 0 0 6px; }
.ox-door-p { margin: 0; font-size: 16px; }
/* END:pages */

/* BEGIN:contact */
/* ====================================================================
   /contact/, second page across, 22 Sep. The live page's own look, in the
   band system: a hero, the form beside a photo, the details beside the map.
   ==================================================================== */
.ox-cx-hero { padding-bottom: 26px; }
.ox-cx-hero h1 { margin-bottom: 14px; }
.ox-cx-hero .ox-sub { max-width: 42rem; margin-left: auto; margin-right: auto; }
.ox-cx-note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ox-ink-soft, #55637a);
  text-align: center;
}

/* Form beside the photo on a wide screen, stacked on a phone. The form column
   is first in the DOM as well as on the screen, so tab order matches reading
   order. */
.ox-cx-2up > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 34px;
  /* Not `center`. Centring positions each column from the ROW height, and the
     row height is whatever the form column is at that instant. form_embed.js
     sets the iframe position:absolute, visibility:hidden while it measures, so
     the photo beside it was dropping out of layout and coming back 28ms later:
     0.3621 of layout shift, none of it visible to the eye and all of it
     counted. Aligning to the start removes the dependency entirely. */
  align-items: start;
  justify-content: center;
}
/* WordPress's is-layout-constrained puts margin-left/right: auto !important on
   the children of any constrained group. In a grid container auto margins beat
   justify-self: stretch, so every column sized to its content and centred: the
   form column came out 382px inside a 749px track and the form rendered 300px
   wide. Undone here, explicitly, because the !important cannot be outranked any
   other way. */
.ox-cx-2up > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
/* The side padding belongs to the band. A column inside the band inherits it
   from the generic inner-container rule and loses 80px, which is why a 480px
   form column rendered a 400px form. */
.ox-cx-2up > .wp-block-group__inner-container > * > .wp-block-group__inner-container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
/* And the vertical half of the same inheritance. A group nested inside a column
   was picking up the band's 40px top and bottom, which put a 40px hole under
   "Opening hours" and another under the last line of the column. */
.ox-cx-2up .wp-block-group .wp-block-group__inner-container { padding: 0; max-width: none; }
.ox-cx-details > .wp-block-group__inner-container {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 860px) {
  .ox-cx-2up > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* No card around the form. The reservation is the measured maximum, so a short
   form leaves slack inside the wrapper, and on a bordered white card that slack
   reads as a broken box. The form brings its own panel, the way it does on the
   live page. */
.ox-ff-wrap { overflow: hidden; }
/* Height is set inline by the shortcode. Repeating it here would re-introduce
   the race that cost /discoverycall/ a CLS of 0.312: a stylesheet cannot fix a
   shift that happens before the stylesheet arrives. */

/* The portrait. Live layers a 53 KB decorative dot pattern behind it; the same
   look is a radial-gradient here, which weighs nothing. */
/* The photo column reserves its own height so nothing about it is ever
   computed from the column beside it. The number is the image plus its ring
   padding, both of which are explicit below. */
.ox-cx-photo {
  text-align: center;
  min-height: calc(min(320px, 62vw) + 2 * clamp(14px, 3.4vw, 26px) + 16px);
  padding-top: 40px;
}
@media (max-width: 860px) { .ox-cx-photo { padding-top: 0; } }
/* Every size in this block is explicit. An earlier version put the dot ring on
   a pseudo-element with percentage insets against a content-sized box, and when
   form_embed.js resized the iframe the grid row relaid out and the ring
   resolved to nothing and back, twice: 0.3946 of layout shift on its own, all
   of it from one decorative element. */
.ox-cx-photo .wp-block-image {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: clamp(14px, 3.4vw, 26px);
  background-image: radial-gradient(var(--ox-rule, #dbe3ec) 1.6px, transparent 1.7px);
  background-size: 13px 13px;
  border-radius: 50%;
  line-height: 0;
}
.ox-cx-photo img {
  display: block;
  width: min(320px, 62vw);
  height: min(320px, 62vw);
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid var(--ox-action, #0071a4);
  background: #ffffff;
}
.ox-cx-photo figcaption { display: none; }

/* The contact details list. Live uses Elementor icons; this keeps the meaning
   without the icon font. */
.ox-cx-list { list-style: none; margin: 18px 0 0; padding: 0; }
.ox-cx-list li {
  padding: 11px 0 11px 34px;
  border-bottom: 1px solid var(--ox-rule, #dbe3ec);
  font-size: 16px;
  line-height: 1.5;
  background-repeat: no-repeat;
  background-position: 0 11px;
  background-size: 21px 21px;
}
/* URL-encoded SVG rather than inline markup, because kses strips svg out of
   post_content on a CLI write, and because a background image can never be a
   layout shift source. Each row names its own icon, so reordering the list
   cannot move an icon onto the wrong row. */
.ox-cx-list li.ox-ic-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 3.5H4.9A1.9 1.9 0 0 0 3 5.4C3 13.5 9.5 20 17.6 20a1.9 1.9 0 0 0 1.9-1.9v-2.7l-3.6-1.2-1.8 1.8a13.6 13.6 0 0 1-5.1-5.1l1.8-1.8z'/%3E%3Cpath d='M15 3.6a5.6 5.6 0 0 1 4.4 4.4M14.4 7a2.6 2.6 0 0 1 1.9 1.9'/%3E%3C/svg%3E"); }
.ox-cx-list li.ox-ic-mail  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.8' width='18.8' height='14.4' rx='2'/%3E%3Cpath d='M3.4 6.4 12 13l8.6-6.6'/%3E%3C/svg%3E"); }
.ox-cx-list li.ox-ic-pin   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-5.6 7-11.1a7 7 0 1 0-14 0c0 5.5 7 11.1 7 11.1z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.ox-cx-list li:last-child { border-bottom: 0; }
.ox-cx-list a { text-decoration: none; }
.ox-cx-list a:hover { text-decoration: underline; }

/* The band centres its own text; the details column reads as a list of facts
   and belongs left, the way the live page has it. */
.ox-cx-infocol, .ox-cx-infocol h2, .ox-cx-infocol h3,
.ox-cx-infocol p, .ox-cx-infocol li { text-align: left; }
.ox-cx-infocol h2 { margin-top: 0; }

.ox-cx-infocol h3 { margin-top: 28px; margin-bottom: 10px; }
.ox-cx-hours { margin-top: 0; }
.ox-cx-hours p { font-size: 16px; line-height: 1.55; margin: 0 0 16px; }
.ox-cx-hours p:last-child { margin-bottom: 0; }

/* The map panel has a height of its own. Stretching it to match the details
   column beside it made it 798px of mostly empty grey. */
.ox-cx-mapcol { align-self: start; }
.ox-cx-details .ox-map-facade { min-height: 0; height: 380px; }
@media (max-width: 860px) {
  .ox-cx-details .ox-map-facade { height: 260px; }
}
/* END:contact */

/* BEGIN:contact-b */
/* ====================================================================
   /contact-b/ and /fit/, 22 Sep. The B variant of the contact page is a
   utility page, not a brochure: phone numbers first, the qualifier second,
   the write-in form last. It shares the band system and the map and form
   shortcodes with A, so only the pieces A does not have live here.
   ==================================================================== */
.ox-cxb-hero { padding-bottom: 26px; }
.ox-cxb-hero h1 { margin-bottom: 14px; }
.ox-cxb-hero .ox-sub { max-width: 44rem; margin-left: auto; margin-right: auto; }
.ox-cxb-hero .ox-eyebrow { margin-bottom: 10px; }

/* Six facts, three across on a desktop and one on a phone. Every cell is its
   own card so a long address cannot drag the row's baseline around. */
.ox-cxb-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 1023px) {
  .ox-cxb-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ox-cxb-grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* Same is-layout-constrained override as the A page needs. WordPress puts
   margin-left/right: auto !important on the children of a constrained group,
   and in a grid an auto margin beats justify-self: stretch, so every card
   shrink-wraps to its text and centres. */
.ox-cxb-grid > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-cxb-grid .wp-block-group .wp-block-group__inner-container { padding: 0; max-width: none; }

.ox-cxb-card {
  background: #ffffff;
  border: 1px solid var(--ox-rule, #dbe3ec);
  border-radius: 14px;
  padding: 20px 20px 22px;
  height: 100%;
  text-align: left;
}
.ox-cxb-card, .ox-cxb-card p, .ox-cxb-card h3 { text-align: left; }
.ox-cxb-card h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox-ink-muted, #4a5666);
  margin: 0 0 8px;
}
/* The number itself is the point of the card, so it is the biggest thing in
   it. 24px is the H3 step from STANDARDS.md 1.2 and it is a link, so it takes
   the action colour rather than brand blue, which fails AA as text. */
.ox-cxb-big { font-size: 24px; line-height: 1.25; margin: 0 0 6px; font-weight: 600; }
.ox-cxb-big a { color: var(--ox-action, #0071a4); text-decoration: none; }
.ox-cxb-big a:hover { text-decoration: underline; }
.ox-cxb-card p { font-size: 16px; line-height: 1.5; margin: 0; }
.ox-cxb-card p + p { margin-top: 8px; }

/* The one thing on the page that costs something to say, so it is not buried
   in a card with the phone numbers. */
.ox-cxb-fine {
  max-width: 44rem;
  margin: 26px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ox-ink-muted, #4a5666);
}
.ox-cxb-map { margin-top: 26px; }
.ox-cxb-map .ox-map-facade { min-height: 0; height: 320px; }
@media (max-width: 860px) { .ox-cxb-map .ox-map-facade { height: 240px; } }

/* The write-in form. One column, not two: the photo beside it on A is there
   to fill a brochure page, and B is not one. */
.ox-cxb-form .ox-ff-wrap { max-width: 560px; margin: 0 auto; overflow: hidden; }
.ox-cxb-help {
  max-width: 44rem;
  margin: 0 auto 22px;
  font-size: 16px;
  line-height: 1.6;
}
/* The page ships the cold helper visible and the warm one hidden, in CSS, not
   by an attribute: kses drops a bare `hidden` off a paragraph in post_content,
   and a visitor with no Fit answers must never see both. The swap happens only
   when localStorage actually holds answers. */
.ox-cxb-help--warm { display: none; }
.ox-cxb-form.ox-cxb-warm .ox-cxb-help--warm { display: block; }
.ox-cxb-form.ox-cxb-warm .ox-cxb-help--cold { display: none; }
/* END:contact-b */

/* BEGIN:fit */
/* ====================================================================
   /fit/. Four questions one at a time, then either the honest no or the
   calendar on the same url. Nothing here is a link to another page: the
   whole point of the page is that the visitor never leaves it.
   ==================================================================== */
.ox-fit-band { padding-top: 48px; }
.ox-fit, .ox-fit p, .ox-fit h2, .ox-fit li { text-align: left; }
/* A floor the height of the TALLEST QUESTION, measured 22 Sep: 430px at 1440
   and 768, 405px at 390, plus the 32px progress line. Deliberately not the
   tallest step of all, because the details step is 484/507 and the calendar
   is 1044, and reserving for those would put 200px of white space under every
   question to prevent a jump that follows a click and is therefore excluded
   from CLS anyway. */
.ox-fit { min-height: 470px; }
@media (max-width: 680px) { .ox-fit { min-height: 450px; } }
.ox-fit-prog {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox-ink-muted, #4a5666);
  margin: 0 0 12px;
}
.ox-fit-prog[hidden] { display: none; }
.ox-fit-q {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ox-ink-heading, #1f2c3c);
  margin: 0 0 20px;
}
.ox-fit-h { margin: 0 0 10px; }
.ox-fit-p { margin: 0 0 22px; font-size: 17px; }
.ox-fit-q:focus, .ox-fit-h:focus { outline: none; }

/* One answer per row. A row is a whole target rather than a radio dot, which
   is the difference between one tap and two on a phone. */
.ox-fit-opts { display: grid; gap: 10px; }
.ox-fit-opt {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--ox-rule, #dbe3ec);
  border-radius: 10px;
  padding: 15px 18px;
  min-height: 48px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ox-ink, #0e141c);
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.ox-fit-opt:hover { border-color: var(--ox-action, #0071a4); background: #f7fbfd; }
.ox-fit-opt:focus-visible { outline: 3px solid var(--ox-action, #0071a4); outline-offset: 2px; }

.ox-fit-backbtn {
  margin-top: 22px;
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  color: var(--ox-action, #0071a4);
  text-decoration: underline;
}
.ox-fit-backbtn[hidden] { display: none; }

/* The no. No follow-up, no list of alternatives, no form. */
.ox-fit-reasons { margin: 0 0 18px; padding-left: 20px; }
.ox-fit-reasons li { font-size: 17px; line-height: 1.6; margin: 0 0 8px; }

.ox-fit-fields { display: grid; gap: 6px; max-width: 460px; }
.ox-fit-lab { font-size: 15px; font-weight: 600; color: var(--ox-ink-heading, #1f2c3c); }
.ox-fit-lab + .ox-fit-in { margin-bottom: 12px; }
.ox-fit-in {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 17px;
  color: var(--ox-ink, #0e141c);
  background: #ffffff;
  border: 1px solid #c8d2dc;
  border-radius: 8px;
}
.ox-fit-in:focus-visible { outline: 3px solid var(--ox-action, #0071a4); outline-offset: 1px; }
.ox-fit-err { margin: 2px 0 10px; font-size: 15px; color: #9b1c1c; }
.ox-fit-err[hidden] { display: none; }
.ox-fit-go {
  margin-top: 6px;
  cursor: pointer;
  border: 0;
  border-radius: var(--ox-radius-pill, 999px);
  padding: 16px 32px;
  min-height: 48px;
  background: var(--ox-action, #0071a4);
  color: #ffffff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
}
.ox-fit-go:hover { background: #005b84; }
.ox-fit-go:focus-visible { outline: 3px solid var(--ox-ink-heading, #1f2c3c); outline-offset: 2px; }

/* The calendar's own box. Height is set inline by the shortcode; repeating it
   here would re-introduce the race that cost /discoverycall/ a CLS of 0.312. */
.ox-fit .ox-booking {
  max-width: 900px;
  margin: 8px 0 0;
  background: #ffffff;
  border: 1px solid var(--ox-rule, #dbe3ec);
  border-radius: 14px;
  overflow: hidden;
}
.ox-fit .ox-booking iframe { display: block; width: 100%; }
@media (max-width: 680px) {
  .ox-fit-q { font-size: 24px; }
  .ox-fit-opt { font-size: 16px; padding: 14px 16px; }
}

/* The booking confirmation video, inside the held step. Self-hosted and
   preload="none", so it is one poster image until the visitor presses play.
   aspect-ratio holds the box at every width with no magic number, which is
   what stops the page moving when the poster lands. */
.ox-vsl { margin: 20px 0 0; max-width: 720px; }
.ox-vsl-v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ox-ground-navy, #1f2c3c);
  border-radius: 14px;
  border: 1px solid var(--ox-rule, #dbe3ec);
}
.ox-vsl-cap {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ox-ink-muted, #4a5666);
}

/* Social proof along the foot of the page. Four facts, each one a number with
   a date or a source behind it, because a proof band of adjectives proves
   nothing. Every figure here is published elsewhere on the site. */
.ox-proofband > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .ox-proofband > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ox-proofband > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* The same is-layout-constrained override the other grids on these pages need:
   margin-left/right auto !important beats justify-self, so without this every
   cell shrink-wraps to its text. */
.ox-proofband > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-proofband .wp-block-group .wp-block-group__inner-container { padding: 0; max-width: none; }
.ox-proof-item { text-align: center; }
.ox-proof-item p { text-align: center; margin: 0; }
/* Two lines' worth of box whether the figure needs one line or two. "ISO 27001
   and 42001" wraps and the other three do not, and without this the four
   labels started at four different heights. Centring inside the fixed box
   keeps a one-line figure looking deliberate rather than top-aligned. */
.ox-proof-n {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ox-ink-heading, #1f2c3c);
  margin: 0 0 8px !important;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 520px) { .ox-proof-n { min-height: 0; } }
.ox-proof-l {
  font-size: 15px !important;
  line-height: 1.5;
  color: var(--ox-ink-muted, #4a5666);
}
@media (max-width: 520px) { .ox-proof-n { font-size: 26px; } }
/* END:fit */

/* BEGIN:about */
/* ====================================================================
   /about-us/, ported 22 September 2026.

   Every grid here undoes is-layout-constrained first. WordPress puts
   margin-left/right: auto !important on the children of a constrained
   group, and in a grid an auto margin beats justify-self: stretch, so
   without the undo every cell shrink-wraps to its text and centres.
   Paid for once already on the contact page grid.
   ==================================================================== */

/* ---- hero -------------------------------------------------------- */

/* The team strip is a jump link to the team section, which is why it is
   an anchor and not a bare image. 2000x288, so it needs an explicit
   aspect-ratio or the band grows by ~90px between HTML and layout.

   It is a <p>, and .ox-section caps a direct child paragraph at
   --ox-measure (720px) for readability, which is right for prose and wrong
   for a nine-person banner. Own max-width, and AUTO side margins: the
   first version set `margin: 0 0 26px` and the strip sat hard left inside
   the band. */
.ox-teamstrip {
  max-width: 900px !important;
  margin: 0 auto 26px !important;
  text-align: center;
}
.ox-teamstrip a { display: block; }
.ox-teamstrip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 288;
  border-radius: 10px;
}

.ox-about-hero { text-align: center; }
.ox-about-hero h1 { margin: 0 0 18px; }
.ox-about-hero .ox-kicker {
  max-width: 820px;
  margin: 0 auto 26px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ox-ink-muted);
}
.ox-about-hero .ox-sublink { margin-top: 14px; text-align: center; }
.ox-about-hero .ox-sublink a { font-weight: 600; }

/* ---- the three numbers ------------------------------------------- */

.ox-about-stats { text-align: center; }
.ox-bridge {
  max-width: 760px;
  margin: 0 auto 30px !important;
  font-size: 19px;
  color: var(--ox-ink-muted);
}
.ox-abouttiles > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.ox-abouttiles > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-abouttiles .wp-block-group .wp-block-group__inner-container { padding: 0; max-width: none; }
@media (max-width: 900px) {
  .ox-abouttiles > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 640px) {
  .ox-abouttiles > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}
.ox-abouttiles .ox-tile {
  height: 100%;
  padding: 24px 18px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: var(--ox-surface);
  box-sizing: border-box;
}
/* One line or two, the label starts at the same height on all three.
   "ISO 27001 + 42001" wraps on a phone and the other two do not. */
.ox-abouttiles .ox-tile-n {
  margin: 0 0 8px !important;
  color: var(--ox-action);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ox-abouttiles .ox-tile-l {
  margin: 0 0 6px !important;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ox-ink-heading);
}
.ox-abouttiles .ox-tile-cap {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ox-ink-muted);
}
.ox-star-note { color: var(--ox-ink-muted); font-size: 1rem; }

.ox-proofline {
  margin: 26px auto 0 !important;
  font-size: 17px;
  color: var(--ox-ink-heading);
  font-weight: 600;
}
.ox-about-foot {
  margin: 10px auto 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ox-ink-muted);
  text-align: center;
}
.ox-section--navy .ox-about-foot { color: #c9d6e4; }

/* ---- the repeated mid-page call to action ------------------------ */

.ox-midcta { margin-top: 34px; text-align: center; }
.ox-midcta > .wp-block-group__inner-container { padding: 0; max-width: none; }
.ox-midcta-note {
  margin: 10px 0 0 !important;
  font-size: 15px;
  color: var(--ox-ink-muted);
}

/* ---- the founder ------------------------------------------------- */

.ox-founder > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.ox-founder > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
@media (max-width: 900px) {
  .ox-founder > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* Portrait above the story on a phone, which is the order live uses. */
  .ox-founder-photo { order: -1; }
}
.ox-founder-text h2 { margin: 0 0 18px; }
.ox-founder-text p { max-width: none; margin: 0 0 18px; }
.ox-founder-text p:last-child { margin-bottom: 0; }
/* The portrait is square with the ring baked in and transparent corners, so
   it takes neither the radius nor the shadow the rectangular photos use. */
.ox-founder-photo { position: sticky; top: 96px; }
.ox-founder-photo figure { margin: 0; }
.ox-founder-photo img.circ,
.ox-founder-photo .circ img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
@media (max-width: 900px) {
  .ox-founder-photo { position: static; max-width: 380px; margin: 0 auto !important; }
}

/* ---- the governance band ----------------------------------------- */

.ox-govband { text-align: center; }
.ox-govband .ox-lead {
  max-width: 900px;
  margin: 0 auto 22px !important;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 600;
  color: #ffffff;
}
.ox-govband p { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---- the team ---------------------------------------------------- */

.ox-about-team { text-align: center; }
.ox-about-team h2 { margin-bottom: 14px; }
.ox-team-intro {
  max-width: 820px;
  margin: 0 auto 34px !important;
  color: var(--ox-ink-muted);
}
.ox-teamgrid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.ox-teamgrid > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-teamgrid .wp-block-group .wp-block-group__inner-container { padding: 0; max-width: none; }
@media (max-width: 900px) {
  .ox-teamgrid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .ox-teamgrid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}
.ox-tmember {
  height: 100%;
  padding: 0 0 20px;
  background: var(--ox-surface);
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
/* 3:2 on every card whatever the source file is, so nine cards start their
   names on the same line. The originals are 2000x1333 except Tim's, which is
   2560x1707; both are 3:2, but a declared ratio is what stops the band
   growing between HTML and layout. */
.ox-tmember .ox-tphoto { margin: 0 0 14px !important; }
.ox-tmember .ox-tphoto img,
.ox-tmember figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ox-tmember h3 {
  margin: 0 0 4px;
  padding: 0 16px;
  font-size: 20px;
  line-height: 1.25;
}
.ox-tmember .role {
  margin: 0 0 10px !important;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ox-action);
  min-height: 2.6em;
}
.ox-tmember .bio {
  margin: 0 !important;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ox-ink-muted);
  text-align: left;
}

/* ---- where we are ------------------------------------------------ */

.ox-about-offices { text-align: center; }
.ox-about-offices h2 { margin-bottom: 30px; }
.ox-office > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.ox-office > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-office + .ox-office { margin-top: 32px; }
@media (max-width: 780px) {
  .ox-office > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.ox-office-text { text-align: left; }
.ox-office-text h3 { margin: 0 0 8px; }
.ox-office-text p { margin: 0; max-width: none; }
@media (max-width: 780px) { .ox-office-text { text-align: center; } }

/* ---- FAQ --------------------------------------------------------- */

.ox-about-faqband { text-align: center; }
.ox-about-faqband h2 { margin-bottom: 26px; }
.ox-about-faqband .ox-faq-b { max-width: 860px; margin: 0 auto; text-align: left; }
.ox-about-faqband .wp-block-details { margin-top: 10px; }
.ox-about-faqband .wp-block-details p { max-width: none; }

/* ---- closing ----------------------------------------------------- */

.ox-about-final { text-align: center; }
.ox-about-final .ox-body {
  max-width: 760px;
  margin: 0 auto 26px !important;
  color: #e6edf5;
}
.ox-about-final .ox-sublink { margin-top: 16px; }
.ox-about-final .ox-micro {
  margin: 16px auto 0 !important;
  max-width: 620px;
  font-size: 14px;
  color: #c9d6e4;
}
/* END:about */
/* BEGIN:services */
/* ====================================================================
   /services/, Version 3 on the test box, 22 September 2026.

   H1, then H2 IT security, H2 Run it, H2 Change it, H2 Browse by category.
   Live's heading skip is gone. Grids undo is-layout-constrained first
   (auto margins beat stretch).
   ==================================================================== */

.ox-svc-hero { text-align: center; }
.ox-svc-hero .ox-eyebrow {
  margin: 0 auto 10px;
  color: var(--ox-action, #0071a4);
}
.ox-svc-hero h1 { margin: 0 0 18px; }
.ox-svc-hero .ox-kicker {
  max-width: 760px;
  margin: 0 auto 26px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ox-ink-muted, #4a5666);
}
.ox-svc-hero .wp-block-buttons { margin: 0 0 4px; }
.ox-svc-hero .ox-sublink { margin-top: 14px; text-align: center; }
.ox-svc-hero .ox-sublink a { font-weight: 600; }

/* Three proof chips. Same tile lesson as /about-us/: equal min-height on
   the figure so a wrapping Dual ISO line does not drop the bodies. */
.ox-svc-proof { margin: 28px 0 0; }
.ox-svc-proof > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  text-align: left;
}
.ox-svc-proof > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-svc-proof .wp-block-group .wp-block-group__inner-container {
  padding: 0;
  max-width: none;
}
.ox-svc-chip {
  height: 100%;
  margin: 0;
  padding: 22px 20px;
  background: var(--ox-surface, #ffffff);
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  box-sizing: border-box;
  text-align: left;
}
.ox-svc-chip-n {
  margin: 0 0 8px !important;
  color: var(--ox-action, #0071a4);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
}
.ox-svc-chip-l {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ox-ink, #0e141c);
}
@media (max-width: 900px) {
  .ox-svc-proof > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ox-svc-chip-n { min-height: 0; font-size: 20px; }
}

/* Partner marks. Live ships 2560px files into ~120px slots. Cap the slot. */
.ox-svc-logos {
  margin-top: 28px;
}
.ox-svc-logorow {
  margin-top: 28px;
}
.ox-svc-logorow > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: center;
}
.ox-svc-logorow > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}
.ox-svc-logo {
  margin: 0 !important;
  flex: 0 0 auto;
}
.ox-svc-logo img,
img.ox-svc-logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: 140px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .ox-svc-logo img,
  img.ox-svc-logo { height: 28px; max-width: 110px; }
}

/* Shelf headings sit left, eyebrow then H2, then the card grid. */
.ox-svc-secure,
.ox-svc-run,
.ox-svc-change { text-align: left; }
.ox-svc-secure .ox-eyebrow,
.ox-svc-run .ox-eyebrow,
.ox-svc-change .ox-eyebrow {
  margin: 0 0 8px;
  color: var(--ox-action, #0071a4);
}
.ox-svc-secure h2,
.ox-svc-run h2,
.ox-svc-change h2 { margin: 0 0 22px; }

/* Service cards. Default 3 / 2 / 1. --two is 2 / 2 / 1 for Secure and Run.
   Equal height, photo 16:9 so the band does not grow when the image lands. */
.ox-svc-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.ox-svc-grid--two > .wp-block-group__inner-container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ox-svc-grid > .wp-block-group__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}
.ox-svc-grid .wp-block-group .wp-block-group__inner-container {
  padding: 0;
  max-width: none;
}
/* Two security cards as a strip, not two full-width columns. */
.ox-svc-secure .ox-svc-grid {
  max-width: 840px;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100%;
}
@media (max-width: 1023px) {
  .ox-svc-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .ox-svc-grid > .wp-block-group__inner-container,
  .ox-svc-grid--two > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ox-svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--ox-surface, #ffffff);
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
/* The card is a flex parent (so the inner fills the grid cell). Without
   width 100% and zeroed auto margins, a card with no blurb shrinks to the
   image sizes width (30vw) and centres in the cell. Paid for on Remote Support. */
.ox-svc-card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 0 18px;
  box-sizing: border-box;
}
.ox-svc-photo { margin: 0 0 14px !important; width: 100%; max-width: none; }
.ox-svc-card figure { width: 100%; max-width: none; margin: 0 0 14px !important; }
.ox-svc-photo img,
.ox-svc-card figure img,
img.ox-svc-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef2f6;
}
.ox-svc-card h3 {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
}
.ox-svc-card h3 a {
  color: inherit;
  text-decoration: none;
}
.ox-svc-card h3 a:hover { color: var(--ox-action, #0071a4); text-decoration: underline; }
.ox-svc-blurb {
  margin: 0 0 12px !important;
  padding: 0 18px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ox-ink, #0e141c);
  text-align: left;
}
.ox-svc-more {
  margin-top: auto !important;
  padding: 8px 18px 0;
  font-size: 16px;
  font-weight: 600;
}
.ox-svc-more a { color: var(--ox-action, #0071a4); }

@media (max-width: 767px) {
  .ox-svc-card h3 { font-size: 22px; }
  .ox-svc-blurb { font-size: 17px; }
}

/* Category accordion. Live's four details/summary pairs, first closed.
   Exclusive via name= so one open at a time, same as the about FAQ. */
.ox-svc-cats { text-align: center; }
.ox-svc-cats h2 { margin-bottom: 22px; }
.ox-svc-acc {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.ox-svc-acc .wp-block-details {
  margin: 0 0 10px;
  padding: 4px 18px 4px;
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
}
.ox-svc-acc summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  color: var(--ox-ink-heading, #1f2c3c);
  list-style: none;
}
.ox-svc-acc summary::-webkit-details-marker { display: none; }
.ox-svc-acc summary::after {
  content: "";
  float: right;
  width: 0.55em;
  height: 0.55em;
  margin-top: 0.35em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.ox-svc-acc details[open] summary::after { transform: rotate(225deg); margin-top: 0.55em; }
.ox-svc-acc ul {
  margin: 0 0 14px;
  padding: 0 0 0 18px;
}
.ox-svc-acc li { margin: 0 0 8px; font-size: 16px; }
.ox-svc-acc a { color: var(--ox-action, #0071a4); }

.ox-svc-final { text-align: center; }
.ox-svc-final .ox-body {
  max-width: 760px;
  margin: 0 auto 22px !important;
  color: #e6edf5;
}
/* END:services */
/* BEGIN:blog */
/* ====================================================================
   Blog posts, /blog/ index, category archives. Overnight 23 September 2026.
   Posts are live Gutenberg HTML, imported as classic content. Measure the
   body. Cards on /blog/ undo is-layout-constrained the same way as services.
   ==================================================================== */

.single-post .entry-content,
.ox-post {
  max-width: var(--ox-measure, 720px);
}
.single-post .entry-content img,
.ox-post img {
  max-width: 100%;
  height: auto;
}
.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.single-post .entry-content th,
.single-post .entry-content td {
  border: 1px solid #dde3ea;
  padding: 8px 10px;
  text-align: left;
}
.single-post .entry-content blockquote {
  margin: 24px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--ox-action, #0071a4);
  color: var(--ox-ink-muted, #4a5666);
}

.ox-yt {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 24px 0;
  background: #0e141c;
}
.ox-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ox-blog-hero { text-align: center; }
.ox-blog-hero h1 { margin: 0 0 12px; }
.ox-blog-hero .ox-kicker {
  max-width: 720px;
  margin: 0 auto 8px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ox-ink-muted, #4a5666);
}

.ox-blog-grid > .wp-block-group__inner-container,
.ox-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1023px) {
  .ox-blog-grid > .wp-block-group__inner-container,
  .ox-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ox-blog-grid > .wp-block-group__inner-container,
  .ox-blog-grid { grid-template-columns: minmax(0, 1fr); }
}

.ox-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--ox-surface, #ffffff);
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}
.ox-blog-card a.ox-blog-card-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ox-blog-thumb {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef2f6;
  display: block;
}
.ox-blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ox-blog-card h2,
.ox-blog-card-t {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
.ox-blog-card-t a { color: inherit; text-decoration: none; }
.ox-blog-card-t a:hover { color: var(--ox-action, #0071a4); text-decoration: underline; }
.ox-blog-card-d {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ox-ink-muted, #4a5666);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.ox-blog-card-x {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ox-ink, #0e141c);
}
.ox-blog-pages {
  margin-top: 36px;
  text-align: center;
}
.ox-blog-pages .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.ox-blog-pages .page-numbers.current {
  background: var(--ox-action, #0071a4);
  color: #fff;
}

.ox-legal h1 { margin-bottom: 12px; }
.ox-legal h2 { margin-top: 28px; }
.ox-legal h5 { font-size: 16px; font-weight: 600; color: var(--ox-ink-muted, #4a5666); }
/* END:blog */

/* BEGIN:pricing-nz */
/* /managed-it-services-pricing-nz/ only. Scoped to .ox-pricing-nz.
   Append-only. Does not alter .ox-cost-nz or .ox-loc-page.
   Band tables stack below 768px (no horizontal scroll).
   Actions use #0071a4. Josefin Sans comes from the brand font stack.
   Eyebrow is 14px, so it uses action blue: brand #0089c7 fails AA at this size.
   No floating bar. No popularity badge. */
.ox-pricing-nz,
.ox-pricing-nz * { box-sizing: border-box; }
.ox-pricing-nz {
  --ox-space-1: 8px;
  --ox-space-2: 16px;
  --ox-space-3: 24px;
  --ox-space-4: 32px;
  --ox-space-6: 48px;
  --ox-space-10: 80px;
  font-family: var(--ox-font, "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  max-width: 100%;
  color: var(--ox-ink, #0e141c);
  overflow-x: clip;
}
.ox-pricing-nz .ox-section {
  text-align: center;
  padding-top: var(--ox-space-10);
  padding-bottom: var(--ox-space-10);
}
.ox-pricing-nz .ox-section > .wp-block-group__inner-container > :is(.ox-eyebrow, h1, h2, h3, p, .ox-cta, .ox-text-link) {
  width: 100%;
  max-width: var(--ox-measure, 720px);
  margin-inline: auto;
}
.ox-pricing-nz .ox-section > .wp-block-group__inner-container > h1 {
  max-width: var(--ox-measure, 720px);
}
.ox-pricing-nz .ox-section > .wp-block-group__inner-container > :is(.ox-eyebrow, h1, h2, h3) {
  text-align: center;
}
.ox-pricing-nz .ox-section > .wp-block-group__inner-container > p {
  text-align: center;
}
.ox-pricing-nz .ox-section > .wp-block-group__inner-container > h2.ox-faq-heading {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.ox-pricing-nz .ox-section--alt { background: var(--ox-surface-alt, #fafafa); }
.ox-pricing-nz .ox-section ul,
.ox-pricing-nz .ox-section ol {
  display: block;
  max-width: var(--ox-measure, 720px);
  text-align: left;
}
.ox-pricing-nz h1,
.ox-pricing-nz h2,
.ox-pricing-nz h3 { margin: 0 0 var(--ox-space-2); }
.ox-pricing-nz p { margin: 0 0 var(--ox-space-3); }
.ox-pricing-nz .ox-eyebrow {
  margin: 0 0 var(--ox-space-1);
  color: #0071a4;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ox-pricing-nz .ox-lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ox-ink, #0e141c);
}
.ox-pricing-nz .ox-table-caption,
.ox-pricing-nz .ox-stack-table caption {
  display: table-caption;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  caption-side: top;
  grid-column: 1 / -1;
  margin: 0 0 var(--ox-space-1);
  padding: 0;
  color: var(--ox-ink-muted, #4a5666);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.ox-pricing-nz .wp-block-table,
.ox-pricing-nz .ox-remote-card,
.ox-pricing-nz .ox-checklist,
.ox-pricing-nz .ox-faq details,
.ox-pricing-nz .ox-conditions {
  text-align: left;
}
.ox-pricing-nz .wp-block-table {
  max-width: none;
  width: 100%;
  margin: 0 0 var(--ox-space-3);
  margin-inline: auto;
  overflow-x: visible;
}
.ox-pricing-nz .wp-block-table table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.ox-pricing-nz .wp-block-table th,
.ox-pricing-nz .wp-block-table td {
  border: 1px solid #e3e9f0;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ox-pricing-nz .wp-block-table thead th {
  background: var(--ox-surface-tint, #f2f5f8);
  font-weight: 600;
}
.ox-pricing-nz .ox-lead-col {
  border-top: 3px solid #0089c7;
}
.ox-pricing-nz .wp-block-table td.ox-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ox-pricing-nz .ox-conditions {
  max-width: none;
  margin: 0 0 var(--ox-space-3);
  padding: var(--ox-space-4);
  background: var(--ox-surface-tint, #f2f5f8);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-pricing-nz .ox-conditions p { margin: 0; max-width: none; }
.ox-pricing-nz .ox-checklist {
  max-width: var(--ox-measure, 720px);
  margin: 0 auto var(--ox-space-3);
  padding: var(--ox-space-4);
  background: var(--ox-surface-tint, #f2f5f8);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-pricing-nz .ox-checklist ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 18px;
}
.ox-pricing-nz .ox-checklist li { margin: 0 0 var(--ox-space-2); }
.ox-pricing-nz .ox-checklist li:last-child { margin-bottom: 0; }
.ox-pricing-nz .ox-remote-card {
  max-width: none;
  margin: 0;
  padding: var(--ox-space-4);
  background: var(--ox-surface-tint, #f2f5f8);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  box-shadow: none;
  text-align: left;
}
.ox-pricing-nz .ox-remote-card h3 { margin: 0 0 var(--ox-space-2); }
.ox-pricing-nz .ox-price {
  margin: 0 0 8px;
  color: var(--ox-ink-heading, #1f2c3c);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.ox-pricing-nz .ox-price-unit,
.ox-pricing-nz .ox-price-meta {
  margin: 0 0 8px;
  color: var(--ox-ink-muted, #4a5666);
  font-size: 16px;
  line-height: 1.6;
}
.ox-pricing-nz .ox-price-meta { margin-bottom: var(--ox-space-3); }
.ox-pricing-nz .ox-in-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ox-space-3);
  margin: 0 0 var(--ox-space-3);
}
.ox-pricing-nz .ox-in-out p { margin: 0 0 var(--ox-space-2); max-width: none; }
.ox-pricing-nz .ox-in-out ul {
  margin: 0;
  padding-left: 1.2em;
  max-width: none;
}
.ox-pricing-nz .ox-in-out li { margin: 0 0 var(--ox-space-2); }
.ox-pricing-nz .ox-in-out li:last-child { margin-bottom: 0; }
.ox-pricing-nz .ox-faq {
  max-width: 860px;
  margin-inline: auto;
}
.ox-pricing-nz .ox-faq .wp-block-details {
  margin: 0 0 var(--ox-space-1);
  padding: 0;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-pricing-nz .ox-faq .wp-block-details:last-child { margin-bottom: 0; }
.ox-pricing-nz .ox-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}
.ox-pricing-nz .ox-faq summary::-webkit-details-marker { display: none; }
.ox-pricing-nz .ox-faq summary h3 {
  margin: 0;
  flex: 1;
  color: var(--ox-ink-heading, #1f2c3c);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.ox-pricing-nz .ox-faq details[open] summary h3 { color: #0071a4; }
.ox-pricing-nz .ox-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ox-pricing-nz .ox-faq details[open] summary::after { transform: rotate(225deg); }
.ox-pricing-nz .ox-faq details p {
  margin: 0;
  padding: 0 24px 24px;
  max-width: none;
}
.entry-content .ox-pricing-nz .ox-btn-primary .wp-block-button__link,
.ox-pricing-nz .ox-btn-primary .wp-block-button__link {
  background-color: #0071a4;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--ox-font, "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
  text-decoration: none;
}
.entry-content .ox-pricing-nz .ox-btn-primary .wp-block-button__link:hover,
.ox-pricing-nz .ox-btn-primary .wp-block-button__link:hover {
  background-color: #005b85;
  color: #ffffff;
}
.entry-content .ox-pricing-nz .ox-btn-ghost .wp-block-button__link,
.ox-pricing-nz .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #0071a4;
  border: 2px solid #0071a4;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--ox-font, "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
  text-decoration: none;
}
.entry-content .ox-pricing-nz .ox-btn-ghost .wp-block-button__link:hover,
.ox-pricing-nz .ox-btn-ghost .wp-block-button__link:hover {
  background-color: transparent;
  color: #005b85;
  border-color: #005b85;
}
.entry-content .ox-pricing-nz .ox-section--deep .ox-btn-primary .wp-block-button__link,
.ox-pricing-nz .ox-section--deep .ox-btn-primary .wp-block-button__link {
  background-color: #ffffff;
  color: #151f2b;
  border: none;
}
.entry-content .ox-pricing-nz .ox-section--deep .ox-btn-primary .wp-block-button__link:hover,
.ox-pricing-nz .ox-section--deep .ox-btn-primary .wp-block-button__link:hover {
  background-color: #ffffff;
  color: #151f2b;
}
.entry-content .ox-pricing-nz .ox-section--deep .ox-btn-ghost .wp-block-button__link,
.ox-pricing-nz .ox-section--deep .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.entry-content .ox-pricing-nz .ox-section--deep .ox-btn-ghost .wp-block-button__link:hover,
.ox-pricing-nz .ox-section--deep .ox-btn-ghost .wp-block-button__link:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.ox-pricing-nz .ox-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--ox-space-3);
  width: 100%;
  max-width: var(--ox-measure, 720px);
  margin: var(--ox-space-3) auto 0;
}
.entry-content .ox-pricing-nz .ox-cta .wp-block-button__link,
.ox-pricing-nz .ox-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  text-align: center;
}
.ox-pricing-nz .ox-remote-card > .ox-cta {
  max-width: 720px;
  margin-inline: auto;
  justify-content: center;
}
.ox-pricing-nz .ox-text-link { margin-top: var(--ox-space-3); }
.ox-pricing-nz a:focus-visible,
.ox-pricing-nz summary:focus-visible,
.ox-pricing-nz .wp-block-button__link:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .ox-pricing-nz .ox-section {
    padding-top: var(--ox-space-6);
    padding-bottom: var(--ox-space-6);
  }
  .ox-pricing-nz .ox-lead { font-size: 18px; }
  .ox-pricing-nz .ox-price { font-size: 36px; }
  .ox-pricing-nz .ox-in-out {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ox-space-2);
  }
  .ox-pricing-nz .wp-block-table { overflow-x: visible; width: 100%; max-width: 100%; }
  .ox-pricing-nz .wp-block-table table { min-width: 0; table-layout: auto; }
  .ox-pricing-nz .ox-table-caption,
  .ox-pricing-nz .ox-stack-table caption {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
  .ox-pricing-nz .ox-stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ox-pricing-nz .ox-stack-table table,
  .ox-pricing-nz .ox-stack-table tbody,
  .ox-pricing-nz .ox-stack-table tr,
  .ox-pricing-nz .ox-stack-table th,
  .ox-pricing-nz .ox-stack-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .ox-pricing-nz .ox-stack-table tr {
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }
  .ox-pricing-nz .ox-stack-table th,
  .ox-pricing-nz .ox-stack-table td { border: 0; }
  .ox-pricing-nz .ox-stack-table tbody th {
    background: var(--ox-surface-tint, #f2f5f8);
    font-weight: 600;
  }
  .ox-pricing-nz .ox-stack-table td { text-align: left; }
  .ox-pricing-nz .ox-stack-table td.ox-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ox-pricing-nz .ox-stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8px;
    color: var(--ox-ink-muted, #4a5666);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ox-pricing-nz .ox-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ox-space-2);
    max-width: 100%;
  }
  .ox-pricing-nz .ox-cta .wp-block-button,
  .ox-pricing-nz .ox-cta .wp-block-button__link { width: 100%; }
  .entry-content .ox-pricing-nz .ox-section--deep .ox-cta .wp-block-button__link,
  .ox-pricing-nz .ox-section--deep .ox-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    text-align: center;
  }
  .ox-pricing-nz .ox-conditions,
  .ox-pricing-nz .ox-checklist,
  .ox-pricing-nz .ox-remote-card { padding: var(--ox-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .ox-pricing-nz .ox-faq summary::after { transition: none; }
}
/* END:pricing-nz */

/* BEGIN:cost-nz */
/* /managed-it-services-cost-nz/ only. Scoped to .ox-cost-nz.
   Compact tables stack below 768px (no horizontal scroll).
   Actions use #0071a4. Josefin Sans comes from the brand font stack.
   Eyebrow is 14px, so it uses action blue: brand #0089c7 fails AA at this size. */
.ox-cost-nz,
.ox-cost-nz * { box-sizing: border-box; }
.ox-cost-nz {
  font-family: var(--ox-font);
  max-width: 100%;
}
.ox-cost-nz .ox-section { text-align: left; }
.ox-cost-nz .ox-section ul,
.ox-cost-nz .ox-section ol {
  display: block;
  max-width: var(--ox-measure);
  text-align: left;
}
.ox-cost-nz .ox-eyebrow {
  margin: 0 0 8px;
  color: var(--ox-action);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ox-cost-nz .ox-table-caption {
  caption-side: top;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ox-ink-muted);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.ox-cost-nz .wp-block-table {
  max-width: 860px;
  margin-left: 0;
  margin-right: 0;
  overflow-x: visible;
}
.ox-cost-nz .wp-block-table table {
  min-width: 0;
  width: 100%;
}
.ox-cost-nz .wp-block-table th,
.ox-cost-nz .wp-block-table td {
  border: 1px solid #e3e9f0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}
.ox-cost-nz .wp-block-table thead th {
  background: var(--ox-surface-tint);
  font-weight: 600;
}
.ox-cost-nz .ox-money { text-align: right; font-variant-numeric: tabular-nums; }
.ox-cost-nz .ox-conditions {
  max-width: 860px;
  margin: 16px 0 32px;
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-nz .ox-conditions p { margin: 0; max-width: none; }
.ox-cost-nz .ox-checklist {
  max-width: var(--ox-measure);
  margin: 16px 0 24px;
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-nz .ox-checklist ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: 18px;
}
.ox-cost-nz .ox-checklist li { margin: 0 0 12px; }
.ox-cost-nz .ox-cost-cards .ox-card2 {
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  box-shadow: none;
  text-align: left;
}
.ox-cost-nz .ox-card2-price {
  margin: 0 0 8px;
  color: var(--ox-ink-muted);
  font-size: 16px;
}
.ox-cost-nz .ox-card2-t { text-align: left; }
.ox-cost-nz .ox-faq { max-width: 860px; }
.ox-cost-nz .ox-faq .wp-block-details {
  margin: 0 0 10px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-nz .ox-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}
.ox-cost-nz .ox-faq summary::-webkit-details-marker { display: none; }
.ox-cost-nz .ox-faq summary h3 {
  margin: 0;
  flex: 1;
  color: var(--ox-ink-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.ox-cost-nz .ox-faq details[open] summary h3 { color: var(--ox-action); }
.ox-cost-nz .ox-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ox-cost-nz .ox-faq details[open] summary::after { transform: rotate(225deg); }
.ox-cost-nz .ox-faq details p {
  margin: 0;
  padding: 0 24px 24px;
  max-width: none;
}
.entry-content .ox-cost-nz .ox-btn-primary .wp-block-button__link {
  background-color: #0071a4;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
}
.entry-content .ox-cost-nz .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #0071a4;
  border: 2px solid #0071a4;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
}
.entry-content .ox-cost-nz .ox-section--deep .ox-btn-primary .wp-block-button__link {
  background-color: #ffffff;
  color: #151f2b;
  border: none;
}
.entry-content .ox-cost-nz .ox-section--deep .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.ox-cost-nz .ox-cost-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.ox-cost-nz .ox-cost-call { margin-top: 16px; }
@media (min-width: 768px) {
  .ox-cost-nz .ox-cards4 > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .ox-cost-nz .wp-block-table { overflow-x: visible; }
  .ox-cost-nz .wp-block-table table { min-width: 0; }
  .ox-cost-nz .ox-stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ox-cost-nz .ox-stack-table table,
  .ox-cost-nz .ox-stack-table tbody,
  .ox-cost-nz .ox-stack-table tr,
  .ox-cost-nz .ox-stack-table th,
  .ox-cost-nz .ox-stack-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ox-cost-nz .ox-stack-table tr {
    margin: 0 0 12px;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }
  .ox-cost-nz .ox-stack-table th,
  .ox-cost-nz .ox-stack-table td { border: 0; }
  .ox-cost-nz .ox-stack-table tbody th {
    background: var(--ox-surface-tint);
    font-weight: 600;
  }
  .ox-cost-nz .ox-stack-table td.ox-money { text-align: left; }
  .ox-cost-nz .ox-stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--ox-ink-muted);
    font-size: 14px;
    font-weight: 400;
  }
  .ox-cost-nz .ox-cost-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .ox-cost-nz .ox-cost-cta .wp-block-button,
  .ox-cost-nz .ox-cost-cta .wp-block-button__link { width: 100%; }
  .ox-cost-nz .ox-conditions,
  .ox-cost-nz .ox-checklist,
  .ox-cost-nz .ox-cost-cards .ox-card2 { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-cost-nz .ox-faq summary::after { transition: none; }
}
/* END:cost-nz */

/* BEGIN:cost-guide */
/* Shared cost-guide template (OXY-57). Scoped to .ox-cost-guide.
   Additive only: does not replace .ox-cost-nz, .ox-loc-page, or pricing-nz.
   Actions use #0071a4. Josefin Sans comes from the brand font stack.
   Eyebrow is 14px, so it uses action blue: brand #0089c7 fails AA at this size.
   Spacing uses 8 / 16 / 24 / 32 / 48 / 64 / 80 / 120. */
.ox-cost-guide,
.ox-cost-guide * { box-sizing: border-box; }
.ox-cost-guide {
  font-family: var(--ox-font);
  max-width: 100%;
}
.ox-cost-guide .ox-section { text-align: left; }
.ox-cost-guide .ox-section > .wp-block-group__inner-container > * {
  margin-left: 0;
  margin-right: 0;
}
.ox-cost-guide .ox-section .wp-block-buttons { justify-content: flex-start; }
.ox-cost-guide .ox-section ul,
.ox-cost-guide .ox-section ol {
  display: block;
  max-width: var(--ox-measure);
  margin: 0 0 24px;
  padding-left: 24px;
  text-align: left;
}
.ox-cost-guide .ox-section li { margin: 0 0 8px; }
.ox-cost-guide .ox-section h1 { margin: 0 0 16px; }
.ox-cost-guide .ox-section h2 { margin: 0 0 16px; }
.ox-cost-guide .ox-section h3 { margin: 0 0 16px; }
.ox-cost-guide .ox-section > .wp-block-group__inner-container > p {
  margin: 0 0 24px;
}
.ox-cost-guide .ox-eyebrow {
  margin: 0 0 8px;
  color: var(--ox-action);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ox-cost-guide .ox-table-caption,
.ox-cost-guide .ox-stack-table caption {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  caption-side: top;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ox-ink-muted, #4a5666);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.ox-cost-guide .wp-block-table {
  max-width: 860px;
  margin: 0 0 24px;
  overflow-x: visible;
}
.ox-cost-guide .wp-block-table table {
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
}
.ox-cost-guide .wp-block-table th,
.ox-cost-guide .wp-block-table td {
  border: 1px solid #e3e9f0;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.ox-cost-guide .wp-block-table thead th {
  background: var(--ox-surface-tint);
  font-weight: 600;
}
.ox-cost-guide .ox-money { text-align: right; font-variant-numeric: tabular-nums; }
.ox-cost-guide .ox-conditions {
  max-width: 860px;
  margin: 0 0 32px;
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-guide .ox-conditions p { margin: 0; max-width: none; }
.ox-cost-guide .ox-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 0 24px;
}
.ox-cost-guide .ox-split-card {
  height: 100%;
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  text-align: left;
}
.ox-cost-guide .ox-split-card ul { margin-bottom: 0; }
.ox-cost-guide .ox-faq { max-width: 860px; }
.ox-cost-guide .ox-faq .wp-block-details {
  margin: 0 0 16px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-guide .ox-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
}
.ox-cost-guide .ox-faq summary::-webkit-details-marker { display: none; }
.ox-cost-guide .ox-faq summary h3 {
  margin: 0;
  flex: 1;
  color: var(--ox-ink-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.ox-cost-guide .ox-faq details[open] summary h3 { color: var(--ox-action); }
.ox-cost-guide .ox-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ox-cost-guide .ox-faq details[open] summary::after { transform: rotate(225deg); }
.ox-cost-guide .ox-faq details p {
  margin: 0;
  padding: 0 24px 24px;
  max-width: none;
}
.entry-content .ox-cost-guide .ox-btn-primary .wp-block-button__link,
.ox-cost-guide .ox-calc-submit {
  background-color: #0071a4;
  color: #ffffff;
  border: 2px solid #0071a4;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.entry-content .ox-cost-guide .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #0071a4;
  border: 2px solid #0071a4;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  min-height: 48px;
  line-height: 1.2;
}
.entry-content .ox-cost-guide .ox-section--deep .ox-btn-primary .wp-block-button__link {
  background-color: #ffffff;
  color: #151f2b;
  border-color: #ffffff;
}
.entry-content .ox-cost-guide .ox-section--deep .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.ox-cost-guide .ox-cost-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
}
.ox-cost-guide .ox-cost-call { margin-top: 16px; }
.ox-cost-guide a:focus-visible,
.ox-cost-guide button:focus-visible,
.ox-cost-guide summary:focus-visible,
.ox-cost-guide input:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
.ox-cost-guide .ox-calc {
  max-width: 860px;
  margin: 0 0 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
}
.ox-cost-guide .ox-calc-note { margin: 0 0 24px; max-width: none; }
.ox-cost-guide .ox-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ox-cost-guide .ox-calc label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ox-ink-heading);
  font-size: 16px;
  font-weight: 600;
}
.ox-cost-guide .ox-calc-wide { grid-column: 1 / -1; }
.ox-cost-guide .ox-calc input {
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ox-ink);
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 400;
}
.ox-cost-guide .ox-calc-error {
  margin: 16px 0 0;
  color: var(--ox-ink);
  font-weight: 600;
}
.ox-cost-guide .ox-calc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}
.ox-cost-guide .ox-calc-results-h { margin: 24px 0 16px; }
.ox-cost-guide .ox-calc-results { margin: 0; }
.ox-cost-guide .ox-calc-results div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #e3e9f0;
}
.ox-cost-guide .ox-calc-results dt { margin: 0; font-weight: 400; }
.ox-cost-guide .ox-calc-results dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
body.ox-cost-guide-page .ox-sticky { display: none; }
@media (max-width: 767px) {
  .ox-cost-guide .ox-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ox-cost-guide .ox-calc-grid { grid-template-columns: 1fr; }
  .ox-cost-guide .ox-conditions,
  .ox-cost-guide .ox-split-card,
  .ox-cost-guide .ox-calc { padding: 24px; }
  .ox-cost-guide .wp-block-table { overflow-x: visible; width: 100%; max-width: 100%; }
  .ox-cost-guide .wp-block-table table { min-width: 0; table-layout: auto; }
  .ox-cost-guide .ox-table-caption,
  .ox-cost-guide .ox-stack-table caption {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
  .ox-cost-guide .ox-stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ox-cost-guide .ox-stack-table table,
  .ox-cost-guide .ox-stack-table tbody,
  .ox-cost-guide .ox-stack-table tr,
  .ox-cost-guide .ox-stack-table th,
  .ox-cost-guide .ox-stack-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .ox-cost-guide .ox-stack-table tr {
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }
  .ox-cost-guide .ox-stack-table th,
  .ox-cost-guide .ox-stack-table td { border: 0; }
  .ox-cost-guide .ox-stack-table tbody th {
    background: var(--ox-surface-tint);
    font-weight: 600;
  }
  .ox-cost-guide .ox-stack-table td.ox-money,
  .ox-cost-guide .ox-stack-table td { text-align: left; }
  .ox-cost-guide .ox-stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8px;
    color: var(--ox-ink-muted);
    font-size: 14px;
    font-weight: 400;
  }
  .ox-cost-guide .ox-cost-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .ox-cost-guide .ox-cost-cta .wp-block-button,
  .ox-cost-guide .ox-cost-cta .wp-block-button__link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-cost-guide .ox-faq summary::after { transition: none; }
}
/* END:cost-guide */

/* BEGIN:cost-guide-caption-fix */
/* OXY-57 follow-up (30 Sep 2026). Desktop captions stayed intrinsic (~350–570px)
   while the table was ~860px because BEGIN:cost-guide set caption { display:block }
   at all breakpoints. Blockified <caption> shrink-to-fits; width:100% does not win.
   Fix: restore table-caption on desktop (same pattern as .ox-pricing-nz); keep
   display:block only under 767px where stacked rows already PASS. */
.ox-cost-guide .wp-block-table.ox-stack-table {
  display: block;
  width: 100%;
  max-width: 860px;
  box-sizing: border-box;
}
.ox-cost-guide .ox-stack-table table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}
.ox-cost-guide .ox-table-caption,
.ox-cost-guide .ox-stack-table caption {
  display: table-caption;
  caption-side: top;
  width: 100%;
  min-width: 100%;
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .ox-cost-guide .ox-table-caption,
  .ox-cost-guide .ox-stack-table caption {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ox-cost-guide .ox-stack-table table {
    table-layout: auto;
  }
}
/* END:cost-guide-caption-fix */


/* BEGIN:clarity-dead-click */
/* Staging dead-click hardening for the rebuilt cost and pricing pages.
   Scoped so it does not edit BEGIN:cost-guide, BEGIN:pricing-nz, or
   BEGIN:pricing-nz-scroll. Non-link chrome must not look like a button.
   Canonical slug: no .mp-float and no .ox-disclose rules in this block. */
.ox-cost-nz .ox-cards4 .ox-card2,
.ox-cost-nz .ox-cards4 .ox-card2:hover,
.ox-cost-nz .ox-cards4 .ox-card2:focus {
  cursor: default;
  transform: none;
  box-shadow: none;
  filter: none;
  border-color: #e3e9ef;
  background: var(--ox-surface, #ffffff);
}

/* Live cost cards have no .ox-card2-more hook, so no extra link is added.
   If that paragraph is present later, the link stays a link. */
.ox-cost-nz .ox-card2 a,
.ox-cost-nz .ox-card2 .ox-card2-more a {
  cursor: pointer;
}

.ox-pricing-nz .ox-remote-card,
.ox-pricing-nz .ox-remote-card:hover,
.ox-pricing-nz .ox-remote-card:focus,
.ox-pricing-nz .ox-checklist,
.ox-pricing-nz .ox-checklist:hover,
.ox-pricing-nz .ox-conditions,
.ox-pricing-nz .ox-conditions:hover,
.ox-pricing-nz .ox-stack-table,
.ox-pricing-nz .ox-stack-table:hover,
.ox-pricing-nz .ox-money,
.ox-pricing-nz .ox-price,
.ox-pricing-nz .ox-price-unit,
.ox-pricing-nz .ox-price-meta,
.ox-pricing-nz .ox-in-out,
.ox-cost-nz .ox-stack-table,
.ox-cost-nz .ox-stack-table:hover,
.ox-cost-nz figure.wp-block-table {
  cursor: default;
  transform: none;
  filter: none;
}

.ox-pricing-nz .ox-remote-card:hover,
.ox-pricing-nz .ox-checklist:hover,
.ox-pricing-nz .ox-conditions:hover,
.ox-pricing-nz .ox-stack-table:hover,
.ox-cost-nz .ox-stack-table:hover {
  box-shadow: none;
}

.ox-pricing-nz .ox-faq details.wp-block-details,
.ox-pricing-nz .ox-faq details.wp-block-details:hover,
.ox-cost-nz .ox-faq details.wp-block-details,
.ox-cost-nz .ox-faq details.wp-block-details:hover {
  cursor: default;
  transform: none;
  box-shadow: none;
}

.ox-pricing-nz .ox-faq details.wp-block-details > summary,
.ox-cost-nz .ox-faq details.wp-block-details > summary,
.ox-pricing-nz .ox-faq details.wp-block-details > summary:hover,
.ox-cost-nz .ox-faq details.wp-block-details > summary:hover {
  cursor: pointer;
  transform: none;
}

.ox-pricing-nz a,
.ox-pricing-nz button,
.ox-pricing-nz .wp-block-button__link,
.ox-cost-nz a,
.ox-cost-nz button,
.ox-cost-nz .wp-block-button__link {
  cursor: pointer;
}
/* END:clarity-dead-click */

/* BEGIN:consultation-dead-click */
/* 4A Clarity residual — remote-support #consultation (UX note 30 Sep 2026).
   Staging twin first. Scoped where possible. No prod until Tim signs.
   P0: empty consent label (HTML separate) + separator/heading chrome. */
#consultation .elementor-widget-heading .elementor-heading-title {
  cursor: default;
}
#consultation .elementor-widget-image img.wp-image-7601,
#consultation .elementor-element-150e722 img {
  pointer-events: none;
  cursor: default;
}
#consultation #field_3_10 .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
}
#consultation #label_3_10_1 {
  display: inline-block;
  min-height: 44px;
  cursor: pointer;
  line-height: 1.4;
}
#consultation #choice_3_10_1 {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
/* P1 (safe overrides; twin HTML may lack these nodes) */
.elementor-icon-box-wrapper .elementor-icon-box-title {
  cursor: default;
}
.servicecardnew:hover .servicebutton {
  pointer-events: auto;
  opacity: 1;
}
/* END:consultation-dead-click */

/* BEGIN:band-table-mobile-rows v2 (2026-10-08) - scoped to .ox-band-table only.
   Replaces v1 in full. .ox-include-table and other .ox-stack-table blocks keep the default stacked cards. */
@media (max-width: 767px) {
  .ox-pricing-nz .ox-band-table tbody th { padding:12px 16px; font-size:17px; font-weight:700; color:var(--ox-ink,#1f2c3c); }
  .ox-pricing-nz .ox-band-table td[data-label] { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid #e3e9f0; text-align:right; }
  .ox-pricing-nz .ox-band-table td[data-label]::before { display:inline; margin:0; flex:1 1 auto; min-width:0; overflow-wrap:normal; word-break:normal; text-align:left; text-transform:none; letter-spacing:0; font-size:16px; font-weight:400; color:var(--ox-ink-muted,#4a5666); }
  .ox-pricing-nz .ox-band-table td.ox-money { font-weight:700; font-size:17px; color:var(--ox-ink,#1f2c3c); white-space:nowrap; }
  .ox-pricing-nz .ox-band-table tr { margin:0 0 12px; }
}
/* END:band-table-mobile-rows */

/* BEGIN:it-support-services */
/* /it-support-services/ pointer page only (OXY-60). Scoped to .ox-itss.
   Append-only. Does not edit BEGIN:cost-nz, BEGIN:cost-guide, BEGIN:pricing-nz,
   or any sitewide rule. Tokens from TYPE-AND-COLOUR (Tim, 7 Aug 2026).
   Spacing scale only: 8, 16, 24, 32, 48, 64, 80, 120.
   SLA table stacks below 768px (no horizontal scroll).
   Eyebrow is 14px, so it uses action blue: brand #0089c7 fails AA at this size.
   No floating bar on this page: the sitewide .ox-sticky is hidden here. */
.ox-itss,
.ox-itss * { box-sizing: border-box; }
.ox-itss {
  font-family: var(--ox-font);
  max-width: 100%;
}
.ox-itss .ox-section { text-align: left; }
.ox-itss .ox-section--alt { background: var(--ox-surface-alt, #fafafa); }
.ox-itss .ox-section > .wp-block-group__inner-container > * {
  margin-left: 0;
  margin-right: 0;
}
.ox-itss .ox-section > .wp-block-group__inner-container > h2 { margin: 0 0 16px; }
.ox-itss .ox-section > .wp-block-group__inner-container > h3 { margin: 48px 0 16px; }
.ox-itss .ox-section > .wp-block-group__inner-container > p {
  max-width: var(--ox-measure);
  margin: 0 0 24px;
}
.ox-itss .ox-section > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.ox-itss .ox-section ul,
.ox-itss .ox-section ol {
  display: block;
  max-width: var(--ox-measure);
  text-align: left;
}
.ox-itss .ox-eyebrow {
  margin: 0 0 16px;
  color: var(--ox-action);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ox-itss .ox-itss-hero h1 { margin: 0 0 24px; }
.ox-itss .ox-itss-textlink { font-weight: 600; }
.ox-itss .ox-itss-textlink a {
  display: inline-block;
  padding: 8px 0;
}

/* SLA table */
.ox-itss .ox-table-caption {
  caption-side: top;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ox-ink-muted);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.ox-itss .wp-block-table {
  max-width: 960px;
  margin: 0 0 16px;
  overflow-x: visible;
}
.ox-itss .wp-block-table table {
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
}
.ox-itss .wp-block-table th,
.ox-itss .wp-block-table td {
  border: 1px solid #e3e9f0;
  padding: 16px;
  color: var(--ox-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.ox-itss .wp-block-table thead th {
  background: var(--ox-surface-tint);
  color: var(--ox-ink-heading);
  font-weight: 600;
}
.ox-itss .wp-block-table tbody th {
  background: #ffffff;
  color: var(--ox-ink-heading);
  font-weight: 600;
  white-space: nowrap;
}
.ox-itss .wp-block-table tbody td { background: #ffffff; }
@media (min-width: 768px) {
  .ox-itss .wp-block-table td[data-label="Response"],
  .ox-itss .wp-block-table td[data-label="Resolution target"] { white-space: nowrap; }
}
.ox-itss .ox-itss-note {
  color: var(--ox-ink-muted);
  font-size: 16px;
}

/* Support-line callout and the four-question card */
.ox-itss .ox-itss-callout,
.ox-itss .ox-itss-card {
  max-width: var(--ox-measure);
  margin: 32px 0 24px;
  padding: 32px;
  background: var(--ox-surface-tint);
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  box-shadow: none;
}
.ox-itss .ox-itss-callout p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ox-ink-heading);
}
.ox-itss .ox-itss-card { margin-top: 16px; }
.ox-itss .ox-itss-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 18px;
  line-height: 32px;
}
.ox-itss .ox-itss-list li { margin: 0 0 24px; }
.ox-itss .ox-itss-list li:last-child { margin-bottom: 0; }
.ox-itss .ox-itss-list strong { color: var(--ox-ink-heading); }

/* FAQ accordion. First item closed on load (no open attribute in the body). */
.ox-itss .ox-faq { max-width: 860px; }
.ox-itss .ox-faq .wp-block-details {
  margin: 0 0 16px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  text-align: left;
}
.ox-itss .ox-faq .wp-block-details:last-child { margin-bottom: 0; }
.ox-itss .ox-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.ox-itss .ox-faq summary::-webkit-details-marker { display: none; }
.ox-itss .ox-faq summary:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
.ox-itss .ox-faq summary h3 {
  margin: 0;
  flex: 1;
  color: var(--ox-ink-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.ox-itss .ox-faq details[open] summary h3 { color: var(--ox-action); }
.ox-itss .ox-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ox-itss .ox-faq details[open] summary::after { transform: rotate(225deg); }
.ox-itss .ox-faq details p {
  margin: 0;
  padding: 0 24px 24px;
  max-width: none;
}

/* CTA pair: one primary (fill) and one secondary (outline) per section. */
.ox-itss .ox-itss-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  margin: 32px 0 0;
}
.entry-content .ox-itss .ox-btn-primary .wp-block-button__link,
.entry-content .ox-itss .ox-btn-ghost .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  font-family: var(--ox-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.entry-content .ox-itss .ox-btn-primary .wp-block-button__link {
  background-color: #0071a4;
  color: #ffffff;
  border: none;
  padding: 16px 32px;
}
.entry-content .ox-itss .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #0071a4;
  border: 2px solid #0071a4;
  padding: 14px 30px;
}
.entry-content .ox-itss .ox-section--deep .ox-btn-primary .wp-block-button__link {
  background-color: #ffffff;
  color: #151f2b;
  border: none;
}
.entry-content .ox-itss .ox-section--deep .ox-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.entry-content .ox-itss .wp-block-button__link:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
.entry-content .ox-itss .ox-section--deep .wp-block-button__link:focus-visible,
.ox-itss .ox-section--deep a:focus-visible {
  outline-color: #ffffff;
}
.ox-itss .ox-itss-fine {
  margin: 32px 0 0;
  font-size: 16px;
}

/* No floating bar on this page (SPEC lock, OXY-10/11 bar rule). */
body:has(.ox-itss) .ox-sticky { display: none; }

@media (max-width: 900px) {
  body:has(.ox-itss) { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .ox-itss .ox-section > .wp-block-group__inner-container > h3 { margin-top: 32px; }
  .ox-itss .wp-block-table { overflow-x: visible; width: 100%; max-width: 100%; }
  .ox-itss .ox-stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ox-itss .ox-stack-table table,
  .ox-itss .ox-stack-table tbody,
  .ox-itss .ox-stack-table tr,
  .ox-itss .ox-stack-table th,
  .ox-itss .ox-stack-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ox-itss .ox-stack-table caption { display: block; }
  .ox-itss .ox-stack-table tr {
    margin: 0 0 16px;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }
  .ox-itss .ox-stack-table th,
  .ox-itss .ox-stack-table td { border: 0; }
  .ox-itss .ox-stack-table tbody th {
    background: var(--ox-surface-tint);
    white-space: normal;
  }
  .ox-itss .ox-stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8px;
    color: var(--ox-ink-muted);
    font-size: 14px;
    font-weight: 400;
  }
  .ox-itss .ox-itss-callout,
  .ox-itss .ox-itss-card { padding: 24px; }
  .ox-itss .ox-itss-list { font-size: 17px; }
  .ox-itss .ox-itss-list li { margin-bottom: 16px; }
  .ox-itss .ox-itss-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .ox-itss .ox-itss-cta .wp-block-button,
  .entry-content .ox-itss .ox-itss-cta .wp-block-button__link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ox-itss .ox-faq summary::after { transition: none; }
}

/* --- UX QA fixes 2026-10-08 (OXY-60 re-check: B1, W2, W3, N1 to N5) ---
   Every selector is scoped to .ox-itss, or to a post whose .entry-content
   has .ox-itss as a direct child. No bare shared class (see the 8 Oct
   band-table regression). W1 (post meta, tags, prev/next, comments) is held
   for Tim. W4 (header support number) belongs to OXY-53. */

/* B1: full-width bands with a centred 720px text column on the single post
   template. The sitewide blog rule caps .single-post .entry-content at 720px;
   lift it only when the post body is the .ox-itss wrapper. */
.single-post .entry-content:has(> .ox-itss) { max-width: none; }
.ox-itss .ox-section > .wp-block-group__inner-container {
  max-width: calc(var(--ox-measure, 720px) + 48px); /* 720 measure + 24px gutters */
  margin-left: auto;
  margin-right: auto;
}
body.single-post:has(.entry-content > .ox-itss) #right-sidebar { display: none; } /* empty, 0px tall */

/* W2: hover and active states for the four body buttons (WEBSITE-STANDARDS 1.9). */
.entry-content .ox-itss .ox-btn-primary .wp-block-button__link:hover,
.entry-content .ox-itss .ox-btn-primary .wp-block-button__link:active { background-color: #005b85; color: #ffffff; }
.entry-content .ox-itss .ox-btn-ghost .wp-block-button__link:hover,
.entry-content .ox-itss .ox-btn-ghost .wp-block-button__link:active { background-color: #0071a4; color: #ffffff; }
.entry-content .ox-itss .ox-section--deep .ox-btn-primary .wp-block-button__link:hover,
.entry-content .ox-itss .ox-section--deep .ox-btn-primary .wp-block-button__link:active { background-color: #e3e9f0; color: #151f2b; }
.entry-content .ox-itss .ox-section--deep .ox-btn-ghost .wp-block-button__link:hover,
.entry-content .ox-itss .ox-section--deep .ox-btn-ghost .wp-block-button__link:active { background-color: #ffffff; color: #151f2b; }

/* W3: 24px between the closing button pair and the fine print. */
.ox-itss .ox-section > .wp-block-group__inner-container > p.ox-itss-fine { margin-top: 24px; }

/* N1: FAQ question hover. */
.ox-itss .ox-faq summary:hover h3 { color: var(--ox-action, #0071a4); }
.ox-itss .ox-faq .wp-block-details:hover { border-color: #0071a4; }

/* N3: keep phone numbers on one line. */
.ox-itss a[href^="tel:"] { white-space: nowrap; }

/* N4: eyebrow to H1 gap back to 16px. */
.ox-itss .ox-section > .wp-block-group__inner-container > p.ox-eyebrow { margin-bottom: 16px; }

@media (max-width: 767px) {
  /* N2: drop the stray GeneratePress table hairline around the stacked cards. */
  .ox-itss .ox-stack-table table { border: 0; }
  /* N5: Response and Resolution target on one line each, label left, value right. */
  .ox-itss .ox-stack-table td[data-label="Response"],
  .ox-itss .ox-stack-table td[data-label="Resolution target"] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .ox-itss .ox-stack-table td[data-label="Response"]::before,
  .ox-itss .ox-stack-table td[data-label="Resolution target"]::before {
    display: inline;
    margin: 0;
    font-size: 16px;
  }
}
/* --- end UX QA fixes 2026-10-08 --- */
/* --- W1 2026-10-08 (Tim approved): blog post chrome hidden on this post only ---
   CSS only, keyed on the post body wrapper (.entry-content > .ox-itss), not the
   post ID, because the ID differs between staging (803) and production (7345).
   On 8 Oct only post 803 among the 242 staging posts carries .ox-itss. The HTML
   stays in the page, so the datePublished / dateModified microdata in the date
   line is untouched, and the post keeps its categories and tags in WordPress.
   Back-end also turns comments off on the post in WP; .comments-area here is
   belt-and-braces. */
body.single-post:has(.entry-content > .ox-itss) .entry-header .entry-meta,
body.single-post:has(.entry-content > .ox-itss) footer.entry-meta,
body.single-post:has(.entry-content > .ox-itss) .entry-meta .cat-links,
body.single-post:has(.entry-content > .ox-itss) .entry-meta .tags-links,
body.single-post:has(.entry-content > .ox-itss) .post-navigation,
body.single-post:has(.entry-content > .ox-itss) #nav-below,
body.single-post:has(.entry-content > .ox-itss) .comments-area { display: none; }
/* --- end W1 2026-10-08 --- */
/* END:it-support-services */

/* BEGIN:cyber-nz-stack */
/* /cyber-security-nz/ only. Staging 8 Oct 2026, mobile sweep M3. Append-only.
   Target file: wp-content/mu-plugins/oxygenit-brand/brand.css
   The page wrapper .ox-cyber-nz was never added to the .ox-stack-table rules,
   so "Published OxygenIT cyber security prices" stayed a centred two-column
   table on phones (about 1,680px tall). This mirrors the cost-nz block stack
   rules below 768px. The markup already has th[scope=row] plus
   td[data-label="Price"] on every row. Desktop (768px and up) is untouched. */
@media (max-width: 767px) {
  .ox-cyber-nz .wp-block-table { overflow-x: visible; width: 100%; max-width: 100%; }
  .ox-cyber-nz .wp-block-table table { min-width: 0; table-layout: auto; }
  .ox-cyber-nz .ox-table-caption,
  .ox-cyber-nz .ox-stack-table caption {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    text-align: left;
    white-space: normal;
  }
  .ox-cyber-nz .ox-stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ox-cyber-nz .ox-stack-table table,
  .ox-cyber-nz .ox-stack-table tbody,
  .ox-cyber-nz .ox-stack-table tr,
  .ox-cyber-nz .ox-stack-table th,
  .ox-cyber-nz .ox-stack-table td {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .ox-cyber-nz .ox-stack-table table { border: 0; background: transparent; }
  .ox-cyber-nz .ox-stack-table tr {
    margin: 0 0 12px;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }
  .ox-cyber-nz .ox-stack-table th,
  .ox-cyber-nz .ox-stack-table td {
    border: 0;
    text-align: left;
  }
  .ox-cyber-nz .ox-stack-table tbody th {
    background: var(--ox-surface-tint);
    font-weight: 600;
  }
  .ox-cyber-nz .ox-stack-table td.ox-money { text-align: left; }
  .ox-cyber-nz .ox-stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--ox-ink-muted);
    font-size: 14px;
    font-weight: 400;
  }
}
/* END:cyber-nz-stack */

/* BEGIN:smb-path-list */
/* /smb1001-pricing/ only. Staging 8 Oct 2026, mobile sweep M4. Append-only.
   Target file: wp-content/mu-plugins/oxygenit-brand/brand.css
   The three steps show "1. 1", "2. 2", "3. 3" at every width: the browser's
   own list numbers plus the hand-written p.n numbers. smb1001-pricing.css does
   set list-style:none on .smb-path, but that rule never applies: line 882 of
   smb1001-pricing.css is cut off mid-declaration ("max-width:100" with no
   closing brace), so everything after it in that file is dropped by the
   browser. This block removes the browser numbers and gives p.n the step
   number styling that smb1001-pricing.css intended (same values), so the hand
   written number is the only one and reads as a step number. It deliberately
   does not bring back the rest of the dead smb1001-pricing.css rules (the
   three-card grid, the dark .smb-ask panel), as that would change the desktop
   design; see PASTE.md. */
.smb-port ol.smb-path {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.smb-port ol.smb-path > li {
  list-style: none;
  margin-left: 0;
}
.smb-port ol.smb-path > li::marker { content: none; }
.smb-port ol.smb-path .n {
  margin: 0 0 0.2em;
  font-family: var(--ox-font);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ox-action, #0071a4);
}
/* END:smb-path-list */

/* BEGIN:post-table-overflow */
/* Single blog posts only. Staging 8 Oct 2026, mobile sweep B1 and B2. Append-only.
   Target file: wp-content/mu-plugins/oxygenit-brand/brand.css
   27 posts have comparison tables wider than the 330px phone column with no
   scroll box, so the whole page zooms out or scrolls sideways (also true on
   production). 5 more have 3-column prose tables squashed to 2 to 4 words a
   line. Below 768px each post table becomes its own horizontal scroll box, and
   cells get a 9rem minimum so prose columns stay readable; a right-edge
   shadow shows while there is more table to scroll. Covers all three markup
   variants: a plain <table> in .entry-content, Elementor text-editor widgets,
   and figure.wp-block-table.
   Pages are not affected (body.single-post only). Tables inside the stacked
   card pattern (.ox-stack-table) and the ox-* page wrappers, some of which are
   posts on staging (.ox-itss, .ox-cost-nz), are excluded and keep their own
   rules. Desktop (768px and up) is untouched.
   Note: the older global ".wp-block-table { overflow-x:auto }" mobile rule near
   the top of this file never applies, because the selector line before it
   (".wp-block-image img,") runs into the @media block. This block does not
   rely on it. */
@media (max-width: 767px) {
  body.single-post .entry-content figure.wp-block-table:not(.ox-stack-table) {
    max-width: 100%;
    overflow-x: visible;
  }
  body.single-post .entry-content table:not(.ox-stack-table table):not(.ox-pricing-nz table):not(.ox-cost-nz table):not(.ox-cost-guide table):not(.ox-cyber-nz table):not(.ox-pricing-mount table):not(.ox-itss table):not(.ox-sla table):not(.ox-ctable table) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    border: 0; /* the theme table border would double up with the cell borders */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll cue: the white covers move with the content (local), the shadows
       stay at the box edges (scroll), so a shadow shows only where more of the
       table is hidden. */
    background:
      linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(14, 20, 28, 0.22), rgba(14, 20, 28, 0)) right center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 0 50%, rgba(14, 20, 28, 0.22), rgba(14, 20, 28, 0)) left center / 14px 100% no-repeat scroll;
    background-color: #ffffff;
  }
  body.single-post .entry-content table:not(.ox-stack-table table):not(.ox-pricing-nz table):not(.ox-cost-nz table):not(.ox-cost-guide table):not(.ox-cyber-nz table):not(.ox-pricing-mount table):not(.ox-itss table):not(.ox-sla table):not(.ox-ctable table) th,
  body.single-post .entry-content table:not(.ox-stack-table table):not(.ox-pricing-nz table):not(.ox-cost-nz table):not(.ox-cost-guide table):not(.ox-cyber-nz table):not(.ox-pricing-mount table):not(.ox-itss table):not(.ox-sla table):not(.ox-ctable table) td {
    min-width: 9rem;
  }
  /* Elementor text-editor widgets are flex items; let them shrink to the
     column so the table scrolls inside them instead of widening the page. */
  body.single-post .entry-content .elementor-widget-text-editor { min-width: 0; max-width: 100%; }
}
/* END:post-table-overflow */

/* BEGIN:cost-nz-width */
/* /managed-it-services-cost-nz/ only (staging, 8 Oct 2026, OXY-60 UX QA B1).
   Layout only: no change to title, meta, headings or body copy.
   The page is a WordPress post, so the sitewide blog rule caps
   .single-post .entry-content at 720px and the section bands stop at 720px
   against the left edge. Lift the cap only when the post body is the
   .ox-cost-nz wrapper, centre each section's inner container at the 720px
   measure plus 24px gutters, and hide the empty right sidebar.
   Does not edit BEGIN:blog, BEGIN:cost-nz or BEGIN:cost-guide. */
.single-post .entry-content:has(> .ox-cost-nz) { max-width: none; }
.ox-cost-nz .ox-section > .wp-block-group__inner-container {
  max-width: calc(var(--ox-measure, 720px) + 48px); /* 720 measure + 24px gutters */
  margin-left: auto;
  margin-right: auto;
}
body.single-post:has(.entry-content > .ox-cost-nz) #right-sidebar { display: none; } /* empty, 0px tall */
/* END:cost-nz-width */

/* BEGIN:cost-nz-post-chrome */
/* /managed-it-services-cost-nz/ only (staging, 8 Oct 2026, OXY-60 UX QA W1,
   Tim approved). CSS only, keyed on the post body wrapper
   (.entry-content > .ox-cost-nz), not the post ID, because the ID differs
   between staging (720) and production (8015). On 8 Oct only post 720 among the
   242 staging posts carries .ox-cost-nz.
   Hides the date and author line, categories and tags, previous and next
   post links, and the comments area. No title, meta, heading or copy change.
   The HTML stays in the page, so the datePublished / dateModified microdata
   is untouched, and the post keeps its categories and tags in WordPress.
   Back-end also turns comments off on the post in WP; .comments-area here is
   belt-and-braces. */
body.single-post:has(.entry-content > .ox-cost-nz) .entry-header .entry-meta,
body.single-post:has(.entry-content > .ox-cost-nz) footer.entry-meta,
body.single-post:has(.entry-content > .ox-cost-nz) .entry-meta .cat-links,
body.single-post:has(.entry-content > .ox-cost-nz) .entry-meta .tags-links,
body.single-post:has(.entry-content > .ox-cost-nz) .post-navigation,
body.single-post:has(.entry-content > .ox-cost-nz) #nav-below,
body.single-post:has(.entry-content > .ox-cost-nz) .comments-area { display: none; }
/* END:cost-nz-post-chrome */

/* BEGIN:pricing-nz-scroll */
/* 5B letter B scroll-depth layout (Tim lock 30 Sep 2026: letter B only).
   Applies to the real /managed-it-services-pricing-nz/ page and to the
   /managed-it-services-pricing-nz-option-b/ preview, the two pages whose
   body carries the .ox-pricing-nz.ox-scroll-preview wrapper. The class name
   is historical. Every rule is scoped to that wrapper, so no other page is
   affected. The .ox-preview-banner rule only matters on the option-b preview;
   the real page has no banner. Keep this block after END:pricing-nz.
   Axis, measure, tables, and buttons still come from BEGIN:pricing-nz. */
.ox-pricing-nz.ox-scroll-preview .ox-preview-banner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 24px;
  background: #f2f5f8;
  color: #1f2c3c;
  border-bottom: 3px solid #0071a4;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.ox-pricing-nz.ox-scroll-preview .ox-mark {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.ox-pricing-nz.ox-scroll-preview .ox-mark__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.28em;
}
.ox-pricing-nz.ox-scroll-preview .ox-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid #0071a4;
  border-radius: 999px;
  background: transparent;
  color: #0071a4;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose:hover {
  color: #005b85;
  border-color: #005b85;
}
.ox-pricing-nz.ox-scroll-preview .ox-band-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0071a4;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose::after,
.ox-pricing-nz.ox-scroll-preview .ox-band-open::after,
.ox-pricing-nz.ox-scroll-preview .ox-acc summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose[aria-expanded="true"]::after,
.ox-pricing-nz.ox-scroll-preview .ox-band-open[aria-expanded="true"]::after,
.ox-pricing-nz.ox-scroll-preview .ox-acc[open] summary::after {
  transform: rotate(225deg);
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose-panel[hidden] {
  display: none !important;
}
.ox-pricing-nz.ox-scroll-preview #band-tables {
  scroll-margin-top: 88px;
}
.ox-pricing-nz.ox-scroll-preview .ox-disclose-panel > p {
  width: 100%;
  max-width: var(--ox-measure, 720px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ox-pricing-nz.ox-scroll-preview .ox-acc {
  width: 100%;
  max-width: none;
  margin: 0 auto 16px;
  background: #ffffff;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  text-align: left;
}
.ox-pricing-nz.ox-scroll-preview .ox-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}
.ox-pricing-nz.ox-scroll-preview .ox-acc summary::-webkit-details-marker { display: none; }
.ox-pricing-nz.ox-scroll-preview .ox-acc summary h2,
.ox-pricing-nz.ox-scroll-preview .ox-acc summary .ox-acc__label {
  margin: 0;
  flex: 1 1 auto;
  color: var(--ox-ink-heading, #1f2c3c);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
.ox-pricing-nz.ox-scroll-preview .ox-acc[open] summary h2,
.ox-pricing-nz.ox-scroll-preview .ox-acc[open] summary .ox-acc__label {
  color: #0071a4;
}
.ox-pricing-nz.ox-scroll-preview .ox-acc__body { padding: 0 24px 24px; }
.ox-pricing-nz.ox-scroll-preview .ox-acc__body > p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.ox-pricing-nz.ox-scroll-preview .ox-size-pick {
  width: 100%;
  max-width: none;
  margin: 0 auto 24px;
  padding: 0;
  border: 0;
  text-align: center;
}
.ox-pricing-nz.ox-scroll-preview .ox-size-pick legend {
  display: block;
  width: 100%;
  max-width: var(--ox-measure, 720px);
  margin: 0 auto 12px;
  padding: 0;
  color: var(--ox-ink-heading, #1f2c3c);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.ox-pricing-nz.ox-scroll-preview .ox-size-pick__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ox-pricing-nz.ox-scroll-preview .ox-size-pick__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #c5d0dc;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ox-ink, #0e141c);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}
.ox-pricing-nz.ox-scroll-preview .ox-size-pick__option.is-selected {
  border: 2px solid #0071a4;
  background: #f2f5f8;
  font-weight: 600;
}
.ox-pricing-nz.ox-scroll-preview button:focus-visible,
.ox-pricing-nz.ox-scroll-preview summary:focus-visible,
.ox-pricing-nz.ox-scroll-preview .ox-size-pick input:focus-visible {
  outline: 2px solid #0071a4;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .ox-pricing-nz.ox-scroll-preview .ox-disclose { width: 100%; }
  .ox-pricing-nz.ox-scroll-preview .ox-acc summary,
  .ox-pricing-nz.ox-scroll-preview .ox-acc__body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ox-pricing-nz.ox-scroll-preview .ox-acc__body { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-pricing-nz.ox-scroll-preview .ox-disclose::after,
  .ox-pricing-nz.ox-scroll-preview .ox-band-open::after,
  .ox-pricing-nz.ox-scroll-preview .ox-acc summary::after { transition: none; }
}
/* END:pricing-nz-scroll */

/* BEGIN:closing-footer-gap */
/* /it-support-services/ and /managed-it-services-cost-nz/ only. Staging
   8 Oct 2026, OXY-60 UX re-check nit 1. Append-only.
   W1 hid the post chrome (date, categories, tags, prev/next, comments) on these
   two posts, so the dark closing band (.ox-section--deep) now runs straight into
   the dark footer with no seam. The pricing page shows a 20px strip of the page
   ground between the same two blocks; there it comes from the empty right
   sidebar's 20px bottom margin, which these two posts no longer have because
   their empty sidebar is hidden. Give the footer the same 20px here so the page
   ground (#f7f8f9 body background) shows through. No new colour, no change to
   the footer itself. Keyed on the post body wrapper, not the post ID, because
   the IDs differ on production (803/7345, 720/8015). */
body.single-post:has(.entry-content > .ox-itss) .site-footer,
body.single-post:has(.entry-content > .ox-cost-nz) .site-footer { margin-top: 20px; }
/* END:closing-footer-gap */

/* BEGIN:include-table-tablet-words (2026-10-08) - UX proposal, staging only.
   Stops mid-word breaks ("Documentat ion", "managemen t", "Hardwar e") in the
   inclusions table between 768 and 899px, where the 5 fixed columns are ~125px.
   Scoped to .ox-include-table only. Does not touch the band table or mobile cards. */
@media (min-width: 768px) and (max-width: 899px) {
  .ox-pricing-nz .ox-include-table th,
  .ox-pricing-nz .ox-include-table td {
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: normal;
  }
}
/* END:include-table-tablet-words */

/* BEGIN:restored-sections */
/* Restored sections, 803 /it-support-services/ and 938 /managed-it-services-pricing-nz/ (spec 2026-10-08, Tim approved 10 Oct 2026). */
/* 803 FAQ: active state (all items, old and new). */
.ox-itss .ox-faq summary:active { background: #f2f5f8; }
.ox-itss .ox-faq summary:active h3 { color: #005b85; }
/* 803 Where we work link row. */
.ox-itss .ox-itss-where { padding-top: var(--ox-space-6, 48px); padding-bottom: var(--ox-space-6, 48px); }
.ox-itss .ox-itss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 720px; }
.ox-itss .ox-itss-links + .ox-itss-links { margin-top: 16px; }
.ox-itss .ox-itss-links li { margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; cursor: default; }
.ox-itss .ox-itss-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 600; color: #0071a4; text-decoration: none; border-radius: 4px;
}
.ox-itss .ox-itss-links a:hover { color: #005b85; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ox-itss .ox-itss-links a:active { color: #005b85; background: #f2f5f8; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ox-itss .ox-itss-links a:focus-visible { outline: 2px solid #0071a4; outline-offset: 2px; }
@media (max-width: 1023px) {
  .ox-itss .ox-itss-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 767px) {
  .ox-itss .ox-itss-where { padding-top: var(--ox-space-4, 32px); padding-bottom: var(--ox-space-4, 32px); }
  .ox-itss .ox-itss-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .ox-itss .ox-itss-links a { display: flex; width: 100%; }
}
@media (max-width: 379px) {
  .ox-itss .ox-itss-links { grid-template-columns: minmax(0, 1fr); }
}
/* 938 accordions and FAQ, old and new rows (UX W1 hover, W2 active). */
.ox-pricing-nz .ox-acc > summary:hover h2,
.ox-pricing-nz .ox-acc > summary:hover .ox-acc__label,
.ox-pricing-nz .ox-faq summary:hover h3 { color: #0071a4; }
.ox-pricing-nz .ox-acc:has(> summary:hover),
.ox-pricing-nz .ox-faq details:has(> summary:hover) { border-color: #0071a4; }
.ox-pricing-nz .ox-acc > summary:active,
.ox-pricing-nz .ox-faq summary:active { background: #f2f5f8; }
.ox-pricing-nz .ox-acc > summary:active h2,
.ox-pricing-nz .ox-acc > summary:active .ox-acc__label,
.ox-pricing-nz .ox-faq summary:active h3 { color: #005b85; }
.ox-pricing-nz .ox-acc__body a:hover { color: #005b85; text-decoration: underline; }
.ox-pricing-nz .ox-acc__body a:active { color: #005b85; text-decoration: underline; text-decoration-thickness: 2px; }
/* 938 proof strip (addendum 10 Oct): plain line, not interactive. */
.ox-pricing-nz .ox-proof-strip {
  margin: var(--ox-space-3, 24px) 0; padding: 12px 0; max-width: none;
  font-size: 16px; color: var(--ox-ink, #1f2c3c); text-align: left;
  border-top: 1px solid #e3e9f0; border-bottom: 1px solid #e3e9f0; cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .ox-itss .ox-itss-links a,
  .ox-pricing-nz .ox-acc > summary,
  .ox-pricing-nz .ox-faq summary { transition: none; }
}
/* END:restored-sections */

/* BEGIN:restored-sections-fix1 */
/* UX re-check 10 Oct: beat .ox-itss .ox-section ul {display:block} (0,3,1) */
.ox-itss .ox-section ul.ox-itss-links { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1023px) {
  .ox-itss .ox-section ul.ox-itss-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 767px) {
  .ox-itss .ox-section ul.ox-itss-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
@media (max-width: 379px) {
  .ox-itss .ox-section ul.ox-itss-links { grid-template-columns: minmax(0, 1fr); }
}
.ox-pricing-nz p.ox-proof-strip { text-align: left; }
/* END:restored-sections-fix1 */

/* BEGIN:cost-table-overflow */
/* /managed-it-services-cost-nz/ only. Brand pack 1.6 + Exception E1: cost and
   money-page tables STACK below 768px, they never scroll (E1 scroll allowances
   cover only /pricing/ #px-band-table and blog posts). Hook: content wrapper
   .ox-cost-nz (travels with the page content through the Move), plus post IDs
   720 (staging) and 8015 (production) as fallback because production has no
   slug or wrapper class today. Tables already inside .ox-stack-table are left
   to the existing stack rules. Labels come from the table header text via
   nth-child, because production cells carry no data-label. */
@media (max-width: 767px) {
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table),
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) :is(tbody, tr, th, td) {
    display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) {
    border: 0; table-layout: auto;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) :is(.wp-block-table:not(.ox-stack-table)) {
    overflow-x: visible; width: 100%; max-width: 100%;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) tr {
    margin: 0 0 16px; border: 1px solid #e3e9f0; border-radius: 12px;
    background: #ffffff; overflow: hidden;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) :is(th, td) {
    border: 0; padding: 12px 16px; text-align: left; font-size: 16px;
    overflow-wrap: anywhere;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) td:first-child {
    background: #f2f5f8; font-weight: 600; color: #1f2c3c;
  }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table) td:not(:first-child)::before {
    display: block; margin-bottom: 4px; color: #4a5666; font-size: 14px;
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  /* Band table: Team size | Remote IT Support | Managed IT Support | Fully Managed IT | Complete IT */
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(5)) td:nth-child(2)::before { content: "Remote IT Support"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(5)) td:nth-child(3)::before { content: "Managed IT Support"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(5)) td:nth-child(4)::before { content: "Fully Managed IT"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(5)) td:nth-child(5)::before { content: "Complete IT"; }
  /* Pricing-model table: Model | How it works | Best for | Watch out for */
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) td:nth-child(2)::before { content: "How it works"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) td:nth-child(3)::before { content: "Best for"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) td:nth-child(4)::before { content: "Watch out for"; }
  /* Managed IT vs break-fix: (blank) | Managed IT | Break-fix */
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) td:nth-child(2)::before { content: "Managed IT"; }
  :is(.ox-cost-nz, body.postid-720, body.postid-8015) table:not(.ox-stack-table table):has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) td:nth-child(3)::before { content: "Break-fix"; }
}
/* END:cost-table-overflow */

/* OXY text density 2026-10-14. Append to brand.css (staging). No images, no fonts, no JS. */
.ox-callout{background:var(--ox-surface-tint,#eef6fb);border-left:4px solid #0089c7;padding:1rem 1.25rem;border-radius:4px;color:#1f2c3c}
.ox-section--light .ox-callout,.ox-section--alt .ox-callout{max-width:68ch}
.ox-loc-aside,.ox-note{max-width:68ch;margin-top:1.25rem;font-size:.95em}
.ox-note{background:var(--ox-surface-tint,#eef6fb);padding:.75rem 1rem;border-radius:4px}
.ox-loc-page p{max-width:68ch}
.ox-stat-row{list-style:none;margin:1.5rem 0;padding:0;display:grid;grid-template-columns:1fr;gap:.75rem}
.ox-stat-row li{background:#fff;border:1px solid #dde5ec;border-radius:6px;padding:1rem;font-size:1rem;line-height:1.4;margin:0}
.ox-stat-row strong{display:block;color:#1f2c3c;font-size:1.25rem;line-height:1.2;margin-bottom:.25rem}
@media(min-width:768px){.ox-stat-row{grid-template-columns:repeat(3,1fr)}}
.ox-split{display:grid;gap:1.5rem;align-items:start}
.ox-split-a.ox-card2{padding:1.25rem}
@media(min-width:1024px){
 .ox-split{grid-template-columns:5fr 7fr;gap:2.5rem}
 /* home 15-minute call band: image left, text right, no wrapper markup needed */
 .ox-centre-band.ox-split>.wp-block-group__inner-container{display:grid;grid-template-columns:5fr 7fr;column-gap:2.5rem;align-items:center}
 .ox-centre-band.ox-split>.wp-block-group__inner-container>*{grid-column:2;text-align:left;margin-left:0}
 .ox-centre-band.ox-split>.wp-block-group__inner-container>.ox-team-graphic{grid-column:1;grid-row:1/span 4;margin:0}
 .ox-centre-band.ox-split .ox-centre-cta{justify-content:flex-start}
}
/* home service cards: equal height, tail line sits at the bottom */
.ox-cards4>.wp-block-group__inner-container>.ox-card2>.wp-block-group__inner-container{display:flex;flex-direction:column;height:100%}
.ox-card2 .ox-card2-more{margin-top:auto}

/* Hero image, hub 947, 14 Oct 2026. Append to staging brand.css after text-density.css. */
.ox-hero-img{position:relative;isolation:isolate;min-height:min(88vh,720px);display:flex;align-items:flex-end;background:#1f2c3c;color:#fff;overflow:hidden}
.ox-hero-img>.wp-block-group__inner-container{position:relative;width:100%}
.ox-hero-img__media,.ox-hero-img__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;margin:0;max-width:none}
.ox-hero-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(31,44,60,.35) 0%,rgba(31,44,60,.62) 35%,rgba(21,31,43,.90) 100%)}
@media (min-width:1024px){
  .ox-hero-img{align-items:center}
  .ox-hero-img::before{background:linear-gradient(90deg,rgba(21,31,43,.90) 0%,rgba(31,44,60,.80) 50%,rgba(31,44,60,.30) 75%,rgba(31,44,60,.10) 100%)}}
.ox-hero-img h1,.ox-hero-img p,.ox-hero-img .ox-eyebrow,.ox-hero-img .ox-loc-answer,.ox-hero-img .ox-loc-aside{color:#fff}
.ox-hero-img .ox-callout{background:transparent;border-color:rgba(255,255,255,.6)}
.ox-hero-img a:not(.wp-block-button__link){color:#5cc4f2}
.ox-hero-img .ox-btn-primary .wp-block-button__link{background:#fff;color:#151f2b}
.ox-hero-img .ox-btn-ghost .wp-block-button__link{border:2px solid #fff;color:#fff;background:transparent}
.ox-hero-img .ox-air{display:none}
.ox-hero-credit{position:absolute;right:8px;bottom:6px;font-size:12px;color:#c3ccd8}
@media (prefers-reduced-motion:reduce){.ox-hero-img__media,.ox-hero-img__media img{animation:none!important;transition:none!important;transform:none!important}}

/* OXY text density fix1 2026-10-14. Append AFTER the "OXY text density 2026-10-14" block. */
/* 1) Stat row: beats brand.css line ~1466 ".ox-section ul{display:inline-block}" (0,1,1) */
.ox-section ul.ox-stat-row{display:grid;width:100%;gap:16px;grid-template-columns:1fr;text-align:left}
@media(min-width:834px){.ox-section ul.ox-stat-row{grid-template-columns:repeat(3,1fr)}}
/* 2) Home 15-minute call band. Root cause: the generic .ox-split{display:grid;5fr 7fr} hit the OUTER group,
   whose only child is the inner container, squeezing it into the 5fr track. Reset the outer, grid the inner.
   Children margins: WP is-layout-constrained sets margin auto !important (see brand.css ~1717), so undo it the same way. */
.ox-centre-band.ox-split{display:block}
@media(min-width:1024px){
 .ox-centre-band.ox-split>.wp-block-group__inner-container{display:grid;grid-template-columns:5fr 7fr;column-gap:2.5rem;align-items:center}
 .ox-centre-band.ox-split>.wp-block-group__inner-container>*{grid-column:2;text-align:left;margin-left:0 !important;margin-right:0 !important;max-width:none}
 .ox-centre-band.ox-split>.wp-block-group__inner-container>.ox-team-graphic{grid-column:1;grid-row:1/span 4;margin:0 !important;max-width:100%}
 .ox-centre-band.ox-split .ox-team-graphic img{width:100%;height:auto}
 .ox-centre-band.ox-split .ox-centre-cta{justify-content:flex-start}
}
/* 3) Home tap targets */
.ox-card2 .ox-card2-t a{display:inline-block;padding-block:13px}
.ox-price-line a,.ox-acc .ox-acc-link{min-height:44px;display:inline-flex;align-items:center}
.ox-faq summary,.ox-sec-faq details>summary{min-height:48px;display:flex;align-items:center}
/* OXY text density fix2 2026-10-14. Append AFTER the fix1 block (and after the hero-image block). */
/* 1) 947 hero contrast. Intro was grey from ".entry-content h1 + p" (0,1,2); this is (0,2,1). */
.ox-hero-img p:not(.ox-hero-credit),.ox-hero-img p.ox-eyebrow{color:#fff}
.ox-hero-img p.ox-eyebrow,.ox-hero-img h1{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ox-hero-img::before{background:linear-gradient(180deg,rgba(31,44,60,.70) 0%,rgba(31,44,60,.80) 35%,rgba(21,31,43,.92) 100%)}
@media (min-width:1024px){
 .ox-hero-img::before{background:linear-gradient(90deg,rgba(21,31,43,.90) 0%,rgba(31,44,60,.80) 50%,rgba(31,44,60,.30) 75%,rgba(31,44,60,.10) 100%)}
 .ox-hero-img>.wp-block-group__inner-container{width:auto;max-width:620px;margin-left:max(24px,calc((100vw - 1200px)/2));margin-right:auto;text-align:left}
 .ox-hero-img>.wp-block-group__inner-container .ox-loc-cta{justify-content:flex-start}
}
/* 2) FAQ chevron: hubs (.ox-loc-page .ox-faq) and home (.ox-sec-faq). Scoped so pricing/cost FAQs are untouched. */
.ox-loc-page .ox-faq summary,.ox-sec-faq details:not(.ox-faq-more)>summary{list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer}
.ox-loc-page .ox-faq summary::-webkit-details-marker,.ox-sec-faq details>summary::-webkit-details-marker{display:none}
.ox-loc-page .ox-faq summary h3{margin:0}
.ox-loc-page .ox-faq summary::after,.ox-sec-faq details:not(.ox-faq-more)>summary::after{content:"";flex-shrink:0;width:10px;height:10px;border-right:2px solid #0071a4;border-bottom:2px solid #0071a4;transform:rotate(45deg)}
.ox-loc-page .ox-faq details[open]>summary::after,.ox-sec-faq details[open]:not(.ox-faq-more)>summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:no-preference){.ox-loc-page .ox-faq summary::after,.ox-sec-faq details:not(.ox-faq-more)>summary::after{transition:transform .2s}}
@media (min-width:1280px){.ox-loc-page .ox-faq,.ox-sec-faq .wp-block-group__inner-container>details{margin-inline:auto;max-width:720px}}
/* BEGIN:fix3 CLS on hub callouts (append last in brand.css) */
/* 68ch depends on the loaded font (681px fallback vs 748px Josefin at 834),
   so the callout widened on font swap. Same final width, font-independent: 748/18 = 41.56em. */
.ox-section--light .ox-callout,.ox-section--alt .ox-callout{max-width:41.56em}
/* END:fix3 */

/* OX floating Book a call, pages 947 and 949 (append after the hero CSS / fix3 at the END of brand.css) */
.ox-fcta{position:fixed;z-index:900;right:24px;bottom:24px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;min-width:48px;padding:0 24px;border-radius:999px;
  background:#0071a4;color:#fff;font:700 17px/1 "Josefin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-decoration:none;box-shadow:0 4px 14px rgba(21,31,43,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.ox-fcta.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
.ox-fcta:hover{background:#005f8a;color:#fff}
.ox-fcta:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #151f2b}
@media (max-width:767px){
  .ox-fcta{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto}
  body.page-id-947 .site-footer,body.page-id-949 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.ox-fcta,.ox-fcta.is-visible{transition:none;transform:none}}
@media print{.ox-fcta{display:none!important}}
body:has(.ox-burger[aria-expanded="true"]) .ox-fcta,.ox-fcta.is-navopen{visibility:hidden}

/* OX fix4: 949 hero photo credit legibility at 1024px and up (credit is position:absolute, so no layout shift).
   Worst case over pure white: #fff on rgba(0,0,0,.6) = 5.74:1. Append at the END of brand.css. */
@media (min-width:1024px){
  body.page-id-949 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}

/* BEGIN:home-hero-photo-124 (append LAST in brand.css; reuses the 947 hero photo) */
body.page-id-124 .ox-home-photo{max-width:560px;margin:24px auto 0;padding:0}
body.page-id-124 .ox-home-photo picture{display:block}
body.page-id-124 .ox-home-photo__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 20%;border-radius:12px}
body.page-id-124 .ox-home-photo__credit{font-size:12px;line-height:1.4;margin-top:6px;color:#4a5560;text-align:right}
/* floating Book a call on home (ox-floating-cta.php v2): footer room for the phone bar, same as 947/949 */
@media (max-width:767px){body.page-id-124 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* END:home-hero-photo-124 */

/* BEGIN:wellington-hero-951 (append LAST in brand.css) */
/* floating Book a call on 951 (ox-floating-cta.php v3): footer room for the phone bar, same as 947/949/124 */
@media (max-width:767px){body.page-id-951 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* credit backing at 1024 and up, same as fix4 on 949 (#fff on rgba(0,0,0,.6) is 5.74:1 worst case over white) */
@media (min-width:1024px){
  body.page-id-951 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}
/* END:wellington-hero-951 */
/* BEGIN:home-hero-ab-preview-124 (append LAST in brand.css; only applies on ?hero=a|b via body.ox-hero-a / body.ox-hero-b) */
/* option A */
body.ox-hero-a .ox-hero-x--a{--ox-scrim-a:0.65;position:relative;isolation:isolate;color:#fff;overflow:hidden; padding:clamp(120px,32vw,160px) 16px 48px;min-height:560px}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__media{position:absolute;inset:0;z-index:-1}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__img{width:100%;height:100%;object-fit:cover;object-position:52% 0%;display:block}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(21,31,43,calc(var(--ox-scrim-a)*.35)) 0,rgba(21,31,43,var(--ox-scrim-a)) 120px,rgba(21,31,43,var(--ox-scrim-a)) 100%)}
body.ox-hero-a .ox-hero-x__body{max-width:620px;margin:0 auto}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__h1{color:#fff;font-size:clamp(30px,7.6vw,48px);line-height:1.12;margin:0 0 16px;text-align:left}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__lead,body.ox-hero-a .ox-hero-x--a .ox-hero-x__alt{color:#fff;font-size:17px;line-height:1.5;margin:0 0 20px}
body.ox-hero-a .ox-hero-x--a a:not(.ox-hero-x__btn){color:#fff;text-decoration:underline;display:inline-block;min-height:24px}
body.ox-hero-a .ox-hero-x__alt a{padding:10px 0}
body.ox-hero-a .ox-hero-x__btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;text-decoration:none}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__btn{background:#fff;color:#151f2b}
body.ox-hero-a .ox-hero-x__items{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.ox-hero-a .ox-hero-x__items li{padding:12px;border-radius:12px}
body.ox-hero-a .ox-hero-x__items strong{display:block;font-size:18px;line-height:1.2;margin-bottom:4px}
body.ox-hero-a .ox-hero-x__items span{display:block;font-size:14px;line-height:1.4}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__items li{background:rgba(21,31,43,.55);border:1px solid rgba(255,255,255,.25)}
body.ox-hero-a .ox-hero-x__credit{font-size:13px;margin:0}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__credit{position:absolute;right:12px;bottom:8px;color:#fff;background:rgba(21,31,43,.7);padding:2px 6px;border-radius:4px}
@media (min-width:768px){body.ox-hero-a .ox-hero-x--a{padding:96px 32px 72px;min-height:620px}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__img{object-position:65% 30%}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__scrim{background:rgba(21,31,43,var(--ox-scrim-a))}
body.ox-hero-a .ox-hero-x__body{margin:0 auto 0 max(32px,calc((100vw - 1200px)/2))}
body.ox-hero-a .ox-hero-x__btn{display:inline-flex}
}
@media (min-width:1024px){body.ox-hero-a .ox-hero-x--a .ox-hero-x__scrim{background:linear-gradient(90deg,rgba(21,31,43,var(--ox-scrim-a)) 0,rgba(21,31,43,var(--ox-scrim-a)) 55%,rgba(21,31,43,calc(var(--ox-scrim-a)*.25)) 100%)}
body.ox-hero-a .ox-hero-x--a .ox-hero-x__items{grid-template-columns:repeat(2,minmax(0,290px))}
}
body.ox-hero-a .ox-hero-x__items strong a{color:#fff;display:block;padding:12px 0;margin:-12px 0}
body.ox-hero-a .ox-hero-x__alt a{display:inline-block;padding:10px 0}
/* option B */
body.ox-hero-b .ox-hero-x--b{--ox-scrim-a:0;display:grid;grid-template-columns:1fr;grid-template-areas:"body" "media" "credit";gap:0;background:#fff;padding:24px 16px 32px}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__body{grid-area:body}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__media{grid-area:media;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-top:24px}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__img{width:100%;height:100%;object-fit:cover;object-position:52% 20%;display:block}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__scrim{display:none}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__credit{grid-area:credit;color:#4a5666;text-align:right;margin-top:6px}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__h1{color:#1f2c3c;font-size:clamp(30px,7.6vw,46px);line-height:1.12;margin:0 0 16px}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__lead,body.ox-hero-b .ox-hero-x--b .ox-hero-x__alt{color:#0e141c;font-size:17px;line-height:1.5;margin:0 0 20px}
body.ox-hero-b .ox-hero-x--b a:not(.ox-hero-x__btn){color:#0071a4;text-decoration:underline}
body.ox-hero-b .ox-hero-x__body{max-width:620px}
body.ox-hero-b .ox-hero-x__alt a{display:inline-block;padding:10px 0}
body.ox-hero-b .ox-hero-x__btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;text-decoration:none}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__btn{background:#0071a4;color:#fff}
body.ox-hero-b .ox-hero-x__items{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.ox-hero-b .ox-hero-x__items li{padding:12px;border-radius:12px;background:#f2f5f8;border:1px solid #e3e9f0}
body.ox-hero-b .ox-hero-x__items strong{display:block;font-size:17px;line-height:1.2;margin-bottom:4px;color:#1f2c3c}
body.ox-hero-b .ox-hero-x__items span{display:block;font-size:14px;line-height:1.4;color:#4a5666}
body.ox-hero-b .ox-hero-x__credit{font-size:13px}
@media (min-width:768px){body.ox-hero-b .ox-hero-x__btn{display:inline-flex}
}
@media (min-width:1024px){body.ox-hero-b .ox-hero-x--b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"body media" "body credit";column-gap:48px; max-width:1200px;margin:0 auto;padding:56px 32px 56px;align-items:start}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__media{aspect-ratio:4/5;margin-top:0;max-height:620px;width:100%}
body.ox-hero-b .ox-hero-x--b .ox-hero-x__img{object-position:55% 30%}
}
body.ox-hero-b .ox-hero-x__items strong a{color:#1f2c3c;display:block;padding:12px 0;margin:-12px 0}
body.ox-hero-b .ox-hero-x__alt a{min-height:44px}
body.ox-hero-b .ox-hero-x__alt a{display:inline-block;padding:10px 0}
/* END:home-hero-ab-preview-124 */
/* BEGIN:home-hero-b-fix-124 (append LAST in brand.css; ?hero=b only) */
/* 1280+: the injected .ox-air decoration (right:-12px) made the page 12px too wide. Contain it in the hero and clip. */
body.ox-hero-b .ox-hero-x--b{position:relative;overflow:clip}
body.ox-hero-b .ox-hero-x--b .ox-air svg{max-width:100%}
/* END:home-hero-b-fix-124 */

/* BEGIN:submenu-toggle (append LAST; mobile menu chevrons, 14 Oct 2026) */
/* 1) Tap target: the chevron span is 25x16 to 25x32px. An invisible 44x44px ::after centred on it widens the hit area
      without changing the row height or the label position. Taps on it still target span.gb-submenu-toggle. */
/* 2) A nested item's chevron is forced to transform:none (BEGIN:fixes). Rotate it 180deg once the header script adds
      .ox-sub-open, the same as the top-level Services chevron. */
@media (max-width: 900px) {
  .ox-header-inner.is-open .gb-submenu-toggle { position: relative; }
  .ox-header-inner.is-open .gb-submenu-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .ox-header-inner.is-open .gb-submenu-toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 4px; }
  .ox-header-inner.is-open .gb-sub-menu > li.menu-item-has-children.ox-sub-open
    > .gb-menu-link .gb-submenu-toggle svg { transform: rotate(180deg); }
}
/* END:submenu-toggle */
/* BEGIN:location-batch2 (append LAST in brand.css; pages 1000, 1009, 1006) */
/* floating Book a call: footer room for the phone bar, same as 947/949/124/951 */
@media (max-width:767px){body.page-id-1000 .site-footer,body.page-id-1009 .site-footer,body.page-id-1006 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* credit backing at 1024 and up, same as fix4 on 949/951 (#fff on rgba(0,0,0,.6) = 5.74:1 worst case) */
@media (min-width:1024px){
  body.page-id-1000 .ox-hero-img .ox-hero-credit,body.page-id-1006 .ox-hero-img .ox-hero-credit,body.page-id-1009 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}
/* navy fallback hero (no photo, no credit): solid #151F2B, same min-height as the photo hero */
body.page-id-1009 .ox-hero-img--navy{background:#151f2b}
body.page-id-1009 .ox-hero-img--navy::before{display:none}
/* location pages: nearby list */
body.page-id-1000 .ox-loc-near,body.page-id-1009 .ox-loc-near,body.page-id-1006 .ox-loc-near{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px}
body.page-id-1000 .ox-loc-near a,body.page-id-1009 .ox-loc-near a,body.page-id-1006 .ox-loc-near a{display:inline-block;min-height:44px;line-height:44px}
/* END:location-batch2 */
/* BEGIN:location-batch3 (append LAST in brand.css; pages 998, 1007, 1003) */
/* floating Book a call: footer room for the phone bar, same as 947/949/124/951 */
@media (max-width:767px){body.page-id-998 .site-footer,body.page-id-1007 .site-footer,body.page-id-1003 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* credit backing at 1024 and up, same as fix4 on 949/951 (#fff on rgba(0,0,0,.6) = 5.74:1 worst case) */
@media (min-width:1024px){
  body.page-id-998 .ox-hero-img .ox-hero-credit,body.page-id-1007 .ox-hero-img .ox-hero-credit,body.page-id-1003 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}
/* location pages: nearby list */
body.page-id-998 .ox-loc-near,body.page-id-1007 .ox-loc-near,body.page-id-1003 .ox-loc-near{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px}
body.page-id-998 .ox-loc-near a,body.page-id-1007 .ox-loc-near a,body.page-id-1003 .ox-loc-near a{display:inline-block;min-height:44px;line-height:44px}
/* END:location-batch3 */
/* BEGIN:location-batch4 (append LAST in brand.css; pages 1008, 1002, 999, 1004, 1005) */
/* floating Book a call: footer room for the phone bar, same as 947/949/124/951 */
@media (max-width:767px){body.page-id-1008 .site-footer,body.page-id-1002 .site-footer,body.page-id-999 .site-footer,body.page-id-1004 .site-footer,body.page-id-1005 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* credit backing at 1024 and up, same as fix4 on 949/951 (#fff on rgba(0,0,0,.6) = 5.74:1 worst case) */
@media (min-width:1024px){
  body.page-id-1008 .ox-hero-img .ox-hero-credit,body.page-id-1002 .ox-hero-img .ox-hero-credit,body.page-id-999 .ox-hero-img .ox-hero-credit,body.page-id-1004 .ox-hero-img .ox-hero-credit,body.page-id-1005 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}
/* location pages: nearby list */
body.page-id-1008 .ox-loc-near,body.page-id-1002 .ox-loc-near,body.page-id-999 .ox-loc-near,body.page-id-1004 .ox-loc-near,body.page-id-1005 .ox-loc-near{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px}
body.page-id-1008 .ox-loc-near a,body.page-id-1002 .ox-loc-near a,body.page-id-999 .ox-loc-near a,body.page-id-1004 .ox-loc-near a,body.page-id-1005 .ox-loc-near a{display:inline-block;min-height:44px;line-height:44px}
/* END:location-batch4 */
/* BEGIN:location-batch5 (append LAST in brand.css; pages 1001) */
/* floating Book a call: footer room for the phone bar, same as 947/949/124/951 */
@media (max-width:767px){body.page-id-1001 .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* credit backing at 1024 and up, same as fix4 on 949/951 (#fff on rgba(0,0,0,.6) = 5.74:1 worst case) */
@media (min-width:1024px){
  body.page-id-1001 .ox-hero-img .ox-hero-credit{background:rgba(0,0,0,.6);color:#fff;padding:.15em .4em;border-radius:3px;line-height:1.3}
}
/* location pages: nearby list */
body.page-id-1001 .ox-loc-near{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px}
body.page-id-1001 .ox-loc-near a{display:inline-block;min-height:44px;line-height:44px}
/* END:location-batch5 */
/* BEGIN:header-tap-targets (append LAST in brand.css AND brand-124.css; 15 Oct 2026, UX: 44px tap targets on phones) */
@media (max-width:767px){
  .ox-header-inner:not(.is-open) .ox-contact a[data-cta="header-support"]{min-height:44px;box-sizing:border-box;justify-content:center}
  .ox-header-inner:not(.is-open) .ox-logo{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center} /* UX measured 95x28 (360) and 122x36 (390): that rect is this logo link */
  .ox-header-inner .ox-burger{min-height:48px;box-sizing:border-box} /* already 48px today; this only locks it at or above 44px */
}
/* END:header-tap-targets */
/* BEGIN:header-logo-size (append LAST in brand.css AND brand-124.css; 15 Oct 2026: reserve the logo height on the img itself, CLS fix. a.ox-logo keeps min-height 44px) */
.ox-logo img{height:52px;max-height:52px;width:auto;aspect-ratio:220/65}
@media (max-width:900px){.ox-header-inner:not(.is-open) .ox-logo img{height:36px;max-height:36px}}
@media (max-width:380px){.ox-header-inner:not(.is-open) .ox-logo img{height:28px;max-height:28px}}
/* END:header-logo-size */