/*
Theme Name: ReviveTheme
*/
:root{
 /*Green*/
 --color-primary-800: #0A6559;
 --color-primary-700: #05806E;
 --color-primary: #00AB90;
 --color-primary-500: #04C8A4;
 --color-primary-400: #1DDDB8;
 --color-primary-300: #4DE9C6;
 --color-primary-200: #85EDD1;
 --color-primary-100: #C3F5E8;
 --color-primary-50: #EFFEFA;
 /*Dark Blue*/
 --color-secondary-950: #1d254e;
 --color-secondary: #27387d;
 --color-secondary-800: #2b40a2;
 --color-secondary-700: #2e4dc7;
 --color-secondary-600: #3760d9;
 --color-secondary-500: #4C7DE5;
 --color-secondary-400: #6E9EEC;
 --color-secondary-300: #9dc1f3;
 --color-secondary-200: #c5d9f8;
 --color-secondary-100: #dee8fb;
 --color-secondary-50: #f0f5fe;
 /*Light Blue*/
 --color-info-950: #093048;
 --color-info-900: #0d4c6d;
 --color-info-800: #095b83;
 --color-info-700: #056B9F;
 --color-info-600: #0587c4;
 --color-info: #109FDA;
 --color-info-400: #0587c4;
 --color-info-300: #7fd4fa;
 --color-info-200: #bbe7fc;
 --color-info-100: #e0f3fe;
 --color-info-50: #f0f9ff;
 /*Grey*/
 --color-neutral-950: #0a0a0a;
 --color-neutral-900: #3d3d3d;
 --color-neutral-800: #454545;
 --color-neutral-700: #4f4f4f;
 --color-neutral-600: #5D5D5D;
 --color-neutral-500: #6d6d6d;
 --color-neutral-400: #888888;
 --color-neutral: #B0B0B0;
 --color-neutral-200: #D1D1D1;
 --color-neutral-100: #e7e7e7;
 --color-neutral-50: #f6f6f6;
 /*Red*/
 --color-error-950: #3f1010;
 --color-error-900: #762626;
 --color-error-800: #8d2727;
 --color-error-700: #aa2b2b;
 --color-error-600: #cb3737;
 --color-error: #db4141;
 --color-error-400: #eb7e7e;
 --color-error-300: #f4adad;
 --color-error-200: #f9cfcf;
 --color-error-100: #fbe5e5;
 --color-error-50: #fdf3f3;
 --color-text: #000; /*black*/
 --color-tertiary: #FCDF7E; /*yellow*/
 --color-light: #fff; /*white*/

 /* disclaimers */
 --font-size-small: 14px;
 /* p, h4 */
 --font-size-regular: 16px;
 /* h3 */
 --font-size-medium: 20px;
 /* h2 */
 --font-size-large: 24px;
 /* h1 */
 --font-size-huge: 36px;
 /* When you need a realy big font */
 --font-size-giant: 48px;


/* Gap*/
 --gap-small:6px;
 --gap-regular:12px;
 --gap-medium:18px;
 --gap-large:24px;
 --gap-huge:36px;
 --gap-giant:60px;

 --padding-small:6px;
 --padding-regular:12px;
 --padding-medium:18px;
 --padding-large:24px;
 --padding-huge:36px;
 --padding-giant:60px;

--border-radius-small:2px;
--border-radius-regular:6px;
--border-radius-medium:12px;
--border-radius-large:18px;
--border-radius-huge:24px;
--border-radius-round:50%; 

 --font-default: "Montserrat","InterVariable", system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

--container-max-width:1300px;
--heading-max-width:900px;
--site-header-height: 72px;


/* Extend css TG * /

/* Button Colors */
--button-primary-normal: #03c4a1;
--button-primary-hover: #049e88;
--button-primary-pressed: #007f6e;
--button-primary-disable: #bfe8e1;
--button-secondary-stroke: #fafafa;
--button-secondary-normal: #f5f5f5;
--button-secondary-hover: #dddddd;
--button-secondary-pressed: #e0e0e0;
--button-secondary-disable: #f5f5f5;

/* Background Colors */
--background-white: #ffffff;
--background-surface-light: #f9f9f9;
--background-light-color: #f2f5ff;
--background-dark-blue: #273a7d;
--background-primary-color: #03c4a1;
--background-stroke-bg: #e0e0e0;
--background-dark: #0e142c;
--background-transparent-white: #ffffff1a;
--background-transparent-dark: #0e142c26;
--background-transparent-stroke-bg: #e0e0e052;

/* Typography Colors - On Light */
--typography-on-light-disable: #a3a4a7;
--typography-on-light-paragraph: #4e505b;
--typography-on-light-header: #0e142c;
--typography-on-light-accent: #04c8a4;

/* Typography Colors - On Dark */
--typography-on-dark-disable: #6f7072;
--typography-on-dark-paragraph: #d9dade;
--typography-on-dark-header: #ffffff;
--typography-on-dark-accent: #04c8a4;


/* Additional Border Radius */
--border-radius-xxl: 32px;
--border-radius-xl: 24px;
--border-radius-l: 20px;
--border-radius-xm: 12px;
--border-radius-m: 16px;
--border-radius-s: 8px;
--border-radius-xs: 4px;
--border-radius-xxs: 2px;

/* Layout Gaps & Padding */
--gap-content: 40px;
--gap-title: 32px;
--gap-card: 16px;
--gap-section: 100px;
--gap-margin: 120px;
--gap-margin-vertical: 80px;
--gap-margin-vertical-m: 60px;
--padding-l: 32px;
--padding-m: 24px;
--padding-s: 16px;
--padding-xs: 8px;
--padding-xxs: 4px;
--gap-xxs: 2px;

/* Typography - Headers */
--h1-size: 48px;
--h1-line-height: 60px;
--h1-letter-spacing: -1.2px;
--h2-size: 36px;
--h2-line-height: 52px;
--h2-letter-spacing: -0.8px;
--h3-size: 32px;
--h3-line-height: 40px;
--h3-letter-spacing: -0.6px;
--h4-size: 24px;
--h4-line-height: 32px;
--h4-letter-spacing: -0.4px;
--h5-size: 20px;
--h5-line-height: 26px;
--h5-letter-spacing: -0.2px;

/* Typography - Paragraphs */
--p1-size: 24px;
--p1-line-height: 36px;
--p2-size: 20px;
--p2-line-height: 28px;
--p3-size: 18px;
--p3-line-height: 25px;
--p4-size: 16px;
--p4-line-height: 24px;
--p5-size: 14px;
--p5-line-height: 21px;

/* Typography - Labels */
--l1-size: 20px;
--l1-line-height: 20px;
--l2-size: 18px;
--l2-line-height: 18px;
--l3-size: 16px;
--l3-line-height: 16px;
--l4-size: 14px;
--l4-line-height: 14px;
--l5-size: 12px;
--l5-line-height: 12px;

/* Typography - Captions */
--c1-size: 14px;
--c1-line-height: 14px;
--c1-letter-spacing: 0.5px;
--c2-size: 12px;
--c2-line-height: 12px;
--c2-letter-spacing: 0.5px;

/* Font Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
 
 
}

html,
body {
  font-family: var(--font-default);
  font-optical-sizing: auto; /* Inter variable axis */
}

body{
    background-color: var(--color-light);
    font-size: var(--font-size-regular);
    line-height: 1.5em;
    margin:0;
}

@media (max-width:900px){
  body {
    margin-top: var(--site-header-height);
  }
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 0;    
    max-width: var(--heading-max-width);
}

h1 {
    font-size: var(--font-size-giant);
    line-height: 1.2em;
    color: var(--color-secondary);
}

h2 {
    font-size: var(--font-size-huge);    
    line-height: 1.2em;
    color: var(--color-neutral-950);
}

.align-center > h2, .align-center > p, .align-center > div.large p{
  text-align: center;
}

.align-center > h2, .align-center > p, .align-center > div.large{
  margin:0 auto;
}

h3{
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1.2em;
}

h4{
    font-size: var(--font-size-medium);
}

h5{
    font-size: var(--font-size-regular);
}

p, li{
    font-size: var(--font-size-regular);
    margin-top: 0;
    line-height: 1.4em;
}

p.large, .large p{
    font-size: var(--font-size-medium);
}


.highlight {
  color:var(--color-primary);
}

.subheading, .subheading > * {
  max-width: var(--heading-max-width);
  width: 100%;
  /* margin:0 auto; */
  font-weight: 400;
  color:var(--color-neutral-800);
  font-size: var(--font-size-medium);
  margin-bottom:0;
}

p:last-child{
    margin-bottom: 0;
}

ul, ol {
     padding-left: 18px;
    margin-top: 0;
}

ul:last-child, ol:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
  h1 {
      font-size: var(--font-size-huge);
  }

  h3{
    font-size: var(--font-size-medium);
  }
  
  h4 {
    font-size: var(--font-size-regular);
  }

  p.large, .large p{
    font-size: var(--font-size-regular);    
    max-width: 700px;
  }
}


/* container width */
/* Container uses native gap; no padding gutters */
/* Container: 12 equal columns with configurable gap */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-regular);
}

/* Column direction for CSS Grid system */
.grid.grid-col {
  grid-template-columns: 1fr; /* single column */
  align-items: start;
  align-content: start;
}

/* Ensure any col-* spans fill the single column context */
.grid.grid-col > [class*="col-"] {
  grid-column: 1 / -1;
}

.gap-small  { gap: var(--gap-small); }
.gap-medium { gap: var(--gap-medium); }
.gap-large  { gap: var(--gap-large); }
.gap-huge   { gap: var(--gap-huge); }
.gap-giant   { gap: var(--gap-giant); }

/* Column span utilities (1–12) */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Responsive spans */
@media (max-width: 900px) {
  .md-col-12 { grid-column: span 12; }
  .md-col-8  { grid-column: span 8; }
  .md-col-6  { grid-column: span 6; }
  .md-col-4  { grid-column: span 4; }
  .md-col-3  { grid-column: span 3; }
  .md-col-2  { grid-column: span 2; }
}

@media (max-width: 767px) {
  .sm-col-12 { grid-column: span 12; }
  .sm-col-6  { grid-column: span 6; }
  .sm-col-4  { grid-column: span 4; }
  .sm-col-3  { grid-column: span 3; }
  .sm-col-2  { grid-column: span 2; }
  /* Default stack if no sm- class */
}

.container {
    max-width: var(--container-max-width);
    padding: var(--padding-giant) var(--padding-large);
    margin: 0 auto;
}

.container.large{
  padding: calc(var(--padding-giant) * 2) var(--padding-large);
}

.container.full {
    max-width: 100%;
}


header {
    background-color: var(--color-light);
    display:flex;
    justify-content: center;
    position: relative;
    z-index: 100;
}

@media (max-width:900px){
  header{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
  }
}

.header-container {    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-max-width);
    padding:var(--padding-large) var(--padding-medium);
}

.nav-main{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-huge);
}

.nav-main.mobile nav{
    display: none;
}

/* HEADER */
.logo{
    width: 120px;
    height: auto;
}

/* MENUS */

/* Header menu */
nav ul {
    list-style: none;
    padding:0;
}

header nav li {
    color:var(--color-neutral-950);
    font-size: var(--font-size-small);
    font-weight: 600;
}

@media (min-width:1000px){
    header nav > ul > li{
    padding-right: 20px;
    }   
}

nav li a{
    text-decoration: none;
    color: var(--color-neutral-950);
}

/* Main menu */
header nav > ul {
    display: flex;
    flex-direction: row;
    gap: var(--gap-huge);
}

header nav > ul > li {
    position: relative;
}

header nav > ul > li:hover > a{
    color: var(--color-primary);
}

header nav > ul > li > a{
    display: flex;
    gap:var(--gap-regular);
    align-items: center; 
    line-height: var(--font-size-giant);
}

/* Sub-menu */

header nav > ul > li:hover > ul{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s; /* show immediately */
}

header nav > ul > li > ul{
    position: absolute;
    background-color: var(--color-secondary);
    padding:var(--padding-regular);
    display:flex;
    gap:var(--gap-small);
    width: 300px;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: var(--border-radius-regular);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

header nav > ul > li > ul > li {
    /* white-space: nowrap; */
    width: calc(100% - var(--gap-small));
    font-weight: 500;
    display: flex;
    flex-direction: row;
    line-height: 1.2em;
    position: relative;
    min-height: var(--font-size-regular); 
    border-radius: var(--border-radius-regular);
}

header nav > ul > li > ul > li a{
    color:var(--color-secondary-200);        
    padding: var(--padding-regular);
    display: flex;
    gap:var(--gap-regular);
    align-items: center;
    width: 100%;
    white-space: normal;
}

header nav > ul > li > ul > li:hover{
    background-color: var(--color-secondary-800);
}

header nav > ul > li > ul > li:hover a{
    color: var(--color-tertiary);
}

header nav > ul > li > ul > li:active{
    background-color: var(--color-info-600);
}

header nav > ul > li > ul > li:active a{
    color: var(--color-light);
}

header nav > ul > li > ul > li a::before{
    content: "\f054"; 
    font: var(--fa-font-solid);
}

@media (min-width:1000px) {    
  header nav ul > li:has(ul)::after{
    content: "\f078"; 
    font: var(--fa-font-solid);
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
  }
}

.nav-ctas{
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: var(--gap-regular);
}

/* BUTTONS */

a:has(button){
  text-decoration: none;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  border-radius: 0;
  outline: none;
}

button{
    padding:var(--padding-regular) var(--padding-large);
    border-radius: var(--border-radius-regular);
    line-height: 1em;
    font-size: var(--font-size-regular);
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: var(--gap-regular);    
    justify-content: center;
    align-items: center;
}

button.cta{
    font-size: var(--font-size-medium);
    font-weight: 500;
    padding:var(--padding-medium) var(--padding-large);
}

button.small{
    padding:var(--padding-small) var(--padding-regular);
}

button.secondary.cta{
    padding:calc(var(--padding-medium) - 2px) var(--padding-large);
}

button.primary{
    color:var(--color-light);
}

button.tight, button.cta.tight{
    padding:var(--padding-regular) !important;
    font-size: var(--font-size-regular) !important;;
}

button.primary.green {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-500) 100%);
    border: 0;
}

button.primary.grey {
    background: linear-gradient(90deg, var(--color-neutral) 0%, var(--color-neutral-200) 100%);
    border: 0;
}

button.primary.green:hover {
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
    border-color:var(--color-primary-100);  
    transition-duration:.5s;
}

button.primary.green:active{
  background: linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-primary) 100%);
}

button.primary.blue{
  background: linear-gradient(90deg, var(--color-info-800) 0%, var(--color-info-700) 100%);
}

button.primary.blue:hover{
  background: linear-gradient(90deg, var(--color-info-700) 0%, var(--color-info-600) 100%);
  border-color:var(--color-info-100);
}

button.primary.blue:active{
  background: linear-gradient(90deg, var(--color-info-900) 0%, var(--color-info-800) 100%);
}

button.primary.red {
    background: linear-gradient(90deg, var(--color-error-600) 0%, var(--color-error) 100%);
    border: 0;
}

button.primary.red:hover {
    background: linear-gradient(90deg, var(--color-error) 0%, var(--color-error-400) 100%);
    border-color:var(--color-primary-100);  
    transition-duration:.5s;
}

button.primary.red:active{
  background: linear-gradient(90deg, var(--color-error-700) 0%, var(--color-error-600) 100%);
}

button.secondary.green{
  color:var(--color-primary);
  background-color:transparent;
  border-color:var(--color-primary);
}

button.secondary.green:hover{
  color:var(--color-primary);
  background-color:var(--color-primary-50);
  border-color:var(--color-primary-300);
}

button.secondary.green:active{
  color:var(--color-primary-700);
  background-color:var(--color-primary-200);
  border-color:var(--color-primary-200);
}

button.secondary.blue{
  color:var(--color-secondary);
  background-color:transparent;
  border-color:var(--color-secondary);
}

button.secondary.blue:hover{
  color:var(--color-secondary);
  background-color:var(--color-secondary-50);
  border-color:var(--color-secondary-300);
}

button.secondary.blue:active{
  color:var(--color-secondary-700);
  background-color:var(--color-secondary-200);
  border-color:var(--color-secondary-200);
}

button.primary:disabled, button.secondary:disabled{
  color:var(--color-light) !important;
  background:var(--color-neutral-200) !important;
  cursor:not-allowed;
}

/* CTA icon circle for Services (reuses global button styles) */
.btn-circle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-round);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  margin-inline-start: var(--gap-regular);
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn-circle-icon i {
  font-size: 14px; /* visually centered within 28px circle */
  line-height: 1;
}

/* Hover/active tint matches your secondary.green hover behavior */
button.secondary.green:hover .btn-circle-icon {
  border-color: var(--color-primary-300);
  color: var(--color-primary);
  transform: translateX(2px);
}

button.secondary.green:active .btn-circle-icon {
  border-color: var(--color-primary-200);
  transform: translateX(3px);
}

button > i{
  text-align: center !important;
}

/* Ensure the icon circle inherits disabled state from your buttons */
button:disabled .btn-circle-icon {
  border-color: var(--color-neutral-200);
  color: var(--color-light);
  transform: none;
}


/* ICON BUTTON */
.icon-button {
    --btn-size: calc(var(--font-size-regular) + var(--padding-small) + 6px);

    display: inline-flex;
    align-items: center;
    gap: var(--gap-small);
    padding: var(--padding-small);
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    background: transparent;
    cursor: pointer;

    width: var(--btn-size);
    max-width: var(--btn-size);
    height: var(--btn-size);
    border-radius: var(--border-radius-round);
    overflow: hidden;

    transition:
    max-width 220ms ease,
    border-radius 220ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.icon-button i {
    font-size: var(--font-size-large);
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.icon-button span {
    white-space: nowrap;
    font-weight: 600;
    opacity: 0;
    transition: opacity 150ms ease 120ms;
}

/* Variant */
.icon-button.blue {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* Hover expands and reveals text */
.icon-button:hover {
    background-color: var(--color-secondary-100);
    border-radius: var(--border-radius-regular);
    max-width: fit-content;
    width: 100%;
}

.icon-button:hover span {
    opacity: 1;
}

.post-thumbnail img{
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-large);
    object-fit: cover;
}

.post, .post .entry-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

.post .entry-content *, .post .entry-header *{
    margin-bottom: 0;
    margin-top: 0;
}

 .post .entry-header{
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
    padding-bottom: var(--gap-medium);
    border-bottom: 1px solid var(--color-neutral-100);
}

.post .entry-meta{
    display: flex;
    flex-direction: row;
    gap:var(--gap-large);
    align-items: center;
    font-weight: 500;    
    color: var(--color-neutral-400);
    margin-top: var(--gap-large);
}

.post .author-details{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:var(--gap-small);
    font-weight: 600;
    color: var(--color-neutral-950);
}

.post .author-details img{
    border-radius: var(--border-radius-round);
}

@media (max-width: 1300px){

    :root{
        --font-size-small: 12px;
        --font-size-regular: 14px;
        --font-size-medium: 18px;
        --font-size-large: 22px;
        --font-size-huge: 28px;
        --font-size-giant: 36px;
    }

    .header-container{
        padding:var(--padding-regular);
        max-width: 100%;
    }

    .logo{
        width: 100px;
    }

    header nav > ul {
        gap:var(--gap-large);
    }

    .icon-button:hover span {
        opacity: 0;
        visibility: hidden;
        max-width: fit-content;
        transition: none;
        display: none;
    }

    .icon-button:hover{
        max-width: var(--btn-size);
    }
    
}


@media (max-width: 1000px){

    .container{
        padding: var(--padding-large) var(--padding-medium);
    }

    .container.large{
      padding: calc(var(--padding-large) * 2) var(--padding-medium);
    }

    .container.grid {
        grid-template-columns: 1fr; /* single column */
        align-items: start;
        align-content: start;        
        gap:var(--gap-large);
        overflow:hidden ;
    }

    /* Ensure any col-* spans fill the single column context */
    .container.grid > [class*="col-"] {
        grid-column: 1 / -1;
    }

    .revive-step-grid.listView .jq-steps-track{
      flex-direction: column;
    }

    /*Mobile Nav */
    header .nav-main:not(.mobile) nav{
        display: none;
    }

    header .nav-main.mobile nav {
        display: flex;
        position:initial;
        margin-left: var(--gap-medium);
    }

    header .nav-main.mobile nav::before{
        content: "\f0c9"; 
        font: var(--fa-font-solid);
        font-size: var(--font-size-large);
        color: var(--color-neutral-950);
    }

    header .nav-main.mobile nav .menu{
        position: absolute;
        right: 0;
        top:72px;
        margin: 0;
    }

    header nav > ul {
        gap: 0;
        flex-direction: column;        
        padding: 0;        
        width: 50vw;
        border-radius: var(--border-radius-regular);
    }

    header nav > ul > li {
        background-color: var(--color-secondary-100);
        border-radius: 0;
    }

    header nav > ul > li:hover > a{
        color: var(--color-secondary);
    }

    header nav > ul > li:active{
        background-color: var(--color-info-600);
    }

    header nav > ul > li:active a{
        color: var(--color-light);
    }

    header nav > ul > li:has(.sub-menu) > a::before {
        content: "\f078";
        font: var(--fa-font-solid);
    }

    header nav > ul > li.submenu-open:has(.sub-menu) > a::before {
        transform: rotate(180deg);
    }

    header nav > ul > li:not(:has(.sub-menu)) > a {
        --mobile-menu-padding: calc(var(--padding-regular) + 25px);
        padding-left: var(--mobile-menu-padding);
    }

    header nav > ul > li > a{
        line-height: 1em;
        padding:var(--padding-regular);
        color: var(--color-secondary);
    }

    /* Mobile submenu */
    header nav > ul > li > ul{
        position: relative;
        padding: 0;
        visibility: visible;
        opacity: 1;
        transition: none;
        transform: none;
        gap:0;
        border-radius: 0;
        width: 100%;
        display: none;
    }

    header nav > ul > li > ul > li{
        padding: var(--padding-regular);
        width: 100%;
        border-radius: 0;
    }

    header nav > ul > li > ul > li a {
        --mobile-submenu-padding: calc(var(--padding-regular) + 25px);
        padding-left: var(--mobile-submenu-padding);
        left:0;
        width: calc(100% - var(--mobile-submenu-padding));
    }

    header nav > ul > li > ul > li a::before {
        content: none;
    }
    
    header nav > ul > li a {
        line-height: 1.4em;
    }

    header nav > ul > li > ul > li{
        height: var(--font-size-medium);
    }  
    .gap-huge {
        gap:var(--gap-large);
    }

    .gap-large {
        gap:var(--gap-medium);
    }

    .gap-medium {
        gap:var(--gap-regular);
    }

    .article .revive-showcase-inner{
        align-items: flex-start;
        justify-content: flex-start;    
        flex-direction: row;
    }
    
    .article .revive-showcase-media-col{
        max-width: 150px;
    }

    .explore.mobile{
        display: flex !important;        
        width: 100%;
        grid-column: span 12;
        gap: var(--gap-medium) !important;
    }

    .explore.mobile ul{
        flex-direction: row !important;        
        gap:var(--gap-large) !important;
    }

    .post .entry-meta{
        margin-top: 0;
    }
}

@media (max-width: 767px){

    .nav-main.mobile nav .menu{
        width: 100vw;
    }

}

@media (max-width: 600px) {
    .nav-ctas button.resume-app{
        display: none;
    }
    
    .grid { grid-template-columns: 1fr; }          /* single column */

    .article .revive-showcase-inner{ 
        flex-direction: column;
    }
    
    .article .revive-showcase-media-col{
        max-width: 100%;
    }
}


.revive-hero-block.hero-image .revive-hero-badge{
    background: color-mix(in srgb, var(--color-light) 5%, transparent); 
    color:var(--color-light);
    border-color: color-mix(in srgb, var(--color-light) 50%, transparent);
}



/* Badge specific styles not covered by global theme */
.revive-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-small);
    background: var(--color-light);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-regular);
    padding: var(--padding-regular);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-neutral-800);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.revive-hero-badge *{
    line-height: 1em;
}

.revive-hero-badge i{
    color: var(--color-primary);
}


.revive-hero-badge span:last-of-type {
display: block;   /* ensure block formatting */
}

@media (max-width: 767px) {
    .revive-hero-badge{
        text-align: center;
    }

    
    .revive-hero-badge {
        display: flex;
        flex-wrap: wrap;
        gap: 6px; /* optional */
        justify-content: flex-start;
    }

  .revive-textimage .revive-hero-ctas{
    flex-direction: column;
  }

  .revive-textimage p.large{
    color:var(--color-neutral-800);
  }
}


/* --- Revive TextImage Block --- */
.revive-textimage .revive-textimage-grid {
  align-items: center;
  gap: var(--gap-giant);
}

.revive-textimage__content {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Reverse order */
.revive-textimage--reverse .revive-textimage__content { order: 2; }
.revive-textimage--reverse .revive-textimage__media { order: 1; }

/* Own pill badge (not hero badge) */
.revive-textimage-badge {
  display: inline-block;
  color: var(--color-neutral-950);
  border: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-50);
  padding: var(--padding-regular) var(--padding-medium);
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--font-size-small);
  line-height: 1;
}

.revive-textimage-badge i{
  color: var(--color-secondary);
}

.revive-textimage-badge.dark i{
  color: var(--color-light);
}

.revive-textimage-badge.large{
   padding: var(--padding-regular);
}

.revive-textimage-badge.round{
  border-radius: 999px;
}

.revive-textimage__para {
  margin: 0;
}

/* Image side */
.revive-textimage__media { display: flex; justify-content: center; width: 100%; }
.revive-textimage__img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}
.revive-textimage__placeholder {
  width: 100%;
  height: 350px;
  background: var(--color-neutral-100);
  border: 2px dashed var(--color-neutral-200);
  border-radius: var(--border-radius-medium);
}

@media (max-width: 767px) {
  .revive-textimage__media { aspect-ratio: 16 / 9; }
  .revive-textimage__img,
  .revive-textimage__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .revive-textimage__placeholder { height: auto; }
}

/* Responsive */
@media (max-width: 900px) {
    /* Stack vertically on mobile regardless of reverse setting */
    .revive-textimage--reverse .revive-textimage__content { order: unset; }
    .revive-textimage--reverse .revive-textimage__media { order: unset; }
}

@media (max-width: 850px) {

    .revive-hero-media{
        padding-bottom: 65px;
    }
    
    .revive-hero-img { 
        border-radius: var(--border-radius-medium); 
        min-height: 250px; 
    }
}

/* Media Area */
.revive-hero-media {
    width: 100%;
    position: relative;
}
.revive-textimage .revive-hero-media{
    aspect-ratio: 16 / 9;
}

.revive-hero-block  .revive-hero-img {
    width: var(--container-max-width);
    height: 350px;
}


.revive-hero-img {    
    border-radius: var(--border-radius-medium);
    width: 100%;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.revive-textimage .revive-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 470px) {
    .revive-hero-media{
        padding-bottom: 90px;
    }
}

/* extend css TG */

/* Extended gap utilities */
.gap-xxs { gap: var(--gap-xxs); }
.gap-content { gap: var(--gap-content); }
.gap-title { gap: var(--gap-title); }
.gap-card { gap: var(--gap-card); }
.gap-section { gap: var(--gap-section); }
.gap-margin { gap: var(--gap-margin); }
.gap-margin-vertical { gap: var(--gap-margin-vertical); }
.gap-margin-vertical-m { gap: var(--gap-margin-vertical-m); }

/* Padding utilities */
.padding-xxs { padding: var(--padding-xxs); }
.padding-xs { padding: var(--padding-xs); }
.padding-s { padding: var(--padding-s); }
.padding-m { padding: var(--padding-m); }
.padding-l { padding: var(--padding-l); }

.margin-auto{
    margin: auto;
}