/* infer360 brand overrides — loaded last
   Source of truth: Infer360-brand guideline.pdf
   Display headline: Clash Display. Body: Creato Display. */

/* Clash Display — display / headlines */
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Extralight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display/ClashDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Creato Display — body */
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-ThinItalic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato-display/CreatoDisplay-BlackItalic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* Brand palette — exact from guideline */
  --brand-navy:        #073149;
  --brand-charcoal:    #333134;
  --brand-teal:        #27bfd4;
  --brand-mint:        #c1dfdf;
  --brand-warm:        #ffc469;
  --brand-orange:      #fe6710;
  --brand-red-orange:  #ff340e;
  --brand-sky:         #8cd5ff;
  --brand-lavender:    #b5b5ff;
  --brand-pink:        #e8affe;

  /* Override Solvior theme tokens so brand cascades through main.css */
  --tj-color-theme-dark:    #073149;
  --tj-color-theme-primary: #27bfd4;

  /* Roles */
  --infer-primary: var(--brand-navy);
  --infer-accent:  var(--brand-teal);
  --infer-text:    var(--brand-charcoal);

  /* Typography — brand fonts (loaded via @font-face above) */
  --font-display: 'Clash Display', 'Fraunces', Georgia, serif;
  --font-serif:   'Clash Display', 'Fraunces', Georgia, serif;
  --font-sans:    'Creato Display', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Apply brand fonts globally */
html, body { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6,
.hero-title, .sec-title, .h6-footer-widget-title,
.title, .accordion_title .title {
  font-family: var(--font-serif);
}

/* Sub-titles in brand teal */
.sec-heading .sub-title { color: var(--brand-teal); letter-spacing: 0.18em; }

/* Logo wordmark sizing */
.site-logo .logo img,
.h6-footer-logo .footer-logo img,
.hamburger_logo .mobile_logo img { height: 36px; width: auto; }

/* Section 2 — Diagnose: flask-shape video that bridges into Defend section */
.diagnose-section { overflow: visible !important; position: relative; z-index: 2; padding-bottom: 60px; }
.diagnose-section .diagnose-row { margin-top: 60px; min-height: 380px; position: relative; }
/* Repaint the flask mask in brand navy so it visually merges with Defend bg */
.diagnose-section .h6-about-video .about-shape-1 {
  background: var(--brand-navy) !important;
  bottom: -180px;          /* extend further so the stem reaches the Defend section */
  z-index: 3;
  max-width: 360px;        /* slightly larger circle */
  height: 410px;
}

/* Section 2 — Diagnose accordion: scale up Analyse / Identify / Assess */
.diagnose-section .h6-insight_accordion { max-width: 760px; margin-left: auto; }
.diagnose-section .h6-insight_accordion .accordion_item {
  padding: 26px 32px;
  border-bottom: 1px solid #e5e9ec;
}
.diagnose-section .h6-insight_accordion .accordion_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}
.diagnose-section .h6-insight_accordion .accordion_title .subtitle {
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--brand-charcoal);
  opacity: 0.55;
}
.diagnose-section .h6-insight_accordion .accordion_title .title {
  font: 600 26px/1.3 var(--font-serif);
  color: var(--brand-charcoal);
}
.diagnose-section .h6-insight_accordion .accordion_title:not(.collapsed) .subtitle { color: var(--brand-teal); opacity: 1; }
.diagnose-section .h6-insight_accordion .accordion_desc .accordion-body {
  padding: 14px 0 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-charcoal);
  opacity: 0.85;
}

/* Section 3 — Defend: dark navy backdrop, no tiled badge */
.defend-section.project-section-three {
  background-color: var(--brand-navy);
  background-image: none;
  color: #fff;
  position: relative;
  z-index: 1;
  padding-top: 180px;       /* leave room for the diagnose flask stem */
  padding-bottom: 120px;
}
.defend-section .sec-title { color: #fff; }
.defend-section .sec-heading p,
.defend-section .sec-desc p { color: rgba(255,255,255,0.8); }
.defend-section .sec-heading .sec-desc { margin-top: 22px; }
/* Center the project carousel horizontally so the active card sits in the middle
   of the visible area regardless of which card is active. */
.defend-section .project-wrapper-two {
  max-width: 1180px;
  margin: 60px auto 0;
  padding: 0 28px;
  justify-content: center;     /* keep group centered so leftover space splits evenly */
}
.defend-section .project-wrapper-two ~ * { margin-top: 48px; }

/* Defend collapsed strips: keep Solvior default widths (120/90/80) so
   the active card still expands to 735px. Only re-position label + arrow. */

/* Vertical label: native vertical-rl (no rotate transform). Text column is just
   font-size wide so it cleanly fits the 120px strip. Anchored low and centered. */
.defend-section .project-style-3:not(.active) .project-thumb .project-default-content .title {
  position: absolute !important;
  top: auto !important;
  bottom: 60px !important;            /* shift label up so it does not clip at strip edge */
  inset-inline-start: 50% !important;
  transform: translateX(-50%) !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font: 700 22px/1 var(--font-serif) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: #fff !important;
  width: auto !important;
}
/* Move the ↗ arrow inside the strip, slightly larger, never cuts */
.defend-section .project-style-3:not(.active) .project-thumb .project-default-content span {
  top: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%) rotate(-45deg);
  width: 52px;
  height: 52px;
  font-size: 22px;
}

/* Section 4 — Vertically Integrated TP Solutions */
.vti-section .sec-heading .sub-title { color: var(--brand-teal); }
.vti-section.h6-project-section { background-color: #f6f8fa; }

/* Section 5 — Framework360 Walk-up panels */
.framework360-section { background: #eef2f4; }
.framework360-section .sec-title { color: var(--brand-navy); }
.framework360-section .walkup-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 22px 0 32px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  border: 1px solid #d8dde2;
}
.framework360-section .walkup-tab {
  border: 0;
  background: transparent;
  color: var(--brand-charcoal);
  padding: 10px 20px;
  border-radius: 999px;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  transition: all 0.25s ease;
}
.framework360-section .walkup-tab.active {
  background: var(--brand-teal);
  color: #fff;
}
.framework360-section .walkup-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.framework360-section .walkup-item {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8dde2;
  min-height: 72px;
  cursor: pointer;
  transition: min-height 0.45s ease, background-color 0.35s ease;
}
.framework360-section .walkup-item .walkup-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}
.framework360-section .walkup-item .walkup-body {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 64px 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  width: 100%;
  color: var(--brand-charcoal);
  transition: color 0.35s ease;
}
.framework360-section .walkup-item .walkup-num { font: 600 13px/1 var(--font-sans); opacity: 0.6; }
.framework360-section .walkup-item .walkup-title { font: 600 22px/1.2 var(--font-serif); margin: 0; }
.framework360-section .walkup-item .walkup-desc { font-size: 14px; line-height: 1.5; }
.framework360-section .walkup-item.active {
  min-height: 220px;
  border-color: transparent;
}
.framework360-section .walkup-item.active::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,49,73,0.85) 0%, rgba(7,49,73,0.45) 60%, rgba(7,49,73,0.15) 100%);
  z-index: 1;
}
.framework360-section .walkup-item.active .walkup-bg { opacity: 1; }
.framework360-section .walkup-item.active .walkup-body,
.framework360-section .walkup-item.active .walkup-num,
.framework360-section .walkup-item.active .walkup-title { color: #fff; }
.framework360-section .walkup-item.active .walkup-num { opacity: 1; }
.framework360-section .walkup-item.active .walkup-desc { color: rgba(255,255,255,0.9); }

/* Section 6 — Don't Just Automate—Transform */
.dont-just-automate-section .sec-eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-teal);
  margin-bottom: 12px;
}

/* Hero copy width */
.h6-hero-content .desc p { max-width: 540px; }

/* Section 7 — Footer: re-tune metrics for Clash Display + Creato Display */
.h6-footer-widget-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.h6-footer-widget-title span { color: var(--brand-teal); }
.contact-form-one .title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.h6-footer .footer-contact-infos .infos-item span,
.h6-footer .footer-contact-infos .infos-item p,
.h6-footer .footer-contact-infos .infos-item a,
.h6-footer-menu ul li a,
.h6-footer .copyright-content-area,
.h6-footer .copyright-text p,
.h6-footer .copyright-menu ul li a {
  font-family: var(--font-sans);
}
.h6-footer .contact-form-one .form-input input,
.h6-footer .contact-form-one .form-input textarea,
.h6-footer .contact-form-one .nice-select,
.h6-footer .contact-form-one .nice-select .list,
.h6-footer .contact-form-one .nice-select .option {
  font-family: var(--font-sans);
}
.h6-footer .tj-submit-btn,
.h6-footer .btn_inner .btn_text span {
  font-family: var(--font-sans);
}

/* Footer menu: wrap-safe — drop pipe separators, use gap, right-align */
.h6-footer .h6-footer-menu ul {
  justify-content: flex-end;
  column-gap: 36px;
  row-gap: 12px;
  flex-wrap: wrap;
}
.h6-footer .h6-footer-menu ul li {
  padding: 0 !important;
}
.h6-footer .h6-footer-menu ul li:not(:first-child)::before {
  display: none !important;
}
@media (max-width: 991px) {
  .h6-footer .h6-footer-menu ul { justify-content: center; column-gap: 28px; }
}