/* ==========================================================================
   ARZN Care — visual system v2 "Horizon"
   --------------------------------------------------------------------------
   The mark is a sun rising over a horizon. That geometry is the design system:
   ray bursts behind the moments that matter, the horizon arc as the spine of
   the process and the seam between bands, and a night-to-day palette where
   deep navy carries the emotional sections and light grounds carry the
   practical ones.

   Loads after arzn.css and overrides it where the two disagree.
   ========================================================================== */

:root {
  /* Night */
  --ink:        #0B1B4D;
  --ink-2:      #12245C;
  --navy:       #1E3A8A;
  --navy-deep:  #142A66;

  /* Horizon */
  --teal:       #00A8B5;
  --teal-deep:  #006D75;
  --teal-glow:  #7FE3EC;

  /* Sun */
  --coral:      #FF7E67;
  --coral-deep: #CC4023;
  --coral-dark: #A83419;

  /* Day */
  --sand:       #FFF7F2;   /* 4% tint of the brand coral */
  --sky:        #EEF4FF;
  --paper:      #FFFFFF;
  --body:       #0F1A33;
  --body-soft:  #46587D;
  --line:       #E2EAF6;

  --r-sm: 10px;  --r-md: 18px;  --r-lg: 28px;
  --r-xl: 36px;  --r-2xl: 48px; --r-pill: 999px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-float: 0 2px 6px rgba(11,27,77,.06), 0 24px 60px -28px rgba(11,27,77,.42);
  --shadow-deep:  0 4px 10px rgba(11,27,77,.10), 0 40px 90px -40px rgba(11,27,77,.55);
}

/* ==========================================================================
   Typography — the scale is the design
   ========================================================================== */

.arzn-display {
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .88;
  font-size: clamp(3.4rem, 11.5vw, 9.5rem);
  margin: 0;
  text-wrap: balance;
}
.arzn-display-sm {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  margin: 0;
}

.arzn-h2-xl,
.arzn-h2-xl .elementor-heading-title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem) !important;
  letter-spacing: -.032em;
  line-height: 1.05;
  font-weight: 800;
}

/* A word set in the accent, used inside a headline */
.arzn-accent { color: var(--coral); }
.arzn-accent-teal { color: var(--teal); }

/* ==========================================================================
   Chips — micro-facts, used everywhere
   ========================================================================== */

.arzn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arzn-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  padding: .62em 1em;
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.arzn-chip img,
.arzn-chip svg { width: 16px; height: 16px; flex: none; }
.arzn-chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  flex: none;
}
.arzn-chip--coral::before { background: var(--coral); }
.arzn-chip--noicon::before { display: none; }

/* On dark grounds */
.arzn-chip--glass {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.arzn-chip--glass::before { background: var(--coral); }

/* The one that matters most */
.arzn-chip--cost {
  background: var(--coral);
  border-color: transparent;
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .72em 1.15em;
}
.arzn-chip--cost::before { background: var(--navy-deep); }

/* ==========================================================================
   Hero
   ========================================================================== */

.arzn-hero2 {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
/* Warm glow at the horizon line */
.arzn-hero2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -14%;
  width: 120%; height: 52%;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(255,126,103,.30) 0%,
              rgba(255,126,103,.10) 45%,
              rgba(255,126,103,0) 72%);
  z-index: 0;
  pointer-events: none;
}
.arzn-hero2 > * { position: relative; z-index: 1; }

.arzn-hero2__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 24px 0;
  text-align: center;
}

.arzn-hero2 .arzn-display { color: #fff; }
.arzn-hero2 .arzn-kicker {
  font-size: clamp(1.05rem, 2.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.72);
  margin: 0 0 .3em;
}

/* The stage where type, cut-out and floating cards overlap */
.arzn-hero2__stage {
  position: relative;
  margin-top: clamp(1.2rem, 3vw, 2.2rem);
  min-height: clamp(300px, 44vw, 560px);
}
.arzn-hero2__word {
  position: relative;
  z-index: 1;
}
.arzn-hero2__cutout {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: clamp(280px, 40vw, 520px);
  z-index: 2;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
  pointer-events: none;
}
.arzn-hero2__cutout img { display: block; width: 100%; height: auto; }

/* Floating cards either side of the cut-out */
.arzn-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: #fff;
  text-align: left;
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.7);
  animation: arzn-bob 7s var(--ease) infinite;
}
.arzn-float__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,126,103,.18);
}
.arzn-float__icon img { width: 21px; height: 21px; }
.arzn-float__label {
  display: block;
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-glow);
  font-weight: 700;
  margin-bottom: 2px;
}
.arzn-float__value {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.arzn-float--l { left: 0;  top: 22%; }
.arzn-float--r { right: 0; top: 44%; animation-delay: -3.5s; }

@keyframes arzn-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
@media (prefers-reduced-motion: reduce) {
  .arzn-float { animation: none; }
}

/* Horizon seam into the next band */
.arzn-seam {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  margin-top: -1px;
}
.arzn-seam svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Marquee — the reassurance strip
   ========================================================================== */

.arzn-marquee {
  background: var(--coral);
  color: var(--navy-deep);
  overflow: hidden;
  padding: .9rem 0;
  border-block: 1px solid rgba(11,27,77,.12);
}
.arzn-marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: arzn-scroll 38s linear infinite;
}
.arzn-marquee__group {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
}
.arzn-marquee span {
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
}
.arzn-marquee span::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy-deep);
  opacity: .55;
}
@keyframes arzn-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .arzn-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ==========================================================================
   Bento grid
   ========================================================================== */

.arzn-bento {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.arzn-bento > * { min-width: 0; }
.arzn-cell {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 260px;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.arzn-cell:hover { transform: translateY(-5px); }

.arzn-cell--7 { grid-column: span 7; }
.arzn-cell--5 { grid-column: span 5; }
.arzn-cell--6 { grid-column: span 6; }
.arzn-cell--4 { grid-column: span 4; }
.arzn-cell--8 { grid-column: span 8; }
.arzn-cell--12 { grid-column: span 12; }
.arzn-cell--tall { min-height: 380px; }

/* Grounds */
.arzn-cell--photo { color: #fff; justify-content: flex-end; min-height: 380px; }
.arzn-cell--photo img.arzn-cell__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.arzn-cell--photo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11,27,77,.10) 0%, rgba(11,27,77,.55) 55%, rgba(11,27,77,.88) 100%);
}
.arzn-cell--navy  { background: var(--ink); color: #fff; }
.arzn-cell--teal  { background: var(--teal-deep); color: #fff; }
.arzn-cell--coral {
  background: linear-gradient(152deg, #FF9478 0%, var(--coral) 45%, #F2624A 100%);
  color: var(--navy-deep);
}
.arzn-cell--paper { background: var(--paper); border: 1px solid var(--line); color: var(--body); }
.arzn-cell--sand  { background: var(--sand); border: 1px solid #F6E3DA; color: var(--body); }
.arzn-cell--sky   { background: var(--sky); border: 1px solid var(--line); color: var(--body); }


.arzn-cell__eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  margin: 0;
}
.arzn-cell--photo .arzn-cell__eyebrow,
.arzn-cell--navy .arzn-cell__eyebrow,
.arzn-cell--teal .arzn-cell__eyebrow { color: var(--teal-glow); opacity: 1; }
.arzn-cell--coral .arzn-cell__eyebrow { color: var(--navy-deep); opacity: .7; }
.arzn-cell--paper .arzn-cell__eyebrow,
.arzn-cell--sand .arzn-cell__eyebrow,
.arzn-cell--sky .arzn-cell__eyebrow { color: var(--teal-deep); opacity: 1; }

.arzn-cell h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0;
  color: inherit;
}
.arzn-cell p {
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0;
  color: inherit;
  opacity: .9;
  max-width: 46ch;
}
.arzn-cell__icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  margin-bottom: .2rem;
}
.arzn-cell--paper .arzn-cell__icon,
.arzn-cell--sand .arzn-cell__icon,
.arzn-cell--sky .arzn-cell__icon { background: rgba(30,58,138,.07); }
.arzn-cell--coral .arzn-cell__icon { background: rgba(11,27,77,.10); }
.arzn-cell__icon img { width: 27px; height: 27px; }

.arzn-cell__spacer { flex: 1 1 auto; }

/* The link that sits at the corner of a cell */
.arzn-cell__go {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  width: fit-content;
}
.arzn-cell__go span {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.arzn-cell__go:hover span { transform: translate(2px, -2px); }
.arzn-cell--photo .arzn-cell__go:hover span,
.arzn-cell--navy .arzn-cell__go:hover span,
.arzn-cell--teal .arzn-cell__go:hover span { background: #fff; color: var(--ink); }
.arzn-cell--paper .arzn-cell__go:hover span,
.arzn-cell--sand .arzn-cell__go:hover span,
.arzn-cell--sky .arzn-cell__go:hover span,
.arzn-cell--coral .arzn-cell__go:hover span { background: var(--ink); color: #fff; border-color: var(--ink); }

/* A big number inside a cell */
.arzn-cell__figure {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
}
.arzn-cell__figure sup {
  font-size: .34em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: .12em;
}

@media (max-width: 1024px) {
  .arzn-cell--7, .arzn-cell--5, .arzn-cell--6, .arzn-cell--8 { grid-column: span 12; }
  .arzn-cell--4 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .arzn-cell--4 { grid-column: span 12; }
  .arzn-cell { min-height: 0; }
  .arzn-cell--photo { min-height: 320px; }
}

/* ==========================================================================
   Stat band
   ========================================================================== */

.arzn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.arzn-stat__num {
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .86;
  color: var(--navy);
  margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums;
}
.arzn-stat__num em {
  font-style: normal;
  color: var(--coral);
}
.arzn-stat__label {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--body-soft);
  margin: 0;
  max-width: 26ch;
}
.arzn-stat__rule {
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--teal);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Process — the horizon timeline
   ========================================================================== */

.arzn-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 74px;
}
/* The arc the steps sit on */
.arzn-track::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 74px;
  background: url("../svg/horizon-deep.svg") center bottom / 100% 100% no-repeat;
  opacity: .55;
  pointer-events: none;
}
.arzn-node { position: relative; text-align: left; }
.arzn-node__dot {
  position: absolute;
  top: -50px; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--sand);
}
.arzn-node:nth-child(1) .arzn-node__dot { top: -26px; }
.arzn-node:nth-child(2) .arzn-node__dot { top: -50px; }
.arzn-node:nth-child(3) .arzn-node__dot { top: -50px; }
.arzn-node:nth-child(4) .arzn-node__dot { top: -26px; }
.arzn-node h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--navy);
  margin: 0 0 .45rem;
}
.arzn-node p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .arzn-track { grid-template-columns: 1fr 1fr; gap: 44px 20px; padding-top: 46px; }
  .arzn-track::before { display: none; }
  .arzn-node__dot { top: -44px !important; }
}
@media (max-width: 560px) {
  .arzn-track { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Eligibility panel
   ========================================================================== */

.arzn-panel {
  background: var(--paper);
  border: 0;   /* the float shadow already separates white paper from sand */
  border-radius: var(--r-2xl);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  box-shadow: var(--shadow-float);
}
.arzn-panel__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.arzn-panel__ring {
  width: 74px; height: 74px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--teal) 0turn, var(--teal) .75turn, var(--line) .75turn, var(--line) 1turn);
  position: relative;
}
.arzn-panel__ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--paper);
}
.arzn-panel__ring b {
  position: relative;
  z-index: 1;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.arzn-panel__head h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 .25rem;
  line-height: 1.15;
}
.arzn-panel__head p {
  font-size: .875rem;
  color: var(--body-soft);
  margin: 0;
}
.arzn-criteria {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.arzn-criteria li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--body);
}
.arzn-criteria li::before {
  content: "";
  width: 22px; height: 22px;
  margin-top: .04em;
  background: var(--teal-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 10.7l4 4 8.8-9.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 10.7l4 4 8.8-9.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px no-repeat;
}
.arzn-sec--ink .arzn-criteria li::before { background: var(--teal-glow); }
.arzn-panel__note {
  background: var(--sand);
  border-radius: var(--r-md);
  padding: 1.05rem 1.2rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--body-soft);
  margin-bottom: 1.4rem;
}
.arzn-panel__note b { color: var(--navy); font-weight: 700; }

/* ==========================================================================
   Coverage map
   ========================================================================== */

.arzn-map {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.arzn-map img { width: 100%; max-width: 420px; height: auto; display: block; }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.arzn-sec { padding: clamp(3.8rem, 8vw, 7rem) 0; }
.arzn-sec--sand  { background: var(--sand); }
.arzn-sec--sky   { background: var(--sky); }
.arzn-sec--ink   { background: var(--ink); color: #fff; }
.arzn-sec--paper { background: var(--paper); }

.arzn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.arzn-wrap--narrow { max-width: 820px; }

.arzn-eyebrow2 {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 1rem;
}
.arzn-sec--ink .arzn-eyebrow2 { color: var(--teal-glow); }

.arzn-lede2 {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--body-soft);
  max-width: 62ch;
  margin: 1rem 0 0;
}
.arzn-sec--ink .arzn-lede2 { color: rgba(255,255,255,.78); }

/* Interior page hero panel: a dark blue plate with white type, so every page
   opens on the same note as the header above it and the closing CTA below. */
.arzn-pagehero {
  border-radius: var(--card-radius);
  padding: clamp(2.4rem, 4.4vw, 4.4rem) clamp(1.8rem, 3.4vw, 3.6rem);
  background: linear-gradient(142deg, var(--ink) 0%, #16295E 56%, var(--navy) 100%);
  color: #fff;
}
/* Elementor renders headings as .elementor-heading-title and colours them by
   class, so naming the element alone is not enough to win. */
.arzn-pagehero .elementor-heading-title,
.arzn-pagehero :is(h1,h2,h3) { color: #fff; }
.arzn-pagehero .arzn-eyebrow2 { color: var(--teal-glow); }
.arzn-pagehero .arzn-lede2    { color: rgba(255,255,255,.82); }
.arzn-pagehero .arzn-costline { color: rgba(255,255,255,.80); }
/* --coral is only 4.16:1 against the gradient's light end and this line is
   13px, so the $0 takes the pale coral the ink sections already use: 7.01:1. */
.arzn-band-mist .arzn-pagehero .arzn-costline em { color: #FFC9AE; }

/* --coral-deep holds 4.5:1 only down to about #F5F8FE, and the sky cards are
   tinted past that at 4.40, so their $0 takes --coral-dark. The band-qualified
   selector wins on weight over the band rule further down this file; the bare
   one catches cards sitting in an unclassed band. */
.arzn-band-mist .arzn-card .arzn-costline em,
.arzn-card .arzn-costline em { color: var(--coral-dark); }
@media (max-width: 767px) {
  .arzn-pagehero { border-radius: var(--r-lg); }
}

.arzn-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .arzn-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Buttons — v2 sizing
   ========================================================================== */

.arzn-btns { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.arzn-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.15rem 1.9rem;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.arzn-btn:hover { transform: translateY(-2px); }
.arzn-btn__arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.22);
  font-size: .8em;
}
.arzn-btn--coral { background: var(--coral-deep); color: #fff; }
.arzn-btn--coral:hover { background: var(--coral-dark); box-shadow: 0 14px 30px -14px rgba(204,64,35,.75); }
.arzn-btn--light { background: #fff; color: var(--ink); }
.arzn-btn--light:hover { background: var(--sand); }
.arzn-btn--light .arzn-btn__arrow { background: rgba(11,27,77,.10); }
.arzn-btn--ghost { background: var(--sky); color: var(--navy); box-shadow: none; }
.arzn-btn--ghost:hover { background: var(--navy); color: #fff; }
.arzn-btn--ghost .arzn-btn__arrow { background: rgba(30,58,138,.12); }
.arzn-btn--ghost:hover .arzn-btn__arrow { background: rgba(255,255,255,.22); }
.arzn-btn--glass {
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.arzn-btn--glass:hover { background: #fff; color: var(--ink); box-shadow: none; }

/* ==========================================================================
   Closing CTA — sunrise
   ========================================================================== */

.arzn-cta2 {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* Solid ink. The glow and the heart both came off - this closing panel reads
   better flat, and it is the only full-bleed colour field on the page. */
.arzn-cta2 h2 { color: #fff; }
.arzn-cta2 .arzn-lede2 { color: rgba(255,255,255,.82); margin-inline: auto; }
.arzn-cta2 .arzn-btns { justify-content: center; }

/* ==========================================================================
   Reveal on scroll — one restrained motion, not scattered effects
   ========================================================================== */

/* Scoped to .arzn-js, which the script adds to <html> before observing. If the
   script never runs, the start state is never applied and the content is
   simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .arzn-js .arzn-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .arzn-js .arzn-reveal.is-in { opacity: 1; transform: none; }
}

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

/* Coral at partial opacity over navy turns muddy maroon. Screen blending keeps
   the rays reading as light instead of paint. */
.arzn-hero2::before {
  mix-blend-mode: screen;
  opacity: .5;
  width: min(1180px, 108%);
  bottom: 12%;
}

/* Let the cut-out dissolve into the horizon rather than stopping on a hard
   edge at the seam. */
.arzn-hero2__cutout img {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,0) 99%);
}

.arzn-hero2__stage { min-height: clamp(280px, 40vw, 500px); }

/* CTA row under the stage, sitting on the seam */
.arzn-hero2__actions {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
  margin-top: -.6rem;
}

@media (max-width: 780px) {
  .arzn-hero2__cutout { width: min(72vw, 320px); }
  .arzn-float { padding: .7rem .85rem; gap: .6rem; }
  .arzn-float__icon { width: 32px; height: 32px; }
  .arzn-float__value { font-size: .8125rem; }
  .arzn-float--l { left: -6px; top: 8%; }
  .arzn-float--r { right: -6px; top: 34%; }
}
@media (max-width: 520px) {
  .arzn-float--r { display: none; }
  .arzn-float--l { left: 50%; transform: translateX(-50%); top: -6px; }
  .arzn-hero2__stage { min-height: 340px; }
}

/* --------------------------------------------------------------------------
   Hero, second pass
   -------------------------------------------------------------------------- */

/* Element opacity was mixing the screened rays back down into the navy and
   turning them mauve. Let the SVG's own per-ray opacity do the dimming and
   keep the blend at full strength. */
.arzn-hero2::before {
  opacity: 1;
  mix-blend-mode: screen;
  bottom: 16%;
  width: min(1040px, 96%);
}

/* Drop the cut-out so the headline's letterforms stay readable above her
   head — the overlap should crop the word, not swallow a letter. */
.arzn-hero2__cutout {
  width: clamp(260px, 34vw, 430px);
  bottom: -2%;
}

/* Give the word a touch of depth so it separates from the ray field. */
.arzn-hero2__word { text-shadow: 0 18px 50px rgba(0,0,0,.35); }


/* --------------------------------------------------------------------------
   Specificity corrections
   -------------------------------------------------------------------------- */

/* `.arzn-cell p` (0,1,1) was outranking `.arzn-cell__figure` (0,1,0), so the
   display figure rendered at body size. Match the weight. */
.arzn-cell p.arzn-cell__figure {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .92;
  opacity: 1;
  margin: 0;
  max-width: none;
}

/* A card placed inside .arzn-split must not carry bento column spans — the
   split is a 2-column grid, so `span 12` blew the layout apart. */
/* Borderless frosted panel. The brand heart runs behind it, so the blur has
   something real to work on and the panel reads as glass over the mark rather
   than as an outlined box. Same treatment family as the bento photo cards. */
.arzn-split > .arzn-card2 {
  grid-column: auto;
  /* A teal-to-coral wash across the glass gives the panel its own graphic
     without adding another object to the composition. */
  background:
    radial-gradient(125% 95% at 4% 0%, rgba(0,168,181,.22), transparent 58%),
    radial-gradient(95% 85% at 100% 100%, rgba(255,126,103,.15), transparent 62%),
    rgba(255,255,255,.055);
  border: 0;
  border-radius: 26px;
  padding: clamp(1.7rem, 2.8vw, 2.4rem);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Without the blur the heart would read straight through the panel. */
  .arzn-split > .arzn-card2 {
    background:
      radial-gradient(125% 95% at 4% 0%, rgba(0,168,181,.22), transparent 58%),
      radial-gradient(95% 85% at 100% 100%, rgba(255,126,103,.15), transparent 62%),
      rgb(20,38,94);
  }
}
.arzn-sec--ink .arzn-card2 .arzn-cell__eyebrow { color: var(--teal-glow); }

/* The decorative burst inside a bento cell was peeking past the corner. */
.arzn-cell--rays::before {
  right: -18%;
  bottom: -50%;
  width: 90%;
  opacity: .22;
  mix-blend-mode: screen;
}

/* Step dots were landing on the headings. Give the text room and pull the
   dots fully above it. */
.arzn-track { padding-top: 96px; }
.arzn-node__dot { box-shadow: 0 0 0 7px var(--sand); }
.arzn-node:nth-child(1) .arzn-node__dot,
.arzn-node:nth-child(4) .arzn-node__dot { top: -44px; }
.arzn-node:nth-child(2) .arzn-node__dot,
.arzn-node:nth-child(3) .arzn-node__dot { top: -68px; }
.arzn-track::before { top: 14px; height: 74px; }

/* --------------------------------------------------------------------------
   Closing CTA corrections
   -------------------------------------------------------------------------- */

/* --teal-deep is only 2.19:1 on ink; this ground needs the light teal. */
.arzn-cta2 .arzn-eyebrow2 { color: var(--teal-glow); }

/* Sit the CTA content above the sun. */
.arzn-cta2 .arzn-wrap { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Accent words — contrast by ground
   --------------------------------------------------------------------------
   Brand coral and teal are bright enough to carry a headline on the ink
   ground (6.6:1 and better), but on the light grounds they land at 2.35:1 and
   2.73:1 against a 3:1 bar for display text. Deepen them there only, so the
   dark sections keep the full-strength brand colour.
   -------------------------------------------------------------------------- */

:root {
  --coral-on-light: #EA5638;  /* 3.37:1 on sand, 3.57:1 on white */
  --teal-on-light:  #008C97;  /* 3.82:1 on sand, 4.04:1 on white */
}

.arzn-sec--sand  .arzn-accent,
.arzn-sec--sky   .arzn-accent,
.arzn-sec--paper .arzn-accent,
.arzn-cell--sand .arzn-accent,
.arzn-cell--sky  .arzn-accent,
.arzn-cell--paper .arzn-accent { color: var(--coral-on-light); }

.arzn-sec--sand  .arzn-accent-teal,
.arzn-sec--sky   .arzn-accent-teal,
.arzn-sec--paper .arzn-accent-teal,
.arzn-cell--sand .arzn-accent-teal,
.arzn-cell--sky  .arzn-accent-teal,
.arzn-cell--paper .arzn-accent-teal { color: var(--teal-on-light); }

/* The stat figure highlight sits on sand too. */
.arzn-sec--sand .arzn-stat__num em { color: var(--coral-on-light); }

/* --------------------------------------------------------------------------
   Hero on small screens
   --------------------------------------------------------------------------
   The floating cards are a desktop device. At phone width they land on top of
   the headline, and the facts they carry are already in the chip row, so they
   come out entirely rather than being shrunk into illegibility.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .arzn-float { display: none; }

  .arzn-hero2__inner { padding-top: clamp(2rem, 6vw, 3rem); }

  /* Keep the chips on one or two tight rows instead of three full-width pills. */
  .arzn-hero2 .arzn-chips { gap: 7px; }
  .arzn-hero2 .arzn-chip {
    font-size: .72rem;
    padding: .55em .8em;
    white-space: normal;
  }
  .arzn-hero2 .arzn-chip--cost { font-size: .7rem; letter-spacing: .04em; }

  .arzn-hero2 .arzn-kicker { font-size: 1.05rem; margin-bottom: .1em; }

  /* Two clean lines rather than an awkward wrap behind the cut-out. */
  .arzn-hero2 .arzn-display { font-size: clamp(2.9rem, 13vw, 4.6rem); line-height: .94; }

  .arzn-hero2__stage { min-height: 0; margin-top: 1rem; }
  .arzn-hero2__cutout {
    position: static;
    transform: none;
    width: min(70vw, 300px);
    margin: -.4rem auto 0;
    filter: drop-shadow(0 24px 36px rgba(0,0,0,.42));
  }
  .arzn-hero2__actions { margin-top: 0; }
  .arzn-hero2__actions .arzn-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 460px) {
  .arzn-hero2 .arzn-display { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .arzn-hero2__cutout { width: min(66vw, 250px); }
  .arzn-hero2__actions .arzn-btn { width: 100%; }
}

/* ==========================================================================
   HERO v3 — photography and type, nothing else
   --------------------------------------------------------------------------
   The ray burst, radial glow and floating cards are gone. What carries the
   hero now is the headline at full scale and one honest photograph of a
   clinician, a parent and a child in the same room. The only shape is a soft
   arch around the picture, which echoes the sunrise in the mark without
   drawing itself on top of the page.
   ========================================================================== */

.arzn-hero3 {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
/* No pseudo-element decoration: the v2 burst and glow are explicitly off. */
.arzn-hero3::before,
.arzn-hero3::after { content: none; }

.arzn-hero3__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.6rem, 5.5vw, 4.6rem) 24px clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* ---- copy ---- */
.arzn-hero3__copy { position: relative; z-index: 2; }

.arzn-hero3__badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--coral);
  color: var(--navy-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  padding: .7em 1.1em;
  border-radius: var(--r-pill);
  margin: 0 0 1.6rem;
}
.arzn-hero3__badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy-deep);
}

.arzn-hero3__kicker {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: rgba(255,255,255,.66);
  margin: 0 0 .12em;
  line-height: 1.1;
}

.arzn-hero3 h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .86;
  /* Deliberately allowed to run past the copy column and over the picture. */
  font-size: clamp(3.6rem, 8.6vw, 7.6rem);
  margin: 0;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.arzn-hero3__support {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,.74);
  max-width: 42ch;
  margin: 1.6rem 0 0;
}

.arzn-hero3__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}
/* Secondary action is a text link, not a second heavy pill. */
.arzn-hero3__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid rgba(255,255,255,.34);
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.arzn-hero3__link:hover { border-bottom-color: var(--coral); gap: .8rem; color: #fff; }

/* ---- picture ---- */
.arzn-hero3__media {
  position: relative;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}
/* One flat offset shape behind the photograph. No gradient, no shadow. */
.arzn-hero3__media::before {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  border-radius: 250px 250px 22px 22px;
  background: #16295F;
  z-index: 0;
}
.arzn-hero3__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 62% 30%;
  border-radius: 250px 250px 22px 22px;
}

/* A very shallow seam — the hero should settle into the next band, not be
   sliced off it. */
.arzn-hero3 .arzn-seam { height: clamp(18px, 2.2vw, 34px); }

@media (max-width: 1080px) {
  .arzn-hero3 h1 { white-space: normal; font-size: clamp(3.2rem, 8vw, 5.4rem); }
}
@media (max-width: 900px) {
  .arzn-hero3__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding-top: clamp(2rem, 6vw, 3rem);
  }
  .arzn-hero3__media { justify-self: stretch; max-width: 440px; margin-inline: auto; }
  .arzn-hero3__media::before { inset: 18px -18px -18px 18px; }
  .arzn-hero3 h1 { font-size: clamp(3rem, 12vw, 4.4rem); }
  .arzn-hero3__support { max-width: none; }
}
@media (max-width: 480px) {
  .arzn-hero3__actions { gap: 1.1rem; }
  .arzn-hero3__actions .arzn-btn { width: 100%; justify-content: center; }
  .arzn-hero3__media { max-width: 330px; }
  .arzn-hero3__media img { border-radius: 170px 170px 18px 18px; }
  .arzn-hero3__media::before { border-radius: 170px 170px 18px 18px; }
}

/* --------------------------------------------------------------------------
   Header — weight the composition left instead of spacing it evenly
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .arzn-header .arzn-header-row > .arzn-logo-col { --width: auto; width: auto; flex: 0 0 auto; }
  .arzn-header .arzn-header-row > .arzn-nav-col  { --width: auto; width: auto; flex: 0 0 auto; margin-right: auto; }
  .arzn-header .arzn-header-row > .arzn-phone-col { --width: auto; width: auto; flex: 0 0 auto; }
  .arzn-header .arzn-header-row > .arzn-header-cta { --width: auto; width: auto; flex: 0 0 auto; }
  .arzn-header .arzn-header-row { gap: 28px; }
  .arzn-header .arzn-nav-col { align-items: flex-start; }
  .arzn-header .arzn-nav .elementor-nav-menu > li > a { padding: .5rem .7rem; }
}

/* Hero v3 — vertical rhythm. The copy column was centring against a very tall
   picture and leaving a well of dead navy above the badge. */
.arzn-hero3__inner {
  padding-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
  gap: clamp(1.5rem, 3.5vw, 2.6rem);
}
.arzn-hero3__media { max-width: 500px; }
.arzn-hero3__media img { aspect-ratio: 1 / 1.12; }
.arzn-hero3__badge { margin-bottom: 1.3rem; }
.arzn-hero3__support { margin-top: 1.35rem; }
.arzn-hero3__actions { margin-top: 1.9rem; }

/* The <picture> wrapper must not break the arch or the aspect ratio. */
.arzn-hero3__media picture { display: block; }
@media (max-width: 900px) {
  .arzn-hero3__media img { aspect-ratio: 1 / 1.16; object-position: 56% 22%; }
}

/* ==========================================================================
   HEADER v3 — a white bar floating inside a navy band
   --------------------------------------------------------------------------
   The band takes the hero's ink colour, so on the homepage the two meet with
   no seam and the white bar reads as floating on it. On interior pages the
   same band sits above a light hero and still reads deliberately.
   ========================================================================== */

.arzn-header {
  background: var(--ink);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: clamp(12px, 1.6vw, 20px);
}

.arzn-header .arzn-header-row {
  background: #fff;
  border-radius: 20px;
  padding: 11px 14px 11px 24px !important;
  /* One hairline instead of a shadow — the bar should sit, not hover. */
  box-shadow: inset 0 0 0 1px rgba(11,27,77,.06);
}

.arzn-header .arzn-logo img { max-width: 158px; }

.arzn-header .arzn-nav .elementor-nav-menu > li > a {
  font-size: .9375rem;
  font-weight: 600;
  padding: .55rem .78rem;
  border-radius: 10px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.arzn-header .arzn-nav .elementor-nav-menu > li > a:hover {
  background: var(--sky);
  color: var(--navy);
}
.arzn-header .arzn-nav .elementor-nav-menu .current-menu-item > a { color: var(--teal-deep); }

.arzn-header .arzn-header-phone {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--navy);
}

.arzn-header .arzn-header-cta .elementor-button {
  padding: .92rem 1.5rem;
  font-size: .8125rem;
  letter-spacing: .05em;
  border-radius: 13px;
}

/* Sticky: the band keeps the ink colour, so the white bar stays legible over
   any section it passes. */
.arzn-header { position: sticky; top: 0; z-index: 100; }

@media (max-width: 1024px) {
  .arzn-header { padding-block: 10px; }
  .arzn-header .arzn-header-row {
    border-radius: 16px;
    padding: 9px 12px 9px 16px !important;
  }
  .arzn-header .arzn-logo img { max-width: 132px; }
}
@media (max-width: 400px) {
  .arzn-header .arzn-logo img { max-width: 118px; }
}

/* --------------------------------------------------------------------------
   Hero note — plain text, not a badge
   --------------------------------------------------------------------------
   The pill version read as stock landing-page furniture. This says the same
   thing as a line of writing, with the number carrying the accent.
   -------------------------------------------------------------------------- */

.arzn-hero3__note {
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
  letter-spacing: -.005em;
  margin: 0 0 1.15rem;
}
.arzn-hero3__note em {
  font-style: normal;
  font-weight: 800;
  color: var(--coral);
  letter-spacing: -.02em;
}

/* The lockup is stacked (mark over wordmark over tagline), so its width drives
   the bar's height. Size it down on small screens rather than letting the bar
   grow to 90px. */
@media (max-width: 1024px) {
  .arzn-header .arzn-logo img { max-width: 112px; }
  .arzn-header .arzn-header-row { padding: 8px 10px 8px 14px !important; }
}
@media (max-width: 400px) {
  .arzn-header .arzn-logo img { max-width: 98px; }
  .arzn-header .arzn-header-row { border-radius: 14px; }
}

/* ==========================================================================
   HEADER + HERO v4 — one composition
   --------------------------------------------------------------------------
   The floating white bar is gone. The header now sits on the page ground with
   no container of its own, and the hero is an inset rounded card beneath it.
   Header and hero share the same gutter, so they read as one piece of
   art direction rather than two stacked components.
   ========================================================================== */

:root {
  --page-gutter: clamp(12px, 1.5vw, 22px);
  --card-radius: clamp(22px, 2.4vw, 34px);
}

/* ---- header ---- */

.arzn-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-block: clamp(14px, 1.6vw, 22px);
}
.arzn-header .arzn-header-row {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 clamp(10px, 1.2vw, 20px) !important;
}

.arzn-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  line-height: 1;
}
.arzn-brand img { width: 40px; height: auto; display: block; }
.arzn-brand__name {
  font-family: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
  white-space: nowrap;
}

.arzn-header .arzn-nav .elementor-nav-menu > li > a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--body);
  padding: .5rem .82rem;
  border-radius: 0;
  background: none;
  letter-spacing: -.005em;
}
.arzn-header .arzn-nav .elementor-nav-menu > li > a:hover,
.arzn-header .arzn-nav .elementor-nav-menu .current-menu-item > a {
  background: none;
  color: var(--navy);
}

.arzn-head-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  justify-content: flex-end;
}
.arzn-head-ghost,
.arzn-head-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  padding: .82rem 1.35rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.arzn-head-ghost {
  color: var(--navy);
  background: var(--sky);
  box-shadow: none;
}
/* Hover fills with navy, so the label has to turn white with it. */
.arzn-head-ghost:hover { background: var(--navy); color: #fff; }
.arzn-head-cta { background: var(--coral-deep); color: #fff; }
.arzn-head-cta:hover { background: var(--coral-dark); color: #fff; }

/* ---- hero as an inset card ---- */

.arzn-hero3 {
  background: transparent;
  padding: 0 var(--page-gutter);
  overflow: visible;
}
.arzn-hero3__inner {
  background: var(--ink);
  border-radius: var(--card-radius);
  max-width: none;
  overflow: hidden;
  padding: clamp(2.4rem, 4.2vw, 4rem) clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: center;
}
/* The card corners already do this work; the seam and the offset shape behind
   the picture are both redundant now. */
.arzn-hero3 .arzn-seam { display: none; }
.arzn-hero3__media::before { content: none; }

.arzn-hero3__media { max-width: 470px; }

/* ---- editorial eyebrow ---- */

.arzn-hero3__note {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
  margin: 0 0 1.5rem;
}
.arzn-hero3__note::before {
  content: "";
  width: 30px; height: 1.5px;
  background: var(--coral);
  flex: none;
}
.arzn-hero3__note em {
  font-style: normal;
  font-weight: 800;
  color: var(--coral);
  letter-spacing: .12em;
}

/* ---- the fact row that follows, quietened ---- */

.arzn-marquee {
  background: transparent;
  border: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) var(--page-gutter);
}
.arzn-marquee__track { animation: none; width: auto; }
.arzn-marquee__group:nth-child(2) { display: none; }
.arzn-marquee__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem 2.1rem;
  padding: 0;
  max-width: 1180px;
  margin: 0 auto;
}
.arzn-marquee span {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--body-soft);
  gap: 2.1rem;
}
.arzn-marquee span::after { background: var(--coral); opacity: 1; width: 5px; height: 5px; }
.arzn-marquee span:last-child::after { display: none; }

@media (max-width: 1024px) {
  .arzn-header .arzn-header-row > .arzn-actions-col { display: flex; }
  .arzn-head-ghost { display: none; }
  .arzn-brand__name { font-size: 1.1rem; }
  .arzn-brand img { width: 34px; }
}
@media (max-width: 720px) {
  /* This column used to hold only the Contact and Get Started buttons, which
     the sticky bottom bar replaces on a phone, so it was hidden outright. The
     burger now lives here too, and hiding the column left phones with no way
     to open the menu at all. The buttons are still hidden, one level down. */
  .arzn-header .arzn-header-row > .arzn-actions-col { display: flex; }
  .arzn-hero3__inner { padding: 2rem 1.4rem 2.4rem; }
}
@media (max-width: 420px) {
  .arzn-brand__name { font-size: 1rem; }
  .arzn-brand img { width: 30px; }
}

/* Header proportions: brand sits left, nav floats in the space between, the
   two actions anchor the right. The nav should not crowd the wordmark. */
@media (min-width: 1025px) {
  .arzn-header .arzn-header-row > .arzn-logo-col {
    --width: auto; width: auto; flex: 0 0 auto; margin-right: 0;
  }
  .arzn-header .arzn-header-row > .arzn-nav-col {
    --width: auto; width: auto; flex: 1 1 auto; margin: 0;
    align-items: center;
  }
  .arzn-header .arzn-header-row > .arzn-actions-col {
    --width: auto; width: auto; flex: 0 0 auto;
  }
  .arzn-header .arzn-header-row { gap: 40px; }
}

/* This block existed to force an outline past Elementor's
   `.elementor a { box-shadow: none }` (0,1,1). The outline is gone now, so it
   carries the fill instead - still qualified, because the hover background has
   to outrank the same reset. */
.arzn-header a.arzn-head-ghost {
  background: var(--sky);
  box-shadow: none;
}
.arzn-header a.arzn-head-ghost:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: none;
}

/* The eyebrow was a flex container, which made the <em> around "$0" its own
   flex item — so on narrow screens the text wrapped and the figure stranded
   itself in a second column. Block flow keeps it one sentence. */
.arzn-hero3__note {
  display: block;
  line-height: 1.7;
}
.arzn-hero3__note::before {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 1.5px;
  margin: -2px .8rem 0 0;
}
.arzn-hero3__note em { white-space: nowrap; }

/* ==========================================================================
   HERO v5 — the picture becomes part of the card
   --------------------------------------------------------------------------
   Previously the photograph sat as a square pinned to the right edge with a
   well of flat navy between it and the headline. Now it fills the right side
   of the card top to bottom, bleeds into three of the card's own corners, and
   carries one organic edge on the side that faces the type. The navy behind
   it gets a shallow tonal lift so the ground has depth without ornament.
   ========================================================================== */

.arzn-hero3__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: stretch;
  padding: 0;
  gap: 0;
  /* A very low-contrast lift toward the picture side. Not a gradient effect —
     it stops the large navy field reading as flat card stock. */
  background:
    radial-gradient(115% 85% at 84% 42%, #16295F 0%, rgba(22,41,95,0) 60%),
    var(--ink);
}

.arzn-hero3__copy {
  align-self: center;
  padding: clamp(2.6rem, 4.4vw, 4.4rem) 0 clamp(2.6rem, 4.4vw, 4.4rem)
           clamp(1.8rem, 3.4vw, 3.6rem);
  z-index: 3;
}

.arzn-hero3__media {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  max-width: none;
  margin: 0;
  min-height: clamp(400px, 42vw, 580px);
  /* Organic on the side that meets the type; square where the card crops it. */
  border-radius: 260px 0 0 150px;
  overflow: hidden;
  z-index: 1;
}
.arzn-hero3__media picture,
.arzn-hero3__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.arzn-hero3__media img {
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 54% 26%;
  border-radius: 0;
}
/* The picture dissolves into the navy on its left edge instead of butting up
   against it, which is what made it read as a separate object. It also keeps
   the headline legible where the two overlap. */
.arzn-hero3__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(101deg,
    var(--ink) 0%,
    rgba(11,27,77,.82) 9%,
    rgba(11,27,77,.34) 20%,
    rgba(11,27,77,0) 36%);
  pointer-events: none;
}

/* The headline runs further across the picture now. */
.arzn-hero3 h1 { z-index: 3; }

@media (max-width: 1080px) {
  .arzn-hero3__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
  .arzn-hero3__media { border-radius: 190px 0 0 110px; }
}

/* Below the split, the picture returns to a contained shape under the copy. */
@media (max-width: 900px) {
  .arzn-hero3__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: clamp(2rem, 6vw, 3rem) clamp(1.4rem, 4vw, 2rem) clamp(1.6rem, 4vw, 2.2rem);
    background:
      radial-gradient(120% 60% at 50% 100%, #16295F 0%, rgba(22,41,95,0) 62%),
      var(--ink);
  }
  .arzn-hero3__copy { padding: 0; }
  .arzn-hero3__media {
    min-height: 0;
    border-radius: 170px 170px 20px 20px;
    max-width: 420px;
    margin-inline: auto;
    justify-self: center;
  }
  .arzn-hero3__media picture,
  .arzn-hero3__media img { position: static; }
  .arzn-hero3__media img { aspect-ratio: 1 / 1.1; object-position: 56% 22%; }
  .arzn-hero3__media::after { content: none; }
}

/* Guard: never let the contained mobile picture exceed its column. */
@media (max-width: 900px) {
  .arzn-hero3__media { max-width: min(420px, 100%); }
}

/* ==========================================================================
   HERO v6 — two panels, after the Golden Path reference
   --------------------------------------------------------------------------
   A light copy panel and a tinted image panel sit side by side inside the
   page gutter, both rounded, with a small gap between them. The palette is
   ARZN's: navy type, coral accent and action, sky and warm-white grounds.
   ========================================================================== */

.arzn-hero4 {
  padding: 0 var(--page-gutter) clamp(.6rem, 1.2vw, 1rem);
  background: transparent;
}
.arzn-hero4__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(10px, 1.1vw, 16px);
  align-items: stretch;
}

/* ---- copy panel ---- */

.arzn-hero4__copy {
  border-radius: var(--card-radius);
  padding: clamp(2rem, 3.6vw, 3.4rem) clamp(1.6rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(142deg, #EEF4FF 0%, #FBFCFF 46%, #FFF4EE 100%);
}

.arzn-hero4__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--body-soft);
  line-height: 1.7;
  margin: 0 0 1.35rem;
}
.arzn-hero4__eyebrow em {
  font-style: normal;
  font-weight: 800;
  color: var(--coral-on-light);
  white-space: nowrap;
}

.arzn-hero4__kicker {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--body-soft);
  line-height: 1.05;
  margin: 0 0 .06em;
}
.arzn-hero4__title {
  font-size: clamp(2.9rem, 5.4vw, 4.9rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--navy);
  margin: 0;
}

.arzn-hero4__support {
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: var(--body-soft);
  max-width: 44ch;
  margin: 1.25rem 0 0;
}

/* ---- the locator ---- */

.arzn-locate { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }
.arzn-locate__label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
  margin-bottom: .55rem;
}
.arzn-locate__label::before { content: "* "; color: var(--coral-on-light); }

.arzn-locate__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid rgba(30,58,138,.14);
  border-radius: var(--r-pill);
  padding: .42rem .42rem .42rem 1.25rem;
  max-width: 430px;
  transition: border-color .2s var(--ease);
}
.arzn-locate__field:focus-within { border-color: var(--teal); }
.arzn-locate__field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--body);
  padding: .72rem 0;
}
.arzn-locate__field input::placeholder { color: #97A6C2; }
.arzn-locate__field button {
  flex: none;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--coral-deep);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.arzn-locate__field button:hover { background: var(--coral-dark); transform: translateX(2px); }

.arzn-hero4__alt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(30,58,138,.22);
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.arzn-hero4__alt:hover { border-bottom-color: var(--coral); gap: .75rem; }

/* ---- image panel ---- */

.arzn-hero4__media {
  position: relative;
  border-radius: var(--card-radius);
  background: #E4EEF9;
  overflow: hidden;
  min-height: clamp(360px, 40vw, 545px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* One soft shape behind the subject, as in the reference. */
.arzn-hero4__media::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 88%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #D3E4F5;
}
.arzn-hero4__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 1000px) {
  .arzn-hero4__grid { grid-template-columns: 1fr; }
  .arzn-hero4__media { min-height: 340px; order: 2; }
  .arzn-hero4__copy { order: 1; }
  .arzn-hero4__support { max-width: none; }
}
@media (max-width: 480px) {
  .arzn-hero4__media { min-height: 290px; }
  .arzn-locate__field { padding-left: 1rem; }
}

/* The cut-out was filling the panel edge to edge, clipping both subjects and
   burying the shape behind them. Sit it inside the panel instead. */
.arzn-hero4__media img {
  width: 88%;
  max-width: 560px;
  margin-inline: auto;
}
.arzn-hero4__media::before {
  width: 74%;
  bottom: -22%;
  background: #D6E6F6;
}
@media (max-width: 1000px) {
  .arzn-hero4__media img { width: 78%; max-width: 430px; }
}
@media (max-width: 480px) {
  .arzn-hero4__media img { width: 92%; }
  .arzn-hero4__media::before { width: 86%; }
}

/* --------------------------------------------------------------------------
   Small-text contrast on the light hero panel
   --------------------------------------------------------------------------
   --coral-on-light was tuned for display type against a 3:1 bar. The eyebrow
   is 11.5px, so it needs 4.5:1 and lands at 3.23:1 on the panel's darkest
   stop. A deeper coral for small text only; the headline accent is unchanged.
   -------------------------------------------------------------------------- */

:root { --coral-small: #C63D21; }   /* 4.65:1 on #EEF4FF, 5.13:1 on white */

.arzn-hero4__eyebrow em { color: var(--coral-small); }
.arzn-locate__label::before { color: var(--coral-small); }

/* The placeholder was 2.46:1. There is a real <label> above the field so it is
   supplementary text, but it should still be readable. */
.arzn-locate__field input::placeholder { color: #647694; }

/* inline-flex made the arrow its own flex item, so on a wrap the text broke to
   a second line and the arrow stranded on the first. Inline keeps them one
   run of text. */
.arzn-hero4__alt {
  display: inline;
  border-bottom: 0;
  background-image: linear-gradient(rgba(30,58,138,.22), rgba(30,58,138,.22));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding-bottom: 2px;
  transition: background-image .2s var(--ease);
}
.arzn-hero4__alt:hover {
  background-image: linear-gradient(var(--coral), var(--coral));
}
.arzn-hero4__alt span { margin-left: .35rem; }

/* ==========================================================================
   HERO v7 — panel balance, CTA, fact chips
   ========================================================================== */

/* ---- copy fills its panel ---- */

.arzn-hero4__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.arzn-hero4__copy { padding: clamp(2.2rem, 4vw, 4rem) clamp(1.8rem, 3.4vw, 3.6rem); }
.arzn-hero4__title { font-size: clamp(2.9rem, 5.9vw, 5.4rem); }
.arzn-hero4__support { max-width: 52ch; }

.arzn-hero4__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(1.6rem, 2.8vw, 2.3rem);
}

/* ---- picture fills its panel ---- */

.arzn-hero4__media { min-height: clamp(380px, 43vw, 580px); }
.arzn-hero4__media img {
  width: 100%;
  max-width: none;
  object-position: bottom center;
}
.arzn-hero4__media::before { width: 84%; bottom: -20%; }

/* ==========================================================================
   Fact chips — the row under the hero
   ========================================================================== */

.arzn-facts {
  padding: clamp(1.5rem, 2.6vw, 2.3rem) var(--page-gutter) clamp(.5rem, 1vw, 1rem);
}
.arzn-facts__row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.arzn-fact {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: .82rem 1.3rem;
  /* Same pill radius as the CTA buttons. */
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.arzn-fact--sky    { background: #DAE7FF; color: #1B3578; }  /* 9.23:1 */
.arzn-fact--coral  { background: #FFDACB; color: #A8321A; }  /* 5.15:1 */
.arzn-fact--teal   { background: #CCEBEE; color: #005C64; }  /* 6.15:1 */
.arzn-fact--sand   { background: #FFE4C9; color: #7E4310; }  /* 6.37:1 */
.arzn-fact--indigo { background: #DDDFF8; color: #343A8C; }  /* 7.50:1 */
.arzn-fact--mint   { background: #D3EBDD; color: #1A613B; }  /* 5.93:1 */

@media (max-width: 640px) {
  .arzn-fact {
    font-size: .75rem;
    padding: .7rem 1rem;
    white-space: normal;
  }
  .arzn-facts__row { gap: .45rem; }
}

@media (max-width: 1000px) {
  .arzn-hero4__media img { width: 92%; margin-inline: auto; }
}
@media (max-width: 480px) {
  .arzn-hero4__actions { gap: 1rem; }
  .arzn-hero4__actions .arzn-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Hero stacking — must come after the v7 two-column rule
   --------------------------------------------------------------------------
   The `1fr 1fr` declaration above is unconditioned, so at equal specificity it
   was beating the earlier max-width:1000px rule and the panels stayed side by
   side on phones. Re-declare the stack last.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .arzn-hero4__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .arzn-hero4__copy  { order: 1; }
  .arzn-hero4__media { order: 2; min-height: 340px; }
  .arzn-hero4__title { font-size: clamp(2.9rem, 11vw, 4.4rem); }
  .arzn-hero4__support { max-width: none; }
}

@media (max-width: 480px) {
  .arzn-hero4__copy { padding: 1.9rem 1.4rem 2.1rem; }
  .arzn-hero4__title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .arzn-hero4__eyebrow { font-size: .66rem; letter-spacing: .13em; }
  .arzn-hero4__media { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Hero alignment
   --------------------------------------------------------------------------
   The header, fact chips and every section below sit in a 1180px column at
   left 130 on a 1440 viewport. The hero was running to the page gutter at
   1397px, so nothing lined up down the left edge. Match the same column.
   -------------------------------------------------------------------------- */

.arzn-hero4 { padding-inline: 24px; }
.arzn-hero4__grid {
  max-width: 1180px;
  margin-inline: auto;
}
.arzn-facts { padding-inline: 24px; }

/* --------------------------------------------------------------------------
   Image panel — bigger subject, wordmark behind instead of the circle
   -------------------------------------------------------------------------- */

/* The soft circle comes out; the word takes its place. */
.arzn-hero4__media::before { content: none; }

.arzn-hero4__bgword {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: #CBDEF2;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* Bigger subject: overflow the panel width a little and sit it on the base. */
.arzn-hero4__media {
  min-height: clamp(400px, 44vw, 585px);
  align-items: flex-end;
}
.arzn-hero4__media img {
  position: relative;
  z-index: 1;
  width: 116%;
  max-width: none;
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 1000px) {
  .arzn-hero4__media img { width: 100%; }
  .arzn-hero4__bgword { font-size: clamp(2rem, 8vw, 3.4rem); top: 6%; }
}
@media (max-width: 480px) {
  .arzn-hero4__media img { width: 110%; }
  .arzn-hero4__bgword { font-size: 1.9rem; }
}

/* The word only works as a layer if the subject crosses it. Drop it so their
   heads break the baseline, and give it a little more presence. */
.arzn-hero4__bgword {
  top: 13%;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  color: #C3D9EF;
}
@media (max-width: 1000px) {
  .arzn-hero4__bgword { top: 9%; font-size: clamp(2.1rem, 8.5vw, 3.6rem); }
}

/* Mobile: the panel was taller than the subject needed, leaving a band of
   empty tint between the word and their heads. Close it up. */
@media (max-width: 1000px) {
  .arzn-hero4__media { min-height: 0; padding-top: clamp(58px, 14vw, 92px); }
  .arzn-hero4__media img { width: 108%; }
  .arzn-hero4__bgword { top: 6%; }
}
@media (max-width: 480px) {
  .arzn-hero4__media { padding-top: 54px; }
  .arzn-hero4__media img { width: 112%; }
  .arzn-hero4__bgword { top: 5%; font-size: 1.95rem; }
}

/* --------------------------------------------------------------------------
   The heart behind the photograph
   --------------------------------------------------------------------------
   Lifted from the brand mark itself rather than drawn fresh, so the shape in
   the hero is the same one in the logo. Sits low-contrast on the panel tint
   with the subjects crossing it.
   -------------------------------------------------------------------------- */

.arzn-hero4__bgword { display: none; }

.arzn-hero4__bgheart {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1000px) {
  .arzn-hero4__bgheart { width: 54%; top: 5%; }
}
@media (max-width: 480px) {
  .arzn-hero4__bgheart { width: 62%; top: 4%; }
}

/* The heart is inline SVG so its stroke can be drawn on. Sized here rather than
   in the earlier block because `.arzn-hero4__media img` no longer applies to
   it, but this still has to beat the plain class above. */
.arzn-hero4__media .arzn-hero4__bgheart {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 340px;
  height: auto;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
/* .arzn-heartline is the mask stroke, not artwork - its width and colour are
   set on the element so the mask covers the full thickness of the real path. */
@media (max-width: 1000px) {
  .arzn-hero4__media .arzn-hero4__bgheart { width: 52%; max-width: 240px; top: 5%; }
}
@media (max-width: 480px) {
  .arzn-hero4__media .arzn-hero4__bgheart { width: 58%; max-width: 190px; top: 4%; }
}

/* ==========================================================================
   Fact chips — full-bleed single-line marquee
   --------------------------------------------------------------------------
   Three identical sets sit end to end and the track translates by exactly one
   set's width, so the loop is seamless at any viewport. Only the first set is
   exposed to assistive tech; the copies are decorative repetition.
   ========================================================================== */

.arzn-facts {
  padding-inline: 0;
  padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
}
.arzn-facts__viewport {
  overflow: hidden;
  /* Fade the chips into the page edges rather than cutting them dead. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.arzn-facts__track {
  display: flex;
  width: max-content;
  animation: arzn-chip-scroll 46s linear infinite;
}
.arzn-facts__set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0 .3rem 0 0;
  list-style: none;
}
/* One set forward, then reset — with three sets the seam is never visible. */
@keyframes arzn-chip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

.arzn-facts__track:hover { animation-play-state: paused; }

.arzn-fact { white-space: nowrap; flex: none; }

/* No motion: hold it still and let the row be scrolled by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .arzn-facts__track { animation: none; }
  .arzn-facts__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .arzn-facts__set:not(:first-child) { display: none; }
  .arzn-facts__set { padding-inline: 24px; }
}

@media (max-width: 640px) {
  .arzn-fact { font-size: .75rem; padding: .7rem 1.05rem; white-space: nowrap; }
  .arzn-facts__set { gap: .45rem; }
  .arzn-facts__track { animation-duration: 34s; }
}

/* ==========================================================================
   Fact bar — icon and label, hairline dividers
   --------------------------------------------------------------------------
   Replaces the chip marquee. Static, no fills, sits in the same 1180 column
   as the header and every section below it.
   ========================================================================== */

.arzn-factbar {
  padding: clamp(1.6rem, 2.8vw, 2.4rem) 24px clamp(.4rem, 1vw, .9rem);
}
.arzn-factbar__row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1.6rem;
}
.arzn-factbar__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .2rem 1.4rem;
  border-left: 1px solid var(--line);
}
/* Only the first item of each row loses its divider. */
.arzn-factbar__item:nth-child(5n + 1) {
  border-left: 0;
  padding-left: 0;
}
.arzn-factbar__item:nth-child(5n) { padding-right: 0; }

.arzn-factbar__item img {
  width: 26px;
  height: 26px;
  flex: none;
  opacity: .9;
}
.arzn-factbar__item span {
  font-size: .845rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.004em;
  color: var(--navy);
  text-wrap: balance;
}

/* --- three across --- */
@media (max-width: 1080px) {
  .arzn-factbar__row { grid-template-columns: repeat(3, 1fr); }
  .arzn-factbar__item { border-left: 1px solid var(--line); padding-left: 1.4rem; padding-right: 1.4rem; }
  .arzn-factbar__item:nth-child(5n + 1) { border-left: 1px solid var(--line); padding-left: 1.4rem; }
  .arzn-factbar__item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .arzn-factbar__item:nth-child(3n) { padding-right: 0; }
}

/* --- two across --- */
@media (max-width: 720px) {
  .arzn-factbar__row { grid-template-columns: repeat(2, 1fr); row-gap: 1.3rem; }
  .arzn-factbar__item { padding-inline: 1.1rem; border-left: 1px solid var(--line); }
  .arzn-factbar__item:nth-child(3n + 1),
  .arzn-factbar__item:nth-child(5n + 1) { border-left: 1px solid var(--line); padding-left: 1.1rem; }
  .arzn-factbar__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .arzn-factbar__item:nth-child(2n) { padding-right: 0; }
  .arzn-factbar__item img { width: 23px; height: 23px; }
  .arzn-factbar__item span { font-size: .8rem; }
}

@media (max-width: 400px) {
  .arzn-factbar__item { gap: .6rem; padding-inline: .8rem; }
  .arzn-factbar__item:nth-child(2n + 1) { padding-left: 0; }
  .arzn-factbar__item span { font-size: .765rem; line-height: 1.3; }
}

/* --------------------------------------------------------------------------
   Fact bar — symmetric breathing room
   --------------------------------------------------------------------------
   The gap above the bar was 54px and below it 14px, because the hero card was
   contributing its own bottom padding on top of the bar's. Zero the hero's
   and let the bar own both gaps, so they stay equal at every width.
   -------------------------------------------------------------------------- */

.arzn-hero4 { padding-bottom: 0; }
.arzn-factbar {
  padding-top: clamp(2rem, 3.4vw, 3rem);
  padding-bottom: clamp(2rem, 3.4vw, 3rem);
}

/* ==========================================================================
   Stat rings
   --------------------------------------------------------------------------
   A complete ring rather than a partial arc: none of these four figures is a
   percentage of anything, so an arc that stops short would read as a gauge
   and imply a proportion that does not exist.
   ========================================================================== */

.arzn-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.arzn-ring {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid var(--teal);
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  transition: transform .3s var(--ease);
}
.arzn-stat:hover .arzn-ring { transform: translateY(-3px); }

.arzn-ring b {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.arzn-ring b.is-long { font-size: 1.3rem; letter-spacing: -.02em; }

.arzn-ring--coral { border-color: var(--coral); }
.arzn-ring--coral b { color: var(--coral-small); }

/* The old figure treatment is replaced by the ring. */
.arzn-stat__rule { display: none; }
.arzn-stat__num { display: none; }

.arzn-stat__label { max-width: 25ch; }

@media (max-width: 900px) {
  .arzn-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 420px) {
  .arzn-ring { width: 92px; height: 92px; border-width: 2.5px; }
  .arzn-ring b { font-size: 1.4rem; }
  .arzn-ring b.is-long { font-size: 1.15rem; }
}

/* The ring stroke is the only thing distinguishing one stat from the next, so
   it needs to clear the 3:1 non-text contrast bar. Brand teal and coral sit at
   2.73 and 2.35 on the sand ground; these are the nearest values that pass. */
.arzn-ring { border-color: #009AA6; }               /* 3.21:1 on sand */
.arzn-ring--coral { border-color: #EA5638; }        /* 3.37:1 on sand */

/* ==========================================================================
   Welcome — bento with figures set on the photography
   --------------------------------------------------------------------------
   Replaces the copy-plus-rings layout. The four figures now live on the cards
   rather than in a separate block, so the section says each thing once.
   ========================================================================== */

.arzn-intro2__head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 3.6vw, 3rem);
  text-align: center;
}
.arzn-intro2__head .arzn-lede2 { margin-inline: auto; }

.arzn-b2grid {
  display: grid;
  grid-template-columns: 1fr 1.28fr 1fr;
  gap: 18px;
  min-height: clamp(520px, 56vw, 680px);
}
.arzn-b2col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.arzn-b2 {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ---- tinted cards ---- */
.arzn-b2--tint-sky,
.arzn-b2--tint-sand {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  justify-content: center;
  gap: .6rem;
}
.arzn-b2--tint-sky  { background: #E4EDFB; }
.arzn-b2--tint-sand { background: #FBE9DC; }

.arzn-b2__icon { width: 30px; height: 30px; opacity: .85; margin-bottom: .35rem; }
.arzn-b2--tint-sky h3,
.arzn-b2--tint-sand h3 {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--navy);
  margin: 0;
}
.arzn-b2--tint-sky p,
.arzn-b2--tint-sand p {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--body-soft);
  margin: 0;
}

/* ---- photo cards ---- */
.arzn-b2--photo { justify-content: space-between; color: #fff; }
.arzn-b2__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Frosted band rather than a flat navy wash: the photograph itself is blurred
   and dimmed behind the type, so each card keeps its own colour and depth
   instead of going uniformly blue.
   The MASK stops are in PIXELS, not percentages.  These cards range from 363px
   to 680px tall, and a percentage stop puts the same line of text at a totally
   different density in each one; a fixed ramp frosts the same physical band in
   every card. */
.arzn-b2--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11,27,77,.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(.50);
          backdrop-filter: blur(24px) saturate(1.3) brightness(.50);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 128px, rgba(0,0,0,.62) 190px, rgba(0,0,0,.30) 250px, rgba(0,0,0,.10) 295px, transparent 340px);
          mask-image: linear-gradient(to top, #000 0, #000 128px, rgba(0,0,0,.62) 190px, rgba(0,0,0,.30) 250px, rgba(0,0,0,.10) 295px, transparent 340px);
}
.arzn-b2__head,
.arzn-b2__foot { padding: clamp(1.3rem, 2vw, 1.8rem); }
/* Only the tall card carries head type, so the top frost rides on the head
   itself rather than the card.  The short cards then keep a clear photograph at
   the top instead of being frosted end to end for a band they never needed. */
.arzn-b2__head { padding-bottom: 3.2rem; position: relative; }
.arzn-b2--photo .arzn-b2__head::before {
  content: "";
  position: absolute;
  /* Runs 90px past the head box so the fade has somewhere to go.  Ending it at
     the head's own edge left ~12px to travel from .42 to transparent, which
     reads as a hard seam across the photograph. */
  inset: 0 0 -90px 0;
  z-index: -1;
  background: rgba(11,27,77,.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(.50);
          backdrop-filter: blur(24px) saturate(1.3) brightness(.50);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 118px, rgba(0,0,0,.58) 165px, rgba(0,0,0,.26) 210px, transparent 254px);
          mask-image: linear-gradient(to bottom, #000 0, #000 118px, rgba(0,0,0,.58) 165px, rgba(0,0,0,.26) 210px, transparent 254px);
}
/* Where backdrop-filter is unavailable the tint alone will not carry white
   type, so fall back to the opaque ramp that does. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .arzn-b2--photo::after {
    background: linear-gradient(to top,
      rgba(11,27,77,.90) 0, rgba(11,27,77,.70) 130px,
      rgba(11,27,77,.18) 255px, rgba(11,27,77,0) 340px);
    -webkit-mask-image: none; mask-image: none;
  }
  .arzn-b2--photo .arzn-b2__head::before {
    background: linear-gradient(to bottom,
      rgba(11,27,77,.86) 0%, rgba(11,27,77,.70) 70%, rgba(11,27,77,0) 100%);
    -webkit-mask-image: none; mask-image: none;
  }
}
.arzn-b2__foot { margin-top: auto; }

.arzn-b2__fig {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0 0 .25rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.arzn-b2__fig--lg { font-size: clamp(2.6rem, 4.6vw, 3.9rem); }
.arzn-b2__figlabel {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 22ch;
}
.arzn-b2--photo h3 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 .4rem;
}
/* This body-copy rule sits at (0,3,1) and was shrinking the figure, which is
   also a <p> in the footer. Exclude it explicitly. */
.arzn-b2--photo .arzn-b2__foot p:not(.arzn-b2__figlabel):not(.arzn-b2__fig) {
  font-size: .875rem;
  line-height: 1.55;
  color: #fff;
  margin: 0;
  max-width: 34ch;
}

.arzn-intro2__cta { justify-content: center; margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .arzn-b2grid {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .arzn-b2col:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .arzn-b2col:nth-child(2) .arzn-b2 { min-height: 420px; }
  .arzn-b2col .arzn-b2 { flex: 1 1 auto !important; min-height: 230px; }
  .arzn-b2col .arzn-b2--tint-sky,
  .arzn-b2col .arzn-b2--tint-sand { min-height: 0; }
}
@media (max-width: 640px) {
  .arzn-b2--photo::after {
    -webkit-mask-image: linear-gradient(to top, #000 0, #000 118px, rgba(0,0,0,.60) 158px, rgba(0,0,0,.28) 200px, rgba(0,0,0,.09) 235px, transparent 270px);
            mask-image: linear-gradient(to top, #000 0, #000 118px, rgba(0,0,0,.60) 158px, rgba(0,0,0,.28) 200px, rgba(0,0,0,.09) 235px, transparent 270px);
  }
  .arzn-b2--photo .arzn-b2__head::before {
    inset: 0 0 -56px 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 112px, rgba(0,0,0,.58) 150px, rgba(0,0,0,.24) 185px, transparent 215px);
            mask-image: linear-gradient(to bottom, #000 0, #000 112px, rgba(0,0,0,.58) 150px, rgba(0,0,0,.24) 185px, transparent 215px);
  }
  .arzn-b2grid { grid-template-columns: 1fr; gap: 14px; }
  .arzn-b2col { gap: 14px; }
  .arzn-b2col:nth-child(2) .arzn-b2 { min-height: 360px; }
  .arzn-b2col .arzn-b2 { min-height: 260px; }
  .arzn-b2col .arzn-b2--tint-sky,
  .arzn-b2col .arzn-b2--tint-sand { min-height: 0; }
}

/* The ring block is superseded by the figures on these cards. */
/* .arzn-stats markup was removed from build-home-v2.py when the four figures
   moved onto the bento cards.  Ring styles above are kept so the block can be
   restored by re-adding the markup alone. */

/* --------------------------------------------------------------------------
   Cover images inside cards
   --------------------------------------------------------------------------
   Elementor ships `.elementor img { height: auto }` at (0,1,1), which beats a
   single class and collapses any absolutely positioned cover image to zero
   height. Every full-bleed card image in this theme needs a selector that
   outweighs it, so they are collected here rather than fixed one at a time.
   -------------------------------------------------------------------------- */

.arzn-b2 img.arzn-b2__bg,
.arzn-cell img.arzn-cell__bg,
.arzn-hero4__media img,
.arzn-hero3__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* The hero cut-out is contained, not cropped, and sits in flow on its panel. */
.arzn-hero4__media img {
  position: relative;
  inset: auto;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   SERVICES - scroll-assembled cards
   Four cards begin clustered against the right edge and travel into a single
   row, one at a time, scrubbed to scroll position.  No photography here: the
   icon and the type carry each card.

   --t is one card's progress, 0 (parked at the right) to 1 (in place).  It
   rests at 1, so with JS blocked, unsupported, or reduced-motion honoured the
   row is simply correct and static; the script only ever lowers it.
   ========================================================================== */
.arzn-svc {
  /* clip rather than hidden: no scroll container is created, and overflow-y
     stays visible so nothing else on the page is affected. */
  overflow-x: clip;
}
.arzn-svc__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.arzn-svc__card {
  --t: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.5rem, 2.1vw, 1.95rem);
  border-radius: 24px;
  min-height: clamp(296px, 25vw, 352px);
  transform: translate3d(calc((1 - var(--t)) * var(--dx, 0px)),
                         calc((1 - var(--t)) * var(--dy, 0px)), 0);
  opacity: calc(.18 + .82 * var(--t));
}
.arzn-js .arzn-svc__card { will-change: transform; }
.arzn-svc__card:nth-child(odd)  { background: var(--sky); }
.arzn-svc__card:nth-child(even) { background: var(--sand); }

/* Line icons ship with a baked-in stroke colour, so they are painted through
   a mask rather than shipping a recoloured copy of each one. */
.arzn-svc__icon {
  width: clamp(52px, 4.8vw, 68px);
  height: clamp(52px, 4.8vw, 68px);
  margin-bottom: .35rem;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transform: scale(calc(.8 + .2 * var(--t)));
  transform-origin: left center;
}
.arzn-svc__card:nth-child(odd)  .arzn-svc__icon { background: var(--teal-deep); }
.arzn-svc__card:nth-child(even) .arzn-svc__icon { background: var(--coral-on-light); }

.arzn-svc__title {
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.24;
  color: var(--navy);
  margin: 0;
}
.arzn-svc__text {
  font-size: .875rem;
  line-height: 1.56;
  color: var(--body-soft);
  margin: 0;
}
/* .elementor a is (0,1,1) and beats a lone class, so this has to be qualified
   or the underline and colour are silently dropped. */
.arzn-svc a.arzn-svc__go {
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: .28rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.arzn-svc a.arzn-svc__go:hover,
.arzn-svc a.arzn-svc__go:focus-visible { color: var(--coral-on-light); }

@media (max-width: 1000px) {
  .arzn-svc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .arzn-svc__row { grid-template-columns: 1fr; gap: 14px; }
  .arzn-svc__card { min-height: 0; }
}
/* The deal-in motion on its own, for card rows that already have their own
   look. .arzn-svc__card keeps its copy inside its own block because it also
   owns layout, padding and the alternating grounds; this carries movement and
   nothing else, so an .arzn-card keeps every one of its existing styles. */
.arzn-deal__card {
  --t: 1;
  transform: translate3d(calc((1 - var(--t)) * var(--dx, 0px)),
                         calc((1 - var(--t)) * var(--dy, 0px)), 0);
  opacity: calc(.18 + .82 * var(--t));
}
.arzn-js .arzn-deal__card { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .arzn-svc__card,
  .arzn-deal__card { transform: none !important; opacity: 1 !important; }
  .arzn-svc__icon { transform: none !important; }
}

/* ==========================================================================
   Shared replacements for two motifs that were rejected elsewhere but were
   still running on this page: the radial burst, and the pill.
   ========================================================================== */

/* Was a teal ray burst - the same sunburst that came off the hero. The brand
   heart is the motif the page settled on, so this carries it instead. */
.arzn-softmark {
  position: absolute;
  pointer-events: none;
  background: var(--mark) center / contain no-repeat;
}

/* Supporting points as plain type with a small accent, not pills. */
.arzn-meta {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
}
.arzn-meta li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--body);
}
.arzn-meta li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral-on-light);
}
.arzn-sec--ink .arzn-meta li { color: rgba(255,255,255,.86); }
.arzn-sec--ink .arzn-meta li::before { background: var(--coral); }

/* The no-cost line, as editorial type rather than a strap. */
.arzn-costline {
  margin: 1.5rem 0 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
/* --coral-on-light is tuned for 3:1 (large text and non-text). This line is
   13px, so it needs 4.5:1 and takes --coral-deep instead: 4.86:1 on white. */
.arzn-costline em { font-style: normal; font-weight: 800; color: var(--coral-deep); }
.arzn-sec--ink .arzn-costline,
.arzn-cta2 .arzn-costline { color: rgba(255,255,255,.78); }
.arzn-sec--ink .arzn-costline em { color: var(--coral); }
/* The closing CTA sits on a gradient whose lightest point is rgb(114,69,88).
   --coral only reaches 3.11:1 there; this is the tint the CTA eyebrow already
   uses, and it clears 4.5:1 at 5.25:1. */
.arzn-cta2 .arzn-costline em { color: #FFC9AE; }

/* The label sat closer to the first row than the rows sit to each other, which
   read as the list starting mid-sentence. */
.arzn-card2 .arzn-cell__eyebrow { margin-bottom: 1.15rem; }

/* Village Care benefit list. Five identical ticks carried no information; each
   row gets the icon for the thing it names instead, from the existing set. */
.arzn-vlist { list-style: none; margin: 0; padding: 0; display: grid; }
.arzn-vlist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 1rem;
  align-items: center;
  padding: .78rem 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: rgba(255,255,255,.94);
}
.arzn-vlist li:first-child { padding-top: 0; }
.arzn-vlist li:last-child  { padding-bottom: 0; }
.arzn-vlist__icon {
  width: 28px;
  height: 28px;
  background: var(--teal-glow);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* ==========================================================================
   HOW IT WORKS - the rail draws as you scroll and each step lights as it
   is reached.  Built on native Elementor widgets, so everything here hangs
   off classes the client can keep, move or remove in the builder.

   --flow-p is the rail's fill, 0 to 1, written by GSAP on each tick.  It
   rests at 1 so a blocked script leaves the rail drawn and every step lit
   rather than a blank row.
   ========================================================================== */
.arzn-flow .arzn-flow__head { max-width: 700px; }

.arzn-flow__steps {
  --flow-p: 1;
  position: relative;
  counter-reset: flowstep;
  padding-top: 74px;          /* room for the rail and the dots above the type */
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
/* Rail track, then the fill that GSAP scrubs across it. */
/* The rail runs between the first and last dot centres, not to the container
   edges. Those positions are measured in JS because they depend on how many
   steps there are - the client can add or remove one in Elementor. The px
   fallbacks only apply if the script never runs. */
.arzn-flow__steps::before,
.arzn-flow__steps::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--rail-top, 21px);
  left: var(--rail-left, 22px);
  /* An explicit width, not a right inset: the two pseudos were resolving the
     auto width differently and the track over-ran the last dot. */
  width: var(--rail-length, calc(100% - 44px));
  height: 2px;
  border-radius: 2px;
}
/* The track is decorative - the numbered dots carry the sequence, so it is not
   held to 3:1. The fill is the part that reads as progress, so it takes
   --teal-on-light (3.82:1 on sand); plain --teal is only 2.73:1 here. */
.arzn-flow__steps::before { background: rgba(11,27,77,.18); }
.arzn-flow__steps::after {
  background: var(--teal-on-light);
  transform: scaleX(var(--flow-p));
  transform-origin: left center;
}

.arzn-flow__step {
  position: relative;
  counter-increment: flowstep;
}
/* The number is a counter, not a hard-coded digit, so dragging a step to a new
   position in Elementor renumbers the whole row on its own. */
.arzn-flow__step::before {
  content: counter(flowstep);
  position: absolute;
  z-index: 1;          /* dots sit on the rail; ::after would otherwise cover them */
  top: -74px;
  left: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: inset 0 0 0 2px rgba(11,27,77,.15);
  color: var(--body-soft);
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background .45s ease, color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.arzn-flow__step.is-lit::before {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 0 6px 18px -6px rgba(11,27,77,.5);
  color: #fff;
  transform: scale(1.09);
}

.arzn-flow .arzn-flow__title {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}
.arzn-flow .arzn-flow__body {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body-soft);
  margin: 0;
}
/* Content settles as its dot lights. Held back only once the script has taken
   over, so no JS means no hidden copy.

   The reveal is motion only, deliberately.  Dimming the waiting steps looked
   better but a paused scroll leaves that text sitting there as a resting state,
   and the body copy needs opacity .83 just to hold 4.5:1 on sand - at the .32
   this started on it measured 1.64:1.  Nothing here dims text. */
.arzn-js .arzn-flow__step .arzn-flow__title,
.arzn-js .arzn-flow__step .arzn-flow__body {
  transform: translateY(10px);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.arzn-js .arzn-flow__step.is-lit .arzn-flow__title,
.arzn-js .arzn-flow__step.is-lit .arzn-flow__body {
  transform: none;
}
.arzn-js .arzn-flow__step.is-lit .arzn-flow__body { transition-delay: .06s; }

/* Driven by the measured layout, not a breakpoint guess. Elementor wraps its
   own containers at 1024, so a `max-width: 900px` query left 901-1024 drawing a
   horizontal rail across steps that had already stacked. The script sets
   .is-stacked from the steps' real positions, so the rail always matches. */
.arzn-flow__steps.is-stacked { padding-top: 0; padding-left: 62px; }
.arzn-flow__steps.is-stacked::before,
.arzn-flow__steps.is-stacked::after {
  top: var(--rail-top, 22px);
  left: 21px;
  width: 2px;
  height: var(--rail-length, calc(100% - 44px));
  transform-origin: center top;
}
.arzn-flow__steps.is-stacked::after { transform: scaleY(var(--flow-p)); }
.arzn-flow__steps.is-stacked .arzn-flow__step::before { top: 0; left: -62px; }
@media (prefers-reduced-motion: reduce) {
  .arzn-js .arzn-flow__step .arzn-flow__title,
  .arzn-js .arzn-flow__step .arzn-flow__body { transform: none; }
  .arzn-flow__step::before { transition: none; }
}

@media (max-width: 900px) {
  /* Elementor writes the column width inline, so the stack needs to outrank it. */
  .arzn-flow__steps { flex-wrap: wrap !important; }
  .arzn-flow__steps > .arzn-flow__step { width: 100% !important; }
}

/* ==========================================================================
   WHY ARZN - the page's typographic register.
   Everything else here is cards, panels or a rail, and the old version of this
   section was a second set of icon cards a screen below the first. No boxes at
   all this time: a heading that holds while the statements pass it, and the
   statements set large enough to be read as statements.
   ========================================================================== */
.arzn-why2__aside {
  position: sticky;
  top: clamp(88px, 12vh, 132px);
  align-self: start;      /* without this the column stretches and sticky has no travel */
}
.arzn-why2__list { display: flex; flex-direction: column; }

.arzn-why2__item {
  position: relative;
  padding: clamp(1.7rem, 2.6vw, 2.3rem) 0 clamp(1.7rem, 2.6vw, 2.3rem) 68px;
}
.arzn-why2__item + .arzn-why2__item { border-top: 1px solid var(--line); }
.arzn-why2__item:first-child { padding-top: .4rem; }
.arzn-why2__item:last-child  { padding-bottom: .4rem; }

/* The icon travels on the item's own modifier class, so dragging a statement to
   a new position in Elementor takes its icon with it. */
.arzn-why2__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.75rem, 2.6vw, 2.35rem);
  width: 42px;
  height: 42px;
  background: var(--teal-deep);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.arzn-why2__item:first-child::before { top: .5rem; }
.arzn-why2__item--home-care { --icon: url(/wp-content/themes/arzn-care-child/assets/svg/icon-home-care.svg); }
.arzn-why2__item--village   { --icon: url(/wp-content/themes/arzn-care-child/assets/svg/icon-village.svg); }
.arzn-why2__item--guidance  { --icon: url(/wp-content/themes/arzn-care-child/assets/svg/icon-guidance.svg); }
.arzn-why2__item--mobility  { --icon: url(/wp-content/themes/arzn-care-child/assets/svg/icon-mobility.svg); }

.arzn-why2 .arzn-why2__title {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.16;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.arzn-why2 .arzn-why2__body {
  font-size: clamp(.95rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--body-soft);
  margin: 0;
  max-width: 44ch;
}

/* The wipe's start state is applied by the script itself, not from here.
   Keying it to .arzn-js would clip the text whenever that class is present but
   GSAP has not loaded, and clipped text is invisible text. Nothing in this file
   hides a statement. */

@media (max-width: 900px) {
  .arzn-why2__aside { position: static; }
  .arzn-why2__item { padding-left: 58px; }
  .arzn-why2__item::before { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .arzn-why2__item { clip-path: none !important; }
}

/* ==========================================================================
   INTERIOR PAGES - bridge to the homepage system
   --------------------------------------------------------------------------
   The eleven interior pages are built by build-elementor.py from the v1
   component set. Their type, grounds and closing panel were retargeted in the
   builder; these rules bring the remaining v1 components - the card and the
   tick list - onto the homepage's language, so the whole site reads as one
   design without rebuilding every page's markup.
   ========================================================================== */

/* v1 cards were white with a hairline, a lift shadow and a 5px coloured stripe
   across the top. The homepage's cards are flat tinted panels, so these follow:
   alternating sky and sand, generous radius, no border, no stripe, no hover
   lift. */
.arzn-card,
.arzn-card-flat {
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  background: var(--sky);
}
/* Uniform sky, not alternating. Interior sections sit on sand, so every other
   card was a sand card on a sand ground and simply disappeared. */
.arzn-card:hover { transform: none; box-shadow: none !important; }
.arzn-card-nursing,
.arzn-card-personal,
.arzn-card-village { border-top: 0 !important; }

/* A card on a dark band is a translucent lift of the ink, not a light card.
   The band sets color:#fff, but the heading, the body copy and the ghost
   button each declare their own colour and beat that inheritance - all three
   were drawing navy-on-navy at about 1.2:1. They flip here. */
.arzn-sec--ink .arzn-card,
.arzn-band-navy .arzn-card { background: rgba(255,255,255,.07); }

.arzn-sec--ink .arzn-card :is(h1,h2,h3,h4,h5,h6),
.arzn-band-navy .arzn-card :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

.arzn-sec--ink .arzn-card p,
.arzn-band-navy .arzn-card p { color: rgba(255,255,255,.82); }

.arzn-sec--ink .arzn-btn-ghost .elementor-button,
.arzn-band-navy .arzn-btn-ghost .elementor-button {
  background: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: none;
}
.arzn-sec--ink .arzn-btn-ghost .elementor-button:hover,
.arzn-band-navy .arzn-btn-ghost .elementor-button:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

/* The tick list matches the homepage's: a check glyph, not a filled disc. */
.arzn-check .elementor-icon-list-icon {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  width: 22px !important;
  height: 22px !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 10.7l4 4 8.8-9.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 10.7l4 4 8.8-9.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px no-repeat;
  background: var(--teal-deep) !important;
}
.arzn-sec--ink .arzn-check .elementor-icon-list-icon,
.arzn-band-navy .arzn-check .elementor-icon-list-icon { background: var(--teal-glow) !important; }

/* The costline needs its ground-aware colours on interior pages too. */
.arzn-band-mist .arzn-costline em { color: var(--coral-deep); }
.arzn-footer .arzn-costline { color: rgba(255,255,255,.72); margin: 1.35rem 0 0; }
.arzn-footer .arzn-costline em { color: var(--coral); }

/* The tall bento card can carry a clip instead of a still. It sizes exactly
   like the photo it replaces - .arzn-b2__bg already covers the card - and the
   poster is the same image, so with no clip attached nothing changes. */
.arzn-b2 video.arzn-b2__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
}

/* ==========================================================================
   ELEMENTOR EDITOR
   --------------------------------------------------------------------------
   Every animation on this page starts from a hidden or displaced state that
   the scripts then release on scroll. Inside the editor there is no real
   scrolling of the document - the canvas is an iframe - so those states never
   release and whole sections look blank or half-missing while you are editing.

   Nothing here changes the live site. It only forces every animated element to
   its finished state whenever Elementor's editor is active, so what you edit is
   what the visitor ends up seeing.
   ========================================================================== */
.elementor-editor-active .arzn-reveal,
body.elementor-editor-active .arzn-js .arzn-reveal {
  opacity: 1 !important;
  transform: none !important;
}
.elementor-editor-active .arzn-svc__card,
.elementor-editor-active .arzn-deal__card {
  --t: 1 !important;
  transform: none !important;
  opacity: 1 !important;
}
.elementor-editor-active .arzn-svc__icon { transform: none !important; }
.elementor-editor-active .arzn-flow__steps { --flow-p: 1 !important; }
.elementor-editor-active .arzn-flow__step::before {
  background: var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  color: #fff !important;
}
.elementor-editor-active .arzn-flow__title,
.elementor-editor-active .arzn-flow__body { transform: none !important; }
.elementor-editor-active .arzn-why2__item { clip-path: none !important; }
.elementor-editor-active .arzn-heartline {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
/* Sticky inside the editor canvas fights the editor's own scrolling. */
.elementor-editor-active .arzn-why2__aside { position: static !important; }

/* ==========================================================================
   BUTTONS INSIDE AN ELEMENTOR BUTTON WIDGET
   --------------------------------------------------------------------------
   The widget renders <div class="...arzn-btn arzn-btn--coral"><a class=
   "elementor-button">. The v2 classes land on the wrapper, so the wrapper drew
   the pill while the anchor kept Elementor's own default button - a pill inside
   a pill. The v1 buttons in arzn.css already solve this with a paired selector;
   these do the same for the v2 set: neutralise the wrapper, style the anchor.
   Plain <a class="arzn-btn"> in the HTML blocks is untouched.
   ========================================================================== */
.elementor-widget-button.arzn-btn {
  display: inline-block;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  transition: none;
}
.elementor-widget-button.arzn-btn:hover { transform: none; }
.elementor-widget-button.arzn-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.15rem 1.9rem;
  border-radius: var(--r-pill);
  border: 0;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.elementor-widget-button.arzn-btn .elementor-button:hover { transform: translateY(-2px); }
.elementor-widget-button.arzn-btn--coral .elementor-button { background: var(--coral-deep); color: #fff; }
.elementor-widget-button.arzn-btn--coral .elementor-button:hover {
  background: var(--coral-dark); box-shadow: 0 14px 30px -14px rgba(204,64,35,.75);
}
.elementor-widget-button.arzn-btn--glass .elementor-button {
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.elementor-widget-button.arzn-btn--glass .elementor-button:hover {
  background: #fff; color: var(--ink); box-shadow: none;
}
.elementor-widget-button.arzn-btn--light .elementor-button { background: #fff; color: var(--ink); }
.elementor-widget-button.arzn-btn--light .elementor-button:hover { background: var(--sand); }

/* The CTA copy sat inside .arzn-wrap--narrow in the HTML block. As real widgets
   the band is full site width, so the measure has to be restated. */
/* 820px minus the 24px the old .arzn-wrap--narrow carried each side, so the
   lede breaks on the same words it did before. */
.arzn-cta2__inner { max-width: 820px; padding-inline: 24px; margin-inline: auto; text-align: center; }
.arzn-cta2__inner .arzn-h2-xl { max-width: 16ch; margin-inline: auto; }

/* The HTML-block buttons carried a <span class="arzn-btn__arrow"> badge. The
   Elementor button widget renders only its label, so the badge is drawn here
   instead - same 22px disc, same tints per variant. */
.elementor-widget-button.arzn-btn .elementor-button::after {
  content: "\2192";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.22);
  font-size: .8em;
  flex: none;
}
.elementor-widget-button.arzn-btn--light .elementor-button::after { background: rgba(11,27,77,.10); }
.elementor-widget-button.arzn-btn--glass .elementor-button:hover::after { background: rgba(11,27,77,.10); }

/* The interior service cards get the homepage's big masked icon. They already
   carried these modifier classes from the old coloured top-stripes, so the icon
   attaches with no markup change and travels with its own card. */
.arzn-card-nursing::before,
.arzn-card-personal::before,
.arzn-card-village::before,
.arzn-card-guidance::before {
  content: "";
  /* Elementor's container ::before is absolutely positioned for background
     overlays. Left as-is the icon sits on top of the heading instead of above
     it, so it has to opt back into normal flow. */
  position: static;
  inset: auto;
  display: block;
  width: clamp(46px, 4.2vw, 60px);
  height: clamp(46px, 4.2vw, 60px);
  margin-bottom: .9rem;
  background: var(--teal-deep);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.arzn-card-nursing  { --icon: url("../svg/icon-nursing.svg"); }
.arzn-card-personal { --icon: url("../svg/icon-personal.svg"); --iconcolor: var(--coral-on-light); }
.arzn-card-village  { --icon: url("../svg/icon-paid.svg"); }
.arzn-card-guidance { --icon: url("../svg/icon-guidance.svg"); }
.arzn-card-personal::before { background: var(--coral-on-light); }

/* ==========================================================================
   FAQ accordion (v2)

   The markup is plain <details>/<summary>. The v1 rules in arzn.css target
   Elementor's accordion widget classes, which this page never renders, so the
   list was falling back to bare summaries with the browser's own triangle.
   ========================================================================== */

.arzn-faq {
  display: grid;
  gap: 12px;
  max-width: 880px;
  margin-inline: auto;
}

.arzn-faq details {
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,27,77,.05), 0 14px 30px -24px rgba(11,27,77,.45);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.arzn-faq details[open] {
  background: var(--sky);
  box-shadow: 0 2px 4px rgba(11,27,77,.06), 0 26px 50px -30px rgba(11,27,77,.55);
}

.arzn-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.2rem clamp(1.1rem, 2vw, 1.6rem);
  font-size: clamp(1rem, 1.25vw, 1.0625rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  list-style: none;                 /* Firefox */
}
.arzn-faq summary::-webkit-details-marker { display: none; }   /* Safari */
.arzn-faq summary:hover { color: var(--teal-deep); }

/* A plus that turns into a cross. Two bars drawn as gradient layers over a
   disc, so there is no extra markup and no icon file to load. */
.arzn-faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 11px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 11px no-repeat;
  background-color: rgba(30,58,138,.09);
  color: var(--teal-deep);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.arzn-faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--ink);
  color: #fff;
}

/* Group label. Fifteen questions in one undifferentiated stack is a wall;
   these let someone looking for cost skip past eligibility. */
.arzn-faq__group {
  margin: 2.4rem 0 .4rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.arzn-faq__group:first-child { margin-top: 0; }

.arzn-faq__body { padding: 0 clamp(1.1rem, 2vw, 1.6rem) 1.45rem; }
.arzn-faq__body p {
  margin: 0;
  max-width: 70ch;
  line-height: 1.72;
  color: var(--body-soft);
}
.arzn-faq__body p + p { margin-top: .85rem; }
.arzn-faq__body a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.arzn-faq__body a:hover,
.arzn-faq__body a:focus-visible { color: var(--teal-deep); }
/* <details> cannot transition its own height, so the panel fades and lifts
   into place instead of the box snapping open. */
.arzn-faq details[open] .arzn-faq__body {
  animation: arzn-faq-in .3s var(--ease) both;
}
@keyframes arzn-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arzn-faq details[open] .arzn-faq__body { animation: none; }
  .arzn-faq summary::after { transition: none; }
}

/* ==========================================================================
   Intake form (v2)
   ========================================================================== */

.arzn-form-wrap {
  background: var(--paper);
  border: 0;
  border-radius: var(--card-radius);
  padding: clamp(1.8rem, 3.6vw, 3rem);
  box-shadow: 0 2px 6px rgba(11,27,77,.05), 0 34px 70px -40px rgba(11,27,77,.5);
}

.arzn-form { gap: 1.6rem; }
.arzn-field { gap: .45rem; }

.arzn-form input[type="text"],
.arzn-form input[type="email"],
.arzn-form input[type="tel"],
.arzn-form select,
.arzn-form textarea {
  background: #F6F9FE;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: .95rem 1.1rem;
  color: var(--body);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.arzn-form :is(input, select, textarea):focus {
  background: var(--paper);
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 4px rgba(0,109,117,.13);
  outline: none;
}
.arzn-form input::placeholder,
.arzn-form textarea::placeholder { color: #8794AE; }
.arzn-form textarea { min-height: 150px; }

.arzn-form label,
.arzn-form legend {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.arzn-req  { color: var(--coral-dark); }
.arzn-hint { color: var(--body-soft); font-size: .8375rem; margin: 0 0 .45rem; }

/* .arzn-form label sets display:block at (0,2,0) and was beating .arzn-radio's
   display:flex at (0,1,0), which dropped the input out of the flex row and
   left the control sitting on top of its own label. */
.arzn-form label.arzn-radio {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 0;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--body);
  background: #F6F9FE;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.arzn-form label.arzn-radio:hover { background: var(--sky); }
.arzn-form label.arzn-radio:has(input:checked) {
  background: var(--sky);
  border-color: var(--teal-deep);
  box-shadow: none;
  color: var(--ink);
  font-weight: 600;
}
.arzn-radio input { accent-color: var(--teal-deep); margin-top: 0; }
.arzn-radios { gap: .6rem; }

.arzn-submit {
  border-radius: var(--r-pill);
  padding: 1.05rem 2.4rem;
  background: var(--coral-deep);
  box-shadow: 0 10px 26px -14px rgba(204,64,35,.7);
}
.arzn-submit:hover {
  background: var(--coral-dark);
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(204,64,35,.8);
}

.arzn-form-note {
  color: var(--body-soft);
  border-top: 1px solid var(--line);
  margin-top: 1.6rem;
  padding-top: 1.4rem;
}
.arzn-form-errors {
  background: #FFF1EC;
  border: 0;
  border-left: 4px solid var(--coral-deep);
  border-radius: 12px;
  color: #7A2A12;
}
.arzn-form-success {
  background: linear-gradient(150deg, #EAF7F7 0%, var(--sky) 100%);
  border: 0;
  border-radius: var(--card-radius);
}

/* ==========================================================================
   Contact cards
   ========================================================================== */

/* Elementor's container ::before is absolutely positioned for its background
   overlays, so an icon hung off it has to opt back into normal flow. */
.arzn-contact-card::before {
  content: "";
  position: static;
  inset: auto;
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: .35rem;
  background: var(--teal-deep);
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.arzn-contact-card--phone { --icon: url("../svg/icon-phone.svg"); }
.arzn-contact-card--email { --icon: url("../svg/icon-email.svg"); }
.arzn-contact-card--place { --icon: url("../svg/icon-location.svg"); }

/* The heading is a label, not the headline. The number or address is what
   people came for, so the h2 drops to an eyebrow and the value takes the
   display size - otherwise a 40px "Call us" outweighs the number it
   introduces, which is the hierarchy backwards. */
.arzn-contact-card .elementor-heading-title,
.arzn-contact-card :is(h2,h3,h4) {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--teal-deep);
  margin: 0;
}

/* The contact value itself: the thing people came to the page for. */
.arzn-contact-value { margin-top: -.35rem; }
.arzn-contact-value p { margin: 0; }
.arzn-contact-value a {
  display: inline-block;
  font-size: clamp(1.85rem, 3.1vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
/* No underline: hover and keyboard focus are carried by the colour shift.
   Safe here because no link on this site sits inside running text, which is
   the case WCAG 1.4.1 would require a non-colour cue for. */
.arzn-contact-value a:hover,
.arzn-contact-value a:focus-visible { color: var(--teal-deep); }
/* An email is longer than a phone number and has to hold one line. */
.arzn-contact-value--sm a {
  font-size: clamp(1.18rem, 1.85vw, 1.5rem);
  letter-spacing: -.015em;
}
/* A value with no link behind it - "Across Georgia" - reads the same. */
.arzn-contact-value--static p {
  font-size: clamp(1.85rem, 3.1vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--navy);
}
/* The supporting line sits back so the value carries the card. Excluding the
   ink variant here rather than overriding it later: at (0,3,1) this outranks
   the variant's own `p` rule at (0,1,1), and it put dark body text on the dark
   card at 1.46:1. One rule per case, no override chain. */
.arzn-contact-card:not(.arzn-contact-card--ink)
  > .elementor-widget-text-editor:not(.arzn-contact-value) p {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--body-soft);
}
.arzn-contact-card--ink > .elementor-widget-text-editor:not(.arzn-contact-value) p {
  font-size: .9375rem;
  line-height: 1.65;
}

/* Dark variant: the "prefer to talk" panel, where the phone number is the
   whole point of the card. */
.arzn-contact-card--ink {
  background: linear-gradient(150deg, var(--ink) 0%, #16295E 60%, var(--navy) 100%) !important;
}
.arzn-contact-card--ink::before { background: var(--teal-glow); }
.arzn-contact-card--ink .elementor-heading-title,
.arzn-contact-card--ink :is(h1,h2,h3,h4) { color: var(--teal-glow); }
.arzn-contact-card--ink p { color: rgba(255,255,255,.80); }
.arzn-contact-card--ink .arzn-contact-value a { color: #fff; }
.arzn-contact-card--ink .arzn-contact-value a:hover,
.arzn-contact-card--ink .arzn-contact-value a:focus-visible { color: var(--teal-glow); }

/* ==========================================================================
   Footer "Get in touch" list
   ========================================================================== */

.arzn-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .78rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.arzn-footer-contact li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: .7rem;
  margin: 0;
}
.arzn-footer-contact li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: .05em;
  background: var(--teal-glow);
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.arzn-fc--phone { --icon: url("../svg/icon-phone.svg"); }
.arzn-fc--email { --icon: url("../svg/icon-email.svg"); }
.arzn-fc--place { --icon: url("../svg/icon-location.svg"); }
.arzn-fc--area  { --icon: url("../svg/icon-home-care.svg"); }

/* The <li> is a grid, so its children are blockified and a link would stretch
   the full column. Shrink it back to its text. */
.arzn-footer-contact a {
  justify-self: start;
  color: #fff;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.arzn-footer-contact a:hover { color: var(--teal-glow); }
.arzn-fc--phone a { font-weight: 700; font-size: 1.0625rem; }
/* .78 alpha on the footer navy stays above 4.5:1; the old inline opacity:.75
   was applied to the whole line including its link. */
.arzn-fc--place, .arzn-fc--area { color: rgba(255,255,255,.78); }

/* ==========================================================================
   Mobile

   No page overflows horizontally at 375, 414 or 768 - the layout itself was
   sound. What was not sound were pointer targets: WCAG 2.5.8 asks for 24x24
   CSS px on anything that is not a link inside a sentence, and three of ours
   were under that at every width (the logo link at 19, the footer email at 23,
   the email value on a contact card at 21). Those grow everywhere. On touch
   widths they go further, to the 44px a thumb actually needs.
   ========================================================================== */

.arzn-brand { min-height: 32px; }
.arzn-contact-value a { padding-block: .3rem; }
.arzn-svc a.arzn-svc__go { padding-block: .45rem; }
.arzn-hero4__alt { padding-block: .4rem; }
.arzn-footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

@media (max-width: 1024px) {
  .arzn-brand { min-height: 44px; }

  .arzn-footer .elementor-icon-list-item > a { min-height: 44px; align-items: center; }

  /* The row switches from top-aligned to centred so the icon still lines up
     with the label once the link is 44px tall. */
  .arzn-footer-contact li { align-items: center; }
  .arzn-footer-contact li::before { margin-top: 0; }
  .arzn-footer-contact a { min-height: 44px; }

  /* Burger panel rows. Elementor's own padding leaves these short of a
     comfortable tap. */
  .arzn-nav .elementor-nav-menu--dropdown a {
    display: flex;
    align-items: center;
    min-height: 50px;
  }

  .arzn-contact-value a { padding-block: .45rem; }
  .arzn-svc a.arzn-svc__go { padding-block: .6rem; }

  /* The last three that were still short of 44: all cleared 24 already, this
     just takes them to a comfortable thumb size. */
  .arzn-head-cta,
  .arzn-head-ghost { min-height: 44px; }
  .arzn-hero4__alt { min-height: 44px; align-items: center; }
  .arzn-contact-value--sm a { padding-block: .62rem; }
}

@media (max-width: 767px) {
  /* 11px uppercase at .18em tracking is hard work on a phone. */
  .arzn-eyebrow2 { font-size: .75rem; }
  .arzn-footer-legal p { font-size: .84rem; line-height: 1.7; }
  .arzn-footer-label p { font-size: .8125rem; }
}