/* Brand CSS */

/* =========================================================
   Brand UI Styles — Buttons, Links, Forms
   Replaces Elementor Site Settings
   ========================================================= */

/* ---------------------------------------------------------
   Brand tokens
   --------------------------------------------------------- */
:root{
  --font-base: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --brand-accent: #0DEA7E;
  --brand-action: #E55454;
  --brand-action-text: #ffffff;
  
  --dd-dropdown-bg: #F7F9FB; /* client-specific */

  --form-border: #D1D5DB;
  --form-border-width: 1px;
  
  --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  
  /* Hero typography */
  --hero-h2-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.4rem);
}

/* ---------------------------------------------------------
   Text links (exclude buttons + image links)
--------------------------------------------------------- */

/* Content links only */
.elementor-widget-text-editor a,
.entry-content a,
p a {
  color: var(--brand-action);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Hover */
.elementor-widget-text-editor a:hover,
.entry-content a:hover,
p a:hover {
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------
   Headings (H1–H6) — Poppins Bold
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--text-primary);
}

  .hero-accent{
  color: var(--brand-accent);
  }

/* =========================================================
   iPad Landscape / Small Laptop Tuning Pack
========================================================= */

/* ---------- Adjustable tokens (per site) ---------- */
:root{
  --ipad-max-content: 1120px;      /* container max width for ~1024-1279 */
  --ipad-header-minh-top: 130px;   /* header height at top on iPad landscape */
  --ipad-header-minh-scroll: 74px; /* header height when scrolled on iPad landscape */

  --ipad-logo-top: 180px;          /* logo width at top (iPad landscape) */
  --ipad-logo-scroll: 120px;       /* logo width when scrolled (iPad landscape) */

  --ipad-nav-font: 13.5px;         /* nav item font size */
  --ipad-nav-gap: 18px;            /* spacing between menu items */
}

/* =========================================================
   RANGE: iPad landscape + small laptops
   (covers iPad landscape at ~1024px and up to ~1279px)
========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* =========================
     3) Container max-width
     ========================= */

  /* Boxed container inner width (Elementor flex containers) */
  body .e-con-boxed > .e-con-inner{
    max-width: var(--ipad-max-content) !important;
  }

  /* Optional: keep full-width sections from feeling too wide */
  body .elementor-section.elementor-section-boxed > .elementor-container{
    max-width: var(--ipad-max-content) !important;
  }

  /* =========================
     1) Hero typography
     ========================= */

  /* Override hero tokens just for this viewport range */
  :root{
    --hero-h1-size: clamp(55px, 3.4vw, 65px);
    --hero-h2-size: clamp(27px, 2.7vw, 34px);
    --hero-heading-line-height: 1.10;
  }

  /* Hero subhead paragraph (text editor widget) */
  .page-hero .elementor-widget-text-editor p{
    font-size: 1.05rem !important;     /* ~16.8px */
    line-height: 1.55 !important;
    max-width: 60ch;                   /* keeps lines clean */
  }

  /* Hero tagline / small text under CTA (if it’s a text editor) */
  .page-hero .elementor-widget-text-editor p strong,
  .page-hero .elementor-widget-text-editor p em{
    font-size: inherit;
  }

  /* =========================
     2) Header sizing + nav
     ========================= */

  /* Header height at top vs scrolled
     styles.css uses html.not-top to shrink; we override only in this range */
  html:not(.not-top) .elementor-location-header .shrinker{
    min-height: var(--ipad-header-minh-top) !important;
    padding-block: 14px !important;
  }

  html.not-top .elementor-location-header .shrinker{
    min-height: var(--ipad-header-minh-scroll) !important;
    padding-block: 6px !important;
  }

  /* Logo scaling in this range */
  html:not(.not-top) .elementor-location-header .shrinker .shrinking-logo img,
  html:not(.not-top) .elementor-location-header .shrinker .shrinking-logo svg{
    width: var(--ipad-logo-top) !important;
    height: auto !important;
  }

  html.not-top .elementor-location-header .shrinker .shrinking-logo img,
  html.not-top .elementor-location-header .shrinker .shrinking-logo svg{
    width: var(--ipad-logo-scroll) !important;
    height: auto !important;
  }

  /* Nav item sizing */
  .elementor-location-header .e-n-menu .e-n-menu-title-text{
    font-size: var(--ipad-nav-font) !important;
    letter-spacing: 0.02em; /* keeps uppercase readable */
  }

  /* Space between top-level nav items (Elementor N-Menu uses flex) */
  .elementor-location-header .e-n-menu-heading{
    gap: var(--ipad-nav-gap) !important;
  }

  /* Slightly reduce dropdown panel padding if it feels huge on iPad */
  .elementor-location-header .e-n-menu-content .services-dropdown{
    padding: 18px 18px !important;
  }

  /* If your menu title containers are padded heavily, tighten them a touch */
  .elementor-location-header .e-n-menu-title-container{
    padding-inline: 6px !important;
  }
}

/* =========================================================
   RANGE: Tablet portrait (optional small refinement)
========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Override hero tokens for tablet portrait */
  :root{
    --hero-h1-size: clamp(34px, 4.3vw, 44px);
    --hero-heading-line-height: 1.12;
  }

  .page-hero .elementor-widget-text-editor p{
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: 62ch;
  }
}

/* ---------------------------------------------------------
   Buttons (Elementor + native)
   --------------------------------------------------------- */
.elementor a.elementor-button,
.elementor-button,
button,
input[type="submit"],
.wp-element-button {
  background-color: var(--brand-action);
  color: var(--brand-action-text);
  padding: 1em 2em;
  border-radius: 999px; /* keeps your existing pill style */
  border: 2px solid var(--brand-action);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover / focus */
.elementor a.elementor-button:hover,
.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.wp-element-button:hover {
  background-color: transparent;
  color: var(--brand-action);
}

/* ====================
   Main Navigation Menu Dropdown Arrow
==================== */
.e-n-menu-title:has([aria-expanded="true"])::before {
  --dd-bd-width: 15px!important;
  border-bottom: var(--dd-bd-width) solid #F7F9FB; /* COLOR moved later */
  border-left: var(--dd-bd-width) solid transparent;
  border-right: var(--dd-bd-width) solid transparent;
  width: 0;
  height: 0;
  content: "";
  display: block;
  position: absolute;
  bottom: -40%!important;
  left: calc(50% - (var(--dd-bd-width) / 2));
}

.e-n-menu-title-text {
  cursor: pointer !important;
  color: var(--text-primary);
}

#utility-menu a {
  border-bottom: 1px solid transparent;
}

#utility-menu a:hover {
  border-bottom: 1px solid #cccccc; /* COLOR moved later */
}

/* ====================
   Main Navigation Menu Dropdown Styles
==================== */

.services-dropdown a:hover {
  background-color: rgba(229, 84, 84, 0.06);
  padding-left: 4px;
  transition: all 0.15s ease;
}

.services-dropdown a {
  transition: all 0.15s ease;
}

.services-dropdown a:hover {
  padding-left: 4px;
}

.dropdown-group-title {
  font-size: 12px;
  text-transform:uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6b7280;
}

/* ---------------------------------------------------------
   Forms (Elementor Forms + native inputs)
   --------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select,
.elementor-field-textual {
  border-width: var(--form-border-width);
  border-style: solid;
  border-color: var(--form-border);
  border-radius: 10px;
  padding: 0.75em 0.9em;
  font-family: inherit;
  color: inherit;
}

/* Focus state */
input:focus,
textarea:focus,
select:focus,
.elementor-field-textual:focus {
  outline: none;
  border-color: var(--brand-action);
  box-shadow: 0 0 0 2px rgba(229, 84, 84, 0.2);
}


.elementor-widget-text-editor ul,
.elementor-text-editor ul {
 margin-bottom:1.5em;
}

/* Ensure the button is properly styled for relative positioning and overflow */
.elementor-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

/* Style and position the SVG icon off-screen to the right */
.elementor-button-icon svg {
  position: absolute;
  right: -50px; /* Start off-screen */
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.3s ease;
  padding-left: 10px;
  font-size: 1.5em !important;

  /* KEY FIX */
  fill: currentColor;
  stroke: currentColor;
}

/* On hover, slide the SVG into view + inherit border color */
.elementor-button:hover .elementor-button-icon svg {
  right: 20px;
  color: var(--brand-action);
}

/* Text spacing */
.elementor-button-text {
  padding-left: 15px;
}

input::placeholder,
textarea::placeholder {
  color: #1f2937; /* Replace with your desired color */
  opacity: 1;  /* Ensures it's not too transparent */
}

input[type="checkbox"] {
  transform: scale(1.5); /* Adjust the scale as needed */
  margin-right: 8px; /* Optional: adds space between checkbox and label */
}

.ginput_container_checkbox {padding:10px;}

.gchoice {margin-bottom:5px;}

/* Container styling for non-checkbox/radio/3col fields */
.gfield:not(.gfield_contains_checkbox):not(.gfield_contains_radio):not(.gf_list_3col) {
  position: relative;
  margin-bottom: 30px;
}

/* Input and textarea styling (excluding checkboxes, radios, etc.) */
.gfield input[type="text"],
.gfield input[type="email"],
.gfield input[type="url"],
.gfield input[type="tel"],
.gfield input[type="number"],
.gfield input[type="password"],
.gfield textarea {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: transparent;
}

/* Label styling (exclude checkboxes/radios/3col) */
.gfield:not(.gfield_contains_checkbox):not(.gfield_contains_radio):not(.gf_list_3col) .gfield_label {
  position: absolute;
  top: 8px;
  left: 5px;
  font-size: 16px;
  color: #1F2937;
  transition: 0.2s ease all;
  pointer-events: none;
  padding: 5px 10px;
}

/* Active (floating) label state */
.gfield:not(.gfield_contains_checkbox):not(.gfield_contains_radio):not(.gf_list_3col) .gfield_label.active {
  top: -15px;
  left: 5px;
  font-size: 13px;
  color: #1F2937;
  background: white;
}

/* Hide the placeholder text */
.gfield input[type="text"]::placeholder,
.gfield input[type="email"]::placeholder,
.gfield input[type="url"]::placeholder,
.gfield input[type="tel"]::placeholder,
.gfield input[type="number"]::placeholder,
.gfield input[type="password"]::placeholder,
.gfield textarea::placeholder {
  color: transparent;
}

/* ---------------------------------------------------------
   Callout Image Design Elements
   --------------------------------------------------------- */
   
.circle-mask-border-blue {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.circle-mask-border-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 15px solid #6b8cc3; /* dark slate */
  border-radius: 50%;
  transform: translate(10px, 10px); /* offset */
  z-index: -1;
}

.circle-mask-border-green {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.circle-mask-border-green::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 15px solid #7ff0b4; /* bright aqua green */
  border-radius: 50%;
  transform: translate(10px, 10px);
  z-index: -1;
}

/* ---------------------------------------------------------
   Service Block Headline Design Elements
--------------------------------------------------------- */

.service-section h3,
.service-section .elementor-widget-heading h2 {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 26px;
}

.service-section h3::after,
.service-section .elementor-widget-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: rgba(229, 84, 84, 0.5);
}

/* Centered variation */
.service-section.centered h3,
.service-section.centered .elementor-widget-heading h2 {
  text-align: center;
}

.service-section.centered h3::after,
.service-section.centered .elementor-widget-heading h2::after {
  left: 50%;
  transform: translateX(-50%);
}


/* =========================================================
   Modern SaaS Service Card (Base)
========================================================= */

.service-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

  /* Updated: more breathing room by default */
  padding: 40px 32px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Hover Lift */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Make card content behave consistently */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card h3,
.service-card .elementor-heading-title {
  margin-bottom: 12px;
  font-weight: 700;
}

.service-card p {
  margin-bottom: 0;
  color: var(--text-secondary);
}


/* =========================================================
   Icon Badge (requires icon widget class: .service-icon)
========================================================= */

.service-card .service-icon .elementor-icon-wrapper {
  display: inline-flex;
}

.service-card .service-icon .elementor-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #ebf5f3;
  border: 1px solid #ebf5f3;
  margin-bottom: 14px;
}

/* Icon size + color */
.service-card .service-icon .elementor-icon i,
.service-card .service-icon .elementor-icon svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--brand-action);
  fill: currentColor;
}

/* Hover effect */
/* Smooth transition */
.service-card .service-icon .elementor-icon {
  transition: 
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.service-card .service-icon .elementor-icon i,
.service-card .service-icon .elementor-icon svg {
  transition: color 0.25s ease, fill 0.25s ease;
}

/* Coral hover */
.service-card:hover .service-icon .elementor-icon {
  background-color: #FF6B6B;
  border-color: #FF6B6B;
}

.service-card:hover .service-icon .elementor-icon i,
.service-card:hover .service-icon .elementor-icon svg {
  color: #ffffff;
  fill: #ffffff;
}

/* =========================================================
   FORCE hover colors (Elementor icon widget override)
========================================================= */

/* Border + background */
.service-card:hover .service-icon .elementor-icon {
  background-color: #FF6B6B !important;
  border-color: #FF6B6B !important;
}

/* Font Awesome <i> */
.service-card:hover .service-icon .elementor-icon i {
  color: #ffffff !important;
}

/* Elementor SVG icons */
.service-card:hover .service-icon .elementor-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Some SVGs have hard-coded fills on paths */
.service-card:hover .service-icon .elementor-icon svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* =========================================================
   Explore Link (supports either .service-link OR .service-explore a)
========================================================= */

/* Put the "Explore" row at the bottom of the card */
.service-link,
.service-card .service-explore a {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 0 !important;
  color: var(--brand-action) !important;
}

/* Arrow */
.service-link::after,
.service-card .service-explore a::after {
  content: "›";
  transition: transform 0.2s ease;
}

.service-card:hover .service-link::after,
.service-card:hover .service-explore a::after {
  transform: translateX(4px);
}

/* Small hover nudge on the whole link */
.service-link:hover,
.service-card .service-explore a:hover {
  transform: translateX(2px);
}


/* =========================================================
   Grow Grid Spacing + Responsiveness
========================================================= */

.services-grow-grid {
  gap: 28px !important;
}

/* Elementor inner container gap */
.services-grow-grid > .e-con-inner,
.services-grow-grid.e-con > .e-con-inner {
  gap: 28px !important;
}

/* Slightly tighter padding in 4-across Grow cards (optional) */
.services-grow-grid .service-card {
  padding: 38px 30px !important;
}

/* Make the text feel less cramped at 4-across */
.services-grow-grid .service-card p {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Equal heights: stretch children */
.services-grow-grid .e-con-inner {
  align-items: stretch !important;
}

/* Tablet: 2-across */
@media (max-width: 1024px) {
  .services-grow-grid {
    flex-wrap: wrap !important;
  }

  .services-grow-grid .service-card {
    width: calc(50% - 14px) !important;
  }
}

/* Mobile: 1-across + comfortable padding */
@media (max-width: 767px) {
  .services-grow-grid .service-card {
    width: 100% !important;
    padding: 34px 26px !important;
  }
}


/* =========================================================
   Optional: Fade-up entrance animation
   (remove if you don't want animation)
========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .service-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
  }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   FIX: Keep .service-explore pinned to bottom of card
   (Elementor Containers wrap content in .e-con-inner)
========================================================= */

/* Make the card a column */
.service-card {
  display: flex;
  flex-direction: column;
}

/* Make the inner wrapper also a column and fill available height */
.service-card > .e-con-inner,
.service-card .e-con-inner,
.service-card .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Push the Explore block to the bottom */
.service-card .service-explore {
  margin-top: auto !important;
  padding-top: 14px;
}

/* Optional: if your class is on the widget, ensure container behaves */
.service-card .service-explore .elementor-widget-container {
  margin-top: 0; /* keep clean */
}

/* Keep the link styling */
.service-card .service-explore a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 0 !important;
  font-weight: 600;
  text-decoration: none;
}

/* Arrow */
.service-card .service-explore a::after {
  content: "›";
  transition: transform 0.2s ease;
}

.service-card:hover .service-explore a::after {
  transform: translateX(4px);
}

.contact-form-card{
  box-shadow: var(--card-shadow);
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
}

/* =========================================================
   Gravity Forms Brand Updates
========================================================= */

.gform_wrapper.gravity-theme .gform_button{
  display: inline-block;
  background-color: var(--brand-action);
  color: var(--brand-action-text);
  border: none;
  border-radius: 6px;

  padding: 14px 32px;      /* wider horizontal padding */
  min-width: 140px;        /* prevents truncation */
  text-align: center;

  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;

  transition: background-color 0.25s ease, transform 0.1s ease;
}

.gform_wrapper.gravity-theme .gform_button:hover{
  background-color: #cf4a4a;  /* slightly darker coral */
  transform: translateY(-1px);
}

.gform_wrapper.gravity-theme .gform_button:active{
  transform: translateY(0);
}

/* =========================
   Services Bridge (Framework Blocks)
   ========================= */

.services-bridge{
  padding: 80px 0;
}

.services-bridge__inner{
  width: min(1100px, 92%);
  margin: 0 auto;
}

.services-bridge__row{
  display: flex;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.services-bridge__row:first-child{
  border-top: none;
}

.services-bridge__label{
  flex: 0 0 220px!important;
}

.services-bridge__label .elementor-heading-title{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--brand-accent);
}

.services-bridge__copy{
  flex: 1 1 auto;
  max-width: 720px;
}

.services-bridge__copy .elementor-heading-title{
  margin: 0 0 8px 0;
}

.services-bridge__copy p{
  margin: 0;
  line-height: 1.65;
}

/* Optional subtle left accent bar on desktop */
@media (min-width: 1025px){
  .services-bridge__copy{
    border-left: 3px solid rgba(0,0,0,0.06);
    padding-left: 24px;
  }
}

/* Tablet/mobile stacking */
@media (max-width: 1024px){
  .services-bridge__row{
    flex-direction: column;
    gap: 12px;
  }
  .services-bridge__label{
    flex: 0 0 auto;
  }
  .services-bridge__copy{
    max-width: 100%;
    border-left: none;
    padding-left: 0;
  }
}

/* On single Insight posts only,
   change ONLY the top white footer shape to grey */
body.single-post 
.elementor-location-footer 
.elementor-element-fff4cc5 
.elementor-shape-top 
.elementor-shape-fill{
  fill: #f7f9fb !important;
}

/* =========================
   CTA Soft Section (Insights)
   ========================= */

.single-post .cta-soft{
  position: relative;

  /* Align perfectly with article text width */
  max-width: var(--post-max);
  margin: 70px auto 0;

  /* Match spacing rhythm from article card */
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 32px);
  border-radius: 14px;

  /* Softer brand-tinted background */
  background: linear-gradient(
    to bottom,
    rgba(13,234,126,0.06),
    rgba(13,234,126,0.02)
  );

  /* Subtle structure (very light) */
  border: 1px solid rgba(31,41,55,0.05);

  /* Slight surface polish */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* CTA headline */
.single-post .cta-soft h2,
.single-post .cta-soft h3{
  margin: 0 0 10px 0;
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a2238;
}

/* Supporting text */
.single-post .cta-soft p{
  margin: 0 0 18px 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-primary);
  opacity: 0.9;
}

/* Button spacing */
.single-post .cta-soft .elementor-button{
  margin-top: 6px;
}

/* Soften illustration presence */
.single-post .cta-soft img,
.single-post .cta-soft svg{
  opacity: 0.45;
}

/* Improve spacing before related posts */
.single-post .related-posts-wrapper{
  margin-top: 70px;
}

/* Mobile adjustments */
@media (max-width: 767px){

  .single-post .cta-soft{
    margin-top: 50px;
    padding: 22px 18px;
  }

  .single-post .cta-soft::before{
    top: -24px;
  }

}

/* =========================
   Insights: Single Post
   ========================= */

/* Page background */
body.single-post{
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 12%,
    #f7f9fb 28%,
    #f7f9fb 85%,
    #ffffff 100%
  ) !important;
}

/* =========================
   Article Card Wrapper
   ========================= */

.single-post .single-insight{
  --post-max: 720px;      /* text column */
  --feature-max: 1120px;  /* featured image width */
  --feature-radius: 14px;

  background: #fff;
  border: 1px solid rgba(31,41,55,0.06);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.04);
  border-radius: 18px;

  padding-top: clamp(48px, 4vw, 64px);
  padding-bottom: clamp(56px, 5vw, 70px);
  padding-left: clamp(22px, 3vw, 40px);
  padding-right: clamp(22px, 3vw, 40px);

  margin: 60px auto 100px;
  max-width: 1140px;

  overflow: visible !important;
}

/* REMOVE global inner constraint (this was the issue) */
.single-post .single-insight .e-con-inner{
  max-width: none;
}

/* =========================
   Header (Title + Meta)
   ========================= */

.single-post .single-insight .elementor-element-8bdab9a{
  max-width: var(--post-max);
  margin: 0 auto;
  text-align: center;
}

/* Category label */
.single-post .single-insight .post-category-label{
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.72rem;
}

.single-post .single-insight .post-category-label a{
  color: var(--brand-accent) !important;
  text-decoration: none;
  background: rgba(13,234,126,0.10);
  border: 1px solid rgba(13,234,126,0.20);
  padding: 6px 10px;
  border-radius: 999px;
}

/* H1 */
.single-post .single-insight h1{
  font-size: clamp(2.5rem, 3.2vw, 3.4rem);
  margin: 0 0 12px 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1f2a44;
}

/* Meta */
.single-post .single-insight .elementor-post-info{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

/* =========================
   Featured Image (Breakout)
   ========================= */

.single-post .single-insight .elementor-widget-theme-post-featured-image{
  margin: 24px 0 48px 0;
  position: relative;
}

/* Breakout on desktop */
@media (min-width: 768px){
  .single-post .single-insight .elementor-widget-theme-post-featured-image{
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--feature-max), 100vw - 60px);
    max-width: var(--feature-max);
  }
}

.single-post .single-insight .elementor-widget-theme-post-featured-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--feature-radius);
  box-shadow: var(--card-shadow);
}

/* =========================
   Content Width (READABILITY FIX)
   ========================= */

.single-post .single-insight .insight-content{
  max-width: var(--post-max);
  margin: 0 auto;
}

/* =========================
   Body Copy
   ========================= */

.single-post .single-insight .elementor-widget-theme-post-content{
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-primary);
}

/* Lead paragraph */
.single-post .single-insight .elementor-widget-theme-post-content p:first-of-type{
  font-size: 1.14rem;
  line-height: 1.85;
  margin-top: 10px;
}

/* Headings */
.single-insight .elementor-widget-theme-post-content h2{
  position: relative;
  padding-top: 20px;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  color: #1a2238;
  margin-top: 48px;
  margin-bottom: 14px;
}

.single-insight .elementor-widget-theme-post-content h2:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  opacity: .8;
  background: var(--brand-accent);
  border-radius: 3px;
}

/* Paragraphs + lists */
.single-post .single-insight .elementor-widget-theme-post-content p{
  margin: 0 0 24px 0;
}

.single-post .single-insight .elementor-widget-theme-post-content ul,
.single-post .single-insight .elementor-widget-theme-post-content ol{
  margin: 10px 0 18px 1.1em;
}

.single-post .single-insight .elementor-widget-theme-post-content li{
  margin: 0 0 8px 0;
}

/* HR */
.single-post .single-insight .elementor-widget-theme-post-content hr{
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.03),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.03)
  );
  margin: 34px 0;
}

/* Links */
.single-post .single-insight .elementor-widget-theme-post-content a{
  color: var(--brand-action);
}

/* Post pre and code styles */
.single-post .single-insight .elementor-widget-theme-post-content pre {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--brand-action);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 32px 0;
  overflow-x: auto;
}

.single-post .single-insight .elementor-widget-theme-post-content pre code {
  color: #E5E7EB;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  background: transparent;
  padding: 0;
}

.ai-pillars-box {
    background: #F8FAFC;
    border-left: 4px solid var(--brand-accent);
    padding: 30px;
    margin: 40px 0;
    border-radius: 8px;
}

.ai-pillars-box h4 {
    margin-bottom: 20px;
}

.ai-pillars-box .pillar {
    margin-bottom: 16px;
}

.ai-pillars-box .pillar:last-child {
    margin-bottom: 0;
}

/* =========================
   Related Posts Fix
   ========================= */

.related-posts-wrapper:not(:has(.elementor-posts .elementor-post)){
  display: none !important;
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 767px){
  .single-post .single-insight{
    padding: 36px 18px;
    margin: 30px auto 70px;
  }

  .single-post .single-insight .elementor-widget-theme-post-featured-image{
    transform: none;
    left: auto;
    width: 100%;
  }
}