/* ==========================================================================
   About Us — rules moved here from the shared theme files
   (comon.css, advisr-core.css, custome-responsive.min.css): selectors that only
   match elements found on the About page.
   ========================================================================== */

/* ---- from comon.css ---- */
.page-hadding h1 {
    color: var(--clr-blue-81);
    font-size: var(--ax-t-display);
    font-style: normal;
    font-weight: 800;
    line-height: 1.08;
    text-transform: capitalize;
}
.page-hadding h3 {
    color: var(--clr-blue-81);
    font-size: var(--ax-t-display);
    font-style: normal;
    font-weight: 800;
    line-height: 1.08;
    text-transform: capitalize;
}
.page-hadding p {
    color: var(--clr-blue-58);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.page-hadding h2 {
    color: var(--font-color, var(--clr-blue-90));
    font-size: var(--ax-t-sub);
    font-style: normal;
    font-weight: 800;
    line-height: 1.14;
}

@media screen and (max-width: 767px) {
  .page-hadding h1 {
        font-size: var(--ax-t-sub);
        line-height: 1.14;
    }
}

/* ---- from advisr-core.css ---- */
.page-hadding h4 a {
  color: var(--font-color, var(--clr-blue-90));
text-align: center;
font-size: var(--ax-t-card);
font-style: normal;
font-weight: 800;
line-height: 1.25; /* 133.333% */
display: inline-block;
transition: all.4s;
}


/* ==========================================================================
   ABOUT PAGE — all styles that belong to /about-us and nothing else.
   Loaded only by resources/views/about.blade.php, after the common CSS
   (global.css, common/*.css, the shared theme files). Colours come from colors.css.

   Sections
     1. Legacy About rules (moved out of the shared theme CSS)
     2. Page typography & intro block ("Who We Are")
     3. "Our Purpose": vision, mission and stats
     4. "Our Core Values"
   ========================================================================== */


/* ##########################################################################
   1. Legacy About rules (moved out of the shared theme CSS)
   ########################################################################## */

.inner-about-block .page-hadding .text p {
    transition: all.3s;
    font-family: var(--ax-font-display);
    font-size: 18px;
    line-height: 25px;
    color: var(--clr-blue-58);
    font-weight: 400;
    margin: 4px 0;
    padding: 4px 0;
}

.inner-about-block .page-hadding .text:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    height: 59px;
    width: 8px;
    background: var(--clr-teal-15);
    transform: translateY(-40%);
    -webkit-animation: mover 7s infinite alternate;
    animation: mover 7s infinite alternate;
}

.inner-about-block .page-hadding .text:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: color-mix(in srgb, var(--clr-teal-25) 40%, transparent);
}

.inner-about-block .page-hadding .text {
    margin: 0;
    padding: 0 0 0 20px;
    position: relative;
}

.inner-about-block .page-hadding span.span {
    font-family: var(--ax-font-display);
    color: var(--ax-white);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    background-color: var(--clr-teal-24);
    padding: 4px 16px;
    border-radius: 30px;
    display: inline-block;
    margin: 0 0 10px 0;
}

.inner-about-block .about1-image-all .about-1-img2 img {
    width: 100%;
}

.inner-about-block .about1-image-all .about-1-img2 {
    width: 100%;
    position: relative;
    z-index: 100;
}

.inner-about-block .page-hadding p {
    padding-bottom: 20px;
}

.inner-about-block .page-hadding h2 {
    padding-bottom: 24px;
    color: var(--clr-teal-36);
    font-size: var(--ax-t-sub);
    font-style: normal;
    font-weight: 800;
    line-height: 1.14;
    text-transform: capitalize;
    font-family: var(--ax-font-display);
}

.inner-about-block .page-hadding h1 {
    padding-bottom: 24px;
    color: var(--clr-teal-36);
    font-size: var(--ax-t-sub);
    font-style: normal;
    font-weight: 800;
    line-height: 1.14;
    text-transform: capitalize;
    font-family: var(--ax-font-display);
}

.inner-about-block .hed-title h2 {
    color: var(--clr-blue-90);
    font-size: var(--ax-t-display);
    font-style: normal;
    font-weight: 800;
    line-height: 1.08;
    text-transform: capitalize;
    font-family: var(--ax-font-display);
    width: 80%;
    margin: 0 auto;
    padding: 10px 0 0 0;
}

.inner-about-block .hed-title span.span {
    font-family: var(--ax-font-display);
    color: var(--ax-white);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    background-color: var(--clr-teal-11);
    padding: 4px 16px;
    border-radius: 30px;
    display: inline-block;
}

.inner-about-block .hed-title {
    margin: 0;
    padding: 0 0 80px 0;
    text-align: center;
}

.inner-about-block {
    background-color: var(--clr-blue-9);
}

.inner-about-block .page-hadding { padding-left:30px; }

.inner-about-block .about1-image-all .about-1-img1 {
    position: absolute;
    left: 7px;
    top: 10px;
    width: 100%;
    height: 372px;
    z-index: 99;
}

.inner-about-block .about1-image-all {
    position: relative;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 767px) {
  .about1-hadding {
      margin-top: 30px;
    }
}

@media screen and (max-width:576px) {
  .inner-about-block .page-hadding .text p {
          font-size: 16px;
          line-height: 25px;
          margin: 4px 0;
          padding: 4px 0;
      }
  .inner-about-block .page-hadding h1 {
          font-size: var(--ax-t-sub);
          padding-top: 20px;
      }
  .inner-about-block .about1-image-all .about-1-img2 {
          width: 100%;
          position: static;
          z-index: 100;
      }
  .inner-about-block .about1-image-all .about-1-img1 {
          display: none;
      }
  .inner-about-block .hed-title h2 {
          width: 100%;
      }
  .inner-about-block .page-hadding h2 {	padding-bottom:20px;	font-size: var(--ax-t-card);
  	font-weight:800;	line-height:1.25;	padding-top:20px; }
  .inner-about-block .hed-title h2 {	font-size: var(--ax-t-card);	line-height: 1.25;	width: 100%; }
}

@media screen and (max-width:767px) {
  .inner-about-block .page-hadding h2 { padding-top:20px; }
  .inner-about-block .hed-title h2 {	font-size: var(--ax-t-sub);	line-height: 1.14; width: 100%; }
}

@media screen and (max-width:991px) {
  .inner-about-block .hed-title {	padding: 0 0 34px 0; }
  .about1-hadding {
          margin-top: 0;
      }
  .inner-about-block .page-hadding {
          padding-left: 0;
      }
  .inner-about-block .hed-title h2 {
          font-size: var(--ax-t-sub);
          line-height: 1.14;
          width: 80%;
      }
}

/* ##########################################################################
   2. Page typography & intro block ("Who We Are")
   ########################################################################## */

/* ==========================================================================
   ABOUT — type scale and text colours aligned to the home page.

   Home reference (see home.css):
     section headings  Plus Jakarta Sans 800, --ax-t-display, navy-900, tight tracking
     sub-headings      Plus Jakarta Sans 800, --ax-t-sub
     card titles       Plus Jakarta Sans 800, --ax-t-card
     body              Manrope, ~1.02rem / 1.7, --ax-ink-soft
     eyebrow pills     Manrope 12px 800, .18em tracking, navy-700 on blue-100
   About used legacy Outfit/Catamaran with its own sizes and teal/grey text.
   Loaded by the About page only. Colours come from colors.css.
   ========================================================================== */

/* --- Inner banner title ------------------------------------------------ */

/* --- Intro block ("Who We Are"): centred eyebrow + heading with an accent
       phrase, image composition left, copy right ------------------------- */
.about1.inner-about-block {
    padding: 72px 0 !important;
    background:
        radial-gradient(760px 420px at 100% 78%, color-mix(in srgb, var(--ax-cyan-100) 55%, transparent), transparent 65%),
        var(--ax-paper) !important;
}
.ax-intro__head { max-width: 900px; margin: 0 auto 36px; }
/* Eyebrow + heading: identical to the home page's "Why Choose Us" block */
.about1 .ax-intro__head .span {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 20px;
    padding: 8px 18px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    line-height: 26px !important;
    text-transform: uppercase !important;
    color: var(--ax-navy-700) !important;
    background: var(--ax-blue-100) !important;
    border: 0 !important;
    border-radius: 100px !important;
    box-shadow: none !important;
}
.about1 .ax-intro__head .span::before {
    content: ""; width: 14px; height: 2px; border-radius: 2px;
    background: var(--ax-grad-accent);
}
.about1 h2.ax-intro__title {
    max-width: 22ch;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-display) !important;
    font-weight: 800 !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
    color: var(--ax-navy-900) !important;
}
/* accent phrase: the same blue sweep as the home headings (no underline) */
.ax-intro__title .ax-accent {
    display: inline;
    background: var(--ax-grad-ink);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Sticky needs the page itself to scroll. The legacy theme sets overflow-x:hidden on
   html and body, which makes body a scroll container so `position: sticky` never
   engages. `clip` hides sideways overflow without creating a scroll container. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }

/* Image composition: artwork with a transparent background, so it sits directly
   on the section background; stays in view beside the long copy (desktop). */
.ax-intro__img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
    .about1 > .container > .row { align-items: flex-start !important; }
    .about1 > .container > .row > .col-lg-6:first-child { position: sticky; top: 120px; }
}

.about1 .about1-hadding h3.ax-intro__lead {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-t-sub);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.028em;
    color: var(--ax-navy-900);
}

.hadding4-w h3 {
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-display) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
    color: var(--ax-navy-900) !important;
}

/* --- Body copy ------------------------------------------------------------ */
.about1 .text p,
.about1 .page-hadding p {
    font-family: var(--ax-font-sans) !important;
    font-size: 1.02rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: var(--ax-ink-soft) !important;
}
.about1 .text p a { color: var(--ax-cyan-600); font-weight: 700; }

/* ##########################################################################
   3. "Our Purpose": vision, mission and stats
   ########################################################################## */

/* ==========================================================================
   ABOUT — "Our Purpose": vision, mission and impact stats.
   Dark navy panel, serif headings with a blue accent word, 2x2 stat cards.
   Colours come from colors.css only (var(--ax-*)).
   ========================================================================== */

.ax-purpose {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    color: var(--ax-white);
    background:
        radial-gradient(820px 520px at 88% 8%, color-mix(in srgb, var(--ax-blue-500) 24%, transparent), transparent 62%),
        radial-gradient(700px 480px at 4% 100%, color-mix(in srgb, var(--ax-navy-600) 45%, transparent), transparent 60%),
        linear-gradient(115deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 58%, var(--ax-navy-700) 100%);
}

/* --- Background art ------------------------------------------------------ */
/* Blurred glass-office interior on the right: daylight through windows
   fading into a dark floor, with mullions and furniture silhouettes. */
.ax-purpose__photo {
    position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
    overflow: hidden; pointer-events: none;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ax-white) 42%, transparent) 0%,
            color-mix(in srgb, var(--ax-blue-400) 30%, transparent) 36%,
            color-mix(in srgb, var(--ax-navy-900) 78%, transparent) 100%),
        var(--ax-navy-700);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--clr-black) 42%);
            mask-image: linear-gradient(90deg, transparent 0%, var(--clr-black) 42%);
    opacity: .62;
}
.ax-purpose__photo::before,
.ax-purpose__photo::after { content: ""; position: absolute; inset: 0; }
/* window mullions */
.ax-purpose__photo::before {
    bottom: 34%;
    background: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--ax-navy-900) 72%, transparent) 0 16px,
        transparent 16px 104px);
    filter: blur(6px);
}
/* desks / chairs / city haze */
.ax-purpose__photo::after {
    background:
        radial-gradient(150px 70px at 24% 74%, color-mix(in srgb, var(--ax-navy-900) 85%, transparent), transparent 70%),
        radial-gradient(190px 90px at 62% 82%, color-mix(in srgb, var(--ax-navy-900) 90%, transparent), transparent 70%),
        radial-gradient(120px 60px at 86% 66%, color-mix(in srgb, var(--ax-navy-800) 80%, transparent), transparent 70%),
        radial-gradient(260px 120px at 50% 20%, color-mix(in srgb, var(--ax-white) 26%, transparent), transparent 70%);
    filter: blur(12px);
}

/* Blue angular shards + the dark wedge on the left */
.ax-purpose__shapes { position: absolute; inset: 0; pointer-events: none; }
.ax-shard, .ax-dots { position: absolute; display: block; }
.ax-shard--dark {
    left: 0; top: 24%; width: 22%; height: 58%;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--ax-navy-900) 62%, transparent),
        color-mix(in srgb, var(--ax-navy-800) 20%, transparent));
    clip-path: polygon(0 0, 100% 56%, 0 100%);
}
.ax-shard--top {
    right: 8%; top: 0; width: 16%; height: 30%;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ax-blue-400) 88%, transparent),
        color-mix(in srgb, var(--ax-blue-500) 55%, transparent));
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ax-shard--edge {
    right: 0; top: 0; width: 11%; height: 100%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ax-blue-400) 60%, transparent) 0%,
        color-mix(in srgb, var(--ax-blue-600) 52%, transparent) 55%,
        transparent 100%);
    clip-path: polygon(100% 0, 100% 100%, 22% 100%, 0 58%, 62% 26%);
}
.ax-shard--low {
    right: 0; bottom: 0; width: 14%; height: 50%;
    background: linear-gradient(200deg,
        color-mix(in srgb, var(--ax-blue-500) 92%, transparent),
        color-mix(in srgb, var(--ax-blue-600) 62%, transparent));
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ax-dots {
    left: 0; bottom: 48px; width: 120px; height: 240px;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--ax-white) 24%, transparent) 1.6px, transparent 2.2px);
    background-size: 24px 24px;
}
.ax-purpose .container { position: relative; z-index: 1; }

/* --- Copy ---------------------------------------------------------------- */
.ax-purpose__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 18px;
    padding: 8px 18px;
    font-family: var(--ax-font-sans);
    font-size: 12px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ax-cyan-300);
    background: color-mix(in srgb, var(--ax-white) 8%, transparent);
    border-radius: 100px;
}
.ax-purpose__eyebrow::before {
    content: ""; width: 14px; height: 2px; border-radius: 2px;
    background: var(--ax-grad-accent);
}

.ax-purpose__title {
    margin: 0 0 10px;
    font-family: var(--ax-font-display);
    font-size: clamp(2rem, 3.1vw, 2.6rem);
    font-weight: 800;
    line-height: var(--ax-lh-tight);
    letter-spacing: -.03em;
    color: var(--ax-white);
}
.ax-purpose__title span {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-400), var(--ax-blue-400));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ax-purpose__text {
    max-width: 60ch;
    margin: 0;
    font-family: var(--ax-font-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--ax-white) 82%, transparent);
}

.ax-purpose__rule {
    margin: 24px 0 22px;
    max-width: 60ch;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ax-blue-400) 28%, transparent);
    opacity: 1;
}

.ax-purpose__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 26px;
    padding: 16px 32px;
    background: var(--ax-grad-accent);
    border-radius: 100px;
    box-shadow: var(--ax-e2);
    font-family: var(--ax-font-sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--ax-white) !important;
    text-decoration: none;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease), transform var(--ax-dur-sm) var(--ax-ease);
}
.ax-purpose__btn:hover { box-shadow: var(--ax-e3); }
.ax-purpose__btn:active { transform: scale(.985); }
.ax-purpose__btn i { font-size: 14px; transition: transform var(--ax-dur-md) var(--ax-ease); }
.ax-purpose__btn:hover i { transform: translateX(4px); }

/* --- Stat cards ---------------------------------------------------------- */
.ax-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ax-stat {
    padding: 24px 24px 26px;
    background: color-mix(in srgb, var(--ax-navy-700) 46%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-blue-400) 26%, transparent);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ax-stat__icon {
    display: grid; place-items: center;
    width: 58px; height: 58px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--ax-blue-400) 18%, transparent);
    border-radius: 10px;
    font-size: 1.3rem;
    color: var(--ax-white);
}
.ax-stat__num {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: clamp(1.9rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ax-white);
}
.ax-stat__label {
    margin: 4px 0 0;
    font-family: var(--ax-font-sans);
    font-size: .95rem;
    color: color-mix(in srgb, var(--ax-white) 88%, transparent);
}
.ax-stat__label::after {
    content: ""; display: block;
    width: 40px; height: 2px;
    margin-top: 14px;
    background: var(--ax-blue-400);
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .ax-purpose { padding: 56px 0; }
    .ax-purpose__photo { width: 70%; opacity: .4; }
    .ax-shard--top, .ax-shard--edge, .ax-shard--low { opacity: .6; }
    .ax-stat { padding: 22px 22px 24px; }
}
@media screen and (max-width: 576px) {
    .ax-purpose { padding: 44px 0; }
    .ax-stats { gap: 14px; }
    .ax-stat { padding: 18px 16px 20px; }
    .ax-stat__icon { width: 46px; height: 46px; font-size: 1.1rem; }
    .ax-stat__label { font-size: .88rem; }
    .ax-purpose__btn { width: 100%; justify-content: center; }
}

/* ##########################################################################
   4. "Our Core Values"
   ########################################################################## */

/* ==========================================================================
   ABOUT — "Our Core Values": eyebrow, heading with a blue accent word, intro,
   and a 3 x 2 grid of cards with tinted circular icons.
   Colours come from colors.css (--ax-*, --ax-val-*).
   ========================================================================== */

.ax-values {
    padding: 84px 0 48px;
    background: var(--ax-white);
}

.ax-values__head { max-width: 760px; margin: 0 auto 46px; text-align: center; }

/* Eyebrow + heading: identical to the home page's "Why Choose Us" block */
.ax-values__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 20px;
    padding: 8px 18px;
    font-family: var(--ax-font-sans);
    font-size: 12px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ax-navy-700);
    background: var(--ax-blue-100);
    border-radius: 100px;
}
.ax-values__eyebrow::before {
    content: ""; width: 14px; height: 2px; border-radius: 2px;
    background: var(--ax-grad-accent);
}

.ax-values__title {
    max-width: 22ch;
    margin: 0 auto 14px;
    font-family: var(--ax-font-display);
    font-size: var(--ax-t-display);
    font-weight: 800;
    line-height: var(--ax-lh-tight);
    letter-spacing: -.035em;
    color: var(--ax-navy-900);
}
.ax-values__title span {
    display: inline;
    background: var(--ax-grad-ink);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ax-values__intro {
    max-width: 600px; margin: 0 auto;
    font-family: var(--ax-font-sans);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ax-ink-soft);
}

/* --- Grid & cards ---------------------------------------------------------- */
.ax-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ax-value {
    --accent: var(--ax-val-blue);
    padding: 28px 30px 30px;
    background: var(--ax-white);
    border: 1px solid color-mix(in srgb, var(--ax-navy-900) 8%, transparent);
    border-radius: 14px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent),
                0 10px 28px color-mix(in srgb, var(--ax-navy-900) 5%, transparent);
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.ax-value:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--ax-navy-900) 6%, transparent),
                0 18px 40px color-mix(in srgb, var(--ax-navy-900) 10%, transparent);
}
.ax-value--blue   { --accent: var(--ax-val-blue); }
.ax-value--teal   { --accent: var(--ax-val-teal); }
.ax-value--orange { --accent: var(--ax-val-orange); }
.ax-value--purple { --accent: var(--ax-val-purple); }
.ax-value--red    { --accent: var(--ax-val-red); }

.ax-value__icon {
    display: grid; place-items: center;
    width: 66px; height: 66px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 13%, var(--ax-white));
    color: var(--accent);
    font-size: 1.65rem;
}

.ax-value__title {
    margin: 0 0 8px;
    font-family: var(--ax-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--ax-navy-900);
}
.ax-value__text {
    margin: 0;
    font-family: var(--ax-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ax-ink-soft);
}

@media screen and (max-width: 991px) {
    .ax-values { padding: 64px 0 40px; }
    .ax-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media screen and (max-width: 576px) {
    .ax-values { padding: 48px 0 32px; }
    .ax-values__grid { grid-template-columns: 1fr; }
    .ax-value { padding: 22px 22px 24px; }
}

/* ==========================================================================
   About — polish pass: bring "Core Values" and the newsletter band in line
   with the home page cards (brand tiles, accent rail, consistent rhythm).
   ========================================================================== */

.ax-values { padding: var(--ax-sp-section, 84px) 0 clamp(40px, 4vw, 64px); }

/* Cards: same language as the home "Where to start" cards */
.ax-value {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 32px;
    border-radius: var(--ax-r-md, 20px);
    border: 1px solid var(--ax-line, #dde6f2);
    box-shadow: var(--ax-e1, 0 1px 2px rgba(3, 18, 44, .05));
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease), border-color var(--ax-dur-md) var(--ax-ease);
}
.ax-value::before {                         /* accent rail fills on hover */
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--ax-grad-accent, linear-gradient(120deg, #00d9dc, #1e7fe6));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.ax-value:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ax-cyan-500) 45%, transparent);
    box-shadow: var(--ax-e3, 0 14px 36px rgba(3, 18, 44, .12));
}
.ax-value:hover::before { transform: scaleX(1); }

/* One icon style for all six (the per-card colours clashed with the brand) */
.ax-value__icon {
    width: 58px; height: 58px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: var(--ax-cyan-100);
    color: var(--ax-navy-700);
    font-size: 1.45rem;
    transition: background var(--ax-dur-md) var(--ax-ease), color var(--ax-dur-md) var(--ax-ease);
}
.ax-value:hover .ax-value__icon {
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600, #00b5b9));
    color: var(--ax-navy-900);
}
.ax-value__title { font-size: 1.3rem; margin-bottom: 10px; }
.ax-value__text  { font-size: .98rem; line-height: 1.65; }

/* Newsletter band: room below it before the testimonials */
.cta4 { padding: 0 0 var(--ax-sp-section, 76px) !important; }


/* ##########################################################################
   About — responsive layer. Page-scoped (this file loads on About only).
   Breakpoints (max-width, desktop-first cascade):
     19200px all screens | 1399px desktop/laptop | 1199px tablet landscape
      991px tablet and smaller | 767px mobile landscape | 576px phones
   ########################################################################## */

/* ---- 19200px: all screens --------------------------------------------- */
@media screen and (max-width: 19200px) {
    .ax-intro__img { max-width: 100%; height: auto; }
    .ax-stat__num { white-space: nowrap; }
    .ax-value__title, .ax-purpose__title { overflow-wrap: break-word; }
}

/* ---- 1399px: desktop and laptop --------------------------------------- */
@media screen and (max-width: 1399px) {
    :root {
        --ax-t-display: clamp(2.3rem, 3.9vw, 3.4rem);
        --ax-t-sub:     clamp(1.6rem, 2.4vw, 2.1rem);
        --ax-sp-section: 76px;
        --ax-sp-head:    40px;
    }
    .about1.inner-about-block { padding: 64px 0 !important; }
}

/* ---- 1199px: tablet landscape and small desktop ----------------------- */
@media screen and (max-width: 1199px) {
    :root {
        --ax-t-display: clamp(2.1rem, 3.6vw, 3rem);
        --ax-t-sub:     clamp(1.5rem, 2.3vw, 1.9rem);
        --ax-sp-section: 68px;
        --ax-sp-head:    36px;
    }
    /* keep copy clear of the fixed Contact Now tab (left) and social rail (right) */
    body .container { padding-left: 36px; padding-right: 36px; }
    .ax-values__grid { gap: 20px; }
    .ax-value { padding: 26px 24px 28px; }
}

/* ---- 991px: tablet and smaller ---------------------------------------- */
@media screen and (max-width: 991px) {
    :root {
        --ax-t-display: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
        --ax-t-sub:     clamp(1.3rem, 1.05rem + 1.4vw, 1.8rem);
        --ax-sp-section: 56px;
        --ax-sp-head:    32px;
    }
    .about1.inner-about-block { padding: 56px 0 !important; }
    .ax-intro__head { margin-bottom: 28px; }
    .ax-intro__img { max-width: 560px; margin-inline: auto; }
    .about1 .about1-hadding { margin-top: 28px; }
    .ax-purpose { padding: 56px 0; }
    .ax-purpose__title { font-size: var(--ax-t-display); }   /* same scale as the other section headings */
    .ax-values { padding: var(--ax-sp-section) 0 36px; }
    .ax-values__head { margin-bottom: 32px; }
    .ax-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .cta4 { padding-bottom: var(--ax-sp-section) !important; }
}

/* ---- 767px: mobile landscape and small tablets ------------------------ */
@media screen and (max-width: 767px) {
    :root { --ax-sp-section: 48px; --ax-sp-head: 28px; }
    .about1.inner-about-block { padding: 48px 0 !important; }
    .ax-purpose { padding: 48px 0; }
    .ax-values { padding-bottom: 32px; }
    .ax-stat__num { font-size: clamp(1.7rem, 5.4vw, 2.2rem); }
}

/* ---- 576px: mobile phones --------------------------------------------- */
@media screen and (max-width: 576px) {
    :root { --ax-sp-section: 40px; --ax-sp-head: 24px; }
    .about1.inner-about-block { padding: 40px 0 !important; }
    .ax-intro__head { margin-bottom: 22px; }
    .ax-purpose { padding: 40px 0; }
    .ax-values { padding-bottom: 28px; }
    .ax-values__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ax-value { padding: 22px 22px 24px; }
    .ax-value__icon { width: 52px; height: 52px; margin-bottom: 16px; }
    .ax-stat__label { font-size: clamp(.8rem, 3.4vw, .9rem); }
}