/* ==========================================================================
   Blocks rebuilt from the live Elementor homepage.

   Everything here is namespaced arcrel-lv-* so it cannot reach into the
   inlined repo fragments, which carry their own scoped <style> blocks and own
   the arcrel-hm-*, arcrel-proof-*, arcrel-case-* and arcrel-results-*
   vocabularies. Nothing in this file selects a bare element.
   ========================================================================== */

.arcrel-lv-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.arcrel-lv-shell--narrow {
  max-width: 780px;
}

.arcrel-lv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.arcrel-lv-eyebrow {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin: 0 0 var(--sp-2);
}

/* --- Buttons -------------------------------------------------------------- */

.arcrel-lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border-radius: var(--radius);
  font-stretch: var(--wdth-display);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.arcrel-lv-btn--primary,
.arcrel-lv-btn--primary:visited {
  background: var(--purple);
  color: var(--white);
}

.arcrel-lv-btn--primary:hover,
.arcrel-lv-btn--primary:focus-visible {
  background: var(--purple-glow);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(124, 58, 237, 0.7);
}

/* Secondary action. Outlined rather than filled so it never competes with the
   primary, but same shape, weight and radius so the pair reads as one system. */
.arcrel-lv-btn--ghost,
.arcrel-lv-btn--ghost:visited {
  background: transparent;
  color: var(--warm-white);
  border-color: var(--divider);
}

.arcrel-lv-btn--ghost:hover,
.arcrel-lv-btn--ghost:focus-visible {
  color: var(--white);
  border-color: var(--purple-light);
  background: rgba(97, 25, 172, 0.16);
  transform: translateY(-2px);
}

.arcrel-lv-btn--lg {
  padding: 1.15em 2.6em;
}

/* --- Hero ----------------------------------------------------------------- */

.arcrel-lv-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6.5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}

/* Drafting dimension line, not a pill.
   A rounded capsule with a glowing dot is the default every template ships;
   this borrows a blueprint annotation instead, which the company name earns.
   Rules run out from the text to vertical tick caps, and the figure carries
   the emphasis so the eye lands on the number rather than the container. */
.arcrel-lv-hero__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: min(560px, 100%);
  margin: 0 auto var(--sp-4);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--1);
  font-weight: 600;
  /* Archivo's uppercase needs marginally more air than Inter's at this size. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Each rule fades out toward the text so it reads as an annotation extending
   into the margin rather than a hard border. The tick cap is the ::before. */
.arcrel-lv-hero__rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--divider) 65%);
}

.arcrel-lv-hero__rule:last-child {
  background: linear-gradient(to left, transparent, var(--divider) 65%);
}

.arcrel-lv-hero__rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 9px;
  translate: 0 -50%;
  background: var(--purple-light);
}

.arcrel-lv-hero__rule:last-child::before {
  left: auto;
  right: 0;
}

.arcrel-lv-hero__badge-text {
  flex: none;
  white-space: nowrap;
}

.arcrel-lv-hero__figure {
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--white);
}

/* Below the fold of a phone the rules squeeze the text to nothing, so let the
   line wrap and drop the annotation. */
@media (max-width: 520px) {
  .arcrel-lv-hero__badge {
    gap: 0.6rem;
  }
  .arcrel-lv-hero__rule {
    display: none;
  }
  .arcrel-lv-hero__badge-text {
    white-space: normal;
  }
}

.arcrel-lv-hero__h1 {
  margin: 0 auto var(--sp-3);
  max-width: 18ch;
  line-height: 1.02;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-lv-hero__sub {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* The picker is an inlined fragment with its own scoped CSS, so its spacing
   inside the hero belongs here rather than in the fragment. */
.arcrel-lv-hero .arcrel-pick {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.arcrel-lv-hero__ctas {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

/* --- Awards --------------------------------------------------------------- */

.arcrel-lv-awards {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.arcrel-lv-awards__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arcrel-lv-awards__row img {
  height: clamp(64px, 9vw, 96px);
  width: auto;
  /* The badge artwork is dark-on-light, so it needs lifting on a dark field. */
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.arcrel-lv-awards__row img:hover {
  opacity: 1;
}

/* --- Lead form ------------------------------------------------------------ */

.arcrel-lv-form {
  padding-block: var(--section-y);
}

.arcrel-lv-form__h2 {
  margin: 0 0 var(--sp-4);
  text-align: center;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-lv-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.arcrel-lv-field {
  margin: 0;
}

.arcrel-lv-field--wide,
.arcrel-lv-form__actions,
.arcrel-lv-form__status {
  grid-column: 1 / -1;
}

.arcrel-lv-field input {
  width: 100%;
  padding: 0.9em 1em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.arcrel-lv-field input::placeholder {
  color: var(--muted);
}

.arcrel-lv-field input:focus-visible {
  outline: none;
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

.arcrel-lv-form__actions {
  margin-top: var(--sp-1);
}

.arcrel-lv-form__actions .arcrel-lv-btn {
  width: 100%;
}

.arcrel-lv-form__status {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
}

.arcrel-lv-form__status[data-state="error"] {
  color: var(--red);
}

.arcrel-lv-form__status[data-state="ok"] {
  color: var(--green);
}

@media (max-width: 640px) {
  .arcrel-lv-form__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Metrics -------------------------------------------------------------- */

.arcrel-lv-metrics {
  padding-block: var(--section-y);
}

.arcrel-lv-metrics__h2 {
  margin: 0 auto var(--sp-5);
  max-width: 22ch;
  text-align: center;
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-lv-metrics__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arcrel-lv-metric {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.arcrel-lv-metric__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.arcrel-lv-metric__value {
  margin: 0.2em 0;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--purple-light);
}

.arcrel-lv-metric__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--warm-white);
}

/* --- Video testimonials --------------------------------------------------- */

.arcrel-lv-vids {
  padding-block: var(--section-y);
  text-align: center;
}

.arcrel-lv-vids__h2 {
  margin: 0 auto var(--sp-5);
  max-width: 20ch;
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-lv-vids__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
}

.arcrel-lv-vid {
  margin: 0;
}

.arcrel-lv-vid__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.arcrel-lv-vid__btn:hover,
.arcrel-lv-vid__btn:focus-visible {
  border-color: var(--purple-light);
  transform: translateY(-3px);
}

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

.arcrel-lv-vid__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  padding-left: 4px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(97, 25, 172, 0.92);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur-fast) var(--ease-out);
}

.arcrel-lv-vid__btn:hover .arcrel-lv-vid__play {
  transform: scale(1.08);
}

.arcrel-lv-vid__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
}

.arcrel-lv-vid__name {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--warm-white);
}

/* --- Reviews -------------------------------------------------------------- */

.arcrel-lv-reviews {
  padding-block: var(--section-y);
}

/* Scroll-snap rail rather than a JS carousel: it is keyboard and touch native,
   works without script, and there is no plugin to keep alive. */
.arcrel-lv-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 380px);
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-1) var(--sp-1) var(--sp-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
}

.arcrel-lv-review {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.arcrel-lv-review__stars {
  margin: 0;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  color: #f5c451;
}

.arcrel-lv-review__quote {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--warm-white);
}

.arcrel-lv-review__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Final CTA ------------------------------------------------------------ */

.arcrel-lv-cta {
  padding-block: var(--section-y);
  text-align: center;
}

.arcrel-lv-cta__h2 {
  margin: 0 auto var(--sp-4);
  max-width: 20ch;
  line-height: 1.08;
  color: var(--white);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .arcrel-lv-btn,
  .arcrel-lv-vid__btn,
  .arcrel-lv-vid__play {
    transition: none;
  }
  .arcrel-lv-btn:hover,
  .arcrel-lv-vid__btn:hover {
    transform: none;
  }
}

/* --- Prose and structured pages -------------------------------------------
   Shared by blog posts (a flat run of blocks) and by the pages recovered from
   Elementor, which come through as rows carrying a layout name. Rhythm comes
   from the row spacing; the layout name decides the column shape.
-------------------------------------------------------------------------- */

.arcrel-pr {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.arcrel-pr + .arcrel-pr {
  padding-top: 0;
}

/* Prose measure. Rows that lay out in columns opt back out below, because a
   74ch cap would squeeze a three-up card row into a gutter. */
.arcrel-pr__inner {
  max-width: 74ch;
}

/* Blog posts are one long read, so they get a slightly tighter measure and a
   wider gutter than the marketing pages — at tablet widths the shared gutter
   leaves the column almost touching the edge. */
.arcrel-pr--post .arcrel-pr__inner {
  max-width: 68ch;
  padding-inline: clamp(1.5rem, 7vw, 5rem);
}

/* A post title is not a hero. At the reading measure the hero size runs a long
   headline to five lines before the reader has seen a word of the article. */
.arcrel-pr--post .arcrel-pr__h1 {
  line-height: 1.1;
}

.arcrel-pr__row {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.arcrel-pr__row--cards .arcrel-pr__inner,
.arcrel-pr__row--split .arcrel-pr__inner,
.arcrel-pr__row--split-media .arcrel-pr__inner,
.arcrel-pr__row--media .arcrel-pr__inner {
  max-width: var(--shell);
}

.arcrel-pr__cols {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.arcrel-pr__row--split .arcrel-pr__cols,
.arcrel-pr__row--split-media .arcrel-pr__cols {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.arcrel-pr__row--cards .arcrel-pr__cols {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* Cards read as cards, not as three loose stacks of text. */
.arcrel-pr__row--cards .arcrel-pr__col {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.arcrel-pr__row--cards .arcrel-pr__col > :first-child,
.arcrel-pr__col > :first-child {
  margin-top: 0;
}

.arcrel-pr__col > :last-child {
  margin-bottom: 0;
}

/* A row that is only an image should not inherit the prose measure. */
.arcrel-pr__row--media .arcrel-pr__fig {
  margin: 0;
}

.arcrel-pr__h1 {
  margin: 0 0 var(--sp-3);
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-pr__h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 var(--sp-2);
  line-height: 1.18;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-pr__h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: 1.25;
  color: var(--white);
}

.arcrel-pr__h4 {
  margin: var(--sp-4) 0 var(--sp-1);
  color: var(--warm-white);
}

.arcrel-pr__p,
.arcrel-pr__list {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--muted);
  text-wrap: pretty;
}

.arcrel-pr__lede {
  font-size: var(--step-1);
  color: var(--warm-white);
}

/* base.css resets list-style globally for the nav and card grids, so running
   text has to opt back in — without this every bulleted list in a blog post
   rendered as a run of unmarked lines. */
.arcrel-pr__list {
  padding-left: 1.3em;
  list-style: disc;
}

.arcrel-pr__list li {
  margin-bottom: 0.5em;
}

.arcrel-pr__list li::marker {
  color: var(--purple-light);
}

.arcrel-pr__fig {
  margin: var(--sp-4) 0;
}

.arcrel-pr__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
}

.arcrel-pr__fig--hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.arcrel-pr__cta {
  margin: var(--sp-4) 0;
}

.arcrel-pr__meta {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.arcrel-pr--post {
  padding-bottom: 0;
}

.arcrel-lv-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
}

.arcrel-lv-hero--compact {
  padding-bottom: 0;
}

.arcrel-lv-field textarea {
  width: 100%;
  padding: 0.9em 1em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  resize: vertical;
}

.arcrel-lv-field textarea::placeholder {
  color: var(--muted);
}

.arcrel-lv-field textarea:focus-visible {
  outline: none;
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* --- Blog index ----------------------------------------------------------- */

/* --- Service areas ---------------------------------------------------------
   The cross-links between a national service page and its per-city editions,
   generated by relatedContentPages(). Plain and quiet on purpose: this is
   navigation for a reader who wants their own town and for a crawler that
   needs the path, not a feature block. */
.arcrel-areas {
  padding-bottom: var(--section-y);
}

.arcrel-areas__h2 {
  font-size: var(--step-1);
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.arcrel-areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  padding: 0;
}

.arcrel-areas__list a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.arcrel-areas__list a:hover,
.arcrel-areas__list a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.arcrel-blog {
  padding-bottom: var(--section-y);
}

/* The same grid at the foot of an article rather than on the index. It follows
   body copy, so it needs a rule to separate it; the index page does not. */
.arcrel-blog--related {
  border-top: 1px solid var(--divider);
}

.arcrel-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arcrel-blog__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.arcrel-blog__link:hover,
.arcrel-blog__link:focus-visible {
  border-color: var(--purple-light);
  transform: translateY(-3px);
}

.arcrel-blog__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.arcrel-blog__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--sp-3);
}

.arcrel-blog__date {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.arcrel-blog__title {
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-blog__desc {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .arcrel-blog__link {
    transition: none;
  }
  .arcrel-blog__link:hover {
    transform: none;
  }
}

/* --- Everything Included: mobile column ------------------------------------
   The fragment goes two-up from 560px and only collapses to one centred column
   below that, so every large phone and small tablet gets two cramped columns
   with the second one half off-screen.

   Overridden here rather than in the fragment so live-site/ stays verbatim.
   The extra `.hp` is doing real work: the fragment's own <style> sits in the
   body and would otherwise win on source order.
-------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hp .arcrel-hm-inc__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Inset the column rather than centring the text inside it. Centred body
     copy and a centred check list read worse than left-aligned; what the
     single column actually needed was more breathing room at the edges so the
     cards sit as a deliberate block instead of spanning edge to edge. */
  .hp .arcrel-hm-inc__grid {
    --inc-inset: clamp(0.75rem, 4vw, 2rem);
    position: relative;
    padding-inline: var(--inc-inset);
  }

  /* Connecting spine.

     On desktop the four cards sit in a row and their aligned top edges read as
     one continuous rail — that is what makes them feel like a system rather
     than four separate boxes. Stacked into a column that rail disappears, so
     this is its vertical equivalent.

     It runs the full height of the stack behind the cards. The cards are
     opaque and paint over it, so it shows only in the 12px gaps — the line
     genuinely passes through them rather than sitting beside them. Both ends
     fade, so it needs no knowledge of card heights, which vary.

     The 49px is the icon centre: 1px card border + 24px card padding + half of
     the 48px icon tile. --inc-inset is shared with the padding above so the
     two cannot drift apart. */
  .hp .arcrel-hm-inc__grid::before {
    content: "";
    position: absolute;
    left: calc(var(--inc-inset) + 49px);
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--purple-light) 10%,
      var(--purple-light) 90%,
      transparent
    );
    opacity: 0.45;
  }

  /* Cards already carry position: relative for their hover sweep; the z-index
     is what lifts them above the spine so it only shows between them. */
  .hp .arcrel-hm-inc__card {
    z-index: 1;
  }
}

/* --- Booking page --------------------------------------------------------- */

.arcrel-booking {
  padding-bottom: var(--section-y);
}

/* form_embed.js sets an explicit pixel width on the iframe once it measures
   the calendar, which overflowed the viewport by 42px at 390. Cap it. */
.arcrel-booking iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 720px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
}

/* --- Fixed-nav clearance ---------------------------------------------------
   The nav is position:fixed, so it sits over the top of the document. The
   homepage hero is designed for that (the glass is transparent at rest), but
   every page whose first block is an inlined fragment starts at y=0 and gets
   its first line clipped behind the bar.

   Reserving the nav's height on <main> fixes all of them at once. The hero then
   only needs its own breathing room on top, not the nav height as well.
-------------------------------------------------------------------------- */

main {
  padding-top: var(--nav-h);
}

/* Some fragments were built as full pages on live and already reserve room for
   the fixed nav in their own hero padding — about-us uses 186px, how-it-works
   170px. On those, this clearance is a second allowance stacked on the first,
   which showed up as a band of dead space above the fold. Pages set
   `flushTop: true` in front matter to opt out. */
.flush-top main {
  padding-top: 0;
}

.arcrel-lv-hero {
  padding-top: clamp(3rem, 8vw, 6.5rem);
}

/* --- Awards trust badge ---------------------------------------------------- */

/* Rating stacked above the badges, both centred. */
.arcrel-lv-awards__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.arcrel-lv-awards__inner .arcrel-lv-awards__row {
  gap: clamp(1.5rem, 4vw, 3rem);
}

.arcrel-lv-trust {
  text-align: center;
}

.arcrel-lv-trust__stars {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: 0.1em;
  color: #f5c451;
}

.arcrel-lv-trust__text {
  margin: 0.5em 0 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--warm-white);
}

@media (max-width: 720px) {
  .arcrel-lv-trust {
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
}

/* --- Final CTA video ------------------------------------------------------- */

.arcrel-lv-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.arcrel-lv-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.arcrel-lv-cta__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The headline sits on top of moving footage, so the scrim is doing contrast
   work, not decoration. Keep it heavy enough that the text stays legible on
   the brightest frame of the loop. */
.arcrel-lv-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.82),
    rgba(10, 10, 15, 0.7) 50%,
    rgba(10, 10, 15, 0.88)
  );
}

.arcrel-lv-cta__inner {
  position: relative;
}

/* Autoplaying motion behind text is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce) {
  .arcrel-lv-cta__video {
    display: none;
  }
  .arcrel-lv-cta__bg {
    background: var(--card);
  }
}

/* --- Reviews marquee -------------------------------------------------------
   Sits above the footer on every page. Pure CSS: the track holds two identical
   copies of the review list and translates by exactly -50%, so copy two lands
   where copy one started and the seam is invisible.
-------------------------------------------------------------------------- */

/* Even padding top and bottom. It previously used --section-y on top against a
   much smaller bottom value, which left the band floating high with the cards
   crowding the footer. */
.arcrel-rv {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--divider);
  overflow: hidden;
}

.arcrel-rv__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.arcrel-rv__stars {
  letter-spacing: 0.1em;
  color: #f5c451;
}

/* Fade the edges so cards enter and leave rather than being sliced off. */
.arcrel-rv__viewport {
  --edge: clamp(1.5rem, 8vw, 7rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right, transparent, #000 var(--edge),
    #000 calc(100% - var(--edge)), transparent
  );
  mask-image: linear-gradient(
    to right, transparent, #000 var(--edge),
    #000 calc(100% - var(--edge)), transparent
  );
}

.arcrel-rv__track {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: arcrelReviewDrift 90s linear infinite;
  will-change: transform;
}

/* Long enough to read a card as it passes; slow enough not to nag. */
@keyframes arcrelReviewDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.arcrel-rv__viewport:hover .arcrel-rv__track,
.arcrel-rv__viewport:focus-within .arcrel-rv__track {
  animation-play-state: paused;
}

.arcrel-rv__card {
  flex: 0 0 auto;
  width: min(380px, 82vw);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.arcrel-rv__quote {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--warm-white);
  /* Cards must be equal height for the row to read cleanly; long reviews clamp
     rather than stretching the whole track. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arcrel-rv__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.arcrel-rv__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--black);
  border: 1px solid var(--divider);
}

.arcrel-rv__name {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}

/* Continuous motion is exactly what this setting exists for. Fall back to a
   swipeable rail so the reviews are still reachable. */
@media (prefers-reduced-motion: reduce) {
  .arcrel-rv__track {
    animation: none;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
  }
  .arcrel-rv__card {
    scroll-snap-align: start;
  }
  .arcrel-rv__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* The duplicate copy is decorative — hide it when there is no loop to fill. */
  .arcrel-rv__card[aria-hidden="true"] {
    display: none;
  }
}

/* --- Section eyebrows ------------------------------------------------------
   One treatment for every eyebrow on the site, matching the hero's drafting
   dimension line — but subordinate to it. The hero's rules flex to span a wide
   measure; these are fixed short stubs, so the two read as the same vocabulary
   at different volumes.

   Built from ::before / ::after rather than spans so the seven section
   fragments stay verbatim and sections:diff has nothing to report. Each pseudo
   is a tick cap (border, at the outer end) plus a hairline rule (background,
   centred vertically).

   The `.hp` prefix is load-bearing: fragment styles sit in <style> tags in the
   body and would otherwise win on source order.
-------------------------------------------------------------------------- */

/* Several fragments re-declare --muted and --purple-light inside their own
   scope, at values a shade off the global token. Resolving both here, on .hp —
   which sits outside every fragment scope — means the eyebrow ink and the tick
   caps are the same colour in every section, whichever vocabulary owns it. */
.hp {
  --eyebrow-ink: var(--muted);
  --eyebrow-tick: var(--purple-light);
}

.hp .arcrel-results-eyebrow,
.hp .arcrel-cases-eyebrow,
.hp .arcrel-hm-eng__eyebrow,
.hp .arcrel-hm-plat__eyebrow,
.hp .arcrel-hm-inc__eyebrow,
.hp .arcrel-hm-support__eyebrow,
.hp .arcrel-hm-faq__eyebrow,
.hp .arcrel-lv-eyebrow,
.hp .arcrel-rv__eyebrow,
/* How it works — five vocabularies, three treatments between them (plain
   purple text, a purple capsule, a capsule with a gold star). Same tick-cap
   eyebrow as the homepage now. */
.hp .arcrel-hiw__eyebrow,
.hp .arcrel-work__eyebrow,
.hp .arcrel-vis__eyebrow,
.hp .arcrel-agent__eyebrow,
.hp .arcrel-review-eyebrow {
  display: inline-flex;      /* inline, so it still honours the parent's alignment */
  align-items: center;
  gap: 0.7em;
  /* Strip the capsule off the ones that had one. */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
}

.hp .arcrel-results-eyebrow::before,
.hp .arcrel-cases-eyebrow::before,
.hp .arcrel-hm-eng__eyebrow::before,
.hp .arcrel-hm-plat__eyebrow::before,
.hp .arcrel-hm-inc__eyebrow::before,
.hp .arcrel-hm-support__eyebrow::before,
.hp .arcrel-hm-faq__eyebrow::before,
.hp .arcrel-lv-eyebrow::before,
.hp .arcrel-rv__eyebrow::before,
.hp .arcrel-hiw__eyebrow::before,
.hp .arcrel-work__eyebrow::before,
.hp .arcrel-vis__eyebrow::before,
.hp .arcrel-agent__eyebrow::before,
.hp .arcrel-review-eyebrow::before,
.hp .arcrel-results-eyebrow::after,
.hp .arcrel-cases-eyebrow::after,
.hp .arcrel-hm-eng__eyebrow::after,
.hp .arcrel-hm-plat__eyebrow::after,
.hp .arcrel-hm-inc__eyebrow::after,
.hp .arcrel-hm-support__eyebrow::after,
.hp .arcrel-hm-faq__eyebrow::after,
.hp .arcrel-lv-eyebrow::after,
.hp .arcrel-rv__eyebrow::after,
.hp .arcrel-hiw__eyebrow::after,
.hp .arcrel-work__eyebrow::after,
.hp .arcrel-vis__eyebrow::after,
.hp .arcrel-agent__eyebrow::after,
.hp .arcrel-review-eyebrow::after {
  content: "";
  flex: none;
  width: 26px;
  height: 9px;
  background: linear-gradient(var(--divider), var(--divider)) left 50% / 100% 1px
    no-repeat;
}

.hp .arcrel-results-eyebrow::before,
.hp .arcrel-cases-eyebrow::before,
.hp .arcrel-hm-eng__eyebrow::before,
.hp .arcrel-hm-plat__eyebrow::before,
.hp .arcrel-hm-inc__eyebrow::before,
.hp .arcrel-hm-support__eyebrow::before,
.hp .arcrel-hm-faq__eyebrow::before,
.hp .arcrel-lv-eyebrow::before,
.hp .arcrel-rv__eyebrow::before,
.hp .arcrel-hiw__eyebrow::before,
.hp .arcrel-work__eyebrow::before,
.hp .arcrel-vis__eyebrow::before,
.hp .arcrel-agent__eyebrow::before,
.hp .arcrel-review-eyebrow::before {
  border-left: 1px solid var(--eyebrow-tick);
}

.hp .arcrel-results-eyebrow::after,
.hp .arcrel-cases-eyebrow::after,
.hp .arcrel-hm-eng__eyebrow::after,
.hp .arcrel-hm-plat__eyebrow::after,
.hp .arcrel-hm-inc__eyebrow::after,
.hp .arcrel-hm-support__eyebrow::after,
.hp .arcrel-hm-faq__eyebrow::after,
.hp .arcrel-lv-eyebrow::after,
.hp .arcrel-rv__eyebrow::after,
.hp .arcrel-hiw__eyebrow::after,
.hp .arcrel-work__eyebrow::after,
.hp .arcrel-vis__eyebrow::after,
.hp .arcrel-agent__eyebrow::after,
.hp .arcrel-review-eyebrow::after {
  border-right: 1px solid var(--eyebrow-tick);
}

/* The reviews eyebrow carries its own star run, so it keeps that and skips the
   left stub — the stars already cap that end. Same for the how-it-works review
   eyebrow, which leads with a single gold star. */
.hp .arcrel-rv__eyebrow::before,
.hp .arcrel-review-eyebrow::before {
  display: none;
}

/* Three eyebrows carry a literal status dot inside them, left over from the
   capsule treatment. The tick caps replace what those were doing, and the
   results and how-it-works ones were a stray green against an otherwise purple
   system. */
.hp .arcrel-cases-eyebrow-dot,
.hp .arcrel-results-dot,
.hp .arcrel-vis__eyebrow-dot {
  display: none;
}

@media (max-width: 520px) {
  .hp .arcrel-results-eyebrow::before,
  .hp .arcrel-cases-eyebrow::before,
  .hp .arcrel-hm-eng__eyebrow::before,
  .hp .arcrel-hm-plat__eyebrow::before,
  .hp .arcrel-hm-inc__eyebrow::before,
  .hp .arcrel-hm-support__eyebrow::before,
  .hp .arcrel-hm-faq__eyebrow::before,
  .hp .arcrel-lv-eyebrow::before,
  .hp .arcrel-results-eyebrow::after,
  .hp .arcrel-cases-eyebrow::after,
  .hp .arcrel-hm-eng__eyebrow::after,
  .hp .arcrel-hm-plat__eyebrow::after,
  .hp .arcrel-hm-inc__eyebrow::after,
  .hp .arcrel-hm-support__eyebrow::after,
  .hp .arcrel-hm-faq__eyebrow::after,
  .hp .arcrel-lv-eyebrow::after,
  .hp .arcrel-rv__eyebrow::after,
  .hp .arcrel-hiw__eyebrow::before,
  .hp .arcrel-work__eyebrow::before,
  .hp .arcrel-vis__eyebrow::before,
  .hp .arcrel-agent__eyebrow::before,
  .hp .arcrel-hiw__eyebrow::after,
  .hp .arcrel-work__eyebrow::after,
  .hp .arcrel-vis__eyebrow::after,
  .hp .arcrel-agent__eyebrow::after,
  .hp .arcrel-review-eyebrow::after {
    width: 16px;
  }
}

/* CTA sitting between the metrics and the video testimonials — see the comment
   on the macro. Padded away from the cards above so it reads as its own beat
   rather than as part of the metrics block. */
.arcrel-lv-metrics__cta {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  text-align: center;
}

/* --- Button unification ----------------------------------------------------
   Several buttons come in from inlined fragments with their own look — the
   case cards, the results section, and the two standalone OS landing pages,
   which use un-namespaced .btn-primary / .btn-ghost. Rather than
   editing those fragments (they stay verbatim), they are re-skinned here to the
   site's own button so every CTA on the page reads as one system.

   `.hp` is load-bearing: fragment styles sit in <style> tags in the body and
   would otherwise win on source order.
-------------------------------------------------------------------------- */

.hp .arcrel-cases-footer-cta,
.hp .arcrel-results-cta-btn,
.hp .arcrel-case-cta,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: transparent;
  line-height: 1;
  text-decoration: none;
  color: var(--warm-white);
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* The results section sits on a lighter green-purple gradient, where the
   standard divider border disappears. White is the only edge that reads
   against it. */
.hp .arcrel-results-cta-btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--white);
}

.hp .arcrel-cases-footer-cta:hover,
.hp .arcrel-results-cta-btn:hover,
.hp .arcrel-case-cta:hover,
.btn-primary:hover,
.btn-ghost:hover,
.hp .arcrel-cases-footer-cta:focus-visible,
.hp .arcrel-results-cta-btn:focus-visible,
.hp .arcrel-case-cta:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  color: var(--white);
  border-color: var(--purple-light);
  background: rgba(97, 25, 172, 0.16);
  transform: translateY(-2px);
}

/* --- How it works: primary CTAs --------------------------------------------
   The page arrived with five different primary buttons across its five section
   vocabularies — a flat purple with a double shadow, two different purple
   gradients, a third with an inset highlight, and a green one. Type was already
   unified in typography.css; this brings the fill, border and shadow onto the
   site's own primary, so a CTA reads the same whichever section you meet it in.

   `.hp` is load-bearing here too — these declarations sit in <style> tags in
   the body and would otherwise win on source order.
-------------------------------------------------------------------------- */

.hp .arcrel-hiw__cta,
.hp .arcrel-vis__cta,
.hp .arcrel-review-cta,
.hp .arcrel-agent__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--purple);
  color: var(--white);
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* The closer in the visibility section was the site's only green button. */
.hp .arcrel-vis__cta--closer {
  flex-shrink: 0;
}

.hp .arcrel-hiw__cta:hover,
.hp .arcrel-vis__cta:hover,
.hp .arcrel-vis__cta--closer:hover,
.hp .arcrel-review-cta:hover,
.hp .arcrel-agent__button:hover,
.hp .arcrel-hiw__cta:focus-visible,
.hp .arcrel-vis__cta:focus-visible,
.hp .arcrel-review-cta:focus-visible,
.hp .arcrel-agent__button:focus-visible {
  /* Gap is pinned through hover because the agent button animated it open on
     hover; the arrow slide below is the only movement now, as on the homepage. */
  gap: 0.6em;
  background: var(--purple-glow);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(124, 58, 237, 0.7);
}

/* --- The one button that matters -------------------------------------------
   Every CTA pointing at the contact page gets a light travelling around its
   edge, so the single action worth taking is never ambiguous.

   Selected by href rather than a modifier class on purpose: a new contact CTA
   added anywhere picks this up automatically, and none can be forgotten.

   On the technique — the obvious approach is a conic gradient behind the
   button at z-index -1, and it does not work. A negative z-index child paints
   *above* its parent's own background, so the gradient fans across the button
   face instead of peeking out at the edge.

   The reliable way is to keep the gradient in front and mask everything except
   a ring out of it: two masks, one clipped to the content box and one to the
   border box, composited to exclude the overlap. What survives is the padding
   ring alone. The bloom is then a drop-shadow of that already-masked shape, so
   it follows the ring rather than the rectangle.
-------------------------------------------------------------------------- */

@property --arcrel-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hp .arcrel-lv-btn--primary[href="/contact-us/"],
.hp .arcrel-hiw__cta[href="/contact-us/"],
.hp .arcrel-vis__cta[href="/contact-us/"],
.hp .arcrel-review-cta[href="/contact-us/"],
.hp .arcrel-agent__button[href="/contact-us/"],
.hp .arcrel-ab__cta[href="/contact-us/"] {
  position: relative;
}

.hp .arcrel-lv-btn--primary[href="/contact-us/"]::before,
.hp .arcrel-hiw__cta[href="/contact-us/"]::before,
.hp .arcrel-vis__cta[href="/contact-us/"]::before,
.hp .arcrel-review-cta[href="/contact-us/"]::before,
.hp .arcrel-agent__button[href="/contact-us/"]::before,
.hp .arcrel-ab__cta[href="/contact-us/"]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  /* Ring thickness — this is the band the mask keeps. */
  padding: 2px;
  pointer-events: none;
  /* Most of the sweep is transparent so one bright arc reads as a single point
     of light travelling, not as a spinning pinwheel. */
  background: conic-gradient(
    from var(--arcrel-spin),
    transparent 0deg,
    transparent 210deg,
    rgba(167, 139, 250, 0.5) 280deg,
    #f4efff 322deg,
    rgba(167, 139, 250, 0.5) 350deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.85));
  animation: arcrelSpin 3.2s linear infinite;
}

@keyframes arcrelSpin {
  to {
    --arcrel-spin: 360deg;
  }
}

/* Without @property the angle cannot animate and the arc would sit frozen at
   one rotation. A plain static ring is the better fallback. */
@supports not (background: conic-gradient(from var(--arcrel-spin), red, blue)) {
  .hp .arcrel-lv-btn--primary[href="/contact-us/"]::before,
  .hp .arcrel-hiw__cta[href="/contact-us/"]::before,
  .hp .arcrel-vis__cta[href="/contact-us/"]::before,
  .hp .arcrel-review-cta[href="/contact-us/"]::before,
  .hp .arcrel-agent__button[href="/contact-us/"]::before,
  .hp .arcrel-ab__cta[href="/contact-us/"]::before {
    background: var(--purple-light);
    animation: none;
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp .arcrel-lv-btn--primary[href="/contact-us/"]::before,
  .hp .arcrel-hiw__cta[href="/contact-us/"]::before,
  .hp .arcrel-vis__cta[href="/contact-us/"]::before,
  .hp .arcrel-review-cta[href="/contact-us/"]::before,
  .hp .arcrel-agent__button[href="/contact-us/"]::before,
  .hp .arcrel-ab__cta[href="/contact-us/"]::before {
    animation: none;
  }
}

/* --- "From invisible" scroll reveal ----------------------------------------
   The fragment reveals with translateY(26px) over 0.7s. Per the motion
   guidance a subtle scroll reveal wants 8–16px over 300–400ms — at 26px it
   reads as a slide rather than a fade, and on a section this tall the elements
   visibly travel past each other on the way in.

   Only the distance and timing are touched; the fragment's own trigger logic
   and stagger are left alone.
-------------------------------------------------------------------------- */

.hp .arcrel-results-section [data-reveal] {
  transform: translateY(14px);
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}

.hp .arcrel-results-section [data-reveal].is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hp .arcrel-results-section [data-reveal] {
    transform: none;
    transition: none;
  }
}

/* --- Final CTA: glass card --------------------------------------------------
   The closing CTA sat as loose type on the video with nothing holding it. A
   panel gives the heading and the button a single object to belong to, and
   lets the footage read through rather than being scrimmed flat.

   Real glass needs three things, not just a blur: a translucent fill, a bright
   hairline on the top edge where light would catch, and a shadow beneath to
   lift it off the surface. Blur alone looks like frosted plastic.
-------------------------------------------------------------------------- */

.arcrel-lv-cta__card {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: clamp(16px, 2vw, 24px);
  /* Near-neutral. The previous fill was rgba(38,26,62,.55) — enough violet to
     read as a purple pane sitting on the footage rather than as glass. Glass
     should take its colour from what is behind it, so the tint is now just a
     dark neutral and the video supplies the hue. */
  background: linear-gradient(
    160deg,
    rgba(22, 22, 30, 0.52),
    rgba(10, 10, 16, 0.40)
  );
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 32px 70px -32px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* The specular edge — a short bright line along the top, fading out before the
   corners so it reads as light catching rather than as a drawn border. */
.arcrel-lv-cta__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  margin-inline: 12%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
}

/* Without backdrop-filter the translucent fill would show raw video through
   the text. Fall back to something opaque enough to stay legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .arcrel-lv-cta__card {
    background: rgba(14, 14, 20, 0.92);
  }
}

/* --- About page: deeper, less purple ---------------------------------------
   The base was already #0a0a0f; the colour was coming from .arcrel-ab__aura,
   a large radial purple wash behind the hero. Rather than removing it — the
   animation depends on having something to light — it is pulled down hard and
   the surface underneath is taken deeper than the site black.

   Everything inside references these custom properties, so re-pointing them
   re-themes the section without touching a single component or the fragment.
-------------------------------------------------------------------------- */

.hp .arcrel-ab {
  --bg: #050308;
  --card: #0d0b14;
  --divider: #211f2e;
  background: var(--bg);
}

/* Knocked back from full strength to a hint. The aura still moves and still
   lights the top-right corner; it just no longer tints the whole page. */
.hp .arcrel-ab__aura {
  opacity: 0.32;
}

/* Deepen the scrim to match, so the fade into the body copy lands on the new
   darker base instead of the old one. */
.hp .arcrel-ab__scrim {
  background: radial-gradient(120% 60% at 50% 0%, transparent 30%, #050308 100%);
}