/* =============================================
   GANTT PAGE STYLES
   Merged from: chart/gant-styleguide.css + chart/gant-style.css
   ============================================= */

/* Design tokens (:root variables) are defined globally in style.css — no duplication needed here. */

/* =======================================================
   GANTT PAGE — style.css  (page-specific only)
   Responsive breakpoints follow the grids page patterns
   ======================================================= */

/* ── Shared: Heading text (mixed-colour headings) ─────── */
.gantt-page .heading-default {
  color: #000000;
  letter-spacing: var(--desktop-h1-letter-spacing);

}

.gantt-page .heading-accent {
  color:var(--color-theme-gannt-page);
  letter-spacing: var(--desktop-h1-letter-spacing);
}
.time-page .heading-accent {
  color: var(--color-theme-time-page);
}
.map-page .heading-accent {
  color: var(--color-theme-map-page);
}
/* ── Shared: Button base + colour modifiers ───────────── */
.gantt-page .btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.gantt-page .btn--green     { background-color: var(--green); }
.gantt-page .btn--dark-blue { background-color: #2a31af; }
.gantt-page .btn--white     { background-color: var(--white); }
.gantt-page .btn--blue      { background-color: var(--blue); }
.gantt-page .btn--primary   { background-color: var(--color-theme-gannt-page);  }
.gantt-page .btn--secondary { background-color: var(--white); }
.gantt-page .btn--secondary  a{color: #000; border: none !important; background: none !important; }

.map-page .btn--primary   {background-color: var(--color-theme-map-page)  }
.map-page .btn--blue      { background-color: #000; color: white; font-size: medium; }
.map-page .grids-hero-cta-row .btn--secondary { background-color: var(--black); }
.map-page .grids-hero-cta-row  .btn--secondary  a{color: #fff; border: none !important; background: none !important; }
.time-page .btn--primary   {background-color: var(--color-theme-time-page); color:var(--color-theme-time-page-text-color)  }
.time-page .btn {padding: 6px 0px; }
.time-page .btn--blue      { background-color: #000; color: white; font-size: medium; padding: 6px 13px; } 
.time-page .btn--primary a  {color:var(--color-theme-time-page-text-color)  }

/* ── Shared: Text labels ──────────────────────────────── */
.gantt-page .btn-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.gantt-page .btn-label-white a{
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--white);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
  text-decoration: none !important;
  color: white !important; z-index:999;
}

.gantt-page .body-small {
  letter-spacing: var(--desktop-body-small-letter-spacing);
  font-family: var(--desktop-body-small-font-family);
  font-style: var(--desktop-body-small-font-style);
  font-weight: var(--desktop-body-small-font-weight);
  line-height: var(--desktop-body-small-line-height);
  font-size: var(--desktop-body-small-font-size);
}

/* ── Page Root ────────────────────────────────────────── */
.gantt-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*max-width: 1440px;*/
  margin: 0 auto;
  align-items: flex-end;
  position: relative;
  background-color: var(--dark-white);
  overflow-x: hidden;
}

.wp-block-button__link.wp-element-button{
  background:no-repeat ;
}
body {
  background-color: var(--dark-white);
}

/* ── Hero Section (same class names as grids page) ───────── */


.gantt-page .grids-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.gantt-page .grids-hero-title-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.gantt-page .grids-hero-category {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--color-theme-gannt-page) !important;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}
.gantt-page .grids-hero-category {

  color:var(--color-theme-gannt-page) !important;;

}
.grids.map-page .grids-hero-category {
  color:var(--color-theme-map-page) !important;
}
.grids.time-page .grids-hero-category {
  color:var(--color-theme-time-page) !important;
}
.chart-hero-category {
  color: var(--medium-blue);
}
.gantt-page .grids-hero-headline {
  position: relative;
  width: min(826px, 90%);
  color: transparent;
  text-align: center;

}

.gantt-page .grids-hero-description , .gantt-page .gantt-highlight-body{
  position: relative;
  width: min(794px, 90%) !important;
  color: var(--black);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
 }
 .gantt-page .gantt-highlight-body{
	  width: min(594px, 90%) !important;
 }
.gantt-page .gantt-hero-buttons {
  position: relative;
  width: 161px;
  height: 33px;
}

/* ── Demo Cards ───────────────────────────────────────── */
.gantt-page .demo-cards-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
  /* negative margins let the row bleed past the container on desktop */
  margin-left: -204px;
  margin-right: -204px;
}

.gantt-page .demo-card {
  display: flex;
  flex-direction: column;
  width: 303px;
  height: 285px;
  align-items: center;
  gap: 3px;
  padding: 4px;
  position: relative;
  background-color: var(--dark-white-2);
  border-radius: 3.47px;
  border: 0.87px solid;
  border-color: var(--border);
  box-shadow: var(--cards-shadow);
}

.gantt-page .demo-card-preview {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 229.04px;
  background-color: #ffffff;
  border-radius: 3.47px;
}

.gantt-page .demo-card-title {
  position: absolute;
  top: 4px;
  left: 6px;
  opacity: 0.6;
  font-family: var(--desktop-text-size-mini-font-family);
  font-weight: var(--desktop-text-size-mini-font-weight);
  color: #333333;
  font-size: var(--desktop-text-size-mini-font-size);
  letter-spacing: var(--desktop-text-size-mini-letter-spacing);
  line-height: var(--desktop-text-size-mini-line-height);
  white-space: nowrap;
  font-style: var(--desktop-text-size-mini-font-style);
}

.gantt-page .demo-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.gantt-page .demo-card-caption {
  position: relative;
  width: fit-content;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
  white-space: nowrap;
}

/* ── Demo Chart backgrounds ───────────────────────────── */
.gantt-page .demo-chart-planned {
  position: absolute;
  top: 26px;
  left: 16px;
  width: 263px;
  height: 195px;
  display: flex;
  align-items: flex-start;
  background-color: #ffffff;
}

.gantt-page .chart-wrapper           { width: 263px; height: 195px; position: relative; }
.gantt-page .chart-grid-layer        { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.gantt-page .chart-header-col        { position: absolute; width: 30.05%; height: 92.76%; top: 7.24%; left: 69.95%; }
.gantt-page .chart-hidden-layer      { position: absolute; width: -3875.23%; height: -1546.56%; top: 1646.56%; left: 3975.23%; }
.gantt-page .chart-grid-lines-container { position: absolute; width: 96.29%; height: 77.83%; top: 10.17%; left: 0; display: flex; }
.gantt-page .chart-grid-svg          { flex: 1; width: 253.35px; }
.gantt-page .chart-bars-container    { position: absolute; width: 258px; height: 172px; top: 0; left: 0; }
.gantt-page .chart-bars              { position: absolute; height: 152px; top: 20px; left: 5px; display: flex; justify-content: flex-end; align-items: flex-end; min-width: 253px; gap: 10206px; }
.gantt-page .chart-bar-planned       { width: 74px; height: 152px; position: relative; }
.gantt-page .chart-bar-planned-bg    { position: absolute; width: 74px; height: 138px; top: 14px; left: 0; background-image: url(./img/group.png); background-size: 100% 100%; }
.gantt-page .chart-bar-img           { position: absolute; width: 74px; height: 138px; top: 0; left: 0; }
.gantt-page .chart-bar-cap           { position: absolute; width: 74px; height: 14px; top: 0; left: 0; }
.gantt-page .chart-bar-actual        { width: 40px; height: 152px; position: relative; margin-bottom: -3213px; }
.gantt-page .chart-bar-actual-cap    { position: absolute; width: 40px; height: 14px; top: 0; left: 0; }
.gantt-page .chart-bar-actual-body   { position: absolute; width: 40px; height: 138px; top: 14px; left: 0; }
.gantt-page .chart-bar-slack         { position: absolute; width: 74px; height: 138px; top: 34px; left: 184px; }
.gantt-page .chart-today-marker      { position: absolute; width: 33px; height: 33px; top: 0; left: 0; display: flex; }
.gantt-page .chart-today-inner       { flex: 1; width: 32.52px; display: flex; }
.gantt-page .chart-today-svg         { flex: 1; width: 32.52px; }
.gantt-page .chart-legend            { position: absolute; width: 88px; height: 9px; top: 174px; left: 87px; display: flex; }
.gantt-page .chart-legend-inner      { flex: 1; width: 88.14px; position: relative; }
.gantt-page .chart-legend-bg         { position: absolute; width: -11767.02%; height: -36490.27%; top: 36590.27%; left: 11867.02%; }
.gantt-page .chart-legend-items      { position: absolute; width: 103.13%; height: 70.37%; top: 14.86%; left: 0; }

.gantt-page .chart-legend-label      { position: absolute; height: 80.92%; top: 5.18%; font-family: "Inter", Helvetica; font-weight: 700; color: #333333; font-size: 3.9px; letter-spacing: 0; line-height: normal; }
.gantt-page .chart-legend-planned    { width: 17.60%; left: 7.52%; }
.gantt-page .chart-legend-actual     { width: 14.30%; left: 37.57%; }
.gantt-page .chart-legend-slack      { width: 28.61%; left: 64.01%; }

.gantt-page .chart-legend-icon-1 { position: absolute; width: -11408.20%; height: -51912.50%; top: 52012.50%; left: 11508.20%; }
.gantt-page .chart-legend-icon-2 { position: absolute; width: -11407.12%; height: -51896.70%; top: 51996.70%; left: 11507.12%; }
.gantt-page .chart-legend-icon-3 { position: absolute; width: -11438.26%; height: -51912.50%; top: 52012.50%; left: 11538.26%; }
.gantt-page .chart-legend-icon-4 { position: absolute; width: -11437.19%; height: -51896.70%; top: 51996.70%; left: 11537.19%; }
.gantt-page .chart-legend-icon-5 { position: absolute; width: -11464.69%; height: -51912.50%; top: 52012.50%; left: 11564.69%; }
.gantt-page .chart-legend-icon-6 { position: absolute; width: -11463.62%; height: -51896.70%; top: 51996.70%; left: 11563.62%; }

.gantt-page .demo-chart-grouped  { position: absolute; top: 47px; left: 11px; width: 272px; height: 151px; background-image: url(./img/raphael-paper-1286.png); background-size: cover; background-position: 50% 50%; }
.gantt-page .demo-chart-progress { position: absolute; top: 37px; left: 24px; width: 246px; height: 171px; background-image: url(./img/raphael-paper-1717.png); background-size: cover; background-position: 50% 50%; }
.gantt-page .demo-chart-weekly   { position: absolute; top: 40px; left: 18px; width: 260px; height: 169px; background-image: url(./img/raphael-paper-2589.png); background-size: cover; background-position: 50% 50%; }
.gantt-page .demo-chart-shift    { position: absolute; top: 40px; left: 12px; width: 271px; height: 150px; background-image: url(./img/raphael-paper-2768.png); background-size: cover; background-position: 50% 50%; }

.gantt-page .demo-chart-pipeline { position: absolute; top: 54px; left: 15px; width: 265px; height: 133px; display: flex; align-items: flex-end; overflow: hidden; }
.gantt-page .pipeline-wrapper    { width: 261px; height: 149px; position: relative; margin-bottom: -16.71px; }
.gantt-page .pipeline-grid       { position: absolute; width: 98.48%; height: 79.57%; top: 2.66%; left: 0; display: flex; }
.gantt-page .pipeline-grid-svg   { flex: 1; width: 257.31px; }
.gantt-page .pipeline-bars-container { position: absolute; width: 261px; height: 123px; top: 0; left: 0; }
.gantt-page .pipeline-bar-group  { position: absolute; width: 257px; top: 4px; left: 4px; display: flex; flex-direction: column; align-items: flex-start; min-height: 119px; }
.gantt-page .pipeline-bar-header { width: 76px; height: 17px; position: relative; }
.gantt-page .pipeline-bar-cap-right { position: absolute; width: 12px; height: 17px; top: 0; left: 64px; }
.gantt-page .pipeline-bar-main   { position: absolute; width: 64px; height: 17px; top: 0; left: 0; }
.gantt-page .pipeline-bar-body   { width: 76px; height: 102px; position: relative; }
.gantt-page .pipeline-bar-body-bg { position: absolute; width: 12px; height: 102px; top: 0; left: 64px; background-image: url(./img/group-1.png); background-size: 100% 100%; }
.gantt-page .pipeline-bar-body-img { position: absolute; width: 12px; height: 102px; top: 0; left: 0; }
.gantt-page .pipeline-bar-full   { position: absolute; width: 64px; height: 102px; top: 0; left: 0; }
.gantt-page .pipeline-bar-right-col { position: absolute; width: 12px; height: 102px; top: 21px; left: 68px; }
.gantt-page .milestone-top       { position: absolute; width: 27px; height: 27px; top: 0; left: 0; display: flex; }
.gantt-page .milestone-inner     { flex: 1; width: 26.53px; display: flex; }
.gantt-page .milestone-svg       { flex: 1; width: 26.53px; }
.gantt-page .pipeline-bar-side-col { position: absolute; width: 64px; height: 119px; top: 4px; left: 4px; }
.gantt-page .milestone-bottom    { position: absolute; width: 27px; height: 27px; top: 123px; left: 133px; display: flex; }

/* ── Highlight Section ────────────────────────────────── */
.gantt-page .gantt-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 96px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}

.gantt-page .gantt-highlight-wrapper, .charting-page .highlight-inner {
  display: flex;
  flex-direction: column;
  height: 712px;
  align-items: center;
  gap: 24px;
  padding: 256px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
}
.gantt-page .gantt-highlight-wrapper{
	padding: 206px  0px !important;
}
.gantt-page .gantt-highlight-content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
  margin-bottom: -97px;
}

.gantt-page .gantt-highlight-title {
  position: relative;
  width: min(680px, 90%);
  margin-top: -1px;
  color: transparent;
  text-align: center;
}

.gantt-page .gantt-highlight-title-text {
  color: #000000;

}

.gantt-page .gantt-highlight-title-accent {
  color: #2a31af;
}



.gantt-page .gantt-highlight-bg {
  position: absolute;
  top: 17px;
  left: 0;
  width: 1407px;
  height: 660px;
}

/* ── Feature Section ──────────────────────────────────── */
.gantt-page .gantt-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;

  padding: 80px var(--container-lr-padding) !important;
}
.time-page .gantt-feature {
	padding: 80px var(--container-lr-padding) !important;
}
.gantt-page .gantt-feature-card {
  display: flex;
  width: min(1290px, calc(100% - 32px));
  /*height: 450px;*/
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: relative;    
  background-color: var(--color-theme-gannt-page);
  border-radius: 3.66px;
  box-sizing: border-box;
}
.map-feature-card.gantt-feature-card {  
  background-color: var(--color-theme-map-page);
}  
.time-feature-card.gantt-feature-card {  
  background-color: var(--color-theme-time-page);
   /*height: 520px;*/ padding: 24px 16px;
}
	
 .time-page .data-driven__headline-accent {
    color: var(--color-theme-time-page);
}
.time-page .data-driven__cta{
  background-color: var(--color-theme-time-page);
  color: var(--color-theme-time-page-text-color);
}
.gantt-page .gantt-feature-text-col {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  align-items: flex-start;
  gap: 8px;
  padding: 0px 24px;
  position: relative;
  box-sizing: border-box;
}

.gantt-page .gantt-feature-text-content {
  display: flex;
  flex-direction: column;
  width: min(596px, 100%);
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.gantt-page .gantt-feature-title {
  position: relative;
  width: min(594px, 100%);
  height: 112px;
  margin-top: -1px;
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  color: var(--white);
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
  font-style: var(--desktop-h3-font-style);
}

.gantt-page .gantt-feature-list {
  width: min(572px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--white);
  font-size: medium;
  /*padding: 8px 0px !important;*/
}
.gantt-page .gantt-feature-card .wp-block-columns {
	margin-bottom:0px !important;
}
.gantt-page .use-case-list-item{

  color: var(--white) !important;
  font-size: medium !important;

  margin: 0px !important;
}
.grids.gantt-page .use-case-image-col{
  align-items: center;
    display: flex;
    background:none !important;
}
.gantt-page .gantt-feature-list-item {
  color: var(--white);
  position: relative;
  align-self: stretch;

}

.gantt-page .gantt-feature-image {
  position: relative;
  width: 437px;
  height: 418px;
  flex-shrink: 0;
}
.time-page .gantt-feature-title, .time-page .gantt-feature-list, .time-page .use-case-list-item, .time-page .cta-title-white, .time-page .cta-body, .map-page .gantt-feature-title, .map-page .gantt-feature-list, .map-page .use-case-list-item, .map-page .cta-title-white, .map-page .cta-body {
   color: var(--color-theme-time-page-text-color) !important;
}
.time-page .cta-title-accent{
color: #ffffff !important;
}
/* ── Use Cases Section ────────────────────────────────── */
.gantt-page .gantt-use-cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 88px 0px 160px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.gantt-page .use-cases-header {
  display: flex;
  flex-direction: column;
  width: min(843px, 90%);
  align-items: center;
  gap: 18px;
  position: relative;
  flex: 0 0 auto;
}

.gantt-page .use-cases-title {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--desktop-h1-font-family);
  font-weight: var(--desktop-h1-font-weight);
  color: transparent;
  font-size: var(--desktop-h1-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h1-letter-spacing);
  line-height: var(--desktop-h1-line-height);
  font-style: var(--desktop-h1-font-style);
}

.gantt-page .use-cases-title-accent {
  color: #2a31af;
}
.map-page .use-cases-title-accent {
  color: var(--color-theme-map-page);
}
.time-page .use-cases-title-accent {
  color: var(--color-theme-time-page);
}
.gantt-page .use-cases-subtitle {
  position: relative;
  width: min(722px, 100%);
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: var(--black);
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.gantt-page .use-cases-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

/* Shared base for all use-case cards */
.gantt-page .use-case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  position: relative;
  background-color: var(--white);
  border-radius: 4px;
  border: 1px solid #ffffff4c;
  box-sizing: border-box;
}

.gantt-page .use-case-card--sm      { width: 413px; gap: 50px; }
.gantt-page .use-case-card--lg      { width: 644px; height: 358px; gap: 50px; }
.gantt-page .use-case-card--spaced  { justify-content: space-between; gap: 0; height: 357px; }

.gantt-page .use-case-card-top {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.gantt-page .use-case-icon {
  position: relative;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

.gantt-page .use-case-title,
.gantt-page .use-case-title-workflow,
.gantt-page .use-case-title-resource {
  position: relative;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.gantt-page .use-case-title          { width: 344px; }
.gantt-page .use-case-title-workflow { width: 295px; }
.gantt-page .use-case-title-resource { width: 324px; }

.gantt-page .use-case-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0px !important;
}

.gantt-page .card-flex{
min-height: 348px;
}
.time-page .card-flex{
min-height: 284px;
}
.map-page .card-flex{
min-height: 380px;
}
.gantt-page .card-flex .wp-block-list, .flexcontainer .wp-block-list li{
  font-size: medium !important;
}
.flexcontainer .wp-block-list {
margin: 0px !important;
}
.gantt-page .use-case-list--sm   { height: 140px; }
.gantt-page .use-case-list--wide { width: 551px; height: 118px; }
.gantt-page .use-case-list--std  { height: 118px; }

.gantt-page .use-case-list-item {
  color: #000000;
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
  font-style: var(--desktop-body-small-font-style);
}

/* ── CTA Section ──────────────────────────────────────── */
.gantt-page .gantt-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.gantt-page .cta-inner {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 76px clamp(20px, 7.3%, 221px);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color:rgba(54, 59, 139, 1);
  border-radius: 3.65px;
  overflow: hidden;
  box-sizing: border-box;
}
.map-page .cta-inner{
  background-color: var(--color-theme-map-page);
  padding: 45px clamp(20px, 7.3%, 221px);
}
.time-page .cta-inner{
  background-color:var(--color-theme-time-page);
}
.gantt-page .cta-title {
  position: relative;
  z-index: 1;
  width: min(858px, 90%);
  color: transparent;
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);

}

.gantt-page .cta-title-white {
  color: #ffffff;

}

.gantt-page .cta-title-accent {
  color: #5d8ccf;

}
.map-page .cta-title , .map-page .cta-title-white, .map-page .cta-body{
color: #000;
}
.map-page .cta-title-accent {
  color: #ffffff;
}
.time-page .cta-title-accent {
  color:#f0956a;
}
.gantt-page .cta-body {
  position: relative;
  z-index: 1;
  width: min(588px, 90%);
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: #ffffff;
  font-size: var(--desktop-body-small-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
  font-style: var(--desktop-body-small-font-style);
}
.map-page .cta-body {
  width: min(700px, 90%);
}
.map-page .cta-title , .map-page .cta-title-white, .map-page .cta-body{
color: #000;
}
.map-page .cta-title-accent {
  color: #ffffff;
}
.gantt-page .cta-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

.gantt-page .cta-bg-shapes {
  position: absolute;
  top: -202px;
  left: -30px;
  width: 1436px;
  height: 1212px;
  z-index: 0;
}

.gantt-page .cta-shape             { position: absolute; background-color: #4046a5; }
.gantt-page .cta-shape-1           { top: 556px; left: 286px;  width: 288px; height: 624px; }
.gantt-page .cta-shape-2           { top: 436px; left: 0;      width: 287px; height: 728px; }
.gantt-page .cta-shape-3           { top: 594px; left: 574px;  width: 287px; height: 546px; }
.gantt-page .cta-shape-4           { top: 553px; left: 861px;  width: 288px; height: 659px; }
.gantt-page .cta-shape-5           { top: 1px;   left: 1149px; width: 287px; height: 268px; }

 .map-page .cta-shape             { position: absolute; background-color: #8EE1D9 }
.map-page .cta-shape-1           { top: 563px;
    left: 225px;
    width: 262px;
    height: 624px; }
.map-page .cta-shape-2           { top: 456px;
    left: 0;
    width: 225px;
    height: 728px;
   }
.map-page .cta-shape-3   {
    top: 590px;
    left: 484px;
    width: 331px;
    height: 546px;
}
.map-page .cta-shape-4 {
    top: 565px;
    left: 815px;
    width: 250px;
    height: 659px;
}
.map-page.cta-shape-5           {
  top: 7px;
    left: 1101px;
    width: 287px;
    height: 268px;
}
 .time-page .cta-shape             { position: absolute; background-color: var(--color-theme-time-page-secondary) }
/* ============================================================
   CAROUSEL  (demo cards on tablet/mobile)
   Same pattern as grids page — blue theme colours
   ============================================================ */

/* Nav hidden on desktop */
.gantt-page .fc-carousel-nav {
  display: none;
}

@media (max-width: 1024px) {
  .gantt-page .fc-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }

  /* Horizontal scroll track */
  .gantt-page .fc-carousel-wrap .demo-cards-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px 20px 12px;
    margin-left: 0;
    margin-right: 0;
  }

  .gantt-page .fc-carousel-wrap .demo-cards-row::-webkit-scrollbar {
    display: none;
  }

  .gantt-page .fc-carousel-wrap .demo-card {
    flex: 0 0 clamp(240px, 80vw, 303px);
    min-width: 0;
    scroll-snap-align: start;
    height: 285px;
  }

  /* Arrow buttons — blue theme */
  .gantt-page .fc-carousel-btn {
    all: unset;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #2931ae66;
    border-radius: 50%;
    font-size: 16px;
    color:var(--color-theme-gannt-page);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: 0 2px 8px #2931ae29;
    flex-shrink: 0;
  }

  .gantt-page .fc-carousel-btn:hover {
    background-color:var(--color-theme-gannt-page);
    color: #ffffff;
  }
.map-page .fc-carousel-btn:hover {
    background-color: var(--color-theme-map-page);

  }
  .gantt-page .fc-carousel-dots {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .gantt-page .fc-dot {
    all: unset;
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-theme-gannt-page);
    cursor: pointer;
    transition: background-color 0.25s, transform 0.25s;
  }

  .gantt-page .fc-dot--active {
    background-color: var(--color-theme-gannt-page);
    transform: scale(1.35);
  }
   .map-page .fc-dot--active {
    background-color: var(--color-theme-map-page);

  }
}

/* ============================================================
   RESPONSIVE — Tablet  ≤1024px
   ============================================================ */
@media (max-width: 1024px) {

  .gantt-page .gantt-highlight-wrapper {
    padding: 160px 0;
    height: auto;
  }

  .gantt-page .gantt-feature-card {
    flex-direction: column;
    height: auto;
  }

  .gantt-page .gantt-feature-text-col {
    width: 100%;
    padding: 24px 16px;
  }

  .gantt-page .gantt-feature-text-content {
    width: 100%;
  }

  .gantt-page .gantt-feature-title {
    width: 100%;
    height: auto;
  }

  .gantt-page .gantt-feature-list {
    width: 100%;
  }

  .gantt-page .gantt-feature-image {
    width: 100%;
    height: auto;
    max-height: 418px;
    object-fit: contain;
  }

  .gantt-page .use-case-card--sm { width: min(413px, calc(50% - 8px)); }
  .gantt-page .use-case-card--lg { width: 100%; height: auto; }

  .gantt-page .use-case-list--wide { width: 100%; height: auto; }
  .gantt-page .use-case-list--sm   { height: auto; }
  .gantt-page .use-case-list--std  { height: auto; }

  .gantt-page .use-case-title          { width: 100%; }
  .gantt-page .use-case-title-workflow { width: 100%; }
  .gantt-page .use-case-title-resource { width: 100%; }

  .gantt-page .gantt-cta {
    padding: 40px 24px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile  ≤768px
   ============================================================ */
@media (max-width: 768px) {
  /* Highlight */
  .gantt-page .gantt-highlight {
    padding: 40px 0;
  }
  .gantt-page .gantt-highlight-wrapper {
    padding: 0 20px;
    height: auto;
    background-image: 
      url('/wp-content/uploads/2026/03/gantt-deco-top-mobile.svg'),
      url('/wp-content/uploads/2026/03/gantt-deco-bottom-mobile.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 100%, 100%;
  }
  .gantt-page .gantt-highlight-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 160px 0; /* space for top + bottom SVG */
  }
  .gantt-page .gantt-highlight-bg {
    display: none;
  }

  /* Feature */
  .gantt-page .gantt-feature {
    padding: 32px 16px;
  }
  .gantt-page .gantt-feature-card {
    width: 100%;
    border-radius: 8px;
  }
  .gantt-page .gantt-feature-text-col {
    padding: 20px 16px;
  }
  /* Use cases */
  .gantt-page .gantt-use-cases {
    padding: 48px 0 80px;
  }
  .gantt-page .use-cases-grid {
    padding: 0 16px;
  }
  .gantt-page .use-case-card--sm,
  .gantt-page .use-case-card--lg {
    width: 100%;
    height: auto;
  }
  /* CTA */
  .gantt-page .gantt-cta {
    padding: 24px 16px;
  }
  .gantt-page .cta-inner {
    padding: 40px 20px;
    height: auto;
    border-radius: 8px;
  }
  /* Footer */
  .gantt-page .fc-footer {
    height: auto;
    padding: 40px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .gantt-page .gantt-feature-title h3 {
    text-align: center;
  }
  .gantt-page .gantt-highlight-wrapper {
     padding: 0px 0px !important;
}
}
/* Allow carousel to bleed out */
.grid-feature-cards-grid1 .swiper {
  /*overflow: visible !important;*/
}

/* Fix all parent containers that may be clipping */
.wp-block-uagb-container.grid-feature-cards-grid1,
.wp-block-uagb-container.grid-feature-cards-grid1 > .uagb-container-inner-blocks-wrap {
  overflow: visible !important;
}

/* The outer section wrapper - this is what clips */
.wp-block-uagb-container.uagb-block-f67bbbad {
  overflow: hidden !important;
}

/* Dim side slides */
.grid-feature-cards-grid1 .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.grid-feature-cards-grid1 .swiper-slide-active,
.grid-feature-cards-grid1 .swiper-slide-prev,
.grid-feature-cards-grid1 .swiper-slide-next {
  opacity: 1;
}



@media (min-width: 1024px) {
  .grids.gantt-page .license-home,  .charting-page .license-home, .integration-page .license-home  {
    padding: 88px 120px 160px 120px !important;
  }
   .grids.time-page .license-home{
    padding: 0px 120px 160px 120px !important;
  }

}
.grids.gantt-page  .license-home-card{
  gap: 16px !important;

}
.grids.gantt-page  .license-home-card  {
    margin-bottom: 0px !important;
}

/*
.chart-wrapper-card-look {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
}*/




/* ── Highlight Section ──────────────────────────────────── */
@keyframes highlight-rise {
  from { opacity: 0; transform: translateY(36px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes accent-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

.time-page .time-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 96px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--dark-white);
}

.time-page .time-highlight-wrapper {
  display: flex;
  flex-direction: column;
  height: 712px;
  align-items: center;
  gap: 24px;
  padding: 256px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.time-page .time-highlight-content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
  margin-bottom: -97px;
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.time-page .time-highlight-content.is-visible {
  animation: highlight-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.time-page .time-highlight-content:hover {
  transform: translateY(-4px) scale(1);
  box-shadow: 0 12px 40px rgba(229, 98, 46, 0.12);
}

.time-page .time-highlight-content.is-visible .time-highlight-title-accent {
  animation: accent-shimmer 3s ease-in-out 1s infinite;
}

.time-page .time-highlight-title {
  position: relative;
  width: min(680px, 90%);
  margin-top: -1px;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: transparent;
  font-size: var(--desktop-h2-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
  font-style: var(--desktop-h2-font-style);
}

.time-page .time-highlight-title-text {
  color: #000000;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.time-page .time-highlight-title-accent {
  color: #e5622e;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.time-page .time-highlight-body {
  position: relative;
  width: min(752px, 90%);
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: var(--black);
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

/* ── Highlight: SVG decorative layer ───────────────────── */
.time-page .time-hl-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Vector 12 — full-width wavy chart line */
.time-page .time-hl-vec12 {
  position: absolute;
  width: 1499px;
  height: 400px;
  left: -9px;
  top: -10px;
}

/* Orange dot — on the ascending portion of Vector 12 */
.time-page .time-hl-dot-orange {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF9742;
  /* path point approx: x_vb≈346, y_vb≈113 → section (351,106) */
  left: 346px;
  top: 101px;
}

/* Black dot — on the plateau region of Vector 12 */
.time-page .time-hl-dot-black {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000000;
  /* path point: x_vb≈979, y_vb≈221 → section (1010,217) */
  left: 1005px;
  top: 212px;
}

/* Rectangle 95 — orange highlight band (opacity 0.1) */
.time-page .time-hl-rect95 {
  position: absolute;
  width: 461px;
  height: 42px;
  left: 639px;
  top: 651px;
  background: #FF9742;
  opacity: 0.1;
  border-radius: 2px;
}

/* Vector 13 — wide orange wavy line (30% opacity) */
.time-page .time-hl-vec13 {
  position: absolute;
  width: 1461.5px;
  height: 64.5px;
  left: calc(50% - 730.75px - 0.25px);
  top: 646px;
}

/* Vector 14 — solid orange diagonal accent line */
.time-page .time-hl-vec14 {
  position: absolute;
  width: 457px;
  height: 31px;
  left: calc(50% - 228.5px + 149.5px);
  top: 657px;
}

/* ── SVG Draw-on-scroll animation ──────────────────────── */
/* Paths start invisible; JS sets stroke-dasharray/dashoffset then
   toggles .svg-draw-ready which triggers the CSS transition */
.time-hl-vec12 path,
.time-hl-vec13 path,
.time-hl-vec14 path {
  transition: none;
}

.time-hl-vec12.svg-draw-ready path {
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.time-hl-vec13.svg-draw-ready path {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}
.time-hl-vec14.svg-draw-ready path {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.9s;
}

/* Dots: start at scale 0, pop in after lines draw */
.time-page .time-hl-dot-orange,
.time-page .time-hl-dot-black {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.time-page .time-hl-dot-orange.dot-visible {
  transform: scale(1);
  transition-delay: 1.2s;
}
.time-page .time-hl-dot-black.dot-visible {
  transform: scale(1);
  transition-delay: 1.5s;
}

/* Rect95: fade in */
.time-page .time-hl-rect95 {
  opacity: 0;
  transition: opacity 0.6s ease 1s;
}
.time-page .time-hl-rect95.rect-visible {
  opacity: 0.1;
}