/* ==========================================================================
   Adroit Refresh — page system for rewritten copy
   Brand roles (Todd, 2026-09-09): yellow = surfaces & geometric shapes,
   fuchsia = the prevalent accent, turquoise = secondary accent.
   Type (Elementor kit): Righteous (headings) · Space Grotesk (subheads)
   · Source Code Pro (body) · Space Mono (labels) · Rubik 80s Fade (hero).
   Scoped to body.adroit-refresh so nothing leaks into Elementor pages.
   ========================================================================== */

body.adroit-refresh {
  --ar-black: #000000;
  --ar-ink: #0a0a0a;
  --ar-white: #ffffff;
  --ar-yellow: #ffdd3b;
  --ar-yellow-hover: #fff2b4;
  --ar-fuchsia: #d800a2;
  --ar-fuchsia-soft: rgba(216, 0, 162, 0.55);
  --ar-turq: #35e4cc;
  --ar-turq-soft: rgba(53, 228, 204, 0.55);
  --ar-grey: #a0a0a0;
  --ar-hair: #222222;

  --ar-display: "Rubik 80s Fade", "Righteous", sans-serif;
  --ar-head: "Righteous", sans-serif;
  --ar-sub: "Space Grotesk", sans-serif;
  --ar-body: "Source Code Pro", ui-monospace, monospace;
  --ar-mono: "Space Mono", ui-monospace, monospace;

  --ar-wrap: 1180px;
  --ar-measure: 68ch;
  --ar-gutter: clamp(20px, 4vw, 48px);
  --ar-band-y: clamp(64px, 9vw, 128px);

  background: var(--ar-black);
  color: var(--ar-white);
}

body.adroit-refresh .ar-main {
  position: relative;
  font-family: var(--ar-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
}

/* CRT scanlines — fixed, ≤3% (catalog rule) */
body.adroit-refresh .ar-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-wrap {
  width: min(100% - 2 * var(--ar-gutter), var(--ar-wrap));
  margin-inline: auto;
}
body.adroit-refresh .ar-wrap--narrow { max-width: 860px; }

body.adroit-refresh .ar-band {
  position: relative;
  padding-block: var(--ar-band-y);
  isolation: isolate;
}
body.adroit-refresh .ar-band > .ar-wrap { position: relative; z-index: 1; }

/* Black band (default) */
body.adroit-refresh .ar-band--black { background: var(--ar-black); color: var(--ar-white); }

/* Yellow band with the diagonal wedge the current site uses, plus a black corner block */
body.adroit-refresh .ar-band--yellow {
  background: var(--ar-yellow);
  color: var(--ar-black);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
body.adroit-refresh .ar-band--yellow::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: clamp(120px, 38vw, 560px);
  height: 100%;
  background: var(--ar-black);
  clip-path: polygon(0 0, 100% 0, 42% 100%, 0 100%);
  z-index: 0;
}
body.adroit-refresh .ar-band--yellow.ar-band--flip::before {
  left: auto; right: 0;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%);
}
body.adroit-refresh .ar-band--yellow::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(80px, 14vw, 220px);
  height: clamp(80px, 14vw, 220px);
  background: var(--ar-black);
  z-index: 0;
}
body.adroit-refresh .ar-band--yellow.ar-band--flip::after { right: auto; left: 0; top: 0; bottom: auto; }
body.adroit-refresh .ar-band--yellow > .ar-wrap { padding-left: clamp(0px, 8vw, 96px); }
body.adroit-refresh .ar-band--yellow.ar-band--flip > .ar-wrap { padding-left: 0; padding-right: clamp(0px, 8vw, 96px); }

/* Hairline yellow rule between black bands (the "signal bars" divider) */
body.adroit-refresh .ar-band--black + .ar-band--black::before {
  content: "";
  position: absolute;
  left: var(--ar-gutter); right: var(--ar-gutter); top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ar-fuchsia) 0 18%, var(--ar-hair) 18% 60%, var(--ar-turq) 60% 78%, var(--ar-hair) 78%);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-hero {
  padding-block: clamp(72px, 12vw, 160px) clamp(56px, 8vw, 112px);
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(216,0,162,0.16), transparent 60%),
    radial-gradient(40% 60% at 10% 90%, rgba(53,228,204,0.10), transparent 60%),
    var(--ar-black);
}
body.adroit-refresh .ar-hero::after {
  /* broken grid, masked off-centre */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 78px 78px;
  -webkit-mask-image: radial-gradient(60% 70% at 75% 40%, #000 20%, transparent 70%);
          mask-image: radial-gradient(60% 70% at 75% 40%, #000 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.adroit-refresh .ar-hero .ar-wrap { max-width: 980px; }

body.adroit-refresh .ar-eyebrow {
  font-family: var(--ar-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ar-yellow);
  margin: 0 0 18px;
}
body.adroit-refresh .ar-eyebrow__sep { margin-inline: 10px; color: var(--ar-grey); }

body.adroit-refresh .ar-hero__title {
  font-family: var(--ar-display);
  font-weight: 400;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--ar-turq);
  text-shadow: 0 0 6px var(--ar-turq-soft), 0 0 22px rgba(53,228,204,0.35);
  margin: 0 0 clamp(18px, 3vw, 28px);
  max-width: 14ch;
}
body.adroit-refresh .ar-hero__title::after {
  /* block caret */
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.82em;
  margin-left: 0.14em;
  background: var(--ar-turq);
  box-shadow: 0 0 10px var(--ar-turq-soft);
  vertical-align: -0.08em;
  animation: ar-caret 1.15s linear infinite;
}
body.adroit-refresh .ar-hero__lede {
  font-family: var(--ar-sub);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--ar-fuchsia);
  text-shadow: 0 0 12px var(--ar-fuchsia-soft);
  max-width: 28ch;
  margin: 0 0 clamp(24px, 4vw, 40px);
}
body.adroit-refresh .ar-hero__lede strong { color: var(--ar-white); font-weight: 500; }
body.adroit-refresh .ar-hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
body.adroit-refresh .ar-hero__note {
  margin: 18px 0 0;
  color: var(--ar-grey);
  max-width: var(--ar-measure);
}

/* signal bars under the hero */
body.adroit-refresh .ar-bars { display: grid; gap: 4px; margin-top: clamp(28px, 4vw, 48px); max-width: 420px; }
body.adroit-refresh .ar-bars i { display: block; height: 2px; background: var(--ar-hair); transform-origin: left; transform: scaleX(0); }
body.adroit-refresh .ar-bars i:nth-child(1) { background: var(--ar-fuchsia); }
body.adroit-refresh .ar-bars i:nth-child(3) { background: var(--ar-turq); }
body.adroit-refresh .is-in .ar-bars i, body.adroit-refresh .ar-bars.is-in i { animation: ar-bar 420ms cubic-bezier(.2,.9,.2,1) forwards; }
body.adroit-refresh .ar-bars i:nth-child(2) { animation-delay: 60ms; }
body.adroit-refresh .ar-bars i:nth-child(3) { animation-delay: 120ms; }
body.adroit-refresh .ar-bars i:nth-child(4) { animation-delay: 180ms; }

/* --------------------------------------------------------------------------
   Headings & prose
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-h2 {
  font-family: var(--ar-head);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 22ch;
}
body.adroit-refresh .ar-band--black .ar-h2 { color: var(--ar-white); }
body.adroit-refresh .ar-band--black .ar-h2 em { font-style: normal; color: var(--ar-yellow); }

/* boxed heading: white box, black offset shadow (yellow bands) */
body.adroit-refresh .ar-h2--boxed {
  display: inline-block;
  background: var(--ar-white);
  color: var(--ar-black);
  padding: 0.35em 0.7em;
  box-shadow: -10px 10px 0 var(--ar-black);
  text-transform: uppercase;
  font-size: clamp(24px, 3.6vw, 44px);
  max-width: none;
}

body.adroit-refresh .ar-h3 {
  font-family: var(--ar-sub);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.2;
  margin: 1.6em 0 0.5em;
}
body.adroit-refresh .ar-band--black .ar-h3 { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-band--yellow .ar-h3 { color: var(--ar-black); }

body.adroit-refresh .ar-prose > p,
body.adroit-refresh .ar-prose > ul,
body.adroit-refresh .ar-prose > ol,
body.adroit-refresh .ar-prose > blockquote,
body.adroit-refresh .ar-prose > table { max-width: var(--ar-measure); }
body.adroit-refresh .ar-prose > ul.ar-cards, body.adroit-refresh .ar-prose > ol.ar-steps, body.adroit-refresh .ar-prose > .ar-actions { max-width: none; }
body.adroit-refresh .ar-prose p { margin: 0 0 1.1em; }
body.adroit-refresh .ar-prose p.ar-lead { font-family: var(--ar-sub); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; }
body.adroit-refresh .ar-band--black .ar-prose p.ar-lead { color: #eaeaea; }
body.adroit-refresh .ar-prose ul, body.adroit-refresh .ar-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
body.adroit-refresh .ar-prose li { margin: 0 0 0.5em; }
body.adroit-refresh .ar-prose ul li::marker { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-band--yellow .ar-prose ul li::marker { color: var(--ar-black); }
body.adroit-refresh .ar-prose strong { font-weight: 600; }
body.adroit-refresh .ar-band--black .ar-prose strong { color: var(--ar-yellow); }
body.adroit-refresh .ar-prose a:not(.ar-btn) { color: var(--ar-fuchsia); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.adroit-refresh .ar-band--yellow .ar-prose a:not(.ar-btn) { color: var(--ar-black); text-decoration-color: var(--ar-fuchsia); text-decoration-thickness: 2px; }
body.adroit-refresh .ar-prose a:not(.ar-btn):hover { color: var(--ar-turq); }
body.adroit-refresh .ar-band--yellow .ar-prose a:not(.ar-btn):hover { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-prose blockquote {
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--ar-fuchsia);
  font-family: var(--ar-sub);
  font-size: 1.15em;
  color: var(--ar-grey);
}
body.adroit-refresh .ar-band--yellow .ar-prose blockquote { color: #333; border-color: var(--ar-black); }
body.adroit-refresh .ar-prose hr { border: 0; height: 1px; background: var(--ar-hair); margin: 2em 0; }
body.adroit-refresh .ar-prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 1.4em; }
body.adroit-refresh .ar-prose th, body.adroit-refresh .ar-prose td { border: 1px solid var(--ar-hair); padding: 10px 12px; text-align: left; vertical-align: top; }
body.adroit-refresh .ar-band--yellow .ar-prose th, body.adroit-refresh .ar-band--yellow .ar-prose td { border-color: rgba(0,0,0,0.35); }
body.adroit-refresh .ar-prose th { font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
body.adroit-refresh .ar-prose code { font-family: var(--ar-mono); font-size: 0.9em; background: rgba(255,255,255,0.08); padding: 0.1em 0.35em; }
body.adroit-refresh .ar-band--yellow .ar-prose code { background: rgba(0,0,0,0.08); }
body.adroit-refresh .ar-prose img { max-width: 100%; height: auto; }

/* Two-column section: heading left, prose right (large screens) */
body.adroit-refresh .ar-section__grid { display: grid; gap: clamp(20px, 4vw, 56px); }
@media (min-width: 900px) {
  body.adroit-refresh .ar-section__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  body.adroit-refresh .ar-section__grid > .ar-section__head { position: sticky; top: 120px; }
}

/* --------------------------------------------------------------------------
   Cards (sticky-note grid)
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-cards {
  list-style: none;
  padding: 0;
  margin: clamp(20px, 3vw, 32px) 0 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  max-width: none;
}
body.adroit-refresh .ar-card {
  position: relative;
  padding: 26px 26px 28px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  transition: transform 160ms ease;
}
body.adroit-refresh .ar-card::before, body.adroit-refresh .ar-card::after {
  /* corner brackets, revealed on hover */
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--ar-fuchsia);
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
body.adroit-refresh .ar-card::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
body.adroit-refresh .ar-card::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
body.adroit-refresh .ar-card:hover::before, body.adroit-refresh .ar-card:hover::after { opacity: 1; }
body.adroit-refresh .ar-card:hover { transform: translate(-2px, -2px); }
body.adroit-refresh .ar-card { overflow: visible; }
body.adroit-refresh .ar-card__title {
  display: block;
  font-family: var(--ar-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  margin: 0 0 10px;
}
body.adroit-refresh .ar-card__index {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.6;
}
body.adroit-refresh .ar-card p { margin: 0; }
body.adroit-refresh .ar-card p + p { margin-top: 0.6em; }
body.adroit-refresh .ar-card a:not(.ar-btn) { font-weight: 600; }

/* black band → yellow notes with white offset frame */
body.adroit-refresh .ar-band--black .ar-card { background: var(--ar-yellow); color: var(--ar-black); box-shadow: -8px 8px 0 var(--ar-white); }
body.adroit-refresh .ar-band--black .ar-card__title { color: var(--ar-black); }
body.adroit-refresh .ar-band--black .ar-card a:not(.ar-btn) { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-band--black .ar-card strong { color: var(--ar-black); }
/* yellow band → black notes with hairline */
body.adroit-refresh .ar-band--yellow .ar-card { background: var(--ar-black); color: var(--ar-white); box-shadow: -8px 8px 0 var(--ar-white); }
body.adroit-refresh .ar-band--yellow .ar-card__title { color: var(--ar-yellow); }
body.adroit-refresh .ar-band--yellow .ar-card a:not(.ar-btn) { color: var(--ar-turq); }
body.adroit-refresh .ar-band--yellow .ar-card strong { color: var(--ar-yellow); }

/* Steps (ordered list → numbered rail) */
body.adroit-refresh .ar-steps { list-style: none; padding: 0; margin: clamp(20px, 3vw, 32px) 0 0; counter-reset: ar-step; display: grid; gap: 18px; max-width: 760px; }
body.adroit-refresh .ar-step { position: relative; padding-left: 78px; counter-increment: ar-step; min-height: 56px; }
body.adroit-refresh .ar-step::before {
  content: counter(ar-step, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  font-family: var(--ar-display);
  font-size: 40px;
  line-height: 1;
  color: var(--ar-turq);
  text-shadow: 0 0 10px var(--ar-turq-soft);
}
body.adroit-refresh .ar-band--yellow .ar-step::before { color: var(--ar-black); text-shadow: none; }
body.adroit-refresh .ar-step::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 56px; height: 2px; background: var(--ar-fuchsia); }
body.adroit-refresh .ar-step .ar-card__title { font-size: 19px; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-btn {
  --btn-c: var(--ar-yellow);
  position: relative;
  display: inline-block;
  font-family: var(--ar-head);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 16px 26px;
  border: 2px solid var(--btn-c);
  color: var(--btn-c);
  background: transparent;
  box-shadow: 0 0 10px color-mix(in srgb, var(--btn-c) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--btn-c) 25%, transparent);
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
body.adroit-refresh .ar-btn:hover, body.adroit-refresh .ar-btn:focus-visible {
  background: var(--btn-c);
  color: var(--ar-black);
  box-shadow: 0 0 18px color-mix(in srgb, var(--btn-c) 75%, transparent);
  outline: none;
}
body.adroit-refresh .ar-btn--primary { --btn-c: var(--ar-yellow); }
body.adroit-refresh .ar-btn--secondary { --btn-c: var(--ar-fuchsia); }
body.adroit-refresh .ar-btn--dark { --btn-c: var(--ar-black); box-shadow: none; }
body.adroit-refresh .ar-btn--dark:hover { color: var(--ar-yellow); box-shadow: -6px 6px 0 var(--ar-fuchsia); }
body.adroit-refresh .ar-band--yellow .ar-btn--primary { --btn-c: var(--ar-black); box-shadow: none; }
body.adroit-refresh .ar-band--yellow .ar-btn--primary:hover { color: var(--ar-yellow); box-shadow: -6px 6px 0 var(--ar-fuchsia); }
body.adroit-refresh .ar-band--yellow .ar-btn--secondary { --btn-c: var(--ar-fuchsia); box-shadow: none; }
body.adroit-refresh .ar-btn--terminal {
  font-family: var(--ar-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
}
body.adroit-refresh .ar-btn--terminal::before { content: "> "; }
body.adroit-refresh .ar-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 1.4em 0 0; max-width: none; }
body.adroit-refresh .ar-actions p { margin: 0; }

/* CTA band (last section when it carries a CTA) */
body.adroit-refresh .ar-band--cta .ar-wrap { text-align: left; }
body.adroit-refresh .ar-band--cta .ar-h2 { max-width: 18ch; }

/* --------------------------------------------------------------------------
   Post (blog) layout
   -------------------------------------------------------------------------- */
body.adroit-refresh .ar-post__header { padding: clamp(64px, 10vw, 140px) 0 clamp(28px, 4vw, 48px); }
body.adroit-refresh .ar-post__header, body.adroit-refresh .ar-post__body { width: min(100% - 2 * var(--ar-gutter), 820px); margin-inline: auto; }
body.adroit-refresh .ar-post__title {
  font-family: var(--ar-head);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.04;
  color: var(--ar-white);
  margin: 0;
}
body.adroit-refresh .ar-post__body { padding-bottom: clamp(48px, 8vw, 96px); font-size: 17px; line-height: 1.7; }
body.adroit-refresh .ar-post__body > * { max-width: none; }
body.adroit-refresh .ar-post__body h2 { font-family: var(--ar-head); font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; color: var(--ar-yellow); margin: 2em 0 0.6em; }
body.adroit-refresh .ar-post__body h3 { font-family: var(--ar-sub); font-weight: 700; font-size: 21px; color: var(--ar-fuchsia); margin: 1.6em 0 0.5em; }
body.adroit-refresh .ar-post__body h4 { font-family: var(--ar-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-turq); margin: 1.6em 0 0.4em; }
body.adroit-refresh .ar-post__body p { margin: 0 0 1.2em; }
body.adroit-refresh .ar-post__body a { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-post__body a:hover { color: var(--ar-turq); }
body.adroit-refresh .ar-post__body ul li::marker { color: var(--ar-fuchsia); }
body.adroit-refresh .ar-post__body strong { color: var(--ar-yellow); font-weight: 600; }
body.adroit-refresh .ar-post__body blockquote { border-left: 3px solid var(--ar-fuchsia); margin: 1.6em 0; padding-left: 1.2em; color: var(--ar-grey); font-family: var(--ar-sub); font-size: 1.1em; }
body.adroit-refresh .ar-post__body img { max-width: 100%; height: auto; }
body.adroit-refresh .ar-post__body table { border-collapse: collapse; width: 100%; font-size: 14px; }
body.adroit-refresh .ar-post__body th, body.adroit-refresh .ar-post__body td { border: 1px solid var(--ar-hair); padding: 10px 12px; text-align: left; }
body.adroit-refresh .ar-post__footer { margin-top: 0; }

/* --------------------------------------------------------------------------
   Motion: reveals, flicker, hover glitch, caret
   -------------------------------------------------------------------------- */
/* Hidden-until-revealed only when the script has announced itself (html.ar-js); without JS everything is visible. */
html.ar-js body.adroit-refresh .ar-reveal:not(.ar-band):not(.is-in), html.ar-js body.adroit-refresh .ar-band:not(.is-in) > .ar-wrap, html.ar-js body.adroit-refresh .ar-card:not(.is-in) {
  opacity: 0;
  /* safety net: if no reveal ever fires, everything appears after 2s */
  animation: ar-forcein 1ms linear 2s forwards;
}
@keyframes ar-forcein { to { opacity: 1; } }
body.adroit-refresh .is-in.ar-reveal, body.adroit-refresh .ar-band.is-in > .ar-wrap, body.adroit-refresh .ar-card.is-in {
  animation: ar-warmup 460ms cubic-bezier(.2,.7,.2,1) forwards;
}
/* The hero is the one element that powers on: the raster opens from a bright horizontal line. */
body.adroit-refresh .ar-hero.is-in > .ar-wrap { animation: ar-poweron 560ms cubic-bezier(.2,.8,.2,1) forwards; transform-origin: 50% 42%; }
body.adroit-refresh .ar-card.is-in:nth-child(2) { animation-delay: 60ms; }
body.adroit-refresh .ar-card.is-in:nth-child(3) { animation-delay: 120ms; }
body.adroit-refresh .ar-card.is-in:nth-child(4) { animation-delay: 180ms; }
body.adroit-refresh .ar-card.is-in:nth-child(5) { animation-delay: 240ms; }
body.adroit-refresh .ar-card.is-in:nth-child(6) { animation-delay: 300ms; }

body.adroit-refresh .ar-hero { position: relative; }
body.adroit-refresh .ar-hero__title { position: relative; }
body.adroit-refresh .ar-hero__title.is-flicker { animation: ar-hslip 420ms steps(4, end) 1; }
/* Hover: a light chromatic aberration (fuchsia left, turquoise right) that eases in and holds while hovered.
   The stepped slice is reserved for cards (.ar-card) and stays short. */
body.adroit-refresh .ar-btn, body.adroit-refresh .ar-h2, body.adroit-refresh .ar-h3, body.adroit-refresh .ar-card__title, body.adroit-refresh .ar-prose a:not(.ar-btn) { transition: text-shadow 160ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
body.adroit-refresh .ar-btn:hover, body.adroit-refresh .ar-btn:focus-visible,
body.adroit-refresh .ar-prose a:not(.ar-btn):hover,
body.adroit-refresh .ar-card:hover .ar-card__title,
body.adroit-refresh .ar-section__head:hover .ar-h2,
body.adroit-refresh .ar-hero__title:hover { text-shadow: -1.5px 0 rgba(216,0,162,.85), 1.5px 0 rgba(53,228,204,.85); }
body.adroit-refresh .ar-hero__title:hover { text-shadow: -2px 0 rgba(216,0,162,.9), 2px 0 rgba(53,228,204,.9), 0 0 22px rgba(53,228,204,.35); }
/* CRT horizontal tear (refresh.js builds .ar-tear > .ar-tear__slice clones on hover) */
body.adroit-refresh .ar-tear { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
body.adroit-refresh .ar-tear__slice {
  position: absolute; inset: 0; padding: inherit; box-sizing: border-box; overflow: hidden;
  will-change: transform;
  filter: drop-shadow(-2px 0 rgba(216,0,162,.95)) drop-shadow(2px 0 rgba(53,228,204,.95));
  animation: ar-tear 380ms steps(3, end) 1 both;
}
body.adroit-refresh .ar-tear__slice .ar-card__index { opacity: .6; }
@keyframes ar-tear {
  0%   { transform: translateX(var(--dx1)); }
  34%  { transform: translateX(var(--dx2)); }
  67%  { transform: translateX(var(--dx3)); }
  100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   CRT failure library. Every effect on the site is one of these:
     warm-up      phosphor warm-up: image comes up dim and a hair wide, brightens, settles  (section + card reveal)
     power-on     raster opens from a bright horizontal line                            (hero, once per load)
     h-sync tear  horizontal bands shear left/right with colour fringes                 (cards on hover; hero ambient)
     h-hold slip  the whole picture skids sideways for a few frames                     (hero headline, ambient)
     v-hold roll  a dark blanking bar rolls down through the picture                    (hero, ambient, with the slip)
     snow         one frame of signal noise                                             (hero, ambient, with the roll)
     hum bar      a faint dark band drifts slowly down the whole screen (mains ripple)  (always on, very faint)
     convergence  fuchsia/turquoise fringes on hover (misconverged guns)                (links, buttons, headings, nav, logo)
     persistence  the cursor phosphor decays instead of switching off                   (hero caret)
     raster       scanlines over everything                                             (static overlay, <=3%)
   -------------------------------------------------------------------------- */
@keyframes ar-warmup {
  /* tube comes up dim and slightly wide, brightens past target as the HT settles, raster pulls in */
  0%   { opacity: 0;  filter: brightness(.55) contrast(.85) saturate(.6); transform: scaleX(1.022); }
  60%  { opacity: 1;  filter: brightness(1.14) contrast(1.03); transform: scaleX(1.004); }
  100% { opacity: 1;  filter: none; transform: none; }
}
@keyframes ar-poweron {
  0%   { opacity: 1; transform: scale(1.08, .004); filter: brightness(5); }
  34%  { opacity: 1; transform: scale(1.05, .010); filter: brightness(3.5); }
  60%  { opacity: 1; transform: scale(1.015, 1.03); filter: brightness(1.45); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ar-hslip {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-7px) skewX(-1.5deg); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-2px) skewX(.5deg); }
  100% { transform: none; }
}
body.adroit-refresh .ar-vroll {
  position: absolute; left: 0; right: 0; top: -16%; height: 16%; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.88) 30%, rgba(0,0,0,.88) 70%, transparent);
  animation: ar-vroll 560ms steps(7, end) 1 both;
}
@keyframes ar-vroll { from { top: -16%; } to { top: 100%; } }
body.adroit-refresh .ar-static {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: ar-static 200ms steps(3, end) 1 both;
}
@keyframes ar-static {
  0%   { opacity: .24; background-position: 0 0; }
  50%  { opacity: .14; background-position: 40px 30px; }
  100% { opacity: 0;   background-position: 80px 10px; }
}
body.adroit-refresh .ar-humbar {
  position: fixed; left: 0; right: 0; top: -18vh; height: 18vh; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.09) 45%, rgba(0,0,0,.09) 55%, transparent);
  animation: ar-humbar 18s linear infinite;
}
@keyframes ar-humbar { from { top: -18vh; } to { top: 100vh; } }
/* phosphor persistence: the caret switches off and its glow decays */
@keyframes ar-caret { 0%, 46% { opacity: 1; } 50% { opacity: .5; } 62% { opacity: .18; } 78%, 100% { opacity: 0; } }
@keyframes ar-bar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  body.adroit-refresh .ar-reveal, body.adroit-refresh .ar-band > .ar-wrap, body.adroit-refresh .ar-card { opacity: 1; clip-path: none; transform: none; animation: none !important; }
  body.adroit-refresh .ar-hero__title::after, body.adroit-refresh .ar-bars i { animation: none !important; transform: none; }
  body.adroit-refresh .ar-scanlines, body.adroit-refresh .ar-humbar, body.adroit-refresh .ar-vroll, body.adroit-refresh .ar-static, body.adroit-refresh .ar-tear { display: none !important; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.adroit-refresh .ar-band--yellow::before { width: 34vw; }
  body.adroit-refresh .ar-band--yellow > .ar-wrap { padding-left: 0; }
  body.adroit-refresh .ar-h2--boxed { box-shadow: -6px 6px 0 var(--ar-black); }
  body.adroit-refresh .ar-card { box-shadow: -5px 5px 0 var(--ar-white) !important; }
  body.adroit-refresh .ar-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Site-wide chrome (every view, not only refreshed pages): banner + footer
   ========================================================================== */
.ar-banner {
  background: #ffdd3b;
  color: #000;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
  margin: 0;
}
.ar-banner strong { font-weight: 700; }

.ar-footer {
  position: relative;
  background: #000;
  color: #fff;
  font-family: "Source Code Pro", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0;
  overflow: hidden;
}
.ar-footer__wedge {
  height: clamp(28px, 4vw, 56px);
  background: #ffdd3b;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);
}
.ar-footer__wrap {
  width: min(100% - 2 * clamp(20px, 4vw, 48px), 1180px);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 5vw, 56px);
  display: grid;
  gap: clamp(28px, 5vw, 72px);
}
@media (min-width: 900px) { .ar-footer__wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.ar-footer__logo img { max-width: 92px; height: auto; display: block; margin-bottom: 18px; }
.ar-footer__wordmark { font-family: "Righteous", sans-serif; font-size: 28px; color: #fff; }
.ar-footer__eyebrow { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #ffdd3b; margin: 0 0 10px; }
.ar-footer__promise { font-family: "Space Grotesk", sans-serif; font-size: 19px; line-height: 1.35; color: #fff; max-width: 30ch; margin: 0 0 22px; }
.ar-footer__cta { margin: 0; }
.ar-footer .ar-btn {
  display: inline-block; font-family: "Righteous", sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; line-height: 1;
  padding: 14px 22px; border: 2px solid #ffdd3b; color: #ffdd3b; box-shadow: 0 0 10px rgba(255,221,59,0.5); transition: background 140ms, color 140ms;
}
.ar-footer .ar-btn:hover { background: #ffdd3b; color: #000; }
.ar-footer__nav { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ar-footer__h { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #d800a2; margin: 0 0 12px; }
.ar-footer__list { list-style: none; margin: 0; padding: 0; }
.ar-footer__list li { margin: 0 0 8px; }
.ar-footer__list a { color: #fff; text-decoration: none; border-bottom: 1px solid transparent; transition: color 120ms, border-color 120ms; }
.ar-footer__list a:hover { color: #35e4cc; border-bottom-color: #35e4cc; }
.ar-footer__bottom { border-top: 1px solid #222; }
.ar-footer__wrap--bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 18px 0 26px; }
.ar-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; }
.ar-footer__legal a { color: #a0a0a0; text-decoration: none; }
.ar-footer__legal a:hover { color: #ffdd3b; }
.ar-footer__meta, .ar-footer__copy { margin: 0; font-size: 12px; color: #a0a0a0; }
.ar-footer__meta a { color: #fff; text-decoration: none; }
.ar-footer__meta a:hover { color: #d800a2; }
.ar-footer__sep { margin: 0 8px; color: #444; }
.ar-footer__copy { flex-basis: 100%; }
.ar-footer__sys { font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; color: #35e4cc; margin-left: 12px; }

/* Header (Elementor template #20): tighten so the seven-item primary nav + CTA fit on one row ≥1200px */
.elementor-location-header .elementor-nav-menu--main .elementor-item { padding-left: 11px; padding-right: 11px; font-size: 14px; letter-spacing: 0.02em; }
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item { font-size: 14px; }
.elementor-location-header .elementor-button { white-space: nowrap; font-size: 14px; padding-left: 18px; padding-right: 18px; }
.elementor-location-header .elementor-widget-image img { max-width: 72px; }
@media (max-width: 1200px) and (min-width: 1025px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-item { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* Small screens: the yellow band's black wedge and corner block would sit under black text — swap them
   for a thin top triangle and no corner block; header CTA duplicates the hero CTA, so hide it on phones. */
@media (max-width: 900px) {
  body.adroit-refresh .ar-band--yellow::before,
  body.adroit-refresh .ar-band--yellow.ar-band--flip::before {
    left: 0; right: auto; top: 0;
    width: 100%; height: 34px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%);
  }
  body.adroit-refresh .ar-band--yellow.ar-band--flip::before { clip-path: polygon(0 0, 100% 0, 38% 100%, 0 100%); }
  body.adroit-refresh .ar-band--yellow::after { display: none; }
  body.adroit-refresh .ar-band--yellow > .ar-wrap,
  body.adroit-refresh .ar-band--yellow.ar-band--flip > .ar-wrap { padding-left: 0; padding-right: 0; }
  body.adroit-refresh .ar-band--yellow { padding-top: calc(var(--ar-band-y) + 12px); }
  body.adroit-refresh .ar-h2--boxed { font-size: clamp(22px, 6vw, 30px); }
  .ar-banner { font-size: 10px; letter-spacing: 0.12em; padding: 6px 12px; }
  .ar-footer__wedge { clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%); }
}
@media (max-width: 767px) {
  .elementor-location-header .elementor-widget-button { display: none !important; }
}

/* Phone header: the Elementor header stacks logo → (hidden CTA) → hamburger; pull the rows together */
@media (max-width: 767px) {
  .elementor-location-header .elementor-widget-image img { max-width: 56px; }
  .elementor-location-header > .elementor-section > .elementor-container,
  .elementor-location-header .elementor-section .elementor-column > .elementor-widget-wrap { padding-top: 6px !important; padding-bottom: 6px !important; }
  .elementor-location-header .elementor-widget { margin-bottom: 0 !important; }
  .elementor-location-header .elementor-menu-toggle { margin: 4px auto 6px; }
}

/* Cookie notice (site-wide) */
.ar-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  max-width: 720px; margin-inline: auto;
  background: #000; color: #fff; border: 2px solid #ffdd3b; box-shadow: -8px 8px 0 #ffdd3b;
  padding: 14px 18px;
  font-family: "Source Code Pro", ui-monospace, monospace; font-size: 13px; line-height: 1.5;
}
.ar-cookie[hidden] { display: none !important; }
.ar-cookie p { margin: 0; flex: 1 1 320px; }
.ar-cookie a { color: #35e4cc; }
.ar-cookie__ok {
  font-family: "Righteous", sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  background: #ffdd3b; color: #000; border: 0; padding: 10px 16px; cursor: pointer;
}
.ar-cookie__ok:hover { background: #d800a2; color: #fff; }

/* Embeds inside refreshed pages (Elementor Pro forms, Calendly) */
body.adroit-refresh .ar-embed { margin: 8px 0 0; }
body.adroit-refresh .ar-embed--form .elementor-form { max-width: 760px; }
body.adroit-refresh .ar-embed--form .elementor-field-group .elementor-field { font-family: "Source Code Pro", ui-monospace, monospace; }
body.adroit-refresh .ar-embed--calendly { background: #fff; padding: 8px; }
body.adroit-refresh .ar-band--yellow .ar-embed--form .elementor-field-group label { color: #000; }
/* The Elementor kit's global button rules outrank a single class — pin the cookie button's look. */
.ar-cookie button.ar-cookie__ok, .elementor-kit-5 .ar-cookie button.ar-cookie__ok {
  background: #ffdd3b !important; color: #000 !important; border: 0 !important; border-radius: 0 !important;
  font-family: "Righteous", sans-serif !important; font-size: 13px !important; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 16px !important;
}
.ar-cookie button.ar-cookie__ok:hover { background: #d800a2 !important; color: #fff !important; }

/* Yellow band corner block must never sit under prose: keep the text column clear of it on wide screens */
@media (min-width: 900px) {
  body.adroit-refresh .ar-band--yellow:not(.ar-band--flip) > .ar-wrap { padding-right: clamp(60px, 12vw, 200px); }
  body.adroit-refresh .ar-band--yellow.ar-band--flip > .ar-wrap { padding-top: clamp(20px, 5vw, 80px); }
  body.adroit-refresh .ar-band--yellow::after { width: clamp(70px, 11vw, 170px); height: clamp(70px, 11vw, 170px); }
}

/* Legibility guard on yellow bands: every text region carries a same-colour backdrop, so wherever the
   diagonal wedge or the corner block would intersect copy at some viewport width, the copy still sits on
   yellow. The backdrop is invisible on yellow and simply "cuts" the shape where they meet. */
body.adroit-refresh .ar-band--yellow .ar-section__grid,
body.adroit-refresh .ar-band--yellow > .ar-wrap > .ar-prose,
body.adroit-refresh .ar-band--yellow > .ar-wrap > .ar-h2:not(.ar-h2--boxed),
body.adroit-refresh .ar-band--yellow .ar-embed,
body.adroit-refresh .ar-band--yellow .ar-actions {
  position: relative;
  z-index: 1;
  background: var(--ar-yellow);
  box-shadow: 0 0 0 clamp(14px, 2vw, 28px) var(--ar-yellow);
}
body.adroit-refresh .ar-band--yellow .ar-section__grid > .ar-section__head,
body.adroit-refresh .ar-band--yellow .ar-section__grid > .ar-prose { background: var(--ar-yellow); }
/* cards and steps on yellow already carry their own black/yellow surfaces; keep them above the shapes */
body.adroit-refresh .ar-band--yellow .ar-cards, body.adroit-refresh .ar-band--yellow .ar-steps { position: relative; z-index: 1; }