/*
 * Acclaro design system. Derived from direction board B2 Orbit.
 * Brand-system rules only: colours, type, surfaces, components. Per-instance choices (a module's
 * spacing, alignment, a one-off colour) live in Divi module attributes so staff can change them.
 * The :root block between the tokens markers is generated from src/acclaro/tokens.py by tools/build.py.
 */

/* tokens:start */
:root {
  --navy: #0D1E38;
  --peach: #F79C7D;
  --teal: #5FC1B3;
  --cyan: #2EC1D4;
  --canvas: #08142A;
  --canvas-deep: #040A17;
  --canvas-2: #0B1A33;
  --canvas-3: #07122A;
  --panel: #0D1E38;
  --card: #FFFFFF;
  --sand: #F3F1ED;
  --white: #FFFFFF;
  --ink: #0D1E38;
  --ink-2: #4A556A;
  --accent: #086275;
  --gold: #E6C25A;
  --gold-text: #F3D27A;
  --gold-hover: #FFF1C2;
  --uc-navy: #0C1C35;
  --uc-blue: #2395CE;
  --uc-peach: #F0B181;
  --al-blush: #E7DBD2;
  --al-teal: #B7DDE2;
  --al-rose: #E1B7A7;
  --al-offwhite: #F7F7F5;
  --grad: linear-gradient(90deg, #2EC1D4 0%, #5FC1B3 50%, #F79C7D 100%);
  --grad-ink: linear-gradient(90deg, #1396A9 0%, #2A9488 50%, #D06A48 100%);
  --font-display: "Saira Condensed", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Helvetica Now Display", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Saira Condensed", "Inter Tight", sans-serif;
  --wrap: 1320px;
  --gutter: 1rem;
  --section: 5rem;
  --section-lg: 6rem;
  --radius: 14px;
  --radius-lg: 20px;
  --touch: 44px;
  --header: 76px;
}
/* tokens:end */

/* ---------- base ---------- */
/* surface variables: white on navy by default; the sand and white bands and white cards switch to navy ink.
 * --dim is the floor for dimmed text: .85 keeps navy text at AA on the light surfaces */
body.ac { --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.35); --tint: rgba(255,255,255,.04); --em: var(--grad); --kick: var(--cyan); --dim: 0; }
:is(.ac-sec.sand, .ac-sec.white), .ac-sec.ac-latest .ac-item { --line: rgba(13,30,56,.14); --line-2: rgba(13,30,56,.35); --tint: rgba(13,30,56,.03); --em: var(--grad-ink); --kick: var(--accent); --dim: .85; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.ac {
  margin: 0; background: var(--canvas); color: #fff;
  font-family: var(--font-body); font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.ac img { max-width: 100%; height: auto; display: block; }
.ac a { color: inherit; text-decoration: none; }
.ac p { margin: 0 0 1em; }
.ac :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.ac-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: var(--navy); padding: .6rem 1rem; }
.ac-skip:focus { left: 1rem; top: 1rem; }
.ac-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.ac-em { background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-h1, .ac-h2, .ac-h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0; }
/* words are never split: headings wrap only between words; acclaro.js shrinks a heading whose longest word would not fit */
.ac-h1, .ac-h2, .ac-h3, .ac-h1 :is(h1,h2,h3), .ac-h2 :is(h1,h2,h3) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ac-nw { white-space: nowrap; }
.ac-h1 { font-weight: 900; font-size: clamp(3rem, 8.4vw, 7.2rem); line-height: .9; letter-spacing: .005em; margin-bottom: 1.5rem; }
.ac-h1.inner { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .92; }
.ac-h2 { font-weight: 900; font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: .95; letter-spacing: .005em; }
.ac-h2.big { font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: .92; letter-spacing: .005em; }
.ac-h3 { font-weight: 900; font-size: 1.75rem; line-height: 1; }
.ac-kicker { font: 900 clamp(1rem, 1.4vw, 1.25rem)/1 var(--font-accent); letter-spacing: .3em; text-transform: uppercase; color: var(--kick); margin: 0 0 1.6rem; display: flex; align-items: center; gap: .8rem; }
.ac-label { font: 900 .72rem/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; color: var(--kick); }
.ac-lede { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 300; line-height: 1.55; max-width: 48ch; opacity: max(var(--dim), .85); margin: 0 0 2.2rem; }
.ac-rule { position: relative; padding-top: 1.4rem; }
.ac-rule::before { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 1px; background: var(--grad); }
/* the same space above the rule as between the rule and its heading, whenever something comes before it
 * (directly, or before the group the heading opens) */
body.ac .ac-rule:not(:first-child), body.ac :not(:first-child) > .ac-rule:first-child { margin-top: 1.4rem; }

/* buttons: 44 px minimum touch target everywhere */
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer; border: 0; transition: .2s; }
.ac-btn.grad { background: var(--grad); color: var(--navy); }
.ac-btn.grad:hover { filter: brightness(1.08); }
.ac-btn.ghost { background: none; color: inherit; border: 1px solid var(--line-2); }
.ac-btn.ghost:hover { border-color: currentColor; }
.ac-btn.navy { background: var(--navy); color: #fff; }
.ac-btn.gold { background: transparent; border: 2.5px solid var(--gold); color: var(--gold-text); font-weight: 700; min-height: 44px; font-size: .95rem; }
.ac-btn.gold:hover { background: rgba(230,194,90,.12); color: var(--gold-hover); }
.ac-ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.ac-link { font-weight: 600; opacity: max(var(--dim), .85); min-height: 44px; display: inline-flex; align-items: center; }
.ac-link:hover { opacity: 1; }

/* ---------- Divi parent resets (specificity matched to Divi's own selectors) ---------- */
body.ac { font-size: 1rem; }
body.ac h1, body.ac h2, body.ac h3, body.ac h4, body.ac h5, body.ac h6 { color: inherit; padding: 0; }
/* links take their colour from the component; Divi's default link colour is a bare `a` rule */
body.ac a { color: inherit; }
body.ac #page-container, body.ac #et-main-area, body.ac #main-content { background: var(--canvas); color: #fff; }
body.ac #main-content .container::before { display: none; }
body.ac #left-area ul, body.ac .entry-content ul { line-height: inherit; }
body.ac #left-area .ac-nav ul, body.ac .entry-content .ac-nav ul { list-style: none; padding: 0; }

/* ---------- header ---------- */
.ac-hdr { position: sticky; top: 0; z-index: 40; background: rgba(8,20,42,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ac-hdr .ac-wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header); gap: 1rem; }
.ac-hdr .ac-logo img { height: 40px; width: auto; }
.ac-hdr .ac-logo { display: flex; align-items: center; min-height: 44px; }
.ac-nav { display: none; }
.ac-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.2rem; font-size: .9rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.ac-nav li { position: relative; }
.ac-nav a { display: inline-flex; align-items: center; min-height: 44px; opacity: max(var(--dim), .8); }
.ac-nav a:hover, .ac-nav li.current > a { opacity: 1; }
.ac-nav .sub { position: absolute; left: -1rem; top: 100%; min-width: 220px; background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: .5rem; display: none; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.ac-nav .sub a { padding: .4rem 1rem; text-transform: none; letter-spacing: 0; font-size: .95rem; border-radius: 8px; }
.ac-nav .sub a:hover { background: rgba(255,255,255,.06); }
.ac-nav li:hover > .sub, .ac-nav li:focus-within > .sub { display: flex; }
.ac-hdr .tools { display: flex; gap: .5rem; align-items: center; }
.ac-burger { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.ac-burger span { width: 22px; height: 2px; background: #fff; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; transition: .2s; }
body.ac-nav-open .ac-burger span { background: transparent; box-shadow: none; }
body.ac-nav-open .ac-burger::before, body.ac-nav-open .ac-burger::after { content: ""; position: absolute; width: 22px; height: 2px; background: #fff; }
body.ac-nav-open .ac-burger::before { transform: rotate(45deg); } body.ac-nav-open .ac-burger::after { transform: rotate(-45deg); }
.ac-burger { position: relative; }
@media (min-width: 1024px) {
  .ac-hdr .ac-logo img { height: 50px; }
  .ac-nav { display: block; }
  .ac-burger { display: none; }
}
/* phone menu: full panel under the header */
@media (max-width: 1023.98px) {
  body.ac-nav-open { overflow: hidden; }
  body.ac-nav-open .ac-nav { display: block; position: fixed; inset: var(--header) 0 0 0; background: var(--navy); color: #fff; z-index: 39; overflow: auto; padding: 1.5rem var(--gutter) 3rem; }
  body.ac-nav-open .ac-nav ul { flex-direction: column; gap: 0; font-size: 1.4rem; }
  body.ac-nav-open .ac-nav > ul > li { border-bottom: 1px solid var(--line); }
  body.ac-nav-open .ac-nav a { min-height: 56px; width: 100%; }
  body.ac-nav-open .ac-nav .sub { display: flex; position: static; background: none; border: 0; box-shadow: none; padding: 0 0 .8rem 1.2rem; }
  body.ac-nav-open .ac-nav .sub a { font-size: 1.1rem; min-height: 48px; }
}

/* ---------- hero (B2) ---------- */
.ac-hero { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--canvas-deep); }
.ac-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.ac-stage .glow { position: absolute; inset: -10%; background: radial-gradient(45% 40% at 60% 55%, rgba(46,193,212,.14), transparent 70%); }
.ac-stage .bokeh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* both devices in one group sized by the UltraClear tower, so they keep the same relationship at every size */
.ac-stage .pair { position: absolute; left: 46%; bottom: -30%; height: 120%; aspect-ratio: 646 / 1352; transform: translateX(-50%); }
.ac-stage .uc { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.ac-stage .al { position: absolute; left: 52%; bottom: 36%; height: 30%; width: auto; z-index: 2; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.ac-stage .lbl { position: absolute; font: 900 .7rem/1 var(--font-accent); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: .6rem; }
.ac-stage .lbl::before { content: ""; width: 24px; height: 1px; background: var(--grad); }
.ac-stage .lbl.a { left: 1rem; top: 1.2rem; } .ac-stage .lbl.b { right: 1rem; top: 1.2rem; flex-direction: row-reverse; }
/* home device pair: each label is anchored to its own device, so it keeps the same spot next to it at every width:
 * UltraClear right of its pole above the screen, AuraLux just above the right half of its device. No pointer lines.
 * Positions use the pair's geometry in container units: --pt pair top, --ph pair height, --pw pair width, --px pair
 * left; AuraLux: --al-l left, --al-w width, --al-t top. Each label is clamped inside the stage. */
body.ac .ac-hero .ac-stage:has(.pair) { container-type: size;
  --pt: 10cqh; --ph: 120cqh; --pw: 57.33cqh; --px: calc(46cqw - 28.67cqh);
  --al-l: calc(var(--px) + .52 * var(--pw)); --al-w: calc(.4155 * var(--ph)); --al-t: calc(var(--pt) + .34 * var(--ph)); }
@media (min-width: 1024px) {
  body.ac .ac-hero .ac-stage:has(.pair) { --pt: 5cqh; --ph: 90cqh; --pw: 43cqh; --px: calc(41cqw - 21.5cqh);
    --al-l: calc(var(--px) + .38 * var(--pw)); --al-w: calc(.4017 * var(--ph)); --al-t: calc(var(--pt) + .59 * var(--ph)); }
}
.ac-stage:has(.pair) .lbl { text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.ac-stage:has(.pair) .lbl::before { display: none; }
body.ac .ac-stage:has(.pair) .lbl.a { right: auto; bottom: auto; transform: none;
  left: min(calc(var(--px) + .505 * var(--pw)), calc(100cqw - 8rem)); top: calc(var(--pt) + .17 * var(--ph)); }
body.ac .ac-stage:has(.pair) .lbl.b { right: auto; bottom: auto; transform: none;
  left: min(calc(var(--al-l) + .62 * var(--al-w)), calc(100cqw - 6.5rem)); top: calc(var(--al-t) - .065 * var(--ph)); }
/* phones and tablets: the devices sit behind the panel's diagonal edge */
@media (max-width: 1023.98px) {
  body.ac .ac-hero .ac-stage.ac-stage:not(.photo), body.ac .ac-hero .et_pb_column.ac-stage.ac-stage:not(.photo) { z-index: 1; }
}
/* single-device stages for the platform pages */
.ac-stage .solo { position: absolute; left: 50%; bottom: -12%; height: 108%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.ac-stage .solo.al { bottom: auto; top: 8%; height: 84%; left: 50%; }
/* photograph stage: the photo fills the stage edge to edge, no bokeh; a navy fade on the panel side keeps the curve soft */
.ac-stage.photo { aspect-ratio: 4 / 3; }
.ac-stage.photo .glow { display: none; }
.ac-stage.photo .photo, .ac-stage.photo .et_pb_image.photo { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.ac-stage.photo .et_pb_image.photo img, .ac-stage.photo img.photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.ac-stage.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(8,20,42,.35), transparent 30%), linear-gradient(90deg, rgba(8,20,42,.5), transparent 35%); }
@media (max-width: 1023.98px) { .ac-stage.photo::after { background: linear-gradient(0deg, rgba(8,20,42,.45), transparent 35%); } }
.ac-stage.photo .et_pb_image.focus-l img, .ac-stage.photo img.photo.focus-l { object-position: 20% 50%; }
.ac-stage.photo .et_pb_image.focus-r img, .ac-stage.photo img.photo.focus-r { object-position: 82% 50%; }
/* compact photo band: tall enough that the 80px curve rising into it leaves the picture readable */
.ac-hero.compact .ac-stage.photo { height: 320px; }
@media (min-width: 600px) { .ac-hero.compact .ac-stage.photo { height: 400px; } }
@media (min-width: 1024px) { .ac-hero.compact .ac-stage.photo { height: auto; } }
/* the hero is a grid whose stage is reordered first or second; grid items paint in that visual order, so on desktop
 * the stage painted over the panel and hid its curved edge. The panel always sits above the stage. */
body.ac .ac-hero .ac-panel, body.ac .ac-hero .et_pb_column.ac-panel { z-index: 3; }
/* device stages (home pair, product heroes) are transparent, so they sit above the panel: the devices stand in front
 * of the curve while the curve still shows around them. Photo stages stay below so the curve cuts into the photo. */
body.ac .ac-hero .ac-stage:not(.photo), body.ac .ac-hero .et_pb_column.ac-stage:not(.photo) { z-index: 4; pointer-events: none; }
.ac-stage.uc-tint .glow { background: radial-gradient(45% 40% at 55% 60%, rgba(35,149,206,.28), transparent 70%), radial-gradient(30% 30% at 80% 80%, rgba(240,177,129,.18), transparent 70%); }
.ac-stage.al-tint .glow { background: radial-gradient(45% 40% at 50% 50%, rgba(183,221,226,.22), transparent 70%), radial-gradient(30% 30% at 80% 70%, rgba(225,183,167,.18), transparent 70%); }
.ac-panel { position: relative; background: var(--panel); padding: 2.5rem var(--gutter) 3.5rem; z-index: 2;
  /* curved edges, drawn as masks: the desktop right edge (140 x 100, stretched to the panel height) and the
   * phone top edge (100 x 100, stretched to the cap). Both bow like the arcs in the panel texture. */
  --panel-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H140L0 100Z'/%3E%3C/svg%3E");
  --panel-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 0V100Z'/%3E%3C/svg%3E"); }
/* the gradient line along the panel's diagonal edge: the top edge on phones and tablets, the right edge on desktop */
.ac-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; z-index: 2; pointer-events: none;
  background: var(--grad); clip-path: polygon(0 80px, 100% 0, 100% 4px, 0 84px); }
.ac-stage.none + .ac-panel::after { display: none; }
.ac-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -79px; height: 80px; background: var(--panel);
  -webkit-mask: var(--panel-cap) center / 100% 100% no-repeat; mask: var(--panel-cap) center / 100% 100% no-repeat; }
.ac-panel > * { position: relative; z-index: 1; }
/* on tablets and phones the panel itself rises 80px under the photo with the arc cut into its own top edge, so the
 * texture runs continuously from the curve down (a separate flat cap read as a navy band) */
@media (max-width: 1023.98px) {
  .ac-panel, body.ac .et_pb_row .et_pb_column.ac-panel { margin-top: -80px; padding-top: calc(2.5rem + 80px);
    -webkit-mask: var(--panel-cap) top / 100% 80px no-repeat, linear-gradient(#000, #000) 0 80px / 100% calc(100% - 80px) no-repeat;
    mask: var(--panel-cap) top / 100% 80px no-repeat, linear-gradient(#000, #000) 0 80px / 100% calc(100% - 80px) no-repeat; }
  .ac-panel::before { display: none; }
  .ac-hero.compact .ac-stage.none + .ac-panel, body.ac .et_pb_row .ac-stage.none + .et_pb_column.ac-panel { margin-top: 0; padding-top: 2.5rem; -webkit-mask: none; mask: none; }
}

/* subtle texture: cyan light top-left, peach warmth low-right, sweeping arcs, fine grain. No hairlines. */
.ac-panel .tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background:
  radial-gradient(60% 50% at 0% 0%, rgba(46,193,212,.22), transparent 70%),
  radial-gradient(50% 40% at 100% 100%, rgba(247,156,125,.14), transparent 70%); }
.ac-panel .tex::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: screen; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ac-panel .tex::before { content: ""; position: absolute; left: -30%; bottom: -40%; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(46,193,212,.16); box-shadow: 0 0 0 60px rgba(46,193,212,.05), 0 0 0 140px rgba(46,193,212,.035), 0 0 0 240px rgba(46,193,212,.02); animation: acArc 40s ease-in-out infinite alternate; }
@keyframes acArc { from { transform: translate(0,0) scale(1); } to { transform: translate(4%,-3%) scale(1.06); } }
@media (min-width: 1024px) {
  .ac-hero { grid-template-columns: 48% 52%; min-height: min(90vh, 880px); }
  .ac-stage { order: 2; aspect-ratio: auto; }
  .ac-stage .pair { left: 41%; top: 5%; bottom: 5%; height: auto; }  /* equal space above and below the devices */
  .ac-stage .al { left: 38%; bottom: 12%; height: 29%; }
  .ac-stage .solo { left: 46%; }
  /* the panel's right edge is a curve that bows the same way as the arcs in its texture: a 140px-wide curved mask
   * tile on the right, solid everywhere else (a mask keeps the texture; a clip-path with px cannot curve) */
  /* right padding keeps the copy inside the solid part of the panel, left of the 140px curved edge */
  .ac-panel { order: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem calc(140px + 2.5rem) 4rem max(2rem, calc((100vw - var(--wrap)) / 2 + var(--gutter))); margin-right: -140px;
    -webkit-mask: linear-gradient(#000, #000) left top / calc(100% - 140px) 100% no-repeat, var(--panel-edge) right top / 140px 100% no-repeat;
    mask: linear-gradient(#000, #000) left top / calc(100% - 140px) 100% no-repeat, var(--panel-edge) right top / 140px 100% no-repeat; }
  .ac-panel::before { display: none; }
  .ac-panel::after, .ac-stage.none + .ac-panel::after { display: block; left: auto; right: 0; top: 0; bottom: 0; width: 140px; height: auto;
    background: linear-gradient(0deg, var(--cyan), var(--teal) 50%, var(--peach)); clip-path: polygon(calc(100% - 6px) 0, 100% 0, 0 100%, -6px 100%); }
}
/* compact hero for inner pages: same panel, a short bokeh band instead of a square stage on phones */
.ac-hero.compact .ac-stage { aspect-ratio: auto; height: 180px; }
.ac-hero.compact .ac-panel { padding-bottom: 3rem; }
@media (max-width: 1023.98px) { .ac-hero.compact .ac-stage.none { display: none; } .ac-hero.compact .ac-stage.none + .ac-panel::before { display: none; } }
@media (min-width: 1024px) {
  .ac-hero.compact { min-height: 440px; grid-template-columns: 58% 42%; }
  .ac-hero.compact .ac-stage { height: auto; }
}

/* ---------- trademark strip ---------- */
/* white band under the hero with navy callouts; too thin for a curve, so its edges stay straight */
.ac-strip { overflow: hidden; color: var(--ink); --line: rgba(13,30,56,.14); --dim: .85; }
body.ac .et_pb_section.ac-strip { background: #fff; }
.ac-strip .ac-wrap { display: flex; gap: 1.2rem 2.5rem; flex-wrap: wrap; justify-content: center; padding: 1.1rem var(--gutter); font: 900 .8rem/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; opacity: max(var(--dim), .75); }
.ac-strip span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ink); margin-right: .9rem; vertical-align: middle; }

/* ---------- sections ---------- */
.ac-sec { position: relative; padding: var(--section) 0; }
.ac-sec.deep { background: linear-gradient(180deg, var(--canvas-2) 0%, var(--canvas-3) 100%); }
.ac-sec.ac-cta { background: linear-gradient(180deg, var(--canvas-2) 0%, var(--canvas-3) 100%); }
.ac-sec.deep-r, .ac-sec.ac-latest { background: linear-gradient(180deg, var(--canvas-3) 0%, var(--canvas-2) 100%); isolation: isolate; overflow: hidden; }
/* white cards on the navy Latest band take the light-surface variables back */
.ac-sec.ac-latest .ac-item { background: #fff; color: var(--ink); border-color: transparent; }
.ac-sec.ac-latest .ac-item:hover { border-color: var(--cyan); }
/* bokeh drift: soft discs floating slowly behind the copy of the navy bands (acclaro.js) */
.ac-drift { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
:is(.ac-sec.sand, .ac-sec.white) { color: var(--ink); }
.ac-sec.sand { background: var(--sand); }
.ac-sec.white { background: #fff; }
:is(.ac-sec.sand, .ac-sec.white) .ac-kicker { color: var(--navy); }
:is(.ac-sec.sand, .ac-sec.white) .ac-lede, :is(.ac-sec.sand, .ac-sec.white) p { opacity: 1; color: var(--ink-2); }
:is(.ac-sec.sand, .ac-sec.white) .ac-h2, :is(.ac-sec.sand, .ac-sec.white) .ac-h3 { color: var(--ink); }
:is(.ac-sec.sand, .ac-sec.white) .ac-rule::before { background: var(--grad); }
.ac-sec > .ac-wrap > .ac-h2 { margin-bottom: 2.5rem; }
.ac-head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
/* Divi zeroes module margins with a four-class selector; five classes restore the gap under section headings. */
body.ac .et_pb_section .et_pb_row :is(.et_flex_column, .et_flex_group) > .et_pb_module.ac-head { margin-bottom: 2.5rem; }
.ac-head .sub { margin: 0; max-width: 60ch; opacity: max(var(--dim), .8); }
.ac-head.row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }

/* directory rows (B2) */
/* no rule above a list that follows a heading: it read as a second line under the heading. Rows keep their own
 * dividers below; Divi zeroes the heading's bottom margin, so the gap is restated here. */
.ac-rows { border-top: 0; }
/* Divi zeroes module margins with `.et_pb_section .et_pb_row .et_flex_group > .et_pb_module` (four classes), so these
 * spacing rules carry five */
body.ac .et_pb_section .et_pb_module.ac-h2:has(+ .ac-rows), body.ac .ac-h2:has(+ .ac-rows) { margin-bottom: 1.5rem; }
body.ac .ac-h2 + .ac-faq-item { border-top: 0; padding-top: .5rem; }
body.ac .et_pb_section .ac-faq-group > .et_pb_module.ac-h2, body.ac .ac-faq-group > .ac-h2 { margin-bottom: 1.5rem; }
.ac-row { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); min-height: 92px; position: relative; }
.ac-row .n { font: 900 1.4rem/1 var(--font-accent); background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-row h3 { margin: 0; font: 900 clamp(1.7rem, 3.2vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; }
.ac-row p { margin: .35rem 0 0; opacity: max(var(--dim), .7); font-size: .95rem; font-weight: 300; max-width: 60ch; }
.ac-row .arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: .2s; }
.ac-row:hover .arrow { background: var(--grad); color: var(--navy); border-color: transparent; }

/* two-column text block */
.ac-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .ac-split { grid-template-columns: 1.1fr .9fr; align-items: start; } .ac-split.center { align-items: center; } }
.ac-prose { font-size: 1.05rem; font-weight: 300; line-height: 1.65; opacity: max(var(--dim), .88); max-width: 62ch; }
.ac-prose p + p { margin-top: 1em; }
.ac-prose strong { font-weight: 600; }

/* feature blocks */
.ac-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ac-grid.c2 { grid-template-columns: repeat(2, 1fr); } .ac-grid.c3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ac-grid.c3 { grid-template-columns: repeat(3, 1fr); } }
.ac-blk { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; min-height: 200px; display: flex; flex-direction: column; gap: .6rem; background: linear-gradient(180deg, var(--tint), transparent); }
.ac-blk .ac-label { color: var(--teal); }
:is(.ac-sec.sand, .ac-sec.white) .ac-blk .ac-label { color: var(--kick); }
.ac-blk h3 { font: 900 1.65rem/1.05 var(--font-display); text-transform: uppercase; margin: 0; }
.ac-blk p { margin: auto 0 0; opacity: max(var(--dim), .75); font-size: .95rem; font-weight: 300; }
:is(.ac-sec.sand, .ac-sec.white) .ac-blk { background: var(--card); }
:is(.ac-sec.sand, .ac-sec.white) .ac-blk p { opacity: 1; }

/* brand cards (house of brands: each brand under its own logo on a neutral surface) */
.ac-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ac-cards { grid-template-columns: 1fr 1fr; } }
.ac-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem; display: grid; gap: 1.2rem; min-height: 460px; grid-template-rows: auto 1fr auto auto; }
/* colour top: a card that should stand out carries a 4px bar in its own brand gradient */
.ac-card { position: relative; }
.ac-card:has(.vis.uc)::before, .ac-card:has(.vis.al)::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 3; }
.ac-card:has(.vis.uc)::before { background: linear-gradient(90deg, var(--uc-blue), var(--uc-peach)); }
.ac-card:has(.vis.al)::before { background: linear-gradient(90deg, var(--al-teal), var(--al-blush) 55%, var(--al-rose)); }
.ac-card .logo { height: 44px; display: flex; align-items: center; } .ac-card .logo img { max-height: 44px; width: auto; }
.ac-card .vis { position: relative; border-radius: var(--radius); min-height: 300px; display: grid; place-items: end center; overflow: hidden; isolation: isolate; }
.ac-card .vis .bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(14px) saturate(1.1); transform: scale(1.05); z-index: 0; }
.ac-card .vis::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ac-card .vis .dev { position: relative; z-index: 2; max-height: 280px; width: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.ac-card .vis.uc { background: var(--uc-navy); }
.ac-card .vis.uc::before { background: linear-gradient(160deg, rgba(12,28,53,.55), rgba(12,28,53,.1) 45%, rgba(35,149,206,.35) 75%, rgba(240,177,129,.45)); }
.ac-card .vis.uc::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 140px; z-index: 1; background: linear-gradient(90deg, var(--uc-blue), var(--uc-peach)); filter: blur(40px); opacity: .55; }
.ac-card .vis.uc .dev { margin-bottom: -6%; max-height: 300px; }
.ac-card .vis.al { background: var(--al-blush); }
.ac-card .vis.al::before { background: linear-gradient(150deg, rgba(247,247,245,.7), rgba(231,219,210,.35) 40%, rgba(183,221,226,.55) 70%, rgba(225,183,167,.6)); }
.ac-card .vis.al::after { content: ""; position: absolute; right: -20%; top: -30%; width: 70%; height: 90%; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(183,221,226,.9), transparent 70%); filter: blur(10px); }
.ac-card .vis.al .dev { margin-bottom: -4%; max-height: 270px; }
.ac-card p { margin: 0; color: var(--ink-2); }
.ac-card .ac-btn { justify-self: start; }

/* mission band */
.ac-mission .ac-h2 { margin: 0; }
.ac-mission p { font-size: 1.1rem; font-weight: 300; line-height: 1.6; margin: 0; opacity: max(var(--dim), .85); }
.ac-mission .ac-btn { margin-top: 1.5rem; }

/* latest / listing items */
.ac-items { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ac-items { grid-template-columns: repeat(3, 1fr); } .ac-items.c2 { grid-template-columns: repeat(2, 1fr); } }
.ac-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; min-height: 200px; display: flex; flex-direction: column; gap: .5rem; transition: .2s; }
.ac-item:hover { border-color: var(--line-2); }
.ac-item h3 { font: 600 1.25rem/1.25 var(--font-body); margin: 0; }
.ac-item p { margin: auto 0 0; opacity: max(var(--dim), .7); font-size: .95rem; font-weight: 300; }
.ac-item .meta { font-size: .85rem; opacity: max(calc(var(--dim) + .15), .8); }  /* sits inside a dimmed paragraph: the two dims together stay at AA */
:is(.ac-sec.sand, .ac-sec.white) .ac-item { background: var(--card); }
:is(.ac-sec.sand, .ac-sec.white) .ac-item p { opacity: 1; }

/* roster */
.ac-people { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ac-people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ac-people { grid-template-columns: repeat(5, 1fr); } .ac-people.lead { grid-template-columns: repeat(4, 1fr); } }
.ac-person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--canvas-2); }
.ac-person h3 { font: 600 1.05rem/1.25 var(--font-body); margin: .9rem 0 .2rem; }
.ac-person p { margin: 0; font-size: .85rem; opacity: max(var(--dim), .7); font-weight: 300; }

/* values */
.ac-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: 1fr; counter-reset: v; }
@media (min-width: 768px) { .ac-values { grid-template-columns: 1fr 1fr; } }
.ac-values li { counter-increment: v; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font: 900 clamp(1.3rem, 2.1vw, 1.65rem)/1.1 var(--font-display); text-transform: uppercase; min-height: 64px; }
.ac-values li::before { content: counter(v, decimal-leading-zero); font: 900 1.2rem/1 var(--font-accent); background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* CTA band */
.ac-cta { text-align: center; padding: var(--section-lg) 0; }
.ac-cta .ac-h2 { margin-bottom: 1.2rem; }
.ac-cta p { max-width: 56ch; margin: 0 auto 2rem; opacity: max(var(--dim), .8); font-weight: 300; font-size: 1.05rem; }
.ac-cta .ac-ctas { justify-content: center; }

/* ---------- contact form ---------- */
.ac-form { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ac-form { grid-template-columns: 1fr 1fr; } .ac-form .full { grid-column: 1 / -1; } }
.ac-field { display: grid; gap: .4rem; }
.ac-field label { font-size: .85rem; font-weight: 500; letter-spacing: .04em; opacity: max(var(--dim), .85); }
.ac-field input, .ac-field select, .ac-field textarea { font: inherit; color: inherit; background: var(--tint); border: 1px solid var(--line-2); border-radius: 10px; min-height: 48px; padding: .6rem .9rem; width: 100%; }
.ac-field textarea { min-height: 140px; resize: vertical; }
.ac-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.ac-field select option { color: var(--navy); }
.ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus { border-color: var(--cyan); outline: none; }
.ac-field.check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.ac-field.check input { width: 22px; height: 22px; min-height: 0; margin-top: .2rem; accent-color: var(--teal); }
.ac-field.check label { font-size: .9rem; font-weight: 300; line-height: 1.45; }
.ac-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.ac-form .status { grid-column: 1 / -1; font-size: .95rem; padding: 1rem 1.2rem; border-radius: 10px; border: 1px solid var(--line-2); display: none; }
.ac-form .status.show { display: block; }
.ac-form .status.ok { border-color: var(--teal); }
.ac-form .status.err { border-color: var(--peach); }
.ac-contact-aside .ac-label { margin-bottom: .6rem; display: block; }
.ac-contact-aside p { font-weight: 300; opacity: max(var(--dim), .85); margin: 0 0 1.4rem; }
.ac-contact-aside a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

/* ---------- legal prose ---------- */
.ac-legal { max-width: 72ch; font-weight: 300; line-height: 1.7; opacity: max(var(--dim), .9); }
.ac-legal h2 { font: 900 1.6rem/1.15 var(--font-display); text-transform: uppercase; margin: 2.2rem 0 .8rem; }
.ac-legal h3 { font: 600 1.1rem/1.3 var(--font-body); margin: 1.6rem 0 .5rem; }
.ac-legal ul { padding-left: 1.2rem; } .ac-legal li { margin: .3rem 0; }
.ac-legal a { text-decoration: underline; text-underline-offset: 3px; }
.ac-notice { border: 1px solid rgba(247,156,125,.5); border-radius: 10px; padding: 1rem 1.2rem; font-size: .9rem; margin-bottom: 2rem; background: rgba(247,156,125,.06); }

/* ---------- footer ---------- */
.ac-ftr { border-top: 1px solid var(--line); background: var(--canvas); padding: 3rem 0 2rem; font-size: .9rem; opacity: max(var(--dim), .92); }
.ac-ftr .ac-wrap { display: grid; gap: 2rem; }
@media (min-width: 768px) { .ac-ftr .ac-wrap { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.ac-ftr img { height: 44px; width: auto; margin-bottom: 1rem; }
.ac-ftr h4 { font: 900 .72rem/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; color: var(--kick); margin: 0 0 .8rem; }
.ac-ftr a { display: flex; align-items: center; min-height: 44px; opacity: max(var(--dim), .8); }
.ac-ftr a:hover { opacity: 1; }
.ac-ftr p { margin: 0; font-weight: 300; }
.ac-ftr .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .8rem; opacity: max(var(--dim), .7); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; }
.ac-ftr .legal a { display: inline-flex; min-height: 44px; }

/* ---------- consent banner ---------- */
.ac-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.2rem 1.4rem; display: none; gap: 1rem; box-shadow: 0 30px 60px rgba(0,0,0,.5); max-width: 560px; }
.ac-consent.show { display: grid; }
.ac-consent p { margin: 0; font-size: .92rem; font-weight: 300; opacity: max(var(--dim), .9); }
.ac-consent .ac-ctas .ac-btn { min-height: 44px; font-size: .9rem; }
@media (min-width: 768px) { .ac-consent { left: auto; } }

/* ---------- brochure (white curved band) ---------- */
.ac-brochure .ac-prose { margin-top: 1.2rem; }
.ac-brochure .ac-ctas { margin-top: 1.8rem; }
.ac-doc { position: relative; background: var(--card); border: 1px solid rgba(13,30,56,.14); border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: 0 30px 60px -30px rgba(13,30,56,.35); display: flex; flex-direction: column; gap: .7rem; }
.ac-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: var(--grad); }
.ac-doc .ac-label { color: var(--teal); }
.ac-doc h3 { font: 900 1.9rem/1 var(--font-display); text-transform: uppercase; color: var(--ink); margin: 0; }
.ac-doc ul { margin: .4rem 0 0; padding: 0; list-style: none; }
.ac-doc li { padding: .55rem 0 .55rem 1.4rem; border-top: 1px solid rgba(13,30,56,.1); position: relative; color: var(--ink-2); font-size: .98rem; }
.ac-doc li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.ac-doc-tag, .ac-doc .ac-doc-tag .et_pb_text_inner { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 .9rem; border-radius: 999px; background: rgba(46,193,212,.12); color: var(--navy); font: 700 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.ac-doc .ac-doc-tag { background: none; padding: 0; min-height: 0; }
.ac-doc .ac-doc-tag .et_pb_text_inner { background: rgba(46,193,212,.12); }
body.ac .et_pb_section .ac-doc > .et_pb_module { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.ac-faq .ac-wrap { max-width: 880px; }
.ac-faq-toc { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
/* Divi wraps the links in a <p> inside the text module; that paragraph is the row the chips sit in */
.ac-faq-toc :is(.et_pb_text_inner, .et_pb_text_inner > p) { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.ac-faq-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; font: 600 .85rem/1 var(--font-body); letter-spacing: .04em; text-decoration: none; color: inherit; opacity: max(var(--dim), .85); transition: .2s; }
.ac-faq-toc a:hover { border-color: var(--kick); opacity: 1; }
.ac-faq-group { scroll-margin-top: calc(var(--header) + 24px); }
.ac-faq-group + .ac-faq-group { margin-top: 4rem; }
.ac-faq-group .ac-h2 { margin-bottom: 1.5rem; }
.ac-faq-item { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.ac-faq-item:last-child { border-bottom: 1px solid var(--line); }
.ac-faq-item h3 { font: 600 1.2rem/1.3 var(--font-body); margin: 0 0 .7rem; }
.ac-faq-item > .et_pb_heading + .et_pb_text { margin-top: .7rem; }
.ac-faq-item .ac-prose { max-width: none; font-size: 1rem; }
.ac-faq-item .ac-prose a { color: var(--kick); }

/* ---------- 404 ---------- */
.ac-404 .ac-h1 { font-size: clamp(4rem, 14vw, 11rem); }

/* ---------- Divi 5 structure ----------
 * Pages are native Divi 5: section > row (ac-wrap) > column (ac-col) > modules and groups, carrying the same
 * classes as the prototype. This layer neutralises Divi's own spacing and wrappers so those classes rule.
 * Divi defines its spacing on :root; redefining it on body.ac reaches every Divi element. */
body.ac { --section-padding: 0px; --section-gutter: 0px; --row-gutter-horizontal: 0px; --row-gutter-vertical: 0px; --module-gutter: 0px; --content-width: 100%; --content-max-width: none; }
body.ac .et_pb_row.ac-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); max-width: none; margin-inline: auto; padding: 0; }
body.ac .et_pb_row.ac-hero-row { display: contents; }
body.ac .et_pb_section.ac-hero { align-items: stretch; }
body.ac .ac-hero .et_pb_column { width: auto; }
@media (min-width: 1024px) { body.ac .et_pb_row .et_pb_column.ac-panel { margin-right: -140px !important; } }
/* Divi paints every section white; ours are transparent unless a surface class (sand, deep) says otherwise */
:where(body.ac) .et_pb_section { background-color: transparent; }
/* the hero and footer paint their own surfaces above that reset */
body.ac .et_pb_section.ac-hero { background: var(--canvas-deep); }
body.ac .et_pb_section.ac-ftr { background: var(--canvas); }
/* Divi pads every section in its critical CSS (4% on desktop, 50px on tablet, 54px from 1350px), which showed as a
 * navy band above and below the hero. Our sections carry their own rhythm, so zero Divi's and restate ours here at
 * the same specificity. */
body.ac .et_pb_section { padding-top: 0; padding-bottom: 0; }
body.ac .et_pb_section.ac-sec { padding-top: var(--section); padding-bottom: var(--section); }
body.ac .et_pb_section.ac-sec.ac-sec-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); }
body.ac .et_pb_section.ac-ftr { padding-top: 3rem; padding-bottom: 2rem; }
/* ---------- diagonals (design rule, Acclaro Master Brandbook) ----------
 * Acclaro's motif is the straight diagonal with a cyan-to-peach gradient edge (the broad curve belongs to UltraClear).
 * Every band between the hero and the footer (a section with its own background: sand, white, deep, mission, CTA,
 * Latest, or .curved) meets its neighbours with a diagonal edge rising to the right. The band overlaps the neighbour by
 * the edge height, so the diagonal cuts straight into the section beside it, and the neighbour gets that height back as
 * padding. A thin gradient line runs along each top edge. No top edge right after the hero or the trademark strip; no
 * bottom edge before the footer; where two bands meet only the lower one's edge shows. */
body.ac { --edge-h: 80px; --edge-w: 4px; --edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 0V100Z'/%3E%3C/svg%3E");
  --edge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100L0 100Z'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { body.ac { --edge-h: 120px; } }
.ac-sec { --pad: var(--section); }
.ac-sec.ac-sec-lg { --pad: var(--section-lg); }
body.ac .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest) { --ct: var(--edge-h); --cb: var(--edge-h); position: relative; z-index: 1;
  margin-top: calc(-1 * var(--ct)); margin-bottom: calc(-1 * var(--cb));
  padding-top: calc(var(--pad) + var(--ct) * .8); padding-bottom: calc(var(--pad) + var(--cb) * .8);
  -webkit-mask: var(--edge-top) top / 100% var(--ct) no-repeat, linear-gradient(#000, #000) 0 var(--ct) / 100% calc(100% - var(--ct) - var(--cb)) no-repeat, var(--edge-bottom) bottom / 100% var(--cb) no-repeat;
  mask: var(--edge-top) top / 100% var(--ct) no-repeat, linear-gradient(#000, #000) 0 var(--ct) / 100% calc(100% - var(--ct) - var(--cb)) no-repeat, var(--edge-bottom) bottom / 100% var(--cb) no-repeat; }
body.ac .ac-hero + .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest), body.ac .ac-strip + .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest), body.ac .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest):first-child { --ct: 0px; --edge-w: 0px; }
body.ac .et_pb_section.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ct) + var(--edge-w)); z-index: 2; pointer-events: none;
  background: var(--grad); clip-path: polygon(0 var(--ct), 100% 0, 100% var(--edge-w), 0 calc(var(--ct) + var(--edge-w))); }
body.ac .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest):has(+ .et_pb_section.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest)), body.ac .et_pb_section.ac-sec.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest):last-child { --cb: 0px; }
body.ac .et_pb_section.ac-sec.ac-sec.ac-sec:has(+ .et_pb_section.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest)) { padding-bottom: calc(var(--pad) + var(--edge-h)); }
body.ac .et_pb_section.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest):not(:has(+ .et_pb_section.ac-sec:is(.curved, .sand, .white, .deep, .deep-r, .ac-cta, .ac-latest))):not(:last-child) + .et_pb_section.ac-sec.ac-sec { padding-top: calc(var(--pad) + var(--edge-h)); }
body.ac .et_pb_column.ac-col { width: 100%; }
.et_pb_text_inner > :last-child { margin-bottom: 0; }
/* headings: the Heading module's inner h1-h6 takes the module's type, unless a component styles the element */
:where(.et_pb_heading_container) > :is(h1, h2, h3, h4, h5, h6) { font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
/* flex components need an explicit direction (Divi sets column through a variable) */
.ac-kicker, .ac-ctas, .ac-head.row, .ac-stage .lbl.a { flex-direction: row; }
.ac-col > .ac-h2 { margin-bottom: 2.5rem; }
.ac-sec.ac-sec-lg { padding: var(--section-lg) 0; }
.ac-sec.ac-sec-line { border-top: 1px solid var(--line); }
/* images: the module wrapper takes the component class; the img fills it */
.ac-stage .et_pb_image > .et_pb_image_wrap, .ac-card .et_pb_image > .et_pb_image_wrap { display: contents; }
.ac-stage .et_pb_image img { height: 100%; width: auto; max-width: none; }
.ac-hero .ac-stage { isolation: isolate; }
.ac-card .logo img { max-height: 44px; width: auto; }
.ac-card .logo-dark img { filter: invert(1) brightness(.2); }
.ac-card .vis .bg img { width: 100%; height: 100%; object-fit: cover; }
.ac-card .vis .dev img { width: auto; max-height: 280px; }
.ac-card .vis.uc .dev img { max-height: 300px; }
.ac-card .vis.al .dev img { max-height: 270px; }
.ac-person .et_pb_image, .ac-person .et_pb_image > .et_pb_image_wrap { display: block; width: 100%; }
/* trademark strip: the spans live in one Text module */
body.ac .ac-strip .et_pb_row.ac-wrap { display: block; padding: 0; opacity: 1; }
.ac-strip-items .et_pb_text_inner > p { display: contents; }
.ac-strip-items .et_pb_text_inner { display: flex; gap: 1.2rem 2.5rem; flex-wrap: wrap; justify-content: center; padding: 1.1rem var(--gutter); font: 900 .8rem/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; opacity: max(var(--dim), .75); }
/* whole-card links: a real link in the card heading, stretched over the card */
.ac-item { position: relative; }
:is(.ac-row, .ac-item) :is(.et_pb_module, .et_pb_heading_container) { position: static; }
.ac-stretch::after { content: ""; position: absolute; inset: 0; z-index: 10; border-radius: inherit; }
.ac-stretch:focus-visible { outline: none; }
:is(.ac-row, .ac-item):has(.ac-stretch:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* text that sits at the bottom of a card */
:is(.ac-blk, .ac-item) > .et_pb_text:has(> .et_pb_text_inner > p) { margin-top: auto; }
:is(.ac-blk, .ac-item) p { margin: 0; }
/* text section */
.ac-aside { margin-top: 2rem; }
.ac-aside .ac-prose { margin-top: .6rem; }
.ac-prose .ac-ctas { margin-top: 1.5rem; }
/* mission and CTA */
.ac-mission .ac-col > .ac-h2 { margin: 0; }
body.ac .ac-cta .et_pb_module { text-align: center; }
.ac-cta .ac-col > .ac-h2 { margin-bottom: 1.2rem; }
/* values and legal lists inside Text modules */
body.ac .et_pb_text ol.ac-values { list-style: none; margin: 0; padding: 0; line-height: inherit; }
body.ac .ac-legal ul { list-style: disc; padding: 0 0 0 1.2rem; line-height: inherit; }
/* contact */
.ac-col.ac-contact { grid-template-columns: 1fr; gap: 3rem; }
.ac-contact-main .ac-h2 { margin-bottom: .8rem; }
.ac-contact-main .ac-lede { margin-bottom: 2rem; }
@media (min-width: 1024px) { .ac-col.ac-contact { grid-template-columns: 1.4fr .6fr; } .ac-contact-aside { padding-top: 1.4rem; } }
/* Divi buttons: our classes carry the style; undo Divi's border, line-height and hover padding */
body.ac .et_pb_button.ac-btn { line-height: 1.2 !important; font-size: inherit; text-decoration: none; }
/* Divi colours every light-layout button with a three-class rule; restate ours above it */
body.ac .et_pb_button.ac-btn.grad { color: var(--navy); }
body.ac .et_pb_button.ac-btn.ghost { color: inherit; }
body.ac .et_pb_button.ac-btn.navy { color: #fff; }
body.ac .et_pb_button.ac-btn.gold { color: var(--gold-text); }
body.ac .et_pb_button.ac-btn.gold:hover { color: var(--gold-hover); }
body.ac #page-container .et_pb_section .et_pb_button.ac-btn:hover, body.ac .et_pb_module .et_pb_button.ac-btn:hover { padding: 0 1.5rem !important; }
body.ac .et_pb_module .et_pb_button.ac-btn.grad:hover, body.ac .et_pb_module .et_pb_button.ac-btn.navy:hover { border: 0; }
body.ac .et_pb_module .et_pb_button.ac-btn.ghost:hover { border: 1px solid currentColor; }
body.ac .et_pb_module .et_pb_button.ac-btn.gold:hover { border: 2.5px solid var(--gold); }
body.ac .et_pb_button.ac-btn::before, body.ac .et_pb_button.ac-btn::after { display: none !important; }


/* ---------- Theme Builder header: native Divi Menu module ---------- */
body.ac .et-l--header { position: sticky; top: 0; z-index: 40; }
body.ac.admin-bar .et-l--header { top: 32px; }
@media (max-width: 782px) { body.ac.admin-bar .et-l--header { top: 0; } }
body.ac .et_pb_section.ac-hdr { position: relative; background: rgba(8,20,42,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
body.ac .ac-hdr .et_pb_row.ac-hdr-row { display: block; }
.ac-skip-wrap { position: absolute; left: 0; top: 0; z-index: 100; }
.ac-skip-wrap p { margin: 0; }
body.ac .et_pb_menu.ac-menu { background-color: transparent; }
.ac-menu .et_pb_menu_inner_container { display: flex; align-items: center; min-height: var(--header); gap: 1rem; }
.ac-menu .et_pb_menu__logo-wrap { flex: none; margin-right: auto; }
.ac-menu .et_pb_menu__logo, .ac-menu .et_pb_menu__logo a { display: flex; align-items: center; min-height: 44px; }
.ac-menu .et_pb_menu__logo img { height: 40px; width: auto; max-width: none; }
.ac-menu .et_pb_menu__wrap { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
body.ac .ac-menu .et-menu > li { padding: 0 1.1rem; }
body.ac .ac-menu .et-menu > li > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: .9rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #fff; opacity: max(var(--dim), .8); }
body.ac .ac-menu .et-menu > li > a:hover, body.ac .ac-menu .et-menu > li.current-menu-item > a, body.ac .ac-menu .et-menu > li.current-menu-ancestor > a { opacity: 1; }
body.ac .ac-menu .et-menu > li.menu-item-has-children > a::after { display: none; }
body.ac .ac-menu .et-menu > li.menu-item-has-children > a { padding-right: 0; }
/* Contact, the last item, is the hollow gold button (the star in the logo) */
body.ac .ac-menu .et-menu > li:last-child { padding-right: 0; }
body.ac .ac-menu .et-menu > li:last-child > a { opacity: 1; border: 2.5px solid var(--gold); color: var(--gold-text); border-radius: 999px; padding: 0 1.4rem; font-weight: 700; text-transform: none; letter-spacing: .02em; font-size: .95rem; }
body.ac .ac-menu .et-menu > li:last-child > a:hover { background: rgba(230,194,90,.12); color: var(--gold-hover); }
/* dropdown */
body.ac .ac-menu .et-menu .sub-menu { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: .5rem; box-shadow: 0 20px 50px rgba(0,0,0,.4); width: 240px; }
body.ac .ac-menu .et-menu .sub-menu li { padding: 0; width: 100%; }
body.ac .ac-menu .et-menu .sub-menu a { width: 100%; padding: .55rem 1rem; color: #fff; opacity: max(var(--dim), .85); font-size: .95rem; text-transform: none; letter-spacing: 0; border-radius: 8px; }
body.ac .ac-menu .et-menu .sub-menu a:hover { background: rgba(255,255,255,.06); opacity: 1; }
/* phone menu: Divi's own toggle, restyled */
body.ac .ac-menu .mobile_nav { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
body.ac .ac-menu .mobile_menu_bar::before { color: #fff; font-size: 34px; }
body.ac .ac-menu .et_mobile_menu { background: var(--navy); border: 0; border-top: 1px solid var(--line); padding: .5rem var(--gutter) 2rem; box-shadow: 0 30px 60px rgba(0,0,0,.5); max-height: calc(100vh - var(--header)); overflow: auto; }
body.ac .ac-menu .et_mobile_menu li a { color: #fff; font-size: 1.25rem; min-height: 52px; display: flex; align-items: center; padding: 0 .25rem; border-bottom: 1px solid var(--line); }
body.ac .ac-menu .et_mobile_menu .sub-menu a { font-size: 1.05rem; padding-left: 1.2rem; opacity: max(var(--dim), .85); }
body.ac .ac-menu .et_mobile_menu > li:last-child > a { color: var(--gold-text); font-weight: 700; border-bottom: 0; }
@media (min-width: 1024px) { .ac-menu .et_pb_menu__logo img { height: 50px; } }

/* desktop header: logo left, menu items centred, Contact right. The logo and the Contact item take equal fixed
 * boxes, so the items between them sit on the page centre line. */
@media (min-width: 1024px) {
  body.ac .ac-menu .et_pb_menu__logo-wrap { flex: 0 0 210px; margin-right: 0; }
  body.ac .ac-menu .et_pb_menu__wrap { justify-content: stretch; }
  body.ac .ac-menu .et_pb_menu__menu, body.ac .ac-menu .et-menu-nav { width: 100%; }
  body.ac .ac-menu .et_pb_menu__wrap { flex: 1; min-width: 0; }
  body.ac .ac-menu .et-menu { display: flex; flex-wrap: nowrap; width: 100%; margin: 0; align-items: center; }
  body.ac .ac-menu .et-menu > li:first-child { margin-left: auto; }
  body.ac .ac-menu .et-menu > li:nth-last-child(2) { margin-right: auto; }
  body.ac .ac-menu .et-menu > li:last-child { flex: 0 0 calc(210px + 1rem); display: flex; justify-content: flex-end; }  /* + the 1rem gap after the logo */
}

/* Platforms mega menu: two device cards, each with its brand's gradient on top (functions.php renders the cards) */
body.ac .ac-menu .et_pb_menu__menu .et-menu li.ac-mega > .sub-menu { width: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .75rem; left: 50%; margin-left: -300px; }
body.ac .ac-menu .et_pb_menu__menu .et-menu li.ac-mega > .sub-menu > li { width: auto; padding: 0; }
body.ac .ac-menu .et_pb_menu__menu .et-menu .sub-menu a.ac-mm-card { position: relative; display: flex; flex-direction: column; gap: .6rem; width: 100%; padding: 0 0 1.1rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; opacity: 1; background: rgba(255,255,255,.03); white-space: normal; transition: border-color .2s, background .2s; }
body.ac .ac-menu .et_pb_menu__menu .et-menu .sub-menu a.ac-mm-card:hover, body.ac .ac-menu .et_pb_menu__menu .et-menu .sub-menu a.ac-mm-card:focus-visible { border-color: var(--cyan); background: rgba(255,255,255,.06); }
.ac-mm-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; }
.ac-mm-uc::before { background: linear-gradient(90deg, var(--uc-blue), var(--uc-peach)); }
.ac-mm-al::before { background: linear-gradient(90deg, var(--al-teal), var(--al-blush) 55%, var(--al-rose)); }
.ac-mm-vis { display: flex; align-items: flex-end; justify-content: center; height: 150px; overflow: hidden; }
.ac-mm-uc .ac-mm-vis { background: radial-gradient(70% 80% at 50% 100%, rgba(35,149,206,.45), transparent 70%), var(--uc-navy); }
.ac-mm-al .ac-mm-vis { background: linear-gradient(150deg, var(--al-offwhite), var(--al-blush) 50%, var(--al-teal)); }
.ac-mm-vis img { height: 138px; width: auto; max-width: none; margin-bottom: -6px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
.ac-mm-logo { display: flex; align-items: center; min-height: 26px; padding: 0 1rem; }
.ac-mm-logo img { height: 22px; width: auto; }
.ac-mm-al .ac-mm-logo img { height: 18px; }
.ac-mm-name { display: none; }
.ac-mm-sub { padding: 0 1rem; font-size: .85rem; line-height: 1.4; opacity: .8; letter-spacing: 0; text-transform: none; }
/* phone menu: the same items as plain links */
body.ac .ac-menu .et_mobile_menu .ac-mm-vis, body.ac .ac-menu .et_mobile_menu .ac-mm-logo, body.ac .ac-menu .et_mobile_menu .ac-mm-sub { display: none; }
body.ac .ac-menu .et_mobile_menu .ac-mm-name { display: inline; }

/* ---------- Theme Builder footer ---------- */
body.ac .ac-ftr .et_pb_row.ac-wrap { display: block; }
body.ac .ac-ftr .ac-ftr-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { body.ac .ac-ftr .ac-ftr-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.ac-ftr .ac-ftr-logo img { height: 44px; width: auto; margin-bottom: 1rem; }
.ac-ftr .ac-tagline, .ac-ftr p.ac-tagline { font-style: italic; font-size: .85rem; letter-spacing: .02em; margin: -.4rem 0 1rem; opacity: .85; }
.ac-ftr .ac-ftr-h h4 { font: 900 .72rem/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; color: var(--kick); margin: 0 0 .8rem; }
.ac-ftr .ac-ftr-links p { margin: 0; }
.ac-ftr .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .8rem; opacity: max(var(--dim), .7); }
.ac-ftr .legal p { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; margin: 0; }
.ac-ftr .legal a { display: inline-flex; min-height: 44px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ac-panel .tex::before { animation: none !important; }
  .ac-btn, .ac-row .arrow, .ac-item { transition: none; }
}