/* ==========================================================================
   framework-used.css — Northline Studio
   GENERATED by tools/generate_css.py from `classes.json` + the palette
   registry. Do not hand-edit: change used-classes.json and regenerate, or
   put new styles in components.css / pages.css.

   Class names are byte-identical to the export so this markup maps 1:1 back
   to the original Bricks utility classes during WordPress migration.

   Responsive suffixes (Bricks defaults, max-width):
     -xl = 1280px  -l = 991px  -m = 767px  -s = 479px
   Color utilities (bg-* and text-*) resolve to palette custom properties, so all
   recoloring happens once in palette.css — the same token contract the
   builder uses.
   ========================================================================== */

/* ================= Grid ================= */
.grid {
  display: grid;
}
.grid-1 {
  grid-template-columns: var(--grid-1);
}
.grid-2 {
  grid-template-columns: var(--grid-2);
}
.grid-3 {
  grid-template-columns: var(--grid-3);
}
.grid-4 {
  grid-template-columns: var(--grid-4);
}
.grid-2-1 {
  grid-template-columns: var(--grid-2-1);
}
.grid-1-2 {
  grid-template-columns: var(--grid-1-2);
}
.grid-3-1 {
  grid-template-columns: var(--grid-3-1);
}
.grid-1-3 {
  grid-template-columns: var(--grid-1-3);
}
.grid-2-3 {
  grid-template-columns: var(--grid-2-3);
}
.grid-3-2 {
  grid-template-columns: var(--grid-3-2);
}
@media (max-width: 767px) {
  .grid-1-m {
    grid-template-columns: var(--grid-1);
  }
}
@media (max-width: 479px) {
  .grid-1-s {
    grid-template-columns: var(--grid-1);
  }
}
@media (max-width: 991px) {
  .grid-2-l {
    grid-template-columns: var(--grid-2);
  }
}
@media (max-width: 767px) {
  .grid-2-m {
    grid-template-columns: var(--grid-2);
  }
}
@media (max-width: 479px) {
  .grid-2-s {
    grid-template-columns: var(--grid-2);
  }
}
@media (max-width: 991px) {
  .grid-3-l {
    grid-template-columns: var(--grid-3);
  }
}
@media (max-width: 767px) {
  .grid-3-m {
    grid-template-columns: var(--grid-3);
  }
}
@media (max-width: 991px) {
  .grid-4-l {
    grid-template-columns: var(--grid-4);
  }
}
@media (max-width: 767px) {
  .grid-4-m {
    grid-template-columns: var(--grid-4);
  }
}
@media (max-width: 991px) {
  .grid-2-1-l {
    grid-template-columns: var(--grid-2-1);
  }
}
@media (max-width: 991px) {
  .grid-1-2-l {
    grid-template-columns: var(--grid-1-2);
  }
}
@media (max-width: 991px) {
  .grid-3-1-l {
    grid-template-columns: var(--grid-3-1);
  }
}
@media (max-width: 991px) {
  .grid-1-3-l {
    grid-template-columns: var(--grid-1-3);
  }
}
@media (max-width: 991px) {
  .grid-2-3-l {
    grid-template-columns: var(--grid-2-3);
  }
}
@media (max-width: 991px) {
  .grid-3-2-l {
    grid-template-columns: var(--grid-3-2);
  }
}
.place-center {
  place-items: center;
}
.grid-auto-3 {
  grid-template-columns: var(--grid-auto-3);
}
.grid-auto-4 {
  grid-template-columns: var(--grid-auto-4);
}
@media (max-width: 991px) {
  .grid-auto-3-l {
    grid-template-columns: var(--grid-auto-3);
  }
}
@media (max-width: 767px) {
  .grid-auto-4-m {
    grid-template-columns: var(--grid-auto-4);
  }
}

/* ================= Gap ================= */
.gap-0 {
  column-gap: var(--space-0);
  row-gap: var(--space-0);
}
.gap-2 {
  column-gap: var(--space-2);
  row-gap: var(--space-2);
}
.gap-4 {
  column-gap: var(--space-4);
  row-gap: var(--space-4);
}
.gap-8 {
  column-gap: var(--space-8);
  row-gap: var(--space-8);
}
.gap-12 {
  column-gap: var(--space-12);
  row-gap: var(--space-12);
}
.gap-16 {
  column-gap: var(--space-16);
  row-gap: var(--space-16);
}
.gap-24 {
  column-gap: var(--space-24);
  row-gap: var(--space-24);
}
.gap-32 {
  column-gap: var(--space-32);
  row-gap: var(--space-32);
}
.gap-40 {
  column-gap: var(--space-40);
  row-gap: var(--space-40);
}
.gap-48 {
  column-gap: var(--space-48);
  row-gap: var(--space-48);
}
.gap-64 {
  column-gap: var(--space-64);
  row-gap: var(--space-64);
}
.gap-col-24 {
  column-gap: var(--space-24);
}
.gap-row-8 {
  row-gap: var(--space-8);
}
.gap-row-16 {
  row-gap: var(--space-16);
}
.gap-row-24 {
  row-gap: var(--space-24);
}

/* ================= Padding ================= */
.pad-0 {
  padding-top: var(--space-0);
  padding-right: var(--space-0);
  padding-bottom: var(--space-0);
  padding-left: var(--space-0);
}
.pad-8 {
  padding-top: var(--space-8);
  padding-right: var(--space-8);
  padding-bottom: var(--space-8);
  padding-left: var(--space-8);
}
.pad-12 {
  padding-top: var(--space-12);
  padding-right: var(--space-12);
  padding-bottom: var(--space-12);
  padding-left: var(--space-12);
}
.pad-16 {
  padding-top: var(--space-16);
  padding-right: var(--space-16);
  padding-bottom: var(--space-16);
  padding-left: var(--space-16);
}
.pad-24 {
  padding-top: var(--space-24);
  padding-right: var(--space-24);
  padding-bottom: var(--space-24);
  padding-left: var(--space-24);
}
.pad-32 {
  padding-top: var(--space-32);
  padding-right: var(--space-32);
  padding-bottom: var(--space-32);
  padding-left: var(--space-32);
}
.pad-40 {
  padding-top: var(--space-40);
  padding-right: var(--space-40);
  padding-bottom: var(--space-40);
  padding-left: var(--space-40);
}
.pad-48 {
  padding-top: var(--space-48);
  padding-right: var(--space-48);
  padding-bottom: var(--space-48);
  padding-left: var(--space-48);
}
.pad-64 {
  padding-top: var(--space-64);
  padding-right: var(--space-64);
  padding-bottom: var(--space-64);
  padding-left: var(--space-64);
}
.pad-80 {
  padding-top: var(--space-80);
  padding-right: var(--space-80);
  padding-bottom: var(--space-80);
  padding-left: var(--space-80);
}
.pad-96 {
  padding-top: var(--space-96);
  padding-right: var(--space-96);
  padding-bottom: var(--space-96);
  padding-left: var(--space-96);
}
.pad-112 {
  padding-top: var(--space-112);
  padding-right: var(--space-112);
  padding-bottom: var(--space-112);
  padding-left: var(--space-112);
}
.pad-inline-24 {
  padding-right: var(--space-24);
  padding-left: var(--space-24);
}
.pad-inline-48 {
  padding-right: var(--space-48);
  padding-left: var(--space-48);
}
.pad-block-32 {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}
.pad-block-48 {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}
.pad-block-64 {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}
.pad-block-80 {
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
}
.pad-block-96 {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}
.pad-t-24 {
  padding-top: var(--space-24);
}
.pad-b-32 {
  padding-bottom: var(--space-32);
}
.pad-b-48 {
  padding-bottom: var(--space-48);
}
.pad-b-64 {
  padding-bottom: var(--space-64);
}

/* ================= Margin ================= */
.mar-0 {
  margin-top: var(--space-0);
  margin-right: var(--space-0);
  margin-bottom: var(--space-0);
  margin-left: var(--space-0);
}
.mar-8 {
  margin-top: var(--space-8);
  margin-right: var(--space-8);
  margin-bottom: var(--space-8);
  margin-left: var(--space-8);
}
.mar-16 {
  margin-top: var(--space-16);
  margin-right: var(--space-16);
  margin-bottom: var(--space-16);
  margin-left: var(--space-16);
}
.mar-24 {
  margin-top: var(--space-24);
  margin-right: var(--space-24);
  margin-bottom: var(--space-24);
  margin-left: var(--space-24);
}
.mar-32 {
  margin-top: var(--space-32);
  margin-right: var(--space-32);
  margin-bottom: var(--space-32);
  margin-left: var(--space-32);
}
.mar-48 {
  margin-top: var(--space-48);
  margin-right: var(--space-48);
  margin-bottom: var(--space-48);
  margin-left: var(--space-48);
}
.mar-64 {
  margin-top: var(--space-64);
  margin-right: var(--space-64);
  margin-bottom: var(--space-64);
  margin-left: var(--space-64);
}
.mar-t-0 {
  margin-top: var(--space-0);
}
.mar-t-8 {
  margin-top: var(--space-8);
}
.mar-t-16 {
  margin-top: var(--space-16);
}
.mar-t-24 {
  margin-top: var(--space-24);
}
.mar-t-32 {
  margin-top: var(--space-32);
}
.mar-t-48 {
  margin-top: var(--space-48);
}
.mar-t-64 {
  margin-top: var(--space-64);
}
.mar-b-0 {
  margin-bottom: var(--space-0);
}
.mar-b-8 {
  margin-bottom: var(--space-8);
}
.mar-b-16 {
  margin-bottom: var(--space-16);
}
.mar-b-24 {
  margin-bottom: var(--space-24);
}
.mar-b-32 {
  margin-bottom: var(--space-32);
}
.mar-b-48 {
  margin-bottom: var(--space-48);
}
.mar-b-64 {
  margin-bottom: var(--space-64);
}
.mar-b-96 {
  margin-bottom: var(--space-96);
}
.mar-inline-0 {
  margin-right: var(--space-0);
  margin-left: var(--space-0);
}
.mar-inline-16 {
  margin-right: var(--space-16);
  margin-left: var(--space-16);
}
.mar-block-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}
.mar-block-24 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}
.mar-block-32 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}
.mar-block-48 {
  margin-top: var(--space-48);
  margin-bottom: var(--space-48);
}
.mar-block-64 {
  margin-top: var(--space-64);
  margin-bottom: var(--space-64);
}

/* ================= Width ================= */
.w-full {
  width: 100%;
}
.w-fit {
  width: fit-content;
}
.w-auto {
  width: auto;
}
.w-80 {
  width: min(100%, var(--width-80));
}
.w-96 {
  width: min(100%, var(--width-96));
}
.w-128 {
  width: min(100%, var(--width-128));
}
.w-192 {
  width: min(100%, var(--width-192));
}
.w-256 {
  width: min(100%, var(--width-256));
}

/* ================= Height ================= */
.h-full {
  height: 100%;
}
.h-fit {
  height: fit-content;
}
.h-min {
  height: min-content;
}
.h-screen {
  height: 100vh;
}
.h-dscreen {
  height: 100dvh;
}
.h-8 {
  height: min(100dvh, var(--height-8));
}
.h-12 {
  height: min(100dvh, var(--height-12));
}
.h-16 {
  height: min(100dvh, var(--height-16));
}
.h-24 {
  height: min(100dvh, var(--height-24));
}
.h-40 {
  height: min(100dvh, var(--height-40));
}
.h-48 {
  height: min(100dvh, var(--height-48));
}
.h-56 {
  height: min(100dvh, var(--height-56));
}
.h-64 {
  height: min(100dvh, var(--height-64));
}
.h-80 {
  height: min(100dvh, var(--height-80));
}

/* ================= Typography ================= */
.h1 {
  font-size: var(--h1);
}
.h2 {
  font-size: var(--h2);
}
.h3 {
  font-size: var(--h3);
}
.h4 {
  font-size: var(--h4);
}
.h5 {
  font-size: var(--h5);
}
.h6 {
  font-size: var(--h6);
}
.text-10 {
  font-size: var(--text-10);
}
.text-12 {
  font-size: var(--text-12);
}
.text-14 {
  font-size: var(--text-14);
}
.text-16 {
  font-size: var(--text-16);
}
.text-18 {
  font-size: var(--text-18);
}
.text-20 {
  font-size: var(--text-20);
}
.text-24 {
  font-size: var(--text-24);
}
.text-28 {
  font-size: var(--text-28);
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.leading-snug {
  line-height: 1.375;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-loose {
  line-height: 2;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-normal {
  letter-spacing: 0px;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.no-underline {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}
.truncate {
  overflow: hidden;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.text-wrap {
  text-wrap: wrap;
}
.text-nowrap {
  text-wrap: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}

/* ================= Utilities ================= */
.flex {
  display: flex;
}
.bg-surface {
  background-color: var(--surface);
}
/* GENERATOR-NOTE: export stores `_width: var(--blog-width)`; sibling
   exports consume --flow-spacing/--paragraph-spacing, and Bricks
   implements smart spacing as vertical flow margins. Emitted as that
   rule under the original name. */
.smart-spacing > * + * { margin-block-start: var(--flow-spacing); }
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.grow {
  flex-grow: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-1 {
  flex: 1 1 0%;
}

/* ================= Position ================= */
.static {
  position: static;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0;
}
.top-0 {
  top: 0;
}
.top-auto {
  top: auto;
}
.bottom-0 {
  bottom: 0;
}
.bottom-auto {
  bottom: auto;
}
.left-0 {
  left: 0;
}
.left-auto {
  left: auto;
}
.right-0 {
  right: 0;
}

/* ================= Radius ================= */
.rad-0 {
  border-top-left-radius: var(--radius-0);
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  border-bottom-left-radius: var(--radius-0);
}
.rad-4 {
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  border-bottom-left-radius: var(--radius-4);
}
.rad-8 {
  border-top-left-radius: var(--radius-8);
  border-top-right-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  border-bottom-left-radius: var(--radius-8);
}
.rad-12 {
  border-top-left-radius: var(--radius-12);
  border-top-right-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  border-bottom-left-radius: var(--radius-12);
}
.rad-16 {
  border-top-left-radius: var(--radius-16);
  border-top-right-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  border-bottom-left-radius: var(--radius-16);
}
.rad-24 {
  border-top-left-radius: var(--radius-24);
  border-top-right-radius: var(--radius-24);
  border-bottom-right-radius: var(--radius-24);
  border-bottom-left-radius: var(--radius-24);
}
.rad-full {
  border-top-left-radius: var(--radius-full);
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
  border-bottom-left-radius: var(--radius-full);
}

/* ================= Shadows ================= */
.shadow-1 {
  box-shadow: var(--shadow-1);
}
.shadow-2 {
  box-shadow: var(--shadow-2);
}
.shadow-3 {
  box-shadow: var(--shadow-3);
}
.shadow-4 {
  box-shadow: var(--shadow-4);
}
.shadow-5 {
  box-shadow: var(--shadow-5);
}

/* ================= colors ================= */
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-d-1 {
  background-color: var(--primary-d-1);
}
.bg-primary-d-2 {
  background-color: var(--primary-d-2);
}
.bg-primary-l-8 {
  background-color: var(--primary-l-8);
}
.bg-primary-t-1 {
  background-color: var(--primary-t-1);
}
.bg-primary-t-2 {
  background-color: var(--primary-t-2);
}
.bg-primary-t-3 {
  background-color: var(--primary-t-3);
}
.bg-primary-t-5 {
  background-color: var(--primary-t-5);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-d-1 {
  background-color: var(--secondary-d-1);
}
.bg-secondary-t-1 {
  background-color: var(--secondary-t-1);
}
.bg-secondary-t-2 {
  background-color: var(--secondary-t-2);
}
.bg-dark {
  background-color: var(--dark);
}
.bg-dark-d-1 {
  background-color: var(--dark-d-1);
}
.bg-dark-t-1 {
  background-color: var(--dark-t-1);
}
.bg-dark-t-3 {
  background-color: var(--dark-t-3);
}
.bg-light {
  background-color: var(--light);
}
.bg-light-d-1 {
  background-color: var(--light-d-1);
}
.bg-light-d-2 {
  background-color: var(--light-d-2);
}
.bg-light-l-1 {
  background-color: var(--light-l-1);
}
.bg-white {
  background-color: var(--white);
}
.bg-black {
  background-color: var(--black);
}
.text-primary {
  color: var(--primary);
}
.text-primary-d-1 {
  color: var(--primary-d-1);
}
.text-primary-l-2 {
  color: var(--primary-l-2);
}
.text-primary-l-5 {
  color: var(--primary-l-5);
}
.text-primary-t-1 {
  color: var(--primary-t-1);
}
.text-secondary {
  color: var(--secondary);
}
.text-secondary-l-2 {
  color: var(--secondary-l-2);
}
.text-secondary-t-6 {
  color: var(--secondary-t-6);
}
.text-light {
  color: var(--light);
}
.text-light-d-1 {
  color: var(--light-d-1);
}
.text-light-d-2 {
  color: var(--light-d-2);
}
.text-light-d-3 {
  color: var(--light-d-3);
}
.text-light-d-4 {
  color: var(--light-d-4);
}
.text-light-d-5 {
  color: var(--light-d-5);
}
.text-light-l-8 {
  color: var(--light-l-8);
}
.text-white {
  color: var(--white);
}
.text-black {
  color: var(--black);
}

/* ================= cursor ================= */
.cursor-pointer {
  cursor: pointer;
}

/* ================= object-fit ================= */
.object-cover {
  object-fit: cover;
}
.object-contain {
  object-fit: contain;
}

/* ================= overflow ================= */
.overflow-clip {
  overflow: clip;
}

/* ================= visibility ================= */
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-100 {
  opacity: 1;
}

/* ================= aspect-ratio ================= */
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.aspect-16\/9 {
  aspect-ratio: 16 / 9;
}
.aspect-4\/3 {
  aspect-ratio: 4 / 3;
}

/* ================= z-index ================= */
.z-0 {
	z-index: 0;
}
.z-1 {
	z-index: 1;
}
.z-10 {
	z-index: 10;
}
.z-100 {
	z-index: 100;
}

/* ================= Order ================= */
.o-1 {
  order: 1;
}
.o-2 {
  order: 2;
}
.o-3 {
  order: 3;
}
@media (max-width: 991px) {
  .o-1-l {
    order: 1;
  }
}
@media (max-width: 991px) {
  .o-2-l {
    order: 2;
  }
}
@media (max-width: 767px) {
  .o-1-m {
    order: 1;
  }
}
@media (max-width: 767px) {
  .o-2-m {
    order: 2;
  }
}

/* ================= process-card ================= */
.process-card {
  column-gap: var(--space-s);
  row-gap: var(--space-s);
  text-align: center;
  padding-block-start: var(--space-l);
  padding-inline-end: var(--space-l);
  padding-block-end: var(--space-l);
  padding-inline-start: var(--space-l);
  padding-top: var(--space-24);
  padding-right: var(--space-24);
  padding-bottom: var(--space-24);
  padding-left: var(--space-24);
}

.process-card {

    position: relative;
    isolation: isolate;

}

.process-card:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: var(--border-width) solid var(--primary);
    border-radius: var(--radius-16);
    -webkit-mask: var(--mask);
    mask: var(--mask);


}

.process-card:after {
  --counter-font-size: var(--body-text-28);
    content: counter(process);
    counter-increment: process;
    position: absolute;
    inset: calc(var(--counter-size) / -2) auto auto 50%;
    translate: -50% 0;
    font-size: var(--counter-font-size);
    line-height: 1;
    inline-size: var(--counter-size);
    block-size: var(--counter-size);
    display: grid;
    place-items: center;
  background-color: var(--primary);
  color: var(--light);
  
}
/* .process-card__description: export carries no settings and no palette mapping —
   builder-generated behavior unavailable; not styled here. */
.process-card__heading {
  font-size: var(--h4);
  margin-top: var(--space-16);
}
.process-grid {
  margin-top: var(--space-64);
}

.process-grid{
  --counter-size: calc(var(--h1)*1.1);
  counter-reset: process;
  grid-template-columns: var(--grid-3);
    grid-auto-rows: minmax(min-content, 1fr);
    row-gap: calc(var(--counter-size)/1);
  column-gap: calc(var(--counter-size)/2);
}

/* ================= Split Section ================= */
.split-section {
  flex-direction: row;
}
.split-section__content {
  width: calc(var(--split-col) - max(0px,(100% - var(--content-width-safe))/2));;
}

/* Desktop behavior */
.split-section.justify-end .split-section__content {
  padding-right: var(--gutter);
}

.split-section.justify-start .split-section__content {
  padding-left: var(--gutter);
}

/* Mobile reset (works everywhere) */
@media (max-width: 991px) {

  .split-section.justify-end .split-section__content {
    padding-right: 0;
  }

  .split-section.justify-start .split-section__content {
    padding-left: 0;
  }

}
@media (max-width: 991px) {
  .split-section__media {
    width: calc(100% - var(--split-col));
    width: 100%;
  }
}

/* ================= ruled-grid ================= */
.ruled-grid {
  --gap: 3rem;
  --line-thickness: 1px;
  --line-color: var(--border);
  --line-offset: calc(var(--gap) / 2);


  grid-auto-rows: minmax(min-content, 1fr);
  align-items: stretch;
  gap: var(--gap);
  overflow: hidden;
}

.ruled-grid > * {
  position: relative;
  min-width: 0;
}

/* Grid lines */
.ruled-grid > *::before,
.ruled-grid > *::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-color: var(--line-color);
  pointer-events: none;
}

/* Horizontal row line */
.ruled-grid > *::after {
  inline-size: 100vw;
  block-size: var(--line-thickness);
  inset-block-start: calc(var(--line-offset) * -1);
  inset-inline-start: 0;
}

/* Vertical column line */
.ruled-grid > *::before {
  inline-size: var(--line-thickness);
  block-size: 100vh;
  inset-block-start: 0;
  inset-inline-start: calc(var(--line-offset) * -1);
}

/* Keep card content above the lines */
.ruled-grid > * > * {
  position: relative;
  z-index: 1;
}

/* ================= Gap ================= */
.gap-row-48 {
  row-gap: var(--space-48);
}

/* ================= Padding ================= */
.pad-block-24 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

/* ================= Entrance Animations ================= */
/* .anim-group: export carries no settings and no palette mapping —
   builder-generated behavior unavailable; not styled here. */
/* .anim-child: export carries no settings and no palette mapping —
   builder-generated behavior unavailable; not styled here. */