.elementor-kit-7{--e-global-color-primary:#1A2640;--e-global-color-secondary:#D0D7FE;--e-global-color-text:#070606;--e-global-color-accent:#99FA4F;--e-global-color-d49ac31:#001C84;--e-global-color-cd8be26:#233DC0;--e-global-color-f00746b:#455EFC;--e-global-color-5dedc0d:#D0D7FE;--e-global-color-7322213:#DAE6FE;--e-global-color-2cd73e0:#E3F6FD;--e-global-color-965453b:#F1F1F2;--e-global-color-371c13e:#DFE0FF;--e-global-color-72e956c:#FFFFFF;--e-global-color-0ecf2d2:#C7EDFC;--e-global-color-1058e59:#384259;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================
   FONT LOADING — Urbanist (Variable)
   Place this at the VERY TOP of your global CSS
============================ */

/* Urbanist — Roman */
@font-face {
  font-family: "Urbanist";
  src: url("https://guidedhr.u-bahn.com.au/wp-content/uploads/2026/01/Urbanist-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Urbanist — Italic */
@font-face {
  font-family: "Urbanist";
  src: url("https://guidedhr.u-bahn.com.au/wp-content/uploads/2026/01/Urbanist-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Optional: light global nudge (your .site-wrap* rule below is the real enforcer) */
h1, h2, h3, h4, h5, h6,
body {
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* =========================================================
   BASE SITE SYSTEM (Clone-friendly)
   ONE TOKEN BLOCK ONLY
========================================================= */

.site-wrap {
  /* =========================
     Base
  ========================= */
  font-size: 16px;

  /* ✅ CLONE NOTE: Change this when cloning */
  --container-max: 1280px;

  /* =========================
     Typography tokens
  ========================= */
  --h1-size: clamp(42px, 5.7vw, 60px);
  --h1-lh: 1.2;
  --h1-weight: 700;

  --h2-cap-size: clamp(16px, 1.9vw, 22px);
  --h2-cap-lh: 1.2;
  --h2-cap-weight: 700;
  --h2-cap-letter: 0.06em;
  --h2-cap-transform: uppercase;


  /* =========================
     Layout tokens
  ========================= */
  --pad-inline: clamp(20px, 4vw, 80px);
  --pad-inline-tablet: 32px;
  --pad-inline-mobile: 30px;

  --section-pad: 96px;
  --section-pad-tight: 64px;
  --section-pad-loose: 128px;

  --section-pad-m: 35px;
  --section-pad-tight-m: 24px;
  --section-pad-loose-m: 60px;

  --grid-col-gap: 24px;
  --grid-row-gap: 32px;
  --grid-row-gap-tablet: 24px;
  --grid-row-gap-mobile: 20px;

  /* =========================
     Button tokens
  ========================= */
  --btn-h: 50px;
  --btn-pad-x: 28px;
  --btn-circle: 42px;
  --btn-gap-r: 8px;

  --btn-speed: 280ms;
  --btn-ease: cubic-bezier(.22,.61,.36,1);

  --btn-bg: #99fa4f;
  --btn-bg-hover: #e5fed3;/* light green */
  --btn-text: #111;
  --btn-circle-bg: #99fa4f;
  --btn-circle-ring: 0;

  --btn2-bg: transparent;
  --btn-white-bg-hover: #FFF;/* white */
  --btn2-text: #111;
  --btn2-ring: #111;
  --btn2-circle-bg: #99fa4f;
  --btn2-circle-text: #fff;
  
    --btn3-bg: #455efc;
  --btn3-bg-hover: #dae6fe;/* light blue */
  --btn3-text: #FFF;/* white */
  --btn3-ring: #111;
  --btn3-circle-bg: #455efc;
  --btn3-circle-text: #FFF;
  
  
/* Block arrow mask — thicker version */
--icon-arrow-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='uuid-f0100b9e-5356-48df-8133-f03a688adeb2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 18.55'%3E%3Cdefs%3E%3Cstyle%3E.uuid-0895d06a-0d74-4b24-9dfc-11f5677ee4c5%7Bfill:%23191919;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='uuid-0895d06a-0d74-4b24-9dfc-11f5677ee4c5' points='10.53 0 9.83 .71 17.91 8.77 0 8.77 0 9.77 17.91 9.77 9.83 17.84 10.53 18.55 19.83 9.27 10.53 0'/%3E%3C/svg%3E");


/* Block arrow mask — THICK 
 url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='uuid-223a99e6-3233-4ad3-91a4-6e6036792be6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.18 18.9'%3E%3Cdefs%3E%3Cstyle%3E.uuid-a406ffd6-2a99-409c-a7da-45eb4bfc4cc1%7Bfill:%23191919;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='uuid-a406ffd6-2a99-409c-a7da-45eb4bfc4cc1' points='10.71 0 9.65 1.06 17.31 8.7 0 8.7 0 10.2 17.31 10.2 9.65 17.84 10.71 18.9 20.18 9.45 10.71 0'/%3E%3C/svg%3E");
*/

  /* Optional: arrow size token so both stay consistent */
  --icon-arrow-size: 21px;

  /* Button arrow colour token (button stays dark) */
  --btn-arrow-color: #111;
}


@media (min-width: 1440px) {
  .site-wrap { --pad-inline: 0px; }
}

/* Client-specific override hook (optional) */
body.client-guidedhr .site-wrap {
  /* override tokens here if needed */
}


/* ============================
   Force Urbanist for all content inside the site system
============================ */
.site-wrap,
.site-wrap * {
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* ============================
   Text utilities
============================ */

.site-wrap .text-2xl {
  font-size:clamp(30px, 4.2vw, 48px);
  line-height: 1.2;
  font-weight: 700;
  padding-bottom: 32px;
}


.site-wrap .text-xl {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
}

.site-wrap .text-lg {
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.5;
}

.site-wrap .text-md {
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.5;
}

.site-wrap .text-sm {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.6;
}


/* ============================
   Headings (consume tokens)
============================ */

/* H1 — page hero */
.site-wrap h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
}

/* H2 — */
.site-wrap h2 {
  font-size: clamp(25px, 3vw, 39px)!important;
  line-height: 1.3;
  font-weight: 700!important;
  text-transform: normal!important;
}

/* H3 — */
.site-wrap h3 {
    font-size: clamp(18px, 1.6vw, 25px);
    line-height: 1.3;
    font-weight: 700!important;
}

/* =====================================
  SECONDARY HEADINGS
===================================== */

/* Secondary Headings */


/* H2-cap */
.site-wrap h2.h2-cap,
.site-wrap .h2-cap h2,
.site-wrap .h2-cap .elementor-heading-title{
  font-size: var(--h2-cap-size) !important;
  line-height: var(--h2-cap-lh) !important;
  font-weight: var(--h2-cap-weight) !important;
  letter-spacing: var(--h2-cap-letter) !important;
  text-transform: var(--h2-cap-transform) !important;
}


.site-wrap .h3-lg {
  font-size: clamp(22px, 3vw, 31px)!important;
  line-height: 1.3;
  font-weight: 700;
}



.site-wrap h4 {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.3;
  font-weight: 700;
}

.site-wrap h5 {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}



/* =====================================
   PAGE TITLE SYSTEM
   - Homepage H1 = large (default)
   - Internal page H1.page-title = H2-CAP style
===================================== */

/* Elementor heading widget usually outputs:
   <h1 class="elementor-heading-title page-title">Title</h1>
   So target the H1 itself (not a parent) */
.site-wrap h1.elementor-heading-title.page-title{
  font-size: var(--h2-cap-size) !important;
  line-height: var(--h2-cap-lh) !important;
  font-weight: var(--h2-cap-weight) !important;
  letter-spacing: var(--h2-cap-letter) !important;
  text-transform: var(--h2-cap-transform) !important;
  margin-bottom: 28px; /* keep rhythm similar to H2 if you want */
}

/* Optional: if you sometimes put the class on a wrapper instead */
.site-wrap .page-title h1.elementor-heading-title{
  font-size: var(--h2-cap-size) !important;
  line-height: var(--h2-cap-lh) !important;
  font-weight: var(--h2-cap-weight) !important;
  letter-spacing: var(--h2-cap-letter) !important;
  text-transform: var(--h2-cap-transform) !important;
}

/* Auto-apply to any H1 inside a page header section (if you prefer this method) */
.site-wrap .section--page-header h1.elementor-heading-title{
  font-size: var(--h2-cap-size) !important;
  line-height: var(--h2-cap-lh) !important;
  font-weight: var(--h2-cap-weight) !important;
  letter-spacing: var(--h2-cap-letter) !important;
  text-transform: var(--h2-cap-transform) !important;
}



/* =====================================
   Typography Rhythm (Option A)
===================================== */
.site-wrap h1,
.site-wrap h2,
.site-wrap h3,
.site-wrap h4,
.site-wrap h5,
.site-wrap h6,
.site-wrap p,
.site-wrap ul,
.site-wrap ol {
  margin-top: 0;
}

.site-wrap h1 { margin-bottom: 32px; }
.site-wrap h2 { margin-bottom: 28px; }
.site-wrap h3,
.site-wrap text-2xl { margin-bottom: 24px; }
.site-wrap h4 { margin-bottom: 20px; }


.site-wrap p,
.site-wrap ul,
.site-wrap ol {
  margin-bottom: 16px;
}

.site-wrap p:last-child,
.site-wrap ul:last-child,
.site-wrap ol:last-child {
  margin-bottom: 0;
}

.site-wrap ul,
.site-wrap ol {
  padding-left: 1.25em;
}

@media (max-width: 767px) {
  .site-wrap h1 { margin-bottom: 24px; }
  .site-wrap h2 { margin-bottom: 22px; }
  .site-wrap h3,
  .site-wrap text-2xl { margin-bottom: 20px; }
}


/* =====================================
   UNDERLINE links
   Body + Headings
===================================== */

/* -------- Body links -------- */
.site-wrap .elementor-widget-text-editor a,
.site-wrap .casestudy-body a{
  color: inherit;
  text-decoration: none;

  background-image:
    linear-gradient(#455efc, #455efc),
    linear-gradient(#e0e0e0, #e0e0e0);

  background-size:
    0% 0.09em,     /* thinner line */
    100% 0.09em;

  /* sits behind descenders */
  background-position:
    0 calc(100% - 0.01em),
    0 calc(100% - 0.01em);

  background-repeat: no-repeat;

  transition:
    background-size 280ms cubic-bezier(.22,.61,.36,1);
}

.site-wrap .elementor-widget-text-editor a:hover,
.site-wrap .casestudy-body a:hover,
.site-wrap .elementor-widget-text-editor a:focus-visible,
.site-wrap .casestudy-body a:focus-visible{
  background-size:
    100% 0.09em,
    100% 0.09em;
}



/* -------- Headings with links -------- */
.site-wrap h1 a,
.site-wrap h2 a,
.site-wrap h3 a,
.site-wrap h4 a,
.site-wrap h5 a,
.site-wrap h6 a{
  color: inherit;
  text-decoration: none;

  background-image:
    linear-gradient(#455efc, #455efc),
    linear-gradient(#e0e0e0, #e0e0e0);

  background-size:
    0% 0.11em,     /* slightly thicker than body, but restrained */
    100% 0.11em;

  background-position:
    0 calc(100% - 0.02em),
    0 calc(100% - 0.02em);

  background-repeat: no-repeat;

  transition:
    background-size 320ms cubic-bezier(.22,.61,.36,1);
}

.site-wrap h1 a:hover,
.site-wrap h2 a:hover,
.site-wrap h3 a:hover,
.site-wrap h4 a:hover,
.site-wrap h5 a:hover,
.site-wrap h6 a:hover,
.site-wrap h1 a:focus-visible,
.site-wrap h2 a:focus-visible,
.site-wrap h3 a:focus-visible,
.site-wrap h4 a:focus-visible,
.site-wrap h5 a:focus-visible,
.site-wrap h6 a:focus-visible{
  background-size:
    100% 0.11em,
    100% 0.11em;
}


/* Accessibility */
.site-wrap a:focus-visible{
  outline: none;
}

/* =====================================
   UNDERLINE does not appear on buttons
===================================== */

.site-wrap a.elementor-button,
.site-wrap .elementor-item,
.site-wrap.footer a {
  background-image: none !important;
}





/* =====================================
   GRID PREVIEW OVERLAY (DEBUG ONLY)
   Toggle by adding class: grid-debug
===================================== */
.site-wrap.grid-debug .grid-12 {
  position: relative;
}

.site-wrap.grid-debug .grid-12::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;

  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 0, 0, 0.12),
    rgba(255, 0, 0, 0.12) calc((100% - (11 * var(--grid-col-gap))) / 12),
    transparent calc((100% - (11 * var(--grid-col-gap))) / 12),
    transparent calc(((100% - (11 * var(--grid-col-gap))) / 12) + var(--grid-col-gap))
  );
}


/* =====================================
   SYSTEM RESET (scoped to .site-wrap)
===================================== */
.site-wrap {
  width: 100%;
  max-width: none !important;
}

/* =====================================
   CONTAINER (max-width + gutters)
   Use class `container` on the container that should constrain content.
===================================== */
.site-wrap .container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: var(--pad-inline);
  padding-right: var(--pad-inline);
}

@media (max-width: 1024px) {
  .site-wrap .container {
    padding-left: var(--pad-inline-tablet);
    padding-right: var(--pad-inline-tablet);
  }
}

@media (max-width: 767px) {
  .site-wrap .container {
    max-width: 100%;
    padding-left: var(--pad-inline-mobile);
    padding-right: var(--pad-inline-mobile);
  }
}


/* =====================================
   Section Spacing System (vertical rhythm only)
   Use class `section` on top-level sections.
===================================== */
.site-wrap .section {
  padding-inline: 0;
  padding-block: var(--section-pad);
}

.site-wrap .section--tight {
  padding-block: var(--section-pad-tight);
}

.site-wrap .section--loose {
  padding-block: var(--section-pad-loose);
}

@media (max-width: 767px) {
  .site-wrap .section {
    padding-block: var(--section-pad-m);
  }
  .site-wrap .section--tight {
    padding-block: var(--section-pad-tight-m);
  }
  .site-wrap .section--loose {
    padding-block: var(--section-pad-loose-m);
  }
}


/* =====================================
   12-Column Grid System (Elementor)
   Use class `grid-12` on the grid parent.
===================================== */
.site-wrap .grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap: var(--grid-row-gap);
}

.site-wrap .col-1  { grid-column: span 1; }
.site-wrap .col-2  { grid-column: span 2; }
.site-wrap .col-3  { grid-column: span 3; }
.site-wrap .col-4  { grid-column: span 4; }
.site-wrap .col-5  { grid-column: span 5; }
.site-wrap .col-6  { grid-column: span 6; }
.site-wrap .col-7  { grid-column: span 7; }
.site-wrap .col-8  { grid-column: span 8; }
.site-wrap .col-9  { grid-column: span 9; }
.site-wrap .col-10 { grid-column: span 10; }
.site-wrap .col-11 { grid-column: span 11; }
.site-wrap .col-12 { grid-column: 1 / -1; }

.site-wrap .col-10-center { grid-column: 2 / span 10; }
.site-wrap .col-8-center  { grid-column: 3 / span 8; }
.site-wrap .col-6-center  { grid-column: 4 / span 6; }
.site-wrap .col-4-center  { grid-column: 5 / span 4; }

.site-wrap .pos-1-5 { grid-column: 1 / span 5; }
.site-wrap .pos-2-3 { grid-column: 2 / span 3; }
.site-wrap .pos-2-4 { grid-column: 2 / span 4; }
.site-wrap .pos-2-5 { grid-column: 2 / span 5; }
.site-wrap .pos-2-6 { grid-column: 2 / span 6; }
.site-wrap .pos-3-4 { grid-column: 3 / span 4; }
.site-wrap .pos-3-5 { grid-column: 3 / span 5; }
.site-wrap .pos-5-3 { grid-column: 5 / span 3; }
.site-wrap .pos-5-4 { grid-column: 5 / span 4; }
.site-wrap .pos-5-5 { grid-column: 5 / span 5; }
.site-wrap .pos-5-6 { grid-column: 5 / span 6; }
.site-wrap .pos-6-3 { grid-column: 6 / span 3; }
.site-wrap .pos-6-4 { grid-column: 6 / span 4; }
.site-wrap .pos-6-5 { grid-column: 6 / span 5; }
.site-wrap .pos-6-6 { grid-column: 6 / span 6; }
.site-wrap .pos-6-7 { grid-column: 6 / span 7; }
.site-wrap .pos-7-3 { grid-column: 7 / span 3; }
.site-wrap .pos-7-4 { grid-column: 7 / span 4; }
.site-wrap .pos-7-5 { grid-column: 7 / span 5; }
.site-wrap .pos-7-6 { grid-column: 7 / span 6; }
.site-wrap .pos-8-3 { grid-column: 8 / span 3; }
.site-wrap .pos-8-4 { grid-column: 8 / span 4; }
.site-wrap .pos-8-5 { grid-column: 8 / span 5; }
.site-wrap .pos-4-4 { grid-column: 4 / span 4; }




@media (max-width: 1024px) {
  .site-wrap .grid-12 {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--grid-row-gap-tablet);
  }
  .site-wrap .grid-12 > * {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  .site-wrap .grid-12 {
    row-gap: var(--grid-row-gap-mobile);
  }
}

/* =====================================
   FADE IN SCROLL FOR CONTAINERS
===================================== */

.site-wrap .fade-in-scroll {
  opacity: 0;
  transform: translateY(40px); /* slightly more movement */
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-wrap .fade-in-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-wrap .fade-in-scroll.delay-1 { transition-delay: 100ms; }
.site-wrap .fade-in-scroll.delay-2 { transition-delay: 200ms; }
.site-wrap .fade-in-scroll.delay-3 { transition-delay: 300ms; }
.site-wrap .fade-in-scroll.delay-4 { transition-delay: 400ms; }

/* Elementor editor override */
body.elementor-editor-active .site-wrap .fade-in-scroll,
body.elementor-editor-active .site-wrap .fade-in-scroll.is-visible,
body.elementor-preview .site-wrap .fade-in-scroll,
body.elementor-preview .site-wrap .fade-in-scroll.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* =====================================
   BUTTON SYSTEM (Tokens, no JS)
   Targets: .site-wrap .elementor-button
   Variants (add to widget wrapper):
   - btn--outline
   - btn--blue
   - btn--blue-w-hov
   - btn--w-hov
   - btn--outline-w-hov

   Optional mobile-only full width on specific buttons:
   - btn--mobile-full
===================================== */


/* =====================================
   BASE BUTTON
===================================== */
.site-wrap .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: 999px;

  background: var(--btn-bg-current, var(--btn-bg));
  color: var(--btn-text);

  text-decoration: none !important;
  border: 0;
  box-shadow: none;
  overflow: hidden;

  transition:
    background var(--btn-speed) var(--btn-ease),
    padding-right var(--btn-speed) var(--btn-ease),
    transform 120ms ease;
}

.site-wrap .elementor-button:active {
  transform: translateY(1px);
}

.site-wrap .elementor-button .elementor-button-text {
  white-space: nowrap;
  transition: transform var(--btn-speed) var(--btn-ease);
}



/* =====================================
   CIRCLE
===================================== */
.site-wrap .elementor-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  z-index: 1;

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-circle-bg-current, var(--btn-circle-bg));
  box-shadow: inset 0 0 0 2px var(--btn-circle-ring);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    box-shadow var(--btn-speed) var(--btn-ease);
}


/* =====================================
   ARROW
===================================== */
.site-wrap .elementor-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  z-index: 2;

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-arrow-color);

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--icon-arrow-size) var(--icon-arrow-size);
  mask-size: var(--icon-arrow-size) var(--icon-arrow-size);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease);
}


/* =====================================
   HOVER / FOCUS
===================================== */
.site-wrap .elementor-button:hover,
.site-wrap .elementor-button:focus-visible {
  background: var(--btn-bg-hover) !important;
  padding-right: calc(var(--btn-pad-x) + (var(--btn-circle) / 2) + var(--btn-gap-r));
}

.site-wrap .elementor-button:hover::after,
.site-wrap .elementor-button:focus-visible::after,
.site-wrap .elementor-button:hover::before,
.site-wrap .elementor-button:focus-visible::before {
  transform: translateY(-50%) translateX(0%);
  opacity: 1;
}

.site-wrap .elementor-button:hover .elementor-button-text,
.site-wrap .elementor-button:focus-visible .elementor-button-text {
  transform: translateX(-4%);
}


/* =====================================
   FOCUS RING
===================================== */
.site-wrap .elementor-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--btn-focus-underlay, rgba(17, 17, 17, 0.08)),
    0 0 0 6px var(--btn-focus-ring, rgba(153, 250, 79, 0.45));
}

/* =====================================
   OUTLINE VARIANT
===================================== */
.site-wrap .btn--outline .elementor-button {
  --btn-bg-current: var(--btn2-bg);
  --btn-text: var(--btn2-text);
  --btn-circle-bg-current: transparent;
  --btn-arrow-color: var(--btn2-text);

  box-shadow: inset 0 0 0 1px var(--btn2-ring);
  background: var(--btn-bg-current) !important;
}

.site-wrap .btn--outline .elementor-button:hover,
.site-wrap .btn--outline .elementor-button:focus-visible {
  --btn-bg-current: var(--btn-bg-hover);
  --btn-circle-bg-current: var(--btn-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #111;

  box-shadow: none;
}


/* =====================================
   BLUE VARIANT 
===================================== */
.site-wrap .btn--blue .elementor-button {
  --btn-bg-current: var(--btn3-bg);
  --btn-bg-hover: var(--btn3-bg-hover);
  --btn-text: #fff;
  --btn-circle-bg-current: var(--btn3-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #fff;

  color: #fff !important;
  background: var(--btn-bg-current) !important;
}

.site-wrap .btn--blue .elementor-button:hover,
.site-wrap .btn--blue .elementor-button:focus-visible {
  --btn-text: #111;
  --btn-arrow-color: #fff;

  color: #111 !important;
  background: var(--btn-bg-hover) !important;
}


/* =====================================
   BLUE — WHITE HOVER VARIANT
===================================== */
.site-wrap .btn--blue-w-hov .elementor-button {
  --btn-bg-current: var(--btn3-bg);
  --btn-bg-hover: var(--btn-white-bg-hover);
  --btn-text: #fff;
  --btn-circle-bg-current: var(--btn3-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #fff;

  color: #fff !important;
  background: var(--btn-bg-current) !important;
}

.site-wrap .btn--blue-w-hov .elementor-button:hover,
.site-wrap .btn--blue-w-hov .elementor-button:focus-visible {
  --btn-text: var(--btn2-text);
  --btn-arrow-color: #fff;

  color: var(--btn1-bg) !important;
  background: var(--btn-bg-hover) !important;
}


/* =====================================
   GREEN — WHITE HOVER
===================================== */
.site-wrap .btn--w-hov .elementor-button {
  --btn-bg-current: var(--btn-bg);
  --btn-text: var(--btn2-text);
  --btn-circle-bg-current: transparent;
  --btn-arrow-color: var(--btn2-text);

  background: var(--btn-bg-current) !important;
}

.site-wrap .btn--w-hov .elementor-button:hover,
.site-wrap .btn--w-hov .elementor-button:focus-visible {
  --btn-bg-current: var(--btn-white-bg-hover);
  --btn-circle-bg-current: var(--btn-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #111;

  box-shadow: none;
}


/* =====================================
   OUTLINE — WHITE HOVER
===================================== */
.site-wrap .btn--outline-w-hov .elementor-button {
  --btn-bg-current: var(--btn2-bg);
  --btn-text: var(--btn2-text);
  --btn-circle-bg-current: transparent;
  --btn-arrow-color: var(--btn2-text);

  box-shadow: inset 0 0 0 1px var(--btn2-ring);
  background: var(--btn-bg-current) !important;
}

.site-wrap .btn--outline-w-hov .elementor-button:hover,
.site-wrap .btn--outline-w-hov .elementor-button:focus-visible {
  --btn-bg-current: var(--btn-white-bg-hover);
  --btn-circle-bg-current: var(--btn-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #111;

  box-shadow: none;
}

/* =====================================
   KLAVIYO NEWSLETTER BUTTON
   uses your outline button style
===================================== */
.site-wrap .klaviyo-newsletter button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  margin-top: 24px;
  border-radius: 999px;

  --btn-bg-current: var(--btn2-bg);
  --btn-text: #fff;
  --btn-circle-bg-current: transparent;
  --btn-arrow-color: var(--btn2-text);

  background: var(--btn-bg-current) !important;
  color: var(--btn-text) !important;

  text-decoration: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px #99fa4f !important;
  overflow: hidden;
  cursor: pointer;

  transition:
    background var(--btn-speed) var(--btn-ease),
    padding-right var(--btn-speed) var(--btn-ease),
    transform 120ms ease,
    box-shadow var(--btn-speed) var(--btn-ease);
}

.site-wrap .klaviyo-newsletter button:active {
  transform: translateY(1px);
}

/* circle */
.site-wrap .klaviyo-newsletter button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  z-index: 1;

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-circle-bg-current, var(--btn-circle-bg));
  box-shadow: inset 0 0 0 2px var(--btn-circle-ring);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    box-shadow var(--btn-speed) var(--btn-ease);
}

/* arrow */
.site-wrap .klaviyo-newsletter button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  z-index: 2;

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-arrow-color);

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--icon-arrow-size) var(--icon-arrow-size);
  mask-size: var(--icon-arrow-size) var(--icon-arrow-size);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease);
}

/* hover / focus */
.site-wrap .klaviyo-newsletter button:hover,
.site-wrap .klaviyo-newsletter button:focus-visible {
  --btn-bg-current: var(--btn-bg-hover);
  --btn-circle-bg-current: var(--btn-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #111;

  background: var(--btn-bg-current) !important;
  padding-right: calc(var(--btn-pad-x) + (var(--btn-circle) / 2) + var(--btn-gap-r));
  box-shadow: none !important;
  outline: none;
}

.site-wrap .klaviyo-newsletter button:hover::after,
.site-wrap .klaviyo-newsletter button:focus-visible::after,
.site-wrap .klaviyo-newsletter button:hover::before,
.site-wrap .klaviyo-newsletter button:focus-visible::before {
  transform: translateY(-50%) translateX(0%);
  opacity: 1;
}

/* focus ring */
.site-wrap .klaviyo-newsletter button:focus-visible {
  box-shadow:
    0 0 0 3px var(--btn-focus-underlay, rgba(17, 17, 17, 0.08)),
    0 0 0 6px var(--btn-focus-ring, rgba(153, 250, 79, 0.45)) !important;
}



/* =====================================
   MOBILE FULL WIDTH
   Option 2: only buttons with .btn--mobile-full
   Add this class to the button widget wrapper
===================================== */
@media (max-width: 767px) {

  .site-wrap .btn--mobile-full {
    width: 100%;
  }

  .site-wrap .btn--mobile-full .elementor-widget-container,
  .site-wrap .btn--mobile-full .elementor-button-wrapper,
  .site-wrap .btn--mobile-full .elementor-button {
    width: 100%;
  }

  .site-wrap .btn--mobile-full .elementor-button {
    display: flex;
  }

}


/* =====================================
   REDUCED MOTION
===================================== */
@media (prefers-reduced-motion: reduce) {
  .site-wrap .elementor-button,
  .site-wrap .elementor-button::after,
  .site-wrap .elementor-button::before,
  .site-wrap .elementor-button .elementor-button-text {
    transition: none !important;
  }
}


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

@media screen and (max-width: 1024px) {
  
  .container.hero {
    align-content: center;
    }
    
    .container.hero h1, 
    .container.hero p {
    text-align: center;
    }
  
}

@media screen and (max-width: 767px) {
  /* CSS styles for screens 768px wide or wider (tablets and desktops) */
  
  .container.hero {
    padding-top: 30px;
    min-height: 60vh;
    }
    
}




/* ====================================TILE
===================================== */

.site-wrap .tile {
    padding:24px!important;
}



/* =========================
   TILE button
========================= */

.site-wrap .tile-btn{
  position: relative;
  background: #e3e7ff;
  padding: 24px;
  transition: background-color 220ms ease, transform 220ms ease;
  overflow: hidden;
}

.site-wrap .tile-btn:hover,
.site-wrap .tile-btn:focus-within{
    background: #1a2640;
}

/* Read more text link (Text widget) */
.site-wrap .tile-readmore{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  line-height: 1;
  transition: transform 220ms ease;
}

/* Invert all content inside tile */
.site-wrap .tile-btn:hover,
.site-wrap .tile-btn:focus-within{
  color: #ffffff;
}

/* Ensure all nested elements inherit white */
.site-wrap .tile-btn:hover *,
.site-wrap .tile-btn:focus-within *{
  color: #ffffff !important;
}

/* Nudge on tile hover */
.site-wrap .tile-btn:hover .tile-readmore,
.site-wrap .tile-btn:focus-within .tile-readmore{
  transform: translateX(2px);
}

/* Arrow inherits text colour via currentColor */
.site-wrap .tile-readmore::after{
  content: "";
  display: inline-block;
  width: var(--icon-arrow-size);
  height: var(--icon-arrow-size);

  background: currentColor;

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Reveal arrow */
.site-wrap .tile-btn:hover .tile-readmore::after,
.site-wrap .tile-btn:focus-within .tile-readmore::after,
.site-wrap .tile-readmore:hover::after,
.site-wrap .tile-readmore:focus-visible::after{
  opacity: 1;
  transform: translateX(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-wrap .tile-btn,
  .site-wrap .tile-readmore,
  .site-wrap .tile-readmore::after{
    transition: none !important;
    transform: none !important;
  }
}

/* =========================
   TILE – Readmore variant
========================= */

.site-wrap .tile-btn-readmore{
  position: relative;
  background: #F1F1F2;
  padding: 24px;
  overflow: hidden;
  transition: background-color 220ms ease, color 220ms ease;
}

/* Hover state */
.site-wrap .tile-btn-readmore:hover,
.site-wrap .tile-btn-readmore:focus-within{
  background: #1a2640;
  color: #ffffff;
}

/* Hide testimonial content */
.site-wrap .tile-btn-readmore .tile-content{
  transition: opacity 220ms ease, transform 220ms ease;
}

.site-wrap .tile-btn-readmore:hover .tile-content,
.site-wrap .tile-btn-readmore:focus-within .tile-content{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Read more (keeps your arrow styles) */
.site-wrap .tile-btn-readmore .tile-readmore{
  position: absolute;
  left: 24px;
  bottom: 24px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  color: inherit; /* ensures arrow follows text colour */
}

/* Show read more on hover */
.site-wrap .tile-btn-readmore:hover .tile-readmore,
.site-wrap .tile-btn-readmore:focus-within .tile-readmore{
  opacity: 1;
  transform: translateY(0);
}

/* Trigger arrow on tile hover (not just link hover) */
.site-wrap .tile-btn-readmore:hover .tile-readmore::after,
.site-wrap .tile-btn-readmore:focus-within .tile-readmore::after{
  opacity: 1;
  transform: translateX(0);
}

/* Elementor fallback (only if needed) */
.site-wrap .tile-btn-readmore:hover *{
  color: #ffffff !important;
}

/* =========================
   IMAGE 
========================= */

/* Global rounded images */
.site-wrap .elementor-widget-image img,
.site-wrap .elementor-image-box-img img {
  border-radius: 0px;
}

/* Exclude header logos (Image + Text included) */
.primary-header .elementor-image-box-img img,
.primary-header .elementor-widget-image img, 
.client-logo-slider img {
  border-radius: 0 !important;
}

/* =========================
   Accordion style with icons 
========================= */

.ghr-accordion h2 {
   font-size: clamp(18px, 1.6vw, 25px)!important;
   line-height: 1.3;
   font-weight: 700!important;
}

/* Make the accordion title row align nicely */
.ghr-accordion .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: 0px;
}

/* Let the title area grow */
.ghr-accordion .e-n-accordion-item-title-header {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Add bespoke service icon to the left of the title */
.ghr-accordion .e-n-accordion-item-title-header::before {
  content: "";
  margin-right: 30px;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Keep the default Elementor expand/collapse icon on the right */
.ghr-accordion .e-n-accordion-item-title-icon {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Optional: remove default h2 margin if needed */
.ghr-accordion .e-n-accordion-item-title-text {
  margin: 0;
}

/* blue 3px */
.ghr-accordion .e-n-accordion-item:has(.acc-icon-tick-blue) > .e-n-accordion-item-title .e-n-accordion-item-title-header::before {
  background-image: url('/wp-content/uploads/ghr-icon-tick-blue-3.svg');
}

/* green 3px  */
.ghr-accordion .e-n-accordion-item:has(.acc-icon-tick-green) > .e-n-accordion-item-title .e-n-accordion-item-title-header::before {
  background-image: url('/wp-content/uploads/ghr-icon-tick-green-3.svg');
}

/* =====================================
   ELEMENTOR FORM — match Klaviyo style
===================================== */

.site-wrap .ghr-form .elementor-field {
  border: none !important;
  border-bottom: 1px solid #000 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  color: #fff; /* important so typed text is visible */
}

.site-wrap .ghr-form .elementor-field:focus {
  outline: none !important;
  border-bottom: 1px solid #000 !important;
}

.site-wrap .ghr-form .elementor-field::placeholder {
  color: #BDBDBD;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.site-wrap .ghr-form .elementor-field:focus::placeholder {
  opacity: 0.3;
}


.site-wrap .ghr-form textarea.elementor-field {
  resize: none; /* optional */
}

.site-wrap .ghr-form select.elementor-field {
  background: transparent !important;
}

/* =====================================
   ELEMENTOR FORM SUBMIT — BLUE BUTTON
===================================== */

.site-wrap .ghr-form .elementor-button,
.site-wrap .ghr-form button[type="submit"] {
  /* Apply your blue token system */
  --btn-bg-current: var(--btn3-bg);
  --btn-bg-hover: var(--btn3-bg-hover);
  --btn-text: #fff;
  --btn-circle-bg-current: var(--btn3-circle-bg);
  --btn-circle-ring: 0;
  --btn-arrow-color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: 999px;

  background: var(--btn-bg-current) !important;
  color: #fff !important;

  border: 0;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;

  position: relative;

  transition:
    background var(--btn-speed) var(--btn-ease),
    padding-right var(--btn-speed) var(--btn-ease),
    transform 120ms ease;
}

/* Hover */
.site-wrap .ghr-form .elementor-button:hover,
.site-wrap .ghr-form button[type="submit"]:hover {
  background: var(--btn-bg-hover) !important;
  color: #111 !important;

  padding-right: calc(var(--btn-pad-x) + (var(--btn-circle) / 2) + var(--btn-gap-r));
}

/* Circle */
.site-wrap .ghr-form button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn3-circle-bg);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease);
}

/* Arrow */
.site-wrap .ghr-form button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));
  width: var(--btn-circle);
  height: var(--btn-circle);

  background-color: #fff;

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--icon-arrow-size);
  mask-size: var(--icon-arrow-size);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease);
}

/* Hover animation */
.site-wrap .ghr-form button[type="submit"]:hover::after,
.site-wrap .ghr-form button[type="submit"]:hover::before {
  transform: translateY(-50%) translateX(0%);
  opacity: 1;
}

/* =========================
   TILE – Readmore white
========================= */

.site-wrap .tile-btn-readmore-white {
  position: relative;
  background: #fff;
  padding: 24px;
  border: 1px solid #1A2640;
  overflow: hidden;
  transition: background-color 220ms ease, color 220ms ease;
}

/* Light hover state (subtle tint) */
.site-wrap .tile-btn-readmore-white:hover,
.site-wrap .tile-btn-readmore-white:focus-within {
border: 1px solid #D0D7FE;
  background: #D0D7FE; /* subtle brand tint */
  color: #1a2640; /* optional: brand text colour */
}

/* Hide testimonial content */
.site-wrap .tile-btn-readmore-white .tile-content {
  transition: opacity 220ms ease, transform 220ms ease;
}

.site-wrap .tile-btn-readmore-white:hover .tile-content,
.site-wrap .tile-btn-readmore-white:focus-within .tile-content {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}




/* Trigger Elementor button hover when parent tile is hovered */
.site-wrap .tile-btn-readmore-white:hover .tile-readmore-white .elementor-button,
.site-wrap .tile-btn-readmore-white:focus-within .tile-readmore-white .elementor-button {
  background: var(--btn-bg-hover) !important;
  padding-right: calc(var(--btn-pad-x) + (var(--btn-circle) / 2) + var(--btn-gap-r));
}

/* Show circle + arrow */
.site-wrap .tile-btn-readmore-white:hover .tile-readmore-white .elementor-button::after,
.site-wrap .tile-btn-readmore-white:focus-within .tile-readmore-white .elementor-button::after,
.site-wrap .tile-btn-readmore-white:hover .tile-readmore-white .elementor-button::before,
.site-wrap .tile-btn-readmore-white:focus-within .tile-readmore-white .elementor-button::before {
  transform: translateY(-50%) translateX(0%);
  opacity: 1;
}

/* Move button text */
.site-wrap .tile-btn-readmore-white:hover .tile-readmore-white .elementor-button .elementor-button-text,
.site-wrap .tile-btn-readmore-white:focus-within .tile-readmore-white .elementor-button .elementor-button-text {
  transform: translateX(-4%);
}




/* =========================
   TILE READMORE – text button
========================= */

.site-wrap .txt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  width: fit-content;
  max-width: max-content;
  
  font-size: 16px!important;
  font-weight: 500!important;
  line-height: 1;


  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  padding-right: var(--btn-pad-x);

  border-radius: 999px;
  background: var(--btn-bg-current, var(--btn-bg));
  color: var(--btn-text);

  font: inherit;
  text-decoration: none !important;
  overflow: hidden;

  transition:
    background var(--btn-speed) var(--btn-ease),
    padding-right var(--btn-speed) var(--btn-ease);
}

/* Remove default paragraph spacing */
.site-wrap .txt-btn p {
  margin: 0;
}

/* Circle */
.site-wrap .txt-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-circle-bg-current, var(--btn-circle-bg));
  box-shadow: inset 0 0 0 2px var(--btn-circle-ring);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease);
}

/* Arrow */
.site-wrap .txt-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--btn-pad-x) - (var(--btn-circle) / 2));

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-arrow-color);

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--icon-arrow-size) var(--icon-arrow-size);
  mask-size: var(--icon-arrow-size) var(--icon-arrow-size);

  transform: translateY(-50%) translateX(60%);
  opacity: 0;
  z-index: 2;

  transition:
    transform var(--btn-speed) var(--btn-ease),
    opacity var(--btn-speed) var(--btn-ease);
}

/* Text animation */
.site-wrap .txt-btn,
.site-wrap .txt-btn p {
  transition: transform var(--btn-speed) var(--btn-ease);
}

/* Hover (direct + via tile) */
.site-wrap .txt-btn:hover,
.site-wrap .tile-btn-readmore-white:hover .txt-btn,
.site-wrap .tile-btn-readmore-white:focus-within .txt-btn {
  background: var(--btn-bg-hover) !important;
  padding-right: calc(var(--btn-pad-x) + (var(--btn-circle) / 2) + var(--btn-gap-r));
}

/* Arrow + circle in */
.site-wrap .txt-btn:hover::after,
.site-wrap .txt-btn:hover::before,
.site-wrap .tile-btn-readmore-white:hover .txt-btn::after,
.site-wrap .tile-btn-readmore-white:hover .txt-btn::before,
.site-wrap .tile-btn-readmore-white:focus-within .txt-btn::after,
.site-wrap .tile-btn-readmore-white:focus-within .txt-btn::before {
  transform: translateY(-50%) translateX(0%);
  opacity: 1;
}

/* Text shift */
.site-wrap .txt-btn:hover p,
.site-wrap .tile-btn-readmore-white:hover .txt-btn p,
.site-wrap .tile-btn-readmore-white:focus-within .txt-btn p {
  transform: translateX(-4%);
}


/* =========================
   TEXT CTA – button-system aligned
   Use on Text/Heading widget
========================= */

.site-wrap .txt-cta {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: fit-content !important;
  max-width: max-content;

  color: var(--btn-text);
  font-size: var(--btn-font-size, 16px);
  font-weight: var(--btn-font-weight, 500);
  line-height: 1.2;
  text-decoration: none !important;

  padding-right: calc(var(--btn-circle) + var(--btn-gap-r));
  cursor: pointer;

  transition:
    color var(--btn-speed) var(--btn-ease),
    transform var(--btn-speed) var(--btn-ease);
}

/* Elementor Text widget cleanup */
.site-wrap .txt-cta p {
  margin: 0;
  font: inherit;
}

/* Small circle */
.site-wrap .txt-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;

  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: 999px;

  background-color: var(--btn-circle-bg-current, var(--btn-circle-bg));
  box-shadow: inset 0 0 0 2px var(--btn-circle-ring);

  transform: translateY(-50%) scale(0.86);
  transition:
    transform var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    box-shadow var(--btn-speed) var(--btn-ease);
}

/* Arrow */
.site-wrap .txt-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;

  width: var(--btn-circle);
  height: var(--btn-circle);

  background-color: var(--btn-arrow-color);

  -webkit-mask-image: var(--icon-arrow-mask);
  mask-image: var(--icon-arrow-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--icon-arrow-size) var(--icon-arrow-size);
  mask-size: var(--icon-arrow-size) var(--icon-arrow-size);

  transform: translateY(-50%) translateX(-18%);
  transition:
    transform var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease);
}

/* Hover / focus */
.site-wrap .txt-cta:hover,
.site-wrap .txt-cta:focus-visible {
  color: var(--btn-text-hover, var(--btn-text));
}

.site-wrap .txt-cta:hover::after,
.site-wrap .txt-cta:focus-visible::after {
  transform: translateY(-50%) scale(1);
}

.site-wrap .txt-cta:hover::before,
.site-wrap .txt-cta:focus-visible::before {
  transform: translateY(-50%) translateX(0%);
}

/* Optional text nudge */
.site-wrap .txt-cta:hover p,
.site-wrap .txt-cta:focus-visible p {
  transform: translateX(-3px);
}

.site-wrap .txt-cta p {
  transition: transform var(--btn-speed) var(--btn-ease);
}/* End custom CSS */