/* =========================================================
   AJ VENTER & ASSOCIATES
   COMPLETE SITE.CSS
   ========================================================= */

:root {
  --ink: #2E2E30;
  --magenta: #E6005C;
  --pink: #FF4D8D;
  --coral: #FF5E62;
  --orange: #FFA01E;
  --yellow: #F6C945;
  --teal: #00A79D;
  --blue: #2F6DDF;
  --purple: #7B2CBF;
  --green: #2FA56B;
  --off: #F6F4F0;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font: 400 16px/1.55 Lato, sans-serif;
  color: var(--ink);
  background: #fff;
}

[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  container-type: inline-size;
}

.hero-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  filter: brightness(.82) saturate(.95);
}


/* =========================================================
   INTRO LIGHT
   YOUR /public/home/intro IMAGE

   - full upper peaks visible
   - no visible black rectangle
   - 70% transparent
   - bottom may be clipped by hero
   - no animation
   ========================================================= */

.intro-light {
  position: absolute;
  z-index: 4;

  left: 0;
  right: 0;

  bottom: -6px;

  width: 100%;
  height: clamp(175px, 20vw, 290px);

  pointer-events: none;

  background-image: url("https://ajvinc.co.za/wp-content/uploads/2026/10/rainbow-wave.png");
  background-repeat: no-repeat;

  /*
     TOP is deliberately anchored.
     Nothing at the top of the light is cropped.
  */
  background-position: center top;

  background-size: 100% auto;

  /*
     50% transparent.
  */
  opacity: .50;

  /*
     The source artwork has black behind the coloured light.
     SCREEN makes that black disappear visually over the hero
     while preserving the coloured ribbons.
  */
  mix-blend-mode: screen;

  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* =========================================================
   NAVIGATION
   KEEP THE VERSION YOU LIKED
   ========================================================= */

.bar {
  position: fixed;
  z-index: 9999;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  min-height: 96px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 4.5% 16px;

  margin: 0;

  background: rgba(18, 24, 38, .18);

  backdrop-filter: brightness(.88);
  -webkit-backdrop-filter: brightness(.88);

  border: 0;
  border-radius: 0;

  outline: 0;
  box-shadow: none;

  overflow: hidden;
}

.bar::before {
  content: "";

  position: absolute;
  z-index: 1;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 6px;

  background:
    linear-gradient(
      90deg,
      var(--magenta) 0%,
      var(--coral) 15%,
      var(--orange) 29%,
      var(--yellow) 44%,
      var(--teal) 60%,
      var(--blue) 79%,
      var(--purple) 100%
    );
}

.bar > * {
  position: relative;
  z-index: 2;
}

.brand-link {
  flex: none;
  text-decoration: none;
}

.logo {
  width: 190px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}

#menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.65vw, 27px);
}

#menu a {
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(12px, .95vw, 15px);
  border-bottom: 2px solid transparent;
}

#menu a:hover,
#menu a.on {
  border-bottom-color: var(--magenta);
}

#menu a.pill {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
}

#menu a.pill:hover,
#menu a.pill.on {
  border: 0;
  background: var(--magenta);
}

#mbtn {
  display: none;
}


/* =========================================================
   HOME HERO COPY
   ========================================================= */

.hero-copy {
  position: absolute;
  z-index: 20;
  left: 5%;
  top: 22%;
  width: 58%;
}

body:not([data-tab="home"]) .hero-copy {
  display: none;
}

.small {
  margin: 0 0 5px;
  font-size: clamp(10px, .9vw, 14px);
  letter-spacing: .28em;
  font-weight: 700;
}

h1 {
  margin: .15em 0;
  font-size: clamp(2.7rem, 4.5vw, 5rem);
  line-height: 1.05;
  font-weight: 700;
}

.rb {
  background:
    linear-gradient(
      90deg,
      var(--coral),
      var(--orange),
      var(--yellow),
      var(--teal),
      var(--blue),
      var(--purple)
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin: 0 0 1.3rem;
  font-size: clamp(1rem, 1.45vw, 1.5rem);
}


/* =========================================================
   QUOTE
   ========================================================= */

blockquote {
  position: relative;
  width: max-content;
  max-width: 90%;

  margin: 2.8rem 0 0;
  padding: 15px 30px;

  font-style: italic;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1.5;

  border-left: 2px solid var(--magenta);
  border-bottom: 2px solid var(--purple);
  border-radius: 0 0 0 28px;
}

.q {
  position: absolute;
  font: 700 5rem/1 Georgia, serif;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--orange);
}

.q.o {
  left: -7px;
  top: -45px;
}

.q.c {
  right: -50px;
  bottom: -26px;
  -webkit-text-stroke-color: var(--magenta);
}

.by {
  margin: 14px 0 16px;
  font-size: .9rem;
}


/* =========================================================
   NON-HOME HERO HEADINGS
   ========================================================= */

.tabhead {
  position: absolute !important;
  z-index: 30 !important;

  left: 5% !important;
  bottom: 31% !important;

  display: block;
}

body[data-tab="home"] .tabhead {
  display: none !important;
}

.tabhead h1 {
  margin: 0;

  color: #fff !important;
  background: none !important;

  -webkit-text-fill-color: #fff !important;

  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1;
  font-weight: 700;

  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.tabhead h1::after {
  content: "";

  display: block;

  width: 80px;
  height: 4px;

  margin-top: 15px;

  background: var(--magenta);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-block;

  padding: .9em 1.6em;

  border: 0;
  border-radius: 8px;

  background: var(--magenta);
  color: #fff;

  text-decoration: none;

  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .13em;

  cursor: pointer;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.wrap {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 55px 0;
}

.narrow {
  max-width: 700px;
}

.lbl {
  margin: 0 0 .4em;
  color: var(--magenta);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .2em;
}

.lbl.ink {
  color: var(--ink);
}

.lbl.pk {
  color: var(--pink);
}

h2 {
  margin: 0 0 1em;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
}

h2::after {
  content: "";

  display: block;

  width: 80px;
  height: 4px;

  margin-top: 14px;

  background: var(--magenta);
}

h2.wh {
  color: #fff;
}


/* =========================================================
   HOME
   ========================================================= */

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.imgbox {
  position: relative;
  padding-bottom: 50px;
}

.imgbox img {
  width: 100%;
  border-radius: 12px;
}

.box {
  position: absolute;
  left: 6%;
  bottom: 0;

  margin: 0;
  padding: 20px 28px;

  background: var(--ink);
  color: #fff;

  border-radius: 10px;

  font-weight: 700;
}

.lead {
  font-size: 1.2rem;
}

.soft {
  opacity: .72;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.chip {
  display: inline-block;

  padding: .7em 1.3em;

  border-radius: 10px;

  color: #fff;

  font-size: .72rem;
  font-weight: 700;

  white-space: nowrap;
}

.cm {
  background: var(--magenta);
}

.cb {
  background: var(--blue);
}

.ct {
  background: var(--teal);
}

.chip.k {
  background: var(--ink);
}


/* =========================================================
   CARDS
   ========================================================= */

.card,
.panel {
  margin-top: 40px;
  padding: 28px;

  border: 1px solid #e3e0da;
  border-radius: 12px;

  background: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.panel {
  margin: 24px 0;
  background: #fff;
}


/* =========================================================
   BULLETS
   ========================================================= */

.dots {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dots li {
  position: relative;
  padding: 6px 0 6px 28px;
}

.dots li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 14px;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background: var(--c, var(--magenta));
}


/* =========================================================
   STAT TILES
   ========================================================= */

.tiles {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 16px;
}

.t {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 170px;

  padding: 22px;

  border-radius: 12px;

  color: #fff;
}

.t b {
  font-size: 2.4rem;
}

.t span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.t.a {
  grid-column: span 3;
}

.t.c {
  grid-column: span 2;
}

.tm {
  background: var(--magenta);
}

.tb {
  background: var(--blue);
}

.tg {
  background: var(--green);
}

.to {
  background: var(--orange);
  color: var(--ink);
}

.tp {
  background: var(--purple);
}

.langs {
  font-size: 1.2rem;
  font-weight: 700;
}


/* =========================================================
   DARK SECTIONS
   ========================================================= */

.dark {
  position: relative;
  overflow: hidden;

  color: #fff;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,255,255,.08) 0 230px,
      transparent 231px
    ),

    radial-gradient(
      circle at 100% 0,
      transparent 0 290px,
      rgba(255,255,255,.07) 290px 292px,
      transparent 293px
    ),

    radial-gradient(
      circle at 0 100%,
      rgba(255,255,255,.07) 0 190px,
      transparent 191px
    ),

    var(--ink);
}

.dark::before,
.dark::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dark::before {
  left: -110px;
  top: 14%;

  width: 260px;
  height: 260px;

  border: 2px solid rgba(255,255,255,.08);
  border-radius: 56px;

  transform: rotate(24deg);
}

.dark::after {
  right: -90px;
  bottom: 10%;

  width: 240px;
  height: 240px;

  background: rgba(255,255,255,.045);

  border-radius: 70px 20px 70px 20px;

  transform: rotate(-18deg);
}

.dark .wrap {
  position: relative;
  z-index: 1;
}


/* =========================================================
   SERVICE PREVIEW
   ========================================================= */

.pil {
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1.2fr;

  gap: 24px;

  align-items: center;

  margin: 0 0 30px 55px;

  padding: 34px 28px 34px 90px;

  text-decoration: none;

  background: #fff;

  border: 1px solid #e3e0da;
  border-radius: 12px;
  color: var(--ink);
}

.pil img {
  position: absolute;

  left: -55px;
  top: 50%;

  transform: translateY(-50%);

  width: 110px;
  height: 110px;

  border-radius: 10px;

  border: 0;
  object-fit: contain;

  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

.pil h3 {
  margin: 0;
  font-size: 1.25rem;
}

.pil p {
  margin: 0;
  font-size: 1.08rem;
}


/* =========================================================
   AJV WAY
   ========================================================= */

.fig {
  position: relative;
  margin: 0 0 56px;
}

.fig img {
  width: 100%;
  border-radius: 14px;
}

.fig figcaption {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px;

  text-align: center;
  font-weight: 700;

  color: #fff;

  background: rgba(46,46,48,.78);
}

.way {
  display: grid;

  grid-template-columns: 150px 1fr;

  gap: 26px 20px;

  margin: 0 0 40px;
}

.way dt {
  font-weight: 700;
  letter-spacing: .2em;
  font-size: .8rem;
}

.way dd {
  margin: 0;
}


/* =========================================================
   SERVICES
   ========================================================= */

.pa {
  padding: 70px 0;
}

.ph {
  display: flex;
  align-items: center;
  gap: 20px;

  margin-bottom: 28px;
}

.ph img {
  flex: none;

  width: 88px;
  height: 88px;

  border-radius: 10px;

  border: 0;
  object-fit: contain;

  box-shadow:
    0 0 0 3px var(--c),
    0 4px 12px rgba(0,0,0,.25);
}

.ph h2 {
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 56px;

  align-items: start;
}

#litigation .split {
  grid-template-columns: 1.08fr .92fr;
}

.side img {
  width: 100%;
  border-radius: 14px;
}

.tag {
  display: inline-block;

  padding: 18px 25px;

  color: #fff;
  font-weight: 700;

  border-radius: 10px;
}

.tag.under {
  margin-top: 18px;
}

.tag.m {
  background: var(--magenta);
}

.tag.b {
  background: var(--blue);
}

.ocard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: 18px;

  padding: 40px;

  border-radius: 14px;

  background: var(--orange);
  color: var(--ink);
}

.ocard h3 {
  margin: 0;
  font-size: 2rem;
}

.lens {
  color: var(--magenta);
  font-weight: 700;
  font-size: 1.1rem;
}

.rgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 30px;

  margin-top: 32px;
}

.rc {
  padding: 30px;

  border-radius: 12px;

  border-left: 10px solid var(--e);

  background: #fff;

  border-top: 1px solid #e3e0da;
  border-right: 1px solid #e3e0da;
  border-bottom: 1px solid #e3e0da;
  color: var(--ink);
}

.gc {
  padding: 32px;

  border-radius: 12px;

  border-left: 6px solid var(--e);

  background: #fff;
}

.strip {
  margin: 30px 0 0;

  padding: 18px;

  text-align: center;
  font-weight: 700;

  background: #fff;

  border-radius: 12px;
}


/* =========================================================
   ASSURED
   ========================================================= */

.pg {
  padding: 40px 0;
}

.assured-signup-btn {
  display: inline-block;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(46,46,48,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.assured-signup-btn:disabled {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
  transform: none;
}

.assured-signup-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(46,46,48,.24);
}

.assured-signup-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.assured-signup-btn span {
  margin-left: .25em;
}

.assured-signup-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.assured-signup-btn-top {
  margin: 18px 0 24px;
}

.assured-signup-btn-bottom {
  margin-top: 20px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);

  gap: 20px;

  list-style: none;

  max-width: 1180px;
  margin: 0 auto 32px;
  padding: 0;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  text-align: left;
}

.steps li:not(:last-child) {
  padding-right: 12px;
  border-right: 2px solid var(--pink);
}

.steps b {
  flex: none;

  width: 26px;
  height: 26px;

  border-radius: 50%;

  background: var(--orange);
  color: #fff;

  text-align: center;
  line-height: 26px;
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 28px;
}

.plan {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 28px;

  background: #fff;

  border: 1px solid #e3e0da;
  border-left: 8px solid var(--c);

  border-radius: 14px;

  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.plan h3 {
  margin: 0;

  color: var(--c);

  font-size: 1.6rem;
}

.price {
  margin: .2em 0 0;

  font-size: 1.4rem;
  font-weight: 700;

  color: var(--c);
}

.per {
  margin: 0 0 12px;
  font-size: .8rem;
}

.frv {
  display: flex;
  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-height: 46px;
  margin: auto 0 0;

  padding-top: 14px;

  border-top: 1px solid #e3e0da;

  font-weight: 700;
}

.badge {
  position: absolute;

  top: 18px;
  right: 18px;

  padding: 8px 14px;

  border-radius: 8px;

  background: var(--teal);
  color: #fff;

  font-size: .7rem;
  font-weight: 700;
}

.peach {
  margin-bottom: 32px;

  padding: 24px 28px;

  background: #fdeee0;

  border-radius: 14px;
}

.trio {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr;

  gap: 24px;
}

.bx {
  padding: 25px;

  background: #fff;

  border: 1px solid #e3e0da;
  border-left: 8px solid var(--c);

  border-radius: 14px;
}

#assured .why {
  display: block;
}

#assured .why ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

#assured .why ul li {
  display: block;
  margin: 0;
}

#assured .why ul li::before {
  background: var(--teal);
}

#assured .trio > .bx:last-child .lens {
  gap: clamp(10px, 1.5vw, 22px);
}

#assured .trio > .bx:last-child .lens span {
  display: block;
}


/* =========================================================
   PEOPLE
   ========================================================= */

.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 24px;

  margin: 36px 0;
}

.person {
  display: flex;
  align-items: flex-start;

  gap: 20px;

  padding: 24px;

  background: #fff;

  border: 1px solid #e3e0da;
  border-radius: 12px;
}

.av {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  overflow: hidden;
  border-radius: 50%;

  background: var(--magenta);
  color: #fff;

  font-weight: 700;

  text-align: center;
}

.person .av {
  margin-top: 4px;
}

.av-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.person small {
  display: block;

  margin-top: 10px;

  opacity: .7;
}

.person-experience {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 99px;
  background: #fbedf3;
  color: var(--magenta);
  font-size: .8rem;
  font-weight: 700;
}

.team-footnote {
  margin: 14px 0 0;
  font-size: .82rem;
  opacity: .7;
}

.employee-about {
  margin: 9px 0 0;
  font-size: .92rem;
  line-height: 1.55;
  opacity: .85;
}

.employee-about p {
  margin: 0 0 .7em;
}

.employee-about p:last-child {
  margin-bottom: 0;
}

.office {
  padding: 22px 28px;

  background: var(--ink);
  color: #fff;

  border-radius: 12px;

  font-weight: 700;
}

.office span {
  margin-right: 14px;
  color: var(--yellow);
}


/* =========================================================
   PRICING
   ========================================================= */

.sh {
  margin: 36px 0 14px;
}

.rate {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;

  padding: 22px 26px;

  background: #fff;

  border: 1px solid #e3e0da;
  border-left: 8px solid var(--c);

  border-radius: 12px;
}

.rate b {
  color: var(--c);
}

.tw {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 16px;

  text-align: left;

  background: var(--ink);
  color: #fff;
}

td {
  padding: 18px 16px;

  border: 1px solid #e3e0da;
}

tbody tr:nth-child(odd) {
  background: #fff;
}

.fine {
  font-size: .82rem;
  opacity: .8;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-page {
  min-height: 75vh;

  padding: 145px 20px 80px;

  color: #fff;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,255,255,.07) 0 220px,
      transparent 221px
    ),

    radial-gradient(
      circle at 0 100%,
      rgba(255,255,255,.05) 0 180px,
      transparent 181px
    ),

    var(--ink);
}

.newsletter-wrap {
  width: 100%;
  margin: 0 auto;
}

.newsletter-title {
  color: #fff;
}

.newsletter-intro {
  max-width: 700px;

  margin-bottom: 35px;

  font-size: 1.1rem;
}

.newsletter-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 0;
  scrollbar-width: thin;
}

.newsletter-tab {
  flex: 0 0 auto;
  max-width: min(360px, 80vw);
  padding: 13px 22px;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px 10px 0 0;

  background: #fff;
  color: var(--ink);

  font-weight: 700;
  text-align: left;
  white-space: normal;

  cursor: pointer;
}

.newsletter-tab.active {
  background: #fff;
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.newsletter-content {
  width: 100%;
  padding: clamp(25px,4vw,50px);
  background: #fff;
  border: 1px solid #e3e0da;
  border-radius: 0 14px 14px 14px;
}

.newsletter-content [hidden] {
  display: none !important;
}

.newsletter-panel {
  color: var(--ink);
}

.newsletter-panel p {
  line-height: 1.8;
}

.newsletter-entry {
  display: block;
  width: 100%;
  color: var(--ink);
}

.newsletter-entry-copy {
  width: 100%;
  color: var(--ink);
}

.newsletter-entry-copy * {
  color: var(--ink) !important;
}

.newsletter-entry-copy :is(h1, h2, h3) {
  color: var(--magenta) !important;
}

.newsletter-entry-copy .newsletter-date {
  color: rgba(46,46,48,.7) !important;
}

.newsletter-entry-copy > :last-child {
  margin-bottom: 0;
}

.newsletter-body > * {
  max-width: none;
}

.newsletter-body > :is(h1, h2, h3):first-child {
  color: var(--ink);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.25;
}

.newsletter-entry-image img {
  width: 100%;
  max-height: 480px;
  margin-top: 24px;
  border-radius: 10px;
  object-fit: cover;
}

.newsletter-entry-copy h3 {
  margin: 0 0 12px;
  color: var(--pink);
  font-size: 1.5rem;
}

.newsletter-date {
  margin: 0 0 8px;
  color: rgba(46,46,48,.7);
  font-size: .82rem;
}

.newsletter-summary,
.newsletter-body {
  line-height: 1.8;
}

.newsletter-empty {
  margin: 0;
  padding: 28px;
  border: 1px solid #e3e0da;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}

/* =========================================================
   MEET CLIO
   ========================================================= */

.clio-page {
  min-height: 75vh;
  padding: 0 20px 80px;
}

.clio-wrap {
  position: relative;
  width: min(800px,100%);
  margin: 0 auto;
  padding-top: 12px;
}

.clio-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e3e0da;
}

.clio-mark img {
  display: block;
  width: min(136px, 42vw);
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.clio-mark span {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
}

.clio-mark strong {
  margin-top: 4px;
  color: #1769c2;
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .14em;
}

.clio-mark p {
  max-width: 420px;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.clio-opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.08) 0 190px, transparent 191px),
    radial-gradient(circle at 100% 0, transparent 0 245px, rgba(255,255,255,.07) 246px 248px, transparent 249px),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.06) 0 160px, transparent 161px),
    #2b2b2e;
  color: #fff;
  box-shadow: 0 12px 30px rgba(21,42,75,.14);
}

.clio-opening::before,
.clio-opening::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.clio-opening::before {
  left: -110px;
  top: 20%;
  width: 250px;
  height: 250px;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.clio-opening::after {
  right: -12px;
  bottom: -56px;
  width: 210px;
  height: 210px;
  border-radius: 70px 20px 70px 20px;
  background: rgba(255,255,255,.045);
  transform: rotate(-18deg);
}

.clio-copy h2,
.clio-card h2,
.clio-fit h2 {
  margin-top: 0;
  font-size: clamp(1.75rem, 2.1vw, 2rem);
  line-height: 1.15;
}

.clio-copy h2 {
  max-width: 22ch;
  color: #fff;
}

.clio-copy p,
.clio-card p,
.clio-fit p {
  line-height: 1.8;
}

.clio-copy p {
  position: relative;
  max-width: 72ch;
  color: rgba(255,255,255,.88);
}

.clio-copy p strong {
  color: #83bdff;
}

.clio-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin-top: 24px;
}

.clio-card {
  height: 100%;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid #e3e0da;
  border-top: 5px solid var(--magenta);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(24,34,55,.055);
}

.clio-capabilities {
  border-top-color: #2f6ddf;
}

.clio-card > .lbl,
.clio-fit > .lbl {
  color: var(--magenta);
}

.clio-capabilities > .lbl {
  color: #1769c2;
}

.clio-card .dots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
  margin: 18px 0;
  counter-reset: clio-capability;
}

.clio-card .dots li {
  min-height: 38px;
  padding: 6px 0 6px 34px;
  font-size: .92rem;
  line-height: 1.45;
  counter-increment: clio-capability;
}

.clio-card .dots li::before {
  content: counter(clio-capability, decimal-leading-zero);
  top: 5px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: #edf4ff;
  color: #1769c2;
  font-size: .68rem;
  font-weight: 900;
  line-height: 25px;
  text-align: center;
}

.clio-fit {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: clamp(28px, 4vw, 48px);
  border-left: 7px solid #2f6ddf;
  border-radius: 14px;
  background: linear-gradient(125deg, #f5f3ef 0%, #f5f3ef 58%, #edf4ff 100%);
}

.clio-fit > :not(.clio-outcome) {
  position: relative;
}

.clio-fit > .lbl {
  color: #1769c2;
}

.clio-outcome {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(23,105,194,.22);
}

.clio-outcome strong {
  color: #1769c2;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-page {
  padding-top: 145px;
  min-height: 75vh;
}

label {
  display: block;

  margin-bottom: 18px;

  font-weight: 700;
}

.matter-options {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #cfcbc3;
  border-radius: 8px;
}

.matter-options legend {
  padding: 0 6px;
  font-weight: 700;
}

.matter-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-weight: 400;
}

.matter-options input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0;
}

.contact-email-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

input,
select,
textarea {
  display: block;

  width: 100%;

  margin-top: 6px;

  padding: 13px 14px;

  color: var(--ink);

  border: 1px solid #cfcbc3;
  border-radius: 8px;

  background: #fff;
}

textarea {
  resize: vertical;
}

.hp {
  position: absolute;
  left: -9999px;
}


/* =========================================================
   SIGN UP
   ========================================================= */

.signup-page {
  min-height: 80vh;

  padding: 145px 20px 80px;

  background: var(--off);
}

.signup-card {
  width: min(680px,100%);

  margin: 0 auto;

  padding: 45px;

  background: #fff;

  border: 1px solid #e3e0da;
  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0,0,0,.07);
}

.signup-intro {
  margin-bottom: 28px;
  font-size: 1.1rem;
}

.signup-notice {
  margin-bottom: 32px;

  padding: 22px 24px;

  background: var(--ink);
  color: #fff;

  border-left: 6px solid var(--magenta);
  border-radius: 10px;
}

.signup-notice strong {
  color: var(--pink);
  letter-spacing: .12em;
}

.signup-notice p {
  margin: 8px 0 0;
}

.signup-submit {
  width: 100%;
  margin-top: 8px;
}

.signup-error {
  margin: 12px 0;

  color: var(--magenta);

  font-weight: 700;
}



/* =========================================================
   FOOTER — BOTTOM CTA
   Artwork analysed at 1774 × 887 px.

   Layout:
   1) Dark AJV logo + LET'S TALK sit in the transparent/white
      area above the left-hand skyline.
   2) Supplier/contact/registration copy sits only in the
      dense lower colour field of bottom-cta.png.
   3) The white strip below the artwork contains the rainbow
      "Law in full colour." line and the firm name beneath it.
   ========================================================= */

footer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.footer-art {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

/* Keep the supplied artwork at its real 1774:887 proportion. */
.footer-city {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  filter: none;
  opacity: 1;
}

/* No tint: the artwork must stay in full colour. */
.footer-dim {
  display: none !important;
}

.footer-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   LOGO + LET'S TALK
   The left side of the source image remains clear above the
   skyline, so this group is anchored there.
   --------------------------------------------------------- */
.footer-heading {
  position: absolute;
  z-index: 8;
  left: 3.2%;
  top: 7%;
  width: min(31%, 360px);
  margin: 0;
  padding: 0;
}

.footer-logo {
  display: block;
  width: clamp(135px, 11vw, 190px);
  height: auto;
  max-width: 82%;
  margin: 0 0 12px;
  padding: 0;
  object-fit: contain;
  object-position: left center;
}

.footer-talk {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: none;
}

.footer-talk::after {
  display: none;
}

.footer-talk span {
  color: var(--magenta);
}

.talk-line {
  display: block;
  width: 62px;
  height: 3px;
  margin-top: 9px;
  background: var(--magenta);
}

/* ---------------------------------------------------------
   CONTACT COPY
   The source artwork becomes a continuous dense colour field
   in its lower half.  This group is bottom-anchored so every
   line stays below the skyline/white road-line area.
   --------------------------------------------------------- */
.footer-details {
  position: absolute;
  z-index: 9;
  left: 3.2%;
  right: 3.2%;
  bottom: 7.5%;
  margin: 0;
  padding: 0;
  color: #fff;
  pointer-events: auto;
}

.supplier {
  max-width: 980px;
  margin: 0 0 14px;
  padding: 0;
  color: #fff;
  font-size: clamp(10px, .82vw, 13px);
  line-height: 1.35;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.62);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 0;
  margin: 0 0 10px;
  padding: 0;
}

.footer-cols > div {
  min-width: 0;
  margin: 0;
  padding: 0 30px;
}

.footer-cols > div:first-child {
  padding-left: 0;
}

.footer-cols > div:last-child {
  padding-right: 0;
}

.footer-cols > div + div {
  border-left: 1px solid rgba(255,255,255,.72);
}

.footer-label {
  margin: 0 0 6px !important;
  padding: 0;
  color: #fff !important;
  font-size: clamp(9px, .72vw, 12px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .16em;
  text-shadow: 0 1px 4px rgba(0,0,0,.62);
}

.footer-cols p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(9px, .72vw, 12px);
  line-height: 1.42;
  text-shadow: 0 1px 4px rgba(0,0,0,.68);
}

.footer-cols a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-reg {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  color: #fff;
  font-size: clamp(7px, .57vw, 9.5px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .015em;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
}

/* ---------------------------------------------------------
   WHITE END STRIP
   --------------------------------------------------------- */
.footer-end {
  position: relative;
  z-index: 20;
  width: 100%;
  margin: 0;
  padding: 14px 3.2% 16px;
  background: #fff;
  border: 0;
  box-shadow: none;
}

.footer-end p {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  line-height: 1.05;
  font-weight: 700;
}

.footer-end .rb {
  background: linear-gradient(
    90deg,
    var(--coral),
    var(--orange),
    var(--yellow),
    var(--teal),
    var(--blue),
    var(--purple)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-end small {
  display: block;
  margin: 5px 0 0;
  padding: 0;
  color: var(--ink);
  font-size: .66rem;
  line-height: 1.15;
  font-weight: 400;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
}

.footer-socials a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform .18s ease;
}

.footer-socials a:hover {
  transform: translateY(-2px);
}

.footer-socials a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.social-icon {
  display: block;
  width: 27px;
  height: 27px;
}

/* Remove any old decorative footer frame. */
.footer-art::before,
.footer-art::after,
footer::before,
footer::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.privacy-page {
  padding: 40px 0 64px;
  background: var(--off);
}

.privacy-wrap {
  max-width: 980px;
}

.privacy-intro {
  max-width: 65ch;
  font-size: 1.15rem;
}

.privacy-card {
  margin-top: 24px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid #e3e0da;
  border-top: 5px solid var(--magenta);
  border-radius: 14px;
  background: #fff;
  overflow-wrap: anywhere;
}

.privacy-card h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-size: 1.3rem;
}

.privacy-card h3:first-child {
  margin-top: 0;
}

.privacy-card a {
  color: #a80043;
  text-underline-offset: 3px;
}

.footer-privacy {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 0;
  color: var(--ink);
  font-size: .85rem;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .bar {
    min-height: 84px;
    padding: 19px 3% 14px;
  }

  .logo {
    width: 150px;
  }

  #menu {
    gap: 12px;
  }

  #menu a {
    font-size: 11px;
  }

  #menu a.pill {
    padding: 9px 14px;
  }

  .footer-heading {
    top: 4%;
  }

  .footer-details {
    bottom: 4%;
  }
}


/* =========================================================
   MOBILE AND TABLET NAVIGATION
   ========================================================= */

@media (max-width: 1000px) {

  /* HEADER */

  .bar {
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    min-height: 72px;
    height: 72px;

    padding: 16px 18px 12px;

    border-radius: 0;
    overflow: visible;
  }

  .bar::before {
    height: 5px;
  }

  .logo {
    width: 130px;
  }

  #mbtn {
    display: block;

    padding: .55em 1em;

    border: 1px solid #fff;
    border-radius: 999px;

    background: rgba(46,46,48,.65);

    color: #fff;

    font-weight: 700;
  }

  #menu {
    display: none;

    position: absolute;

    top: 100%;
    right: 0;
    left: 0;

    flex-direction: column;
    align-items: stretch;

    gap: 8px;

    padding: 20px;

    background: rgba(46,46,48,.97);

    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #menu.open {
    display: flex;
  }

  #menu a {
    padding: 10px;
    font-size: 1rem;
  }

  #menu a.pill {
    text-align: center;
  }
}

@media (max-width: 700px) {
  /* HERO */

  .hero {
    min-height: 320px;
  }

  .hero-img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: 62% center;
    filter: brightness(.48) saturate(.95);
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 104px 20px 52px;
  }

  /*
     Full top of Intro still visible.
     Bottom is allowed to leave the hero.
  */

  .intro-light {
    bottom: -35px;

    height: 145px;

    background-position: center top;
    background-size: auto 100%;

    opacity: .30;

    mix-blend-mode: screen;
  }

  h1 {
    font-size: 2.6rem;
  }

  blockquote {
    max-width: 100%;
    font-size: 1.05rem;
  }


  /* PAGE TITLE */

  .tabhead {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 150px 20px 48px;
  }

  .tabhead h1 {
    font-size: 2.5rem;
  }


  /* GENERAL */

  .two,
  .split,
  .plans,
  .pgrid,
  .rgrid,
  .trio,
  .steps {
    grid-template-columns: 1fr;
  }

  #litigation .split {
    grid-template-columns: 1fr;
  }

  .tiles {
    grid-template-columns: 1fr;
  }

  .t.a,
  .t.c {
    grid-column: auto;
  }

  .pil {
    grid-template-columns: 1fr;

    margin-left: 0;

    padding: 70px 20px 25px;
  }

  .pil img {
    left: 20px;
    top: 0;

    width: 80px;
    height: 80px;

    transform: none;
  }

  .way {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .way dd {
    margin-bottom: 18px;
  }

  .rate {
    flex-direction: column;
  }


  /* NEWSLETTER */

  .newsletter-page {
    padding: 110px 16px 50px;
  }

  .clio-page {
    padding: 0 16px 50px;
  }

  .clio-wrap {
    padding-top: 12px;
  }

  .clio-sections {
    grid-template-columns: 1fr;
  }

  .clio-card .dots {
    grid-template-columns: 1fr;
  }

  .newsletter-tabs {
    gap: 7px;
  }

  .newsletter-tab {
    padding: 11px 15px;
  }

  .newsletter-content {
    margin-top: 12px;
    border-radius: 12px;
  }


  /* CONTACT */

  .contact-page {
    padding-top: 110px;
  }


  /* SIGN UP */

  .signup-page {
    padding: 110px 16px 50px;
  }

  .signup-card {
    padding: 28px 20px;
  }


}

/* =========================================================
   FOOTER RESPONSIVE RULES
   ========================================================= */

@media (max-width: 1000px) and (min-width: 701px) {
  .footer-heading {
    top: 5.5%;
    left: 3%;
  }

  .footer-logo {
    width: 145px;
    margin-bottom: 8px;
  }

  .footer-talk {
    font-size: 1.25rem;
  }

  .footer-details {
    left: 3%;
    right: 3%;
    bottom: 6.5%;
  }

  .supplier {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .footer-cols > div {
    padding: 0 18px;
  }

  .footer-cols p,
  .footer-label {
    font-size: 8px;
  }

  .footer-reg {
    margin-top: 5px;
    font-size: 6.5px;
  }
}

@media (max-width: 700px) {
  .footer-art {
    overflow: hidden;
  }

  .footer-city {
    width: 100%;
    height: auto;
  }

  .footer-overlay {
    position: static;
    inset: auto;
    height: auto;
  }

  /* These selectors also override the desktop template refinements. */
  body footer .footer-heading {
    position: absolute;
    left: 20px !important;
    top: 8px !important;
    width: 48%;
    max-width: 220px;
  }

  body footer .footer-logo {
    width: clamp(88px, 28vw, 110px) !important;
    max-width: 100%;
    margin-bottom: 6px !important;
  }

  body footer .footer-talk {
    font-size: 1rem !important;
  }

  .talk-line {
    width: 48px;
    height: 2px;
    margin-top: 6px;
  }

  body footer .footer-details {
    position: relative;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 0;
    padding: 24px 20px 20px;
    background:
      linear-gradient(
        135deg,
        var(--magenta),
        var(--purple) 35%,
        var(--blue) 67%,
        var(--teal)
      );
  }

  .supplier {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 16px;
  }

  .footer-cols > div,
  .footer-cols > div:first-child,
  .footer-cols > div:last-child {
    padding: 0;
  }

  .footer-cols > div + div {
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.55);
  }

  .footer-label {
    font-size: 10px;
  }

  .footer-cols p {
    font-size: 11px;
  }

  .footer-reg {
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.45;
  }

  .footer-end {
    padding: 13px 20px 15px;
  }

  .footer-end p {
    font-size: 1.15rem;
  }
}



/* =========================================================
   FOOTER REFINEMENT — 03 OCT 2026
   Only footer positioning/typography/spacing changed.
   ========================================================= */

/* Remove any accidental visible edge/outline around the artwork. */
.footer-art,
.footer-city {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Move the grey logo + LET'S TALK down, close to the far-left skyline. */
.footer-heading {
  top: 22% !important;
}

.footer-logo {
  content: none !important;
}

/* Make the copy over the colour field more substantial/readable. */
.supplier {
  max-width: 1050px !important;
  margin-bottom: 16px !important;
  font-size: clamp(12px, 1vw, 16px) !important;
  line-height: 1.38 !important;
}

.footer-label {
  font-size: clamp(11px, .9vw, 14px) !important;
}

.footer-cols p {
  font-size: clamp(11px, .9vw, 14px) !important;
  line-height: 1.42 !important;
}

.footer-reg {
  margin-top: 10px !important;
  font-size: clamp(9px, .72vw, 12px) !important;
  line-height: 1.3 !important;
}

/* Pull "Law in full colour." immediately up beneath the city. */
.footer-end {
  margin-top: 0 !important;
  padding: 5px 3.2% 7px !important;
}

.footer-end p {
  margin: 0 !important;
}

.footer-end small {
  margin-top: 2px !important;
}

@media (max-width: 1000px) and (min-width: 701px) {
  .footer-heading {
    top: 20% !important;
  }

  .supplier {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }

  .footer-label,
  .footer-cols p {
    font-size: 9px !important;
  }

  .footer-reg {
    font-size: 7.5px !important;
  }
}

@media (max-width: 700px) {
  .footer-heading {
    top: calc(-1 * min(31vw, 185px)) !important;
  }

  .supplier {
    font-size: 12px !important;
  }

  .footer-label {
    font-size: 10px !important;
  }

  .footer-cols p {
    font-size: 11px !important;
  }

  .footer-reg {
    font-size: 8px !important;
  }

  .footer-end {
    padding: 5px 20px 7px !important;
  }
}


/* =========================================================
   AJV ASSURED + PRICING REFINEMENT — 03 OCT 2026
   Removes excessive vertical gaps and restores the intended
   coloured card layout for the four business retainers.
   ========================================================= */

/* ---------- AJV ASSURED: remove the large break between
   the Essentials/Assured cards and "For regular clients". */
#assured > .pg {
  padding-top: 22px;
  padding-bottom: 22px;
}

#assured > .pg + .pg {
  padding-top: 0;
}

#assured > .pg > .wrap {
  padding-top: 30px;
  padding-bottom: 30px;
}

#assured > .pg + .pg > .wrap {
  padding-top: 12px;
}

/* The two review plans should finish naturally instead of
   manufacturing a tall blank area above the final-version row. */
#assured .plans {
  align-items: stretch;
}

#assured .plan {
  min-height: 0;
}

#assured .frv {
  margin-top: 18px;
}

/* Give the AJV Lens copy more presence so the third card
   doesn't look empty compared with the two list cards. */
#assured .trio .bx:last-child .lens {
  margin: 18px 0 0;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.58;
  font-weight: 700;
}

#assured .trio .bx:last-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#assured .why {
  margin-top: 8px;
}

/* ---------- PRICING: reduce the gap after the fee note and
   before the Business Legal Retainers section. */
#pricing .pg {
  padding-top: 24px;
  padding-bottom: 24px;
}

#pricing .pg > .wrap {
  padding-top: 34px;
  padding-bottom: 34px;
}

#pricing .pg + .pg {
  padding-top: 0;
}

#pricing .pg + .pg > .wrap {
  padding-top: 18px;
}

#pricing .fine {
  margin-bottom: 0;
}

#pricing .band .lead {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Three short benefit blocks: use the horizontal space instead
   of stacking them with large blank areas. */
#pricing .c3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 30px;
}

#pricing .c3 > div {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e3e0da;
  border-top: 5px solid var(--c);
  border-radius: 12px;
}

#pricing .c3 h4 {
  margin: 0 0 8px;
  color: var(--c);
  font-size: .82rem;
  letter-spacing: .08em;
}

#pricing .c3 p {
  margin: 0;
}

/* ---------- BUSINESS LEGAL RETAINERS
   Four distinct coloured cards on desktop. */
#pricing .rcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 28px;
  align-items: stretch;
}

#pricing .rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #e3e0da;
  border-top: 7px solid var(--c);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0,0,0,.055);
}

#pricing .rcard h3 {
  margin: 0 0 8px;
  color: var(--c);
  font-size: 1.35rem;
}

#pricing .rcard .price {
  margin: 0 0 6px;
  color: var(--c);
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.18;
}

#pricing .rcard .hrs {
  margin: 10px 0 4px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
}

#pricing .rcard .per {
  margin: 0 0 14px;
  font-size: .74rem;
  opacity: .78;
}

#pricing .rcard .dots {
  margin-top: 2px;
}

#pricing .rcard .dots li {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 24px;
  font-size: .9rem;
  line-height: 1.4;
}

#pricing .rcard .dots li::before {
  width: 9px;
  height: 9px;
  top: 12px;
  background: var(--c);
}

#pricing .rcard .badge {
  top: 14px;
  right: 14px;
  padding: 6px 9px;
  font-size: .58rem;
}

/* Give the recommended/best-value cards enough heading room
   without adding vertical whitespace to every card. */
#pricing .rcard:has(.badge) h3 {
  padding-right: 88px;
}

/* Keep the sections following the cards close and intentional. */
#pricing .covers {
  margin-top: 8px;
}

#pricing .teal-strip {
  margin-top: 18px;
}

/* ---------- Responsive retainers */
@media (max-width: 1000px) {
  #pricing .rcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pricing .c3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  #assured > .pg,
  #pricing .pg {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #assured > .pg > .wrap,
  #pricing .pg > .wrap {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  #pricing .c3,
  #pricing .rcards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #pricing .rcard {
    padding: 22px 20px;
  }

  #pricing .rcard:has(.badge) h3 {
    padding-right: 100px;
  }
}


/* =========================================================
   FINAL VERIFIED LAYOUT FIX
   Exact selectors taken from the current index.html.
   ========================================================= */

/* ---------- AJV ASSURED ---------- */

/* Let each of the three boxes size to its own content.
   This removes the huge empty AJV Lens area. */
#assured .trio {
  display: grid !important;
  grid-template-columns: 1fr 1fr .8fr !important;
  gap: 22px !important;
  align-items: start !important;
}

#assured .trio > .bx {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  padding: 24px 26px !important;
}

#assured .trio > .bx:last-child {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 26px !important;
}

#assured .trio > .bx:last-child .lens {
  margin: 20px 0 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

/* WHY IT'S RESPONSIBLE: larger heading and intentional spacing. */
#assured .why {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 18px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

#assured .why .lbl {
  flex: 0 0 100% !important;
  margin: 0 0 10px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

#assured .why span {
  display: inline-block !important;
  margin: 0 !important;
  font-size: .98rem !important;
  line-height: 1.55 !important;
}

#assured .why span + span::before {
  content: "•" !important;
  margin-right: 18px !important;
  color: var(--teal) !important;
  font-weight: 900 !important;
}

#assured .why + .fine {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  line-height: 1.55 !important;
}

#assured .cta2 {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Reduce the excessive break around the Assured plan/retainer areas. */
#assured .plans {
  margin-bottom: 20px !important;
}

#assured .plan {
  min-height: 0 !important;
}

#assured .plan .frv {
  margin-top: 20px !important;
}

#assured .peach {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
}

/* ---------- PRICING ---------- */

/* Remove excessive vertical section padding. */
#pricing .pg,
#pricing .pg.band {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#pricing .pg > .wrap,
#pricing .pg.band > .wrap {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

#pricing .pg + .pg > .wrap {
  padding-top: 18px !important;
}

#pricing .fine {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Use the width for the three benefit statements. */
#pricing .c3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 16px !important;
  margin: 22px 0 26px !important;
}

#pricing .c3 > div {
  display: block !important;
  padding: 18px 20px !important;
  border: 1px solid #e1ddd6 !important;
  border-top: 5px solid var(--c) !important;
  border-radius: 12px !important;
  background: #fff !important;
}

#pricing .c3 h4 {
  margin: 0 0 8px !important;
  color: var(--c) !important;
}

#pricing .c3 p {
  margin: 0 !important;
}

/* VERIFIED RETAINER MARKUP:
   <div class="rcards"> containing four <div class="rcard"> elements.
   Force a four-card layout and visible colour treatment. */
#pricing div.rcards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 20px 0 26px !important;
  padding: 0 !important;
  align-items: stretch !important;
}

#pricing div.rcards > div.rcard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 24px 21px 22px !important;
  border: 1px solid color-mix(in srgb, var(--c) 38%, #dedbd5) !important;
  border-top: 8px solid var(--c) !important;
  border-left: 1px solid color-mix(in srgb, var(--c) 38%, #dedbd5) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) 10%, white) 0%,
      #fff 42%
    ) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}

#pricing div.rcards > div.rcard h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--c) !important;
  font-size: 1.3rem !important;
  line-height: 1.15 !important;
}

#pricing div.rcards > div.rcard .price {
  margin: 0 0 10px !important;
  color: var(--c) !important;
  font-size: 1.28rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

#pricing div.rcards > div.rcard .hrs {
  margin: 8px 0 5px !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
}

#pricing div.rcards > div.rcard .per {
  margin: 0 0 14px !important;
  font-size: .76rem !important;
}

#pricing div.rcards > div.rcard ul.dots {
  margin: 0 !important;
  padding: 0 !important;
}

#pricing div.rcards > div.rcard ul.dots li {
  position: relative !important;
  margin: 0 !important;
  padding: 7px 0 7px 22px !important;
  font-size: .9rem !important;
  line-height: 1.4 !important;
}

#pricing div.rcards > div.rcard ul.dots li::before {
  width: 9px !important;
  height: 9px !important;
  top: 13px !important;
  left: 0 !important;
  background: var(--c) !important;
}

#pricing div.rcards > div.rcard .badge {
  top: 12px !important;
  right: 12px !important;
  padding: 6px 8px !important;
  font-size: .52rem !important;
  border-radius: 6px !important;
}

/* Only the two badged cards need heading clearance. */
#pricing div.rcards > div.rcard:nth-child(3) h3,
#pricing div.rcards > div.rcard:nth-child(4) h3 {
  padding-right: 84px !important;
}

/* Tighten the material directly below the cards. */
#pricing .covers {
  margin-top: 8px !important;
  margin-bottom: 18px !important;
}

#pricing .teal-strip {
  margin-top: 14px !important;
}

/* ---------- FOOTER ---------- */

footer,
.footer-art,
.footer-city,
.footer-overlay {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Place the logo/TALK group much closer to the far-left skyline. */
.footer-heading {
  top: 27% !important;
  left: 3.2% !important;
}

.footer-logo {
  width: 175px !important;
  height: auto !important;
  max-width: 82% !important;
  margin-bottom: 10px !important;
  content: none !important;
}

.footer-talk {
  font-size: clamp(1.15rem,1.75vw,1.8rem) !important;
}

/* Make the information actually occupy the colour field. */
.footer-details {
  left: 3.2% !important;
  right: 3.2% !important;
  bottom: 3.5% !important;
}

.footer-details .supplier {
  max-width: 1100px !important;
  margin-bottom: 15px !important;
  font-size: clamp(12px,1vw,16px) !important;
  line-height: 1.4 !important;
}

.footer-details .footer-label {
  font-size: clamp(11px,.88vw,14px) !important;
}

.footer-details .footer-cols p {
  font-size: clamp(11px,.88vw,14px) !important;
  line-height: 1.45 !important;
}

.footer-details .footer-reg {
  margin-top: 10px !important;
  font-size: clamp(9px,.72vw,12px) !important;
}

/* Remove the visually empty white band below the artwork. */
.footer-end {
  margin: 0 !important;
  padding: 2px 3.2% 5px !important;
  min-height: 0 !important;
}

.footer-end p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.footer-end small {
  margin-top: 3px !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1050px) {
  #pricing div.rcards {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 700px) {
  #assured .trio,
  #pricing .c3,
  #pricing div.rcards {
    grid-template-columns: 1fr !important;
  }

  #assured .why {
    display: block !important;
  }

  #assured .why span {
    display: block !important;
    margin: 0 0 8px !important;
  }

  #assured .why span + span::before {
    content: none !important;
  }

  #pricing div.rcards > div.rcard {
    min-height: 0 !important;
  }

  .footer-heading {
    top: auto !important;
  }
}



/* =========================================================
   FINAL SMALL CORRECTIONS — ONLY REQUESTED ITEMS
   ========================================================= */

/* 1) AJV ASSURED: three top cards equal height again. */
#assured .trio {
  align-items: stretch !important;
}

#assured .trio > .bx {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

/* Keep AJV Lens equal height, but distribute its questions
   vertically through the available card space. */
#assured .trio > .bx:last-child {
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 28px !important;
}

#assured .trio > .bx:last-child .lens {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  margin: 16px 0 0 !important;
  line-height: 1.45 !important;
}

/* If the questions are separated by <br>, give the lines more room. */
#assured .trio > .bx:last-child .lens br {
  content: "" !important;
  display: block !important;
  margin-bottom: 9px !important;
}

/* 2) AJV ASSURED: remove the huge forced white gap before
   FOR REGULAR CLIENTS. Keep only a normal section gap. */
#assured .plans {
  margin-bottom: 0 !important;
}

#assured .plans + *,
#assured .peach {
  margin-top: 28px !important;
}

#assured .pg,
#assured .pg > .wrap {
  min-height: 0 !important;
}

#assured .pg > .wrap {
  padding-bottom: 28px !important;
}

#assured .pg + .pg {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#assured .pg + .pg > .wrap {
  padding-top: 0 !important;
}

/* 3) FOOTER: logo/TALK slightly above the far-left skyline,
   not touching it. */
.footer-heading {
  top: 21.5% !important;
}

/* Move ALL colour-field details up so the registration line
   remains visibly inside the artwork. */
.footer-details {
  bottom: 7.2% !important;
}

.footer-details .supplier {
  margin-bottom: 12px !important;
}

.footer-details .footer-reg {
  margin-top: 7px !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.75) !important;
}

/* Keep Law in full colour immediately below the artwork. */
.footer-end {
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}

@media (max-width: 1000px) and (min-width: 701px) {
  .footer-heading {
    top: 19% !important;
  }

  .footer-details {
    bottom: 6.5% !important;
  }
}

@media (max-width: 700px) {
  #assured .trio > .bx:last-child .lens {
    display: block !important;
  }

  #assured .trio > .bx:last-child .lens br {
    margin-bottom: 5px !important;
  }
}

/* Full-bleed footer artwork with a compact strip beneath it. */
body footer {
  position: relative !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body footer .footer-art,
body footer .footer-city {
  width: 100% !important;
  max-width: none !important;
}

body footer .footer-end {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

body footer .footer-end small {
  margin-top: 1px !important;
}

/* Keep the footer artwork full-bleed and move its links into the intended places. */
body footer .footer-socials {
  gap: 10px;
  margin: 0 0 2px;
}

body footer .footer-socials a {
  width: 27px;
  height: 27px;
}

body footer .social-icon {
  width: 24px;
  height: 24px;
}

body footer .footer-end {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

body footer .footer-privacy {
  position: absolute;
  right: 3.2%;
  bottom: 1.5%;
  z-index: 10;
  display: block;
  margin: 0;
  padding: 8px;
  color: #fff;
  font-size: .8rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  pointer-events: auto;
}

@media (max-width: 700px) {
  body footer .footer-overlay {
    position: relative;
  }

  body footer .footer-privacy {
    right: 20px;
    bottom: 10px;
  }
}

#assured .plans {
  align-items: stretch !important;
}

#assured .plan .frv {
  min-height: 46px !important;
  margin-top: auto !important;
}

body footer .footer-reg-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
}

body footer .footer-reg-row .footer-reg {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body footer .footer-reg-row .footer-privacy {
  position: static !important;
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(9px, .72vw, 12px) !important;
  line-height: 1.3 !important;
  text-align: right !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.72) !important;
  pointer-events: auto !important;
}

body footer .footer-end {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 3.2% 4px !important;
}

body footer .footer-end .footer-socials {
  order: 0 !important;
  margin: 0 0 1px !important;
}

body footer .footer-end-copy {
  order: 1 !important;
}

body footer .footer-end-copy p,
body footer .footer-end-copy small {
  margin: 0 !important;
}

body footer .footer-end-copy small {
  margin-top: 2px !important;
}

@media (max-width: 700px) {
  body footer .footer-reg-row {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body footer .footer-reg-row .footer-privacy {
    flex-basis: auto !important;
    white-space: nowrap !important;
  }

  body footer .footer-end {
    padding: 2px 20px 4px !important;
  }
}

@media (max-width: 1000px) {
  body .bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  body .bar .brand-link {
    flex: 0 0 auto !important;
  }

  body .bar .logo {
    width: 120px !important;
  }

  body #mbtn {
    display: none !important;
  }

  body #menu {
    position: static !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1.4vw, 14px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 134px) !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  body #menu::-webkit-scrollbar {
    display: none;
  }

  body #menu a {
    flex: 0 0 auto !important;
    padding: 8px 2px !important;
    font-size: clamp(10px, 1.2vw, 12px) !important;
  }

  body #menu a.pill {
    padding: 8px 12px !important;
  }
}

@media (max-width: 700px) {
  body .bar {
    gap: 10px !important;
    padding-right: 10px !important;
    padding-left: 12px !important;
  }

  body .bar .logo {
    width: 92px !important;
  }

  body #menu {
    gap: 10px !important;
    max-width: calc(100% - 102px) !important;
  }

  body #menu a {
    font-size: 11px !important;
  }
}


/* =========================================================
   v2.8.4 - SMALLER PAGE HEADERS
   The hero used to be as tall as the full photo (about
   640px on a laptop). Home is now shorter, and every other
   page gets a compact banner with just the page title.
   ========================================================= */

@media (min-width: 701px) {
  /* Home banner: about half the full photo height */
  .hero-img {
    height: clamp(400px, 24vw, 460px);
    object-fit: cover;
    object-position: center 60%;
  }

  body:not([data-tab="home"]) .hero-img {
    height: clamp(280px, 24vw, 360px);
  }

  body:not([data-tab="home"]) .intro-light {
    height: clamp(110px, 12vw, 170px);
  }

  body:not([data-tab="home"]) .tabhead {
    bottom: 18% !important;
  }

  body:not([data-tab="home"]) .tabhead h1 {
    font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  }

  .hero-copy {
    top: 108px;
    width: 70%;
  }

  .hero-copy h1 {
    font-size: clamp(2.4rem, 3.6vw, 4rem);
  }

  .hero-copy .sub {
    margin-bottom: .6rem;
  }

  .hero-copy blockquote {
    margin-top: 1.6rem;
    padding: 10px 26px;
    font-size: clamp(.95rem, 1.15vw, 1.2rem);
  }

  .hero-copy .by {
    margin: 10px 0 0;
  }

  body[data-tab="home"] .intro-light {
    height: clamp(120px, 13vw, 200px);
  }
}

@media (max-width: 700px) {
  .hero-copy {
    padding: 100px 20px 40px;
  }

  .hero-copy blockquote {
    max-width: calc(100% - 24px);
  }

  .hero-copy blockquote br {
    display: none;
  }

  .hero-copy .q.c {
    right: -14px;
    bottom: -38px;
  }

  body:not([data-tab="home"]) .hero {
    min-height: 240px;
  }

  body:not([data-tab="home"]) .tabhead {
    margin: 120px 20px 36px;
  }

  body:not([data-tab="home"]) .tabhead h1 {
    font-size: 2.2rem;
  }
}


/* =========================================================
   v2.8.4 - HOME: CLIO INTEGRATION
   ========================================================= */

.home-clio {
  padding-bottom: 20px;
}

.clio-band {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 40px;
  overflow: hidden;
  border: 1px solid #e3e0da;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.clio-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--magenta), var(--coral), var(--orange), var(--yellow), var(--teal), var(--blue), var(--purple));
}

.clio-band-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 24px;
  border-radius: 10px;
  background: var(--off);
}

.clio-band-logo img {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
}

.clio-band-copy .lead {
  margin-top: 0;
}

.clio-question {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
}

.clio-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0 24px;
  padding: 0;
  list-style: none;
}

.clio-points li {
  padding-top: 12px;
  border-top: 2px solid #e3e0da;
  color: #5c5c60;
  font-size: .92rem;
  line-height: 1.5;
}

.clio-points li:nth-child(1) { border-top-color: var(--magenta); }
.clio-points li:nth-child(2) { border-top-color: var(--teal); }
.clio-points li:nth-child(3) { border-top-color: var(--blue); }

.clio-points b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: .95rem;
}

.clio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn.btn-line {
  background: transparent;
  color: var(--magenta);
  box-shadow: inset 0 0 0 2px var(--magenta);
}

@media (max-width: 1000px) {
  .clio-points {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 700px) {
  .clio-band {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 22px;
  }

  .clio-band-logo {
    min-height: 110px;
  }
}


/* =========================================================
   v2.8.8 - PHONE MENU FIX
   Phones: a Menu button opens the full list of pages.
   Tablets: links start from the left, so any that don't fit
   can be scrolled to instead of being cut off.
   ========================================================= */

@media (max-width: 1000px) and (min-width: 761px) {
  html body #menu {
    justify-content: flex-start !important;
    margin-left: auto !important;
  }
}

@media (max-width: 760px) {
  html body .bar {
    overflow: visible !important;
    align-items: center !important;
  }

  html body #mbtn {
    display: block !important;
    flex: none !important;
    padding: .55em 1.1em !important;
    border: 1px solid #fff !important;
    border-radius: 999px !important;
    background: rgba(46,46,48,.65) !important;
    color: #fff !important;
    font: inherit !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  html body #menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 14px 18px 20px !important;
    background: rgba(46,46,48,.97) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #menu.open {
    display: flex !important;
  }

  html body #menu a {
    padding: 12px 10px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }

  html body #menu a:last-child {
    border-bottom: 0 !important;
  }

  html body #menu a.on {
    color: var(--magenta) !important;
  }
}