:root{
  --navy-deep:     #0f2a48;
  --navy-header:   #132845;
  --navy-heading:  #20304e;
  --navy-strong:   #1b3a6b;
  --accent-blue:   #3d7ac9;
  --accent-purple: #6a6fd6;

  --exec-badge:    #20458b;
  --exec-card-bg:  #cad6e2;
  --intel-badge:   #5d6ed6;
  --intel-card-bg: #b8bbdc;

  --footer-blue:   #5683aa;
  --footer-blue-dark: #4a739a;

  --section-tint:  #f3f7fa;
  --testimonial-bg:#cad6e2;


  --report-hero-tint: #f8f6ff; /* hero background */
  --report-blue-tint: #e2efff; /* Gap Management Dashboard band */
  --report-lavender:  #d1c9df; /* Vacation / Project Risk / Resource Capacity band */

  --modules-band-blue: #eaf0f8; /* "The Domino Effect" band */
  --modules-suite-bg:  #96a5d4; /* "Integrated Resource and Admin Suite" band */
  --rmm-bg: #cbd6e3;
  --sr-heading: #cc0000;
  --sr-text: #344e6b;

  --domino-blue:   #1c68b6;
  --domino-teal:   #02849b;
  --domino-border: #59597e;

  --it-accent: #086676;

  --bp-accent: #5670f5;
  --bp-navy:   #002752;

  --demo-hero-blue: #1b5ba8;

  --ink:           #2b3547;
  --ink-soft:      #000000;
  --white:         #ffffff;

  --font-header: "Montserrat", sans-serif;
  --font-head: "Poppins", sans-serif;
  --font-body: 'Inter', sans-serif;

  --max-w: 1380px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img{ display: block; }

a{ text-decoration: none; color: inherit; }

ul{ list-style: none; }

h1, h2, h3{
  font-family: var(--font-head);
  color: var(--navy-heading);
  line-height: 1.25;
}

.navy{ color: var(--navy-strong); }
.accent{ color: var(--accent-blue); }

.section-head{
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
  padding: 0 24px;
}
.section-head h2{
  font-size: clamp(1.65rem, 3.3vw, 2.31rem);
  margin-bottom: 14px;
}
.section-head p{
  color: var(--ink-soft);
  font-size: 1.122rem;
}

/* ===================== reveal-on-scroll ===================== */
.reveal, .reveal-left{
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view, .reveal-left.in-view{
  opacity: 1;
  transform: translateX(0);
}

/* ===================== HEADER ===================== */
:root{
  --hdr-font: clamp(1.047rem, calc(0.701rem + 0.385vw), 1.315rem);
  --dropdown-gap: clamp(15.3px, calc(8.75px + 0.456vw), 20.4px);
}

.vertical-line {
  width: 1px;             
  height: 40px;          
  background-color: #FFF; 
}

.site-header{
  position: relative;
  top: 0;
  height: clamp(68px, calc(41.85px + 1.869vw), 89.7px);
  z-index: 100;
  background: var(--navy-header);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: clamp(9.97px, calc(4.84px + 0.355vw), 13.95px) clamp(19.93px, calc(-5.69px + 1.78vw), 39.86px);
  gap: clamp(15.94px, calc(10.82px + 0.355vw), 19.93px);
  font-family: var(--font-body);
}
.brand{
  height: clamp(60px, calc(27.34px + 0.985vw), 52.5px);
}
.brand-mark{
  height: 100%;
  width: auto;
  object-fit: contain;
}

.main-nav{
  display: flex;
  gap: 5px;
  flex: 1;
  margin-left: clamp(37.86px, calc(22.49px + 1.067vw), 49.83px);
  justify-content: left;
}
.main-nav a{
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-weight: 400;
  font-size: var(--hdr-font);
  transition: color .2s ease;
  position: relative;
  padding: 5px 20px;
  border-radius: 6px;
}
.main-nav a:hover{ color: var(--white); background-color: rgba(64, 76, 90, 0.753); }
.mobile-nav-actions{ display: none; }

.header-actions{
  display: flex;
  align-items: center;
  gap: 100px;
  margin-right: 1%;
}

.hdr-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--hdr-font);
  white-space: nowrap;
  padding: 0 0.8em;
  transition: background .2s ease;
}
.hdr-cta-demo{
  background: #164767;
  border: none;
  color: var(--white);
  border-radius: 30px;
}

.header-cta-btns{
  display :flex;
  gap: 15px;
  margin-right: 30px;
}

.hdr-cta-demo:hover{ background: #0d5a90; }
.hdr-cta-login{
  background: #164767;
  border: none;
  color: var(--white);
  border-radius: 30px;
}
.hdr-cta-login:hover{ background: #0d5a90; }
.hdr-company{
  background: var(--white);
  width: clamp(120px, calc(69.11px + 3.112vw), 148.75px);
  height: 36px;
  border-radius: 50px;
  padding: 0 clamp(10.2px, calc(5.83px + 0.303vw), 13.6px);
  display: flex;
  align-items: center;
}
.hdr-company img{ width: 100%; }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: clamp(3.99px, calc(2.7px + 0.089vw), 4.98px);
  background: none;
  border: none;
  cursor: pointer;
  padding: clamp(4.98px, calc(3.69px + 0.089vw), 5.98px);
}
.nav-toggle span{
  width: clamp(18.93px, calc(12.52px + 0.444vw), 23.92px);
  height: 2.3px;
  background: var(--white);
  border-radius: 2px;
}

.nav-dropdown-trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  border-radius: 6px;
  gap: clamp(4.98px, calc(3.69px + 0.089vw), 5.98px);
  background: none;
  border: none;
  padding: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--hdr-font);
  line-height: inherit;
  cursor: pointer;
  transition: color .2s ease;
}
.nav-dropdown-trigger:hover{ color: var(--white); background-color: rgba(64, 76, 90, 0.753);}

.nav-dropdown{ position: relative; }

.nav-chevron{ width: clamp(9.97px, calc(7.41px + 0.178vw), 11.96px); height: clamp(6.98px, calc(5.69px + 0.089vw), 7.97px); flex-shrink: 0; transition: transform .25s ease; }
.nav-dropdown.open .nav-chevron{ transform: rotate(180deg); }
.nav-dropdown.open::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-width: 90vw;
  height: var(--dropdown-gap);
}

.nav-dropdown-panel{
  position: absolute;
  font-family: var(--font-body);
  top: calc(100% + var(--dropdown-gap));
  left: 50%;
  width: 480px;
  max-width: 90vw;
  background: var(--white);
  border: 1.5px solid #d7dee6;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(20,40,80,.18);
  padding: 20px;
  margin-top: 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 110;
}
.nav-dropdown.open .nav-dropdown-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: #000;
  font-weight: 600;
  font-size: .98rem;
  transition: background .15s ease;
}
.nav-dropdown-panel a:hover{ background: var(--section-tint); color: var(--accent-blue); }

.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
  z-index: 60;
}
.nav-overlay.show{ opacity: 1; visibility: visible; pointer-events: auto; }

/* ===================== HERO ===================== */
.hero{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px 32px;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero-copy h1{
  font-size: clamp(1.87rem, 3.74vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 20px;
}
.hero-copy p{
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 660px;
  margin-bottom: 30px;
}
.hero-art img{ max-width: 420px; margin: 0 auto; }

body.page-reporting .hero-copy h1 .accent{ color: inherit; }
body.page-reporting .hero-copy p{ color: #5b6577; }

.feature-strip{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #e4e9ef;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.feature-item{
  display: flex;
  align-items: center;
  gap: 10px;
}
.feature-item img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.feature-item span{
  font-size: .968rem; /* +10%, was .88rem — shared strip (also used on modules.html), pinned back below */
  font-weight: 600;
  color: var(--navy-heading);
  white-space: nowrap;
}

.hero-cta{
  color: white;
  background-color: var(--navy-header);
  border-radius: 3px;
  padding: 12px 20px;
  font-weight: 400;
  transition: all 0.1s ease-out;
  border-radius: 30px;
}

.hero-cta:hover{
  background-color: var(--navy-strong);
}

/* ===================== PLATFORM SECTION ===================== */
.platform-section{
  background: var(--section-tint);
  padding: 72px 24px 64px;
}
.platform-grid{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 100px;
  align-items: stretch;
}

.platform-card{
  border-radius: 22px;
  padding: 100px 26px 32px;
  position: relative;
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.exec-card{ background: var(--exec-card-bg); }
.intel-card{ background: var(--intel-card-bg); }

.card-badge{
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  padding-bottom: 35px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border: 6px solid var(--section-tint);
}
.exec-badge{ background: var(--exec-badge); }
.intel-badge{ background: var(--intel-badge); }
.card-badge .layer-icon{ width: 40px; height: 40px; margin-bottom: 8px; }
.card-badge .hub-icon{ width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; }
.card-badge h3{
  color: var(--white);
  font-size: .902rem; /* +10% (index.html-only), was .82rem */
  letter-spacing: .03em;
  font-weight: 700;
  margin-bottom: 4px;
}
.card-badge p{
  color: #e4e9ff;
  font-size: .814rem; /* +10% (index.html-only), was .74rem */
  font-weight: 500;
}

.module-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  align-content: space-between;
}
.module-item{
  background: var(--white);
  border-radius: 12px;
  border: 2px solid black;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(20,40,70,.06);
  font-size: .88rem; /* +10% (index.html-only), was .8rem */
  font-weight: 600;
  color: var(--navy-heading);
  min-height: 62px;
}
.module-item img{ width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.intel-modules{
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  flex: 1;
  gap: 14px;
}
.module-item.wide{ align-items: flex-start; flex: 1; }
.module-item.wide img{ width: 30px; height: 30px; margin-top: 2px; }
.module-item.wide div{ display: flex; flex-direction: column; gap: 3px; }
/* +10% (index.html-only): .924rem was .84rem, .814rem was .74rem */
.mod-title{ font-size: .924rem; font-weight: 700; color: var(--navy-heading); }
.mod-desc{ font-size: .814rem; font-weight: 400; color: var(--ink-soft); line-height: 1.4; }

.platform-connector{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.connector-label{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.32rem; /* +10% (index.html-only), was 1.2rem */
  letter-spacing: .12em;
  color: var(--navy-strong);
  white-space: nowrap;
}
.connector-ring{
  position: relative;
  width: 280px;
  height: 280px; /* was 273 — old ring.png was a non-square export; the new one is a true 840x840 square */
}

.ring-graphic{
  position: absolute;
  inset: 0;
  width: 280px;
  height: 280px; /* was 273, see .connector-ring */
  transform-origin: 50% 50%;
  animation: spin-ring 12s linear infinite;
}
@keyframes spin-ring{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.ring-logo{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(20,40,80,.12);
}

.platform-tagline{
  max-width: 780px;
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.155rem; /* +10% (index.html-only), was 1.05rem */
  color: var(--navy-heading);
}

/* ===================== VIDEO BANNER ===================== */
.team-banner{
  background: var(--footer-blue);
  padding: 72px 24px 64px;
}
.banner-video{
  width: 100%;
  border-radius: 18px;
  display: block;
  background: #000;
  object-fit: contain;
}

/* ===================== OVERVIEW / CORE MODULES ===================== */
.overview-section{
  padding: 40px 24px 90px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.overview-section .section-head h2{ color: rgb(25, 48, 72); }
.overview-section .section-head p .accent{ color: rgb(14, 72, 159); }
.overview-section .section-head{ max-width: 1100px; }
.overview-section .section-head p{ white-space: nowrap; }
.overview-diagram{
  display: flex;
  justify-content: center;
  padding: 60px 200px 0;
}
.overview-image-wrap{
  position: relative;
  width: 100%;
  max-width: 1000px;
}
.overview-bg-img{
  width: 100%;
  height: auto;
  display: block;
}
.overview-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 9%;
  height: auto;
  object-fit: contain;
}
.ov-title{
  position: absolute;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--white);
  font-size: 0.85rem; /* +10% (index.html-only), was 0.85rem */
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ov-title.col-left.row-1, .ov-title.col-left.row-4{
  left: 7%;
  width: 20%;
}
.ov-title.col-left.row-2, .ov-title.col-left.row-3{
  left: 3%;
  width: 15%;
}
.ov-title.col-right.row-1, .ov-title.col-right.row-4{
  left: 73%;
  width: 20%;
}
.ov-title.col-right.row-2, .ov-title.col-right.row-3{
  left: 80%;
  width: 20%;
}
.ov-title.row-1{ top: 3%; height: 17%; }
.ov-title.row-2{ top: 27.5%; height: 17%; }
.ov-title.row-3{ top: 56%; height: 17%; }
.ov-title.row-4{ top: 80.5%; height: 17%; }

.ov-desc{
  position: absolute;
  width: 280px;
  font-size: 0.88rem; /* +10% (index.html-only), was 0.8rem */
  font-weight: 700;
  color: rgb(25, 48, 72); /* was var(--navy-strong) */
  line-height: 1.35;
  text-align: center;
}
.ov-desc.desc-left.row-1, .ov-desc.desc-left.row-4{
  left: -20%;
}
.ov-desc.desc-left.row-2, .ov-desc.desc-left.row-3{
  left: -25%;
}
.ov-desc.desc-right.row-1, .ov-desc.desc-right.row-4{
  left: 90%;
}
.ov-desc.desc-right.row-2, .ov-desc.desc-right.row-3{
  left: 95%;
}
.ov-desc.row-1{ bottom: 100%; }
.ov-desc.row-2{ bottom: 76%; }
.ov-desc.row-3{ bottom: 46%; }
.ov-desc.row-4{ bottom: 16%; }

.ov-arrow{
  position: absolute;
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.ov-arrow.arrow-left.row-1,.ov-arrow.arrow-left.row-4{ left: 4%; transform: scaleX(-1);}
.ov-arrow.arrow-left.row-2,.ov-arrow.arrow-left.row-3{ left: -3%; transform: scaleX(-1);}
.ov-arrow.arrow-right.row-1,.ov-arrow.arrow-right.row-4{ left: 93%;}
.ov-arrow.arrow-right.row-2,.ov-arrow.arrow-right.row-3{ left: 100%;}
.ov-arrow.row-1{ bottom: 94%; }
.ov-arrow.row-2{ bottom: 70%; }
.ov-arrow.row-3{ bottom: 40%; }
.ov-arrow.row-4{ bottom: 10%; }

/* ===================== FEEDBACK ===================== */
.feedback-section{
  background: var(--testimonial-bg);
  padding: 72px 24px;
}
.feedback-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: left;
}
.feedback-inner h2{
  font-size: clamp(1.76rem, 3.3vw, 2.42rem); /* +10% (index.html-only), was clamp(1.6rem, 3vw, 2.2rem) */
  margin-bottom: 10px;
}
.feedback-kicker{
  font-size: .858rem; /* +10% (index.html-only), was .78rem */
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy-strong);
  margin-bottom: 36px;
}
.feedback-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feedback-card{
  background: var(--white);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 8px 24px rgba(20,40,80,.08);
}
.feedback-card p{
  font-size: 1.32rem; /* +10% (index.html-only), was 1.2rem */
  color: #000;
  margin-bottom: 24px;
  line-height: 1.6;
}
.feedback-person{
  display: flex;
  align-items: center;
  gap: 12px;
}
.feedback-person img{
  width: 70px;      
  height: 70px;     
  border-radius: 50%;
  object-fit: cover;
}
.feedback-person span{
  font-weight: 700;
  font-size: 1.32rem; /* +10% (index.html-only), was 1.2rem */
  color: #000;
}

/* ===================== FOOTER ===================== */
.site-footer{
  background: #002f51;
  color: var(--white);
  padding: 39px 24px 21px; /* -30%, was 56px 24px 30px */
}
.footer-top{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px; /* -30%, was 40px */
  align-items: center;
}
.footer-brand{ display: flex; align-items: center; gap: 13px; } /* -30%, was 18px */
.footer-brand-mark{
  width: 84px; /* -30%, was 120px */
  object-fit: contain;
  border-radius: 8px; /* -30%, was 12px */
  padding: 4px; /* -30%, was 6px */
}
.footer-brand h2{
  color: var(--white);
  font-size: 1.39rem; /* -30%, was 1.98rem */
  line-height: 1.15;
}
.footer-about p{
  font-size: .92rem; /* -30%, was 1.32rem */
  color: #eaf1f7;
  max-width: 550px;
  margin-bottom: 11px; /* -30%, was 16px */
}
.footer-social{
  display: flex;
  align-items: center;
  gap: 10px; /* -30%, was 14px */
}
.social-inavista{
  width: 25px; /* -30%, was 35px */
}
.social-icon{
  width: 23px; /* -30%, was 33px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.social-icon img{
  width: 100%;
  object-fit: contain;
}

.footer-divider{
  max-width: var(--max-w);
  margin: 22px auto; /* -30%, was 32px */
  height: 1px;
  background: rgba(255,255,255,.25);
}

.footer-addresses{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px; /* -30%, was 24px */
}
.address-block strong{
  display: block;
  font-size: .92rem;
  margin-bottom: 6px; 
}
.address-block p{
  font-size: .91rem; 
  color: #dde9f2;
  line-height: 1.6;
}

.footer-features{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px; 
  justify-content: center;
}
.footer-features .feature-item{ gap: 10px; }
.footer-features .feature-item img{
  width: 22px;
  height: 22px;
  background: var(--white);
  border-radius: 6px; 
  padding: 3px;
}
.footer-features .feature-item span{
  font-size: 0.968rem;
  color: var(--white);
  font-weight: 500;
}

/* ===================== BACK TO TOP ===================== */
.back-to-top{
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-header);
  color: var(--white);
  border: none;
  font-size: 1.21rem; /* +10%, was 1.1rem — shared back-to-top button, pinned back for modules.html below */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index: 90;
}
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===================== REPORTING PAGE ===================== */
.report-hero-caption{
  max-width: 700px;
  margin: 28px auto 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.012rem; /* +10% (reporting.html-only), was .92rem */
  color: rgb(11, 65, 104);
}

.report-band{ padding: 64px 0; }
.report-band.tint{ background: var(--section-tint); }
.report-band.tint2{ background: var(--report-blue-tint); }
.report-band.alt{ background: var(--report-lavender); }
.report-hero{
  position: relative;
  background: var(--report-hero-tint);
  box-shadow: 0 0 0 100vmax var(--report-hero-tint);
  clip-path: inset(0 -100vmax);
}
.report-hero .hero-inner{ grid-template-columns: 0.9fr 1.1fr; }

.report-row{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.report-row-copy h3{
  color: var(--accent-purple);
  font-size: clamp(1.265rem, 2.31vw, 1.65rem); /* +10% (reporting.html-only), was clamp(1.15rem, 2.1vw, 1.5rem) */
  font-weight: 700;
  margin-bottom: 12px;
}
.report-band.tint2 .report-row-copy h3{ color: rgb(31, 88, 130); }
.report-row-copy p{
  color: var(--ink-soft);
  font-size: 1.078rem; /* +10% (reporting.html-only), was .98rem */
  max-width: 460px;
}

.report-band.tint .section-head h2{ color: var(--accent-blue); }


.testing-grid{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8px 24px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.testing-grid-full{
  width: 65%;
  max-width: 930px;
  margin: 0 auto;
  padding: 0 24px;
}

.shot-placeholder{
  background: var(--white);
  border: 2px dashed #c3d2e0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20,40,80,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  min-height: 220px;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
}
.shot-placeholder span{
  display: block;
  color: var(--navy-heading);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.testing-grid-full .shot-placeholder{ min-height: 180px; }

.shot-placeholder.wide-shot{ width: 100%; max-width: 900px; margin: 0 auto 24px; aspect-ratio: 16/6; }

img.shot-img{
  width: 100%;
  max-width: none;
  display: block;
  border-radius: 16px;
  border: 2px solid #000;
  box-shadow: 0 8px 24px rgba(20,40,80,.08);
}

.report-row.media-wide-right{ grid-template-columns: 0.8fr 1.2fr; }
.report-row.media-wide-left{ grid-template-columns: 1.2fr 0.8fr; }

.modules-hero-vid-cont{
  display: flex;
  width: 100%;
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.modules-hero-vid-1,.modules-hero-vid-2{
  display: block;
  border-radius: 16px;
  border: 4px solid #000;
  background: #000;
}
.modules-hero-vid-1{
  width: 70%;
  height: 400px;
  overflow: hidden;
}
.modules-hero-vid-2{
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.modules-hero-vid-1 video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 15% 0%;
}

.modules-hero-vid-2 video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 0%;
}

.report-video{
  width: 100%;
  display: block;
  border-radius: 16px;
  background: #000;
  object-fit: contain;
  border: 4px solid #000;
}

/* ===================== MODULES PAGE FONT-SIZE FREEZE ===================== */
body.page-modules .section-head h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
body.page-modules .section-head p{ font-size: 1.02rem; }
/* ===================== MODULES PAGE ===================== */
.modules-hero{
  background: var(--section-tint);
  padding: 64px 24px 56px;
  text-align: center;
}
.modules-hero h1{
  margin: 0 auto;
  font-size: clamp(.9rem, 2vw, 1.9rem);
  font-weight: 700;
  white-space: nowrap;
}

.modules-wave{
  background-color: var(--section-tint);
  background-image: url('Assets/modules/modules_blue_background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 100px 24px 130px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.modules-shot-grid{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.modules-shot-grid.cols-2{ 
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 24px auto 0;
  width: 100%;
}

.modules-wave .modules-shot-grid.cols-2{ gap: 28px; margin-top: 40px; margin-left: auto; margin-right: auto; align-items: center; max-width: 1260px; }

.modules-wave-text{
  width: 100%;
  margin: 44px 0;
  text-align: center;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  white-space: nowrap;
}

.modules-wave-shots{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 180px;
  margin: 44px auto 0;
}
.modules-wave-shots img{
  width: auto;
  max-width: 100%;
  display: block;
  border: 4px solid #000;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20,40,80,.08);
}
.modules-wave-shots img:nth-child(1){ height: 400px; margin-top: 22px; }
.modules-wave-shot-2 img:first-child{ height: 350px; }
.modules-wave-spacer{ background: var(--section-tint); height: 56px; }

.modules-wave-shot-2{ position: relative; }
.modules-wave-shot-2 .modules-wave-gears-icon,
.modules-wave-shot-2 .modules-wave-dotted-arrow{
  position: absolute;
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.modules-wave-shot-2 .modules-wave-gears-icon{ width: 55px; height: auto; top: -38px; right: 70px; }
.modules-wave-shot-2 .modules-wave-dotted-arrow{ width: 135px; height: auto; top: -4%; left: 44%; }

.modules-wave-gears-icon{ animation: ws-pulse-bell-kf 1.1s ease-in-out infinite; }
.modules-wave-dotted-arrow{ animation: ws-pulse-bell-kf 1.1s ease-in-out infinite; }

.modules-band{ padding: 64px 0; }
.modules-band.white{ background: var(--white); }
.modules-band.blue{ background: var(--modules-band-blue); }
.modules-band.tint{ background: var(--section-tint); }
.modules-band.hero-tint{ background: var(--report-hero-tint); }
.modules-band.hero-tint.bulletproof{ background:#d5cfe9; }
.modules-band.domino-effect,.modules-band.bulletproof{ padding-bottom: 0px; }
.modules-connector{
  display: block;
  margin: 8px auto;
  max-width: 90px;
  height: auto;
}
.modules-connector.right{ margin-left: auto; margin-right: 12%; }
.modules-connector.left{ margin-right: auto; margin-left: 12%; }

.accent-underline{ text-decoration: underline; text-underline-offset: 4px; }

/* ===== Personalized Workspace — first row (image card + arrow/caption + video) ===== */
.ws-row{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.75fr;
  gap: 48px;
  align-items: start;
  /* Clear gap before the new sub-section below, so the two don't run together. */
  margin-bottom: 72px;
}
.ws-card{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--accent-blue);
  border-radius: 20px;
  overflow: hidden;
}
.ws-card-img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.ws-updates-badge{
  position: absolute;
  right: 10%;
  bottom: 23%;
  display: inline-block;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(20,40,80,.25);
}
.ws-updates-layer{
  display: block;
  padding: 7px 22px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
/* Layer B sits in normal flow and gives the badge its size; layer A stacks exactly on top of it. */
.ws-updates-b{ background: var(--report-blue-tint); color: var(--accent-blue); }
.ws-updates-a{
  position: absolute;
  inset: 0;
  background: var(--accent-blue);
  color: var(--report-blue-tint);
  animation: ws-badge-wipe 3.2s ease-in-out infinite;
}
@keyframes ws-badge-wipe{
  0%, 12%   { clip-path: inset(0 0 0 0); }
  45%, 62%  { clip-path: inset(0 100% 0 0); }
  88%, 100% { clip-path: inset(0 0 0 0); }
}

.ws-right{ display: flex; flex-direction: column; }
.ws-arrow-row{ display: flex; align-items: center; gap: 36px; margin-bottom: 24px; }
.ws-arrow{
  width: 90px;
  height: auto;
  flex-shrink: 0;
  transform: rotate(90deg);
}
.ws-caption{ margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--navy-heading); }
.ws-video{
  border: 8px solid var(--accent-blue);
  border-radius: 6px;
}
.ws-right .ws-video{ width: 92%; margin-left: auto; }

/* ===== Personalized Workspace — new sub-section (icon+heading, then a second video) ===== */
.ws-subhead{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ws-subhead-icon{ width: 130px; height: auto; flex-shrink: 0; }
.ws-subhead-text{ margin: 0; max-width: 690px; font-weight: 700; font-size: 1.45rem; color: var(--navy-heading); text-align: center; }

.ws-video-2-wrap{
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding: 0 24px;
  padding-bottom: 80px;
}
.ws-video-2{ width: 73%; margin-left: 25%; margin-right: 2%;}

/* ===== Personalized Workspace — final part (4 videos + 1 image) ===== */
.ws-final-heading{
  max-width: var(--max-w);
  margin: 0 auto 40px;
  padding: 0 24px;
  text-align: center;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy-heading);
}

.ws-final-heading-row{
  display: grid;
  grid-template-columns: 1fr 110px 1.66fr;
  gap: 28px;
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
}
.ws-final-heading-mid{
  grid-column: 3;
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
}

.ws-final-row{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.39fr;
  gap: 48px;
  align-items: start;
}
.ws-final-col{ display: flex; flex-direction: column; align-items: center; }
.ws-final-col > .ws-final-media-frame{ width: 100%; }
.ws-final-media-frame{ position: relative; padding:20px; }
.ws-final-media-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('Assets/shared/module_image_frame.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.ws-final-media-frame video{
  display: block; width: 100%; height: 100%; border: none;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover;
}
.ws-final-media-frame .shot-placeholder{ display: block; width: 100%; height: 100%; min-height: 0; border: none; }
.ws-final-media-frame img:not(.ws-final-bell){
  display: block; width: 100%; height: 100%; border: none;
  object-fit: cover;
}

.ws-final-media-1{ aspect-ratio: 1 / 1; max-width: 55%; }
.ws-final-media-2{ aspect-ratio: 1 / 1; max-width: 72%; }
.ws-final-media-image{ aspect-ratio: 598 / 256; max-width: 76%; transform: translateX(30px); }
.ws-final-media-image::after{ background-image: url('Assets/shared/module_image_spiralFrame.svg'); }
.ws-final-media-image video {transform: scale(1.1);}
.ws-final-col:not(.ws-final-col-right){ transform: translateX(32px); }

.ws-final-down-arrow{
  width: 60px;
  height: auto;
  margin: 30px 0;
  transform: rotate(90deg);
}
.ws-final-col-right{ display: flex; justify-content: center; }
.ws-final-video-wrap{ position: relative; width: 100%; margin-top: 63px; transform: translateX(-36px); }
.ws-final-bell{ position: absolute; top: -34px; right: -46px; width: 40px; height: auto; }
.ws-final-bottom-row{ margin-top: -29px; }
.ws-final-bottom-row.ws-final-row{ grid-template-columns: 1fr 110px 1.66fr; gap: 28px; }
.ws-final-media-spiral{ aspect-ratio: 1 / 1; max-width: 75%; transform: translateX(55px); }
.ws-final-spiral-col{ display: flex; align-items: center; justify-content: center; }
.ws-final-spiral{ width: 99%; height: auto; pointer-events: none; transform: translate(32px, 131px); }
.ws-final-media-black{ width: 100%; max-width: 85%; margin: 60px auto 0; }
.ws-final-video-black{
  border: 4px solid #000;
  border-radius: 6px;
}

@keyframes ws-pulse-arrow-kf{
  0%, 100% { transform: rotate(90deg) scale(1); opacity: 1; }
  50%      { transform: rotate(90deg) scale(1.14); opacity: .72; }
}
@keyframes ws-pulse-bell-kf{
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.14); opacity: .72; }
}
.ws-pulse-arrow{ animation: ws-pulse-arrow-kf 2.2s ease-in-out infinite; }
.ws-pulse-bell{ animation: ws-pulse-bell-kf 2.2s ease-in-out infinite; }

/* ===== Domino Effect diagram ===== */

.domino-effect h2 .domino-accent{ color: rgb(83, 131, 168); }
.domino-effect p .domino-accent{ color: var(--domino-teal); }
.domino-effect .section-head p{ font-size: 1.15rem; }

.domino-card-1{
  position: relative;
  max-width: 988px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(20,40,80,.1);
  padding: 10px;
}
.domino-img-1{ width: 100%; display: block; border-radius: 10px; }

.domino-frame-corner{
  position: absolute;
  top: -10px;
  width: 42%;
  height: 96%;
  background-image: url('Assets/modules/de_frame.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.domino-frame-corner.left{ left: -10px; }
.domino-frame-corner.right{ right: -10px; transform: scaleX(-1); }

.domino-bubble{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2.5px solid var(--domino-blue);
  border-radius: 16px;
  padding: 14px 26px;
  box-shadow: 0 6px 16px rgba(20,40,80,.08);
  white-space: nowrap;
}
.domino-bubble span{
  font-weight: 700;
  font-size: 1rem;
  color: var(--domino-teal);
}
.domino-bubble-icon{ width: 24px; height: 24px; border-radius: 6px; display: block; }
.domino-bubble-gap::before{
  content: ''; position: absolute; top: -13px; left: 20px;
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 13px solid var(--domino-blue);
}
.domino-bubble-gap::after{
  content: ''; position: absolute; top: -9px; left: 23px;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid var(--white);
}
.domino-bubble-plan::before,
.domino-bubble-bugs::before{
  content: ''; position: absolute; bottom: -13px; left: 26px;
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 13px solid var(--domino-blue);
}
.domino-bubble-plan::after,
.domino-bubble-bugs::after{
  content: ''; position: absolute; bottom: -9px; left: 29px;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--white);
}

.domino-arrow{ display: block; }
.domino-arrow-1{
  width: 60px;
  height: 60px;
}

.domino-diagram{
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
  position: relative;
}
.domino-bubble-cluster{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.domino-bubble-plan{ margin-top: 40px; }
.domino-arrow-1{ margin-top: 24px; }

.domino-copy{
  grid-column: 1;
  grid-row: 1;
  max-width: 660px;
  text-align: center;
  color: var(--navy-heading);
  font-size: 1.1rem;
  line-height: 1.65;
}

.domino-media-bordered{
  width: 100%;
  display: block;
  border: 6px solid var(--domino-border);
  border-radius: 16px;
  background: #000;
}
.domino-video{ object-fit: contain; }
.domino-img-2{ grid-column: 2; grid-row: 2; margin-top: 24px; max-width: 480px; }

.domino-bubble-bugs{
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: 48px;
  margin-left: 217px;
  transform: translateY(-150px);
}
.domino-video{
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  max-width: 650px;
  height: 400px;
  transform: translate(40px, -140px);
  overflow: hidden;
}

.domino-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 0%;
}
.domino-arrow-2{
  position: absolute;
  top: 300px;
  left: 560px;
  width: 110px;
  height: 110px;
}

@keyframes domino-pulse-1-kf{
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.12); opacity: .72; }
}
.domino-arrow-1,
.domino-arrow-2{ animation: domino-pulse-1-kf 1.8s ease-in-out infinite; }

/* ===== Issue Tracking (2x2 grid: Ticket Types / Kanban video / Query Builder / Favourite Queries) ===== */
.it-heading{ color: #000; }
.it-accent{ color: var(--it-accent); }
.it-grid{
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 56px;
  row-gap: 64px;
  align-items: start;
}
.it-cell{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.it-cell-below{ align-self: center; align-items: center; }

.it-caption{
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--navy-heading);
}
.it-cell-below .it-caption{ margin: 16px 0 0; text-align: center; }
.it-media{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 6px solid #000;
  border-radius: 16px;
  background: #000;
}
.it-media-tickets{ max-height: 340px; }
.it-media-query{ max-height: 400px; margin-left: 20%; }
.it-media-favorites{ max-width: 800px; width: 700px; }
.it-media-kanban{
  width: 100%;
  max-width: 510px;
  aspect-ratio: 698 / 658;
  object-fit: contain;
  border-radius: 0px;
}

/* ===== Bulletproof Your Product (video+arrow / colored-status table + swimlane / checklist + test-cases) ===== */
.bp-heading{ color: var(--bp-navy); }
.bp-accent{ color: var(--bp-accent); font-style: italic; }
.bp-copy{
  max-width: 900px;
  margin: 40px auto 0;
  text-align: center;
  color: #000;
  font-size: 1.155rem; /* 1.05rem + 10% */
  line-height: 1.7;
}
.bp-text-2{
  margin-top: 80px;
}

.bp-top-row{
  max-width: var(--max-w);
  margin: 48px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.bp-video{
  display: block;
  width: 100%;
  max-width: 800px;
  max-height: 430px;
  object-fit: contain;
  background: #000;
  border: 5px solid var(--domino-border);
  border-radius: 28px;
}
.bp-sd-pointer{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
.bp-sd-arrow{ width: 100%; max-width: 220px; height: auto; }
.bp-sd-label{
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bp-accent);
  padding-left: 50%;
  white-space: nowrap;
}

.bp-mid-row{
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.bp-mid-left{
  display: block;
  width: auto;
  height: auto;
  max-height: 230px;
  max-width: 100%;
  border: 4px solid var(--domino-border);
  border-radius: 20px;
  transform: translateY(80px);
}
.bp-purple-arrow{ width: 70px; height: auto; flex: 0 0 auto; align-self: center; }
.bp-swimlane-frame{
  position: relative;
  flex: 0 1 560px;
  background: var(--intel-card-bg);
  border-radius: 20px;
  padding: 16px;
}
.bp-swimlane-frame img{ display: block; width: 100%; height: auto; border-radius: 6px; }
.bp-swimlane-frame .bp-cursor-icon{
  position: absolute;
  width: 26px;
  height: auto;
  left: 44.5%;
  bottom: 11%;
  border-radius: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  animation: bp-cursor-move-kf 1.6s ease-in-out infinite;
}
@keyframes bp-cursor-move-kf{
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, 3px); }
}
.bp-sticky-note{
  position: absolute;
  right: 25%;
  bottom: 16%;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  color: var(--bp-accent);
  box-shadow: 0 6px 16px rgba(20,40,80,.18);
  white-space: nowrap;
  animation: bp-sticky-pulse-kf 1s ease-in-out infinite;
}
@keyframes bp-sticky-pulse-kf{
  0%, 100% { transform: rotate(6deg) scale(1); opacity: 1; }
  50%      { transform: rotate(6deg) scale(1.1); opacity: .82; }
}

.bp-bottom-row{
  max-width: var(--max-w);
  margin: 36px auto 0;
  padding: 0 24px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.bp-media-bottom{
  display: block;
  width: auto;
  height: auto;
  max-height: 288px; /* 240px + 20% */
  max-width: 100%;
  border: 3px solid #000;
  border-radius: 18px;
}
.bp-bottom-row img:last-child{
  margin-top: 80px;
}

/* ===== Integrated Resource and Admin Suite (Timesheet+Live Effort / Approval log+Leave Management / Expense) ===== */
.ira-heading{ color: var(--bp-navy); }
#admin-suite.modules-band{ padding-bottom: 0; }
#admin-suite .section-head{ margin-bottom: 0; }
#admin-suite .ira-bg{ margin-top: 50px; }

.ira-bg{
  background-color: var(--section-tint);
  background-image: url('Assets/modules/IRA_Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 90px 24px 110px;
}
.ira-row{
  max-width: 1750px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 56px;
}

.ira-row + .ira-row{ margin-top: 72px; }
.ira-row.dec-marg{ margin-top: 10px; }
.ira-row-media{ flex: 1 1 42%; display: flex; flex-direction: column; align-items: center; }
.ira-row-copy{ flex: 1 1 58%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ira-subhead{
  margin: 0 0 12px;
  color: var(--bp-navy);
  font-size: 1.4rem;
}
.ira-body{
  margin: 0 0 24px;
  max-width: 420px;
  color: var(--bp-navy);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
}
.ira-expense .ira-body{ max-width: 640px; }
.ira-media{
  display: block;
  height: auto;
  max-width: 100%;
  border: 3px solid #000;
  border-radius: 18px;
  background: var(--white);
}
.ira-media-billable{ width: 599px; aspect-ratio: 495 / 210; }   /* height target 254px (212px + 20%) */
.ira-media-approval{ width: 649px; aspect-ratio: 739 / 296; }   /* height target 260px (173px + 50%) */
.ira-media-inventory{ 
  width: 897px;
  margin-right: 30%;
}  
.ira-media-expense{ width: 948px; aspect-ratio: 784 / 187; }    /* height target 226px (188px + 20%) */
.ira-media-statuspills{ width: 280px;}/* height target 192px (160px + 20%) */
.ira-media-tilted{
  width: 518px; /* height target 349px (291px + 20%) */
  aspect-ratio: 521 / 351;
  border: 6px dashed #000;
  border-radius: 20px;
}

.ira-timeoff{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ira-timeoff-label{ font-weight: 700; color: #000; font-size: 1.05rem; }
.ira-timeoff-arrow{ width: 98px; height: auto; margin: 8px 0; transform: translateX(112px) rotate(-90deg); }
.ira-timeoff-label-end{ align-self: flex-end; margin-right: 8%; transform: translateX(100%); }

.ira-expense{
  max-width: 1750px;
  margin: 72px auto 0;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ira-expense-row{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* ===== Risk & Mitigation Management (task tree + Create Risk menu / shield icon + caption) ===== */
#risk-mitigation.modules-band{ background: var(--rmm-bg); }
.rmm-heading{ color: var(--bp-navy); }
.rmm-row{
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
}
.rmm-media{
  width: 55.2%;
  max-width: 672px;
  height: auto;
  display: block;
  border: 6px solid #000;
  border-radius: 16px;
  background: #000;
}
.rmm-side{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.rmm-icon{ width: 100%; max-width: 234px; height: auto; }
.rmm-caption{
  margin: 0;
  font-weight: 700;
  font-size: 1.265rem;
  color: var(--navy-heading);
}

.tr-heading{ color: var(--accent-blue); }
.tr-row{
  position: relative;
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
}
.tr-media{
  height: auto;
  display: block;
  border: 6px solid #000;
  border-radius: 16px;
  background: #000;
}
.tr-media-1{ width: 560px; aspect-ratio: 833 / 469; }
.tr-media-2{ width: 380px; aspect-ratio: 458 / 329; margin-top: 64px; }
.tr-arrow{
  position: absolute;
  left: 54%;
  top: 10%;
  width: 150px;
  height: auto;
  transform: translateX(-50%) scale(0.7) rotate(-90deg);
}
.tr-caption{
  margin: 48px auto 0;
  max-width: 900px;
  text-align: center;
  font-weight: 700;
  font-size: 1.265rem;
  color: var(--accent-blue);
}

.sr-media-1{ width: 728px; aspect-ratio: 968 / 532; }
.sr-media-2{ width: 682px; aspect-ratio: 1169 / 857; }

#status-report, #status-report ~ section{ background: var(--report-blue-tint); }
#status-report .tr-heading{ color: var(--sr-heading); }
#status-report .tr-row{ align-items: center; }
#status-report .tr-caption{
  margin: 0 auto;
  max-width: 630px;
  font-size: 1.392rem;
  color: var(--sr-text);
}

/* ===================== BOOK A DEMO PAGE ===================== */
.demo-hero-wrap{ position: relative; }

.demo-hero{
  position: relative;
  background: var(--demo-hero-blue);
  box-shadow: 0 0 0 100vmax var(--demo-hero-blue);
  clip-path: inset(0 -100vmax);
  padding: 72px 24px 140px;
  text-align: center;
  color: var(--white);
}
.demo-hero-inner{ max-width: 780px; margin: 0 auto; }
.demo-hero h1{
  color: var(--white);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin-bottom: 18px;
}
.demo-hero p{
  color: var(--white);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.6;
}

.demo-expect{
  background: var(--section-tint);
  padding: 64px 24px 220px;
}
.demo-expect-grid{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
}
.demo-expect-copy h2{
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: 22px;
}
.demo-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: disc;
  padding-left: 22px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

.demo-card{
  position: absolute;
  top: 240px;
  right: max(24px, calc((100% - var(--max-w)) / 2 + 24px));
  width: 380px;
  max-width: calc(100% - 48px);
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(20,40,80,.2);
  padding: 32px 28px 36px;
  z-index: 5;
}
.demo-card h3{
  color: var(--navy-heading);
  font-size: 1.25rem;
  margin-bottom: 22px;
}
.demo-field{
  display: block;
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1.5px solid #d7dee6;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
}
.demo-field::placeholder{ color: transparent; }
.demo-field:focus{ outline: none; border-color: var(--demo-hero-blue); }
.demo-textarea{ resize: none; min-height: 110px; line-height: 1.6; font-family: var(--font-body); }

/* ===================== FLOATING LABELS ===================== */
.form-field{ position: relative; margin-bottom: 14px; }
.form-field .demo-field{ margin-bottom: 0; }
.form-field label{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: .95rem;
  color: #9aa4b2;
  background: var(--white);
  padding: 0 4px;
  pointer-events: none;
  transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease;
}
.form-field-textarea label{ top: 24px; transform: translateY(0); }
.form-field .demo-field:focus + label,
.form-field .demo-field:not(:placeholder-shown) + label{
  top: 0;
  transform: translateY(-50%) scale(.82);
  color: #6b7684;
}
.form-field .demo-field:focus + label{ color: var(--demo-hero-blue); }

.demo-form-message{
  margin: 14px 0 0;
  font-size: .85rem;
  font-family: var(--font-body);
  min-height: 1.1em;
}
.demo-form-message--success{ color: #1f7a4d; }
.demo-form-message--error{ color: #b3261e; }
.demo-submit:disabled{ opacity: .7; cursor: not-allowed; }
.demo-submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  background: var(--navy-header);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.demo-submit-arrow{ width: 22px; height: 22px; flex-shrink: 0; }

@media (max-width: 980px){
  .demo-expect-grid{ grid-template-columns: 1fr; }
  .demo-card{
    position: static;
    width: 100%;
    max-width: 460px;
    margin: -100px auto 0;
  }
  .demo-hero{ padding-bottom: 64px; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px){
  .modules-wave-text{ white-space: normal; }
}

@media (max-width: 980px){
  .platform-grid{ grid-template-columns: 1fr; }
  .platform-connector{ padding-top: 0; gap: 12px; justify-content: center; }
  .connector-ring{ width: 180px; height: 180px; }
  .ring-graphic{ width: 180px; height: 180px; }
  .ring-logo{ width: 100px; height: 100px; }
  .platform-card{ margin-top: 70px; }
  .overview-diagram{ padding: 40px 0 0; }
  .overview-image-wrap{ max-width: 100%; }
  .ov-title{ font-size: .66rem; width: 20%; } /* +10% (index.html-only), was .6rem */
  .ov-title.col-left{ left: 7%; }
  .ov-title.col-right{ right: 7%; }
  .ov-desc{ display: none; }
  .ov-arrow{ display: none; }
  .feedback-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; text-align: left; }
  .footer-addresses{ grid-template-columns: 1fr; }
  .report-row{ grid-template-columns: 1fr; }
  .report-row.media-wide-right, .report-row.media-wide-left{ grid-template-columns: 1fr; }
  .report-row-copy p{ max-width: 100%; }
  .testing-grid{ grid-template-columns: 1fr; }
  .ws-row{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .ws-arrow{ width: 64px; }
  .ws-arrow-row{ gap: 20px; }
  .ws-right .ws-video{ width: 100%; margin-left: 0; }
  .ws-subhead{ flex-direction: column; text-align: center; gap: 12px; }
  .ws-video-2{ width: 100%; margin-left: 0; margin-right: 0; }
  .ws-subhead-icon{ width: 96px; }
  .ws-subhead-text{ font-size: 1.2rem; }
  .ws-video-2-wrap{ padding-bottom: 56px; }
  .ws-final-row{ grid-template-columns: 1fr; gap: 32px; }
  .ws-final-bottom-row.ws-final-row{ grid-template-columns: 1fr; }
  .ws-final-bell{ width: 40px; top: -10px; right: -8px; }
  .ws-final-spiral-col{ display: none; }
  .ws-final-bottom-row{ margin-top: 32px; }
  .ws-final-heading-row{ grid-template-columns: 1fr; margin-top: 40px; }
  .ws-final-heading-mid{ grid-column: 1; text-align: center; margin-bottom: 16px; }
  .modules-shot-grid{ grid-template-columns: repeat(2, 1fr); }
  .modules-shot-grid.cols-2{ grid-template-columns: 1fr; }
  .modules-hero h1{ white-space: normal; max-width: 600px; }
  .modules-wave{ padding: 56px 20px 70px; }
  .modules-wave .modules-shot-grid.cols-2{ margin-top: 24px; }
  .modules-wave-shots{ gap: 20px; }
  .modules-wave-shots img:nth-child(1),
  .modules-wave-shot-2 img:first-child{ height: 170px; margin-top: 0; }
  .modules-wave-shot-2 .modules-wave-gears-icon{ width: 38px; top: -18px; right: -2px; }
  .modules-wave-shot-2 .modules-wave-dotted-arrow{ width: 80px; }
  .domino-frame-corner{ display: none; }
  .domino-diagram{ grid-template-columns: 1fr; text-align: center; }
  .domino-bubble-cluster,
  .domino-copy,
  .domino-img-2,
  .domino-bubble-bugs,
  .domino-video{ grid-column: auto; grid-row: auto; }
  .domino-bubble-cluster{ order: 1; flex-direction: column; align-items: center; gap: 16px; margin: 0 auto; }
  .domino-bubble-plan{ margin-top: 0; }
  .domino-arrow-1{ display: none; }
  .domino-copy{ order: 2; max-width: 100%; margin: 32px auto 0; }
  .domino-img-2{ order: 3; max-width: 100%; margin: 32px auto 0; }
  .domino-bubble-bugs{ order: 4; margin: 16px auto 0; transform: none; }
  .domino-video{ order: 5; max-width: 100%; margin: 32px auto 0; transform: none; }
  .domino-arrow-2{ display: none; }
  .it-grid{ grid-template-columns: 1fr; row-gap: 40px; }
  .it-media{ max-height: none; width: 100%; }
  .it-media-kanban{ max-width: 100%; }
  .it-cell{ align-items: stretch; }
  .it-cell-below{ align-self: auto; align-items: stretch; }
  .it-cell-below .it-caption{ text-align: left; }
  .rmm-row{ flex-direction: column; gap: 40px; }
  .rmm-media{ width: 100%; }
  .tr-row{ flex-direction: column; gap: 56px; }
  .tr-media-1, .tr-media-2{ width: 100%; max-width: 480px; margin-top: 0; }
  .tr-arrow{ display: none; }
  .sr-media-1, .sr-media-2{ width: 100%; max-width: 480px; }
}

@media (max-width: 860px){
  .main-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-header);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px;
    gap: 14px;
    display: none;
  }
  .main-nav.open{ display: flex; }
  .nav-toggle{ display: flex; }
  .header-actions{ margin-right: 0; }
  .header-actions .hdr-cta{ display: none; }
  .mobile-nav-actions{
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .report-hero .hero-inner{ grid-template-columns: 1fr; }
  .hero-copy p{ margin: 0 auto; }
  .hero-art{ order: -1; max-width: 280px; margin: 0 auto; }

  .nav-dropdown.open::after{ content: none; }

  .nav-dropdown-panel{
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0 0 12px;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .nav-dropdown.open .nav-dropdown-panel{ display: grid; transform: none; }
  .nav-dropdown-panel a{ color: #dce6f0; padding: 9px 0; font-size: 1.05rem; }
  .nav-dropdown-panel a:hover{ background: none; color: var(--white); }
  .nav-overlay{ display: none; }
}

@media (max-width: 600px){
  .module-grid{ grid-template-columns: 1fr; }
  .card-badge{ width: 140px; height: 140px; }
  .platform-card{ padding-top: 90px; }
  .feature-strip{ gap: 22px; }
  .feature-item span{ font-size: .858rem; } /* +10%, was .78rem — pinned back for modules.html below */
  .modules-shot-grid{ grid-template-columns: 1fr; }
  .modules-wave-shots img:nth-child(1),
  .modules-wave-shot-2 img:first-child{ height: 130px; }
  .modules-wave-shot-2 .modules-wave-gears-icon{ width: 29px; top: -14px; right: -2px; }
  .modules-wave-shot-2 .modules-wave-dotted-arrow{ width: 61px; }
}