/*
Theme Name: Publicity Child
Theme URI: https://www.publicity.com/
Template: generatepress
Author: Jason Kocina
Author URI: https://www.publicity.com/
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.0.1747662361
Updated: 2025-05-19 13:46:01

*/


/* Styles */
.subheadline { 
	font-weight: 700; 
	color:#4d5d80; 
	font-size: 1.5rem;
	margin-bottom:1.5rem;
}

.background-color-element { 
	background-color: var(--base-2); 
}
.card__content { 
	margin: 2.5rem;
}
.gbp-card-custom { 
	align-items: flex-start; 
	background-image: linear-gradient(180deg, var(--base-3) 80%, rgba(255, 255, 255, 0)); 
	border-bottom-left-radius: .25rem; 
	border-bottom-right-radius: .25rem; 
	border-top-left-radius: .25rem; 
	border-top-right-radius: .25rem; 
	box-shadow: 0px 0px 30px -10px rgba(77, 93, 128, 0.1); height: 100%;
}
.pagination.pagination--blog{
	margin: 30px auto; 
	text-align: center; 
}
.testimonial-heading { 
	align-items: center; 
	display: flex; 
	flex-direction: column; 
	text-align: center; 
	margin-bottom:4rem;
}
.testimonial-text span.gb-shape svg {     
	width: 2.5rem; 
	height: 2.5rem; 
	fill: currentColor; 
	color: var(--accent); 
}
p.testimonial-text{    
	align-items: flex-start;
    column-gap: 0.5em;
    display: flex;
    flex-direction: column;
    margin-top: -4rem;
    row-gap: .75rem;
}

/* Layout */
.section--tint { background:#f6f9fc; padding:3rem 1rem; border-radius:4px; }
.services-top-section{ width:calc(100vw - 64px); }

/* Hero (two-column, text left, image right) */
.industry-hero { padding-top:1rem; }
.industry-hero__inner {
  display:grid; gap:3rem; align-items:center;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
}
.industry-hero__image img { width:100%; height:auto; border-radius:4px; box-shadow:0 10px 24px rgba(0,0,0,.08); }

/* Trust logos (row under hero) */
.trust-logos { display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-top:1.25rem; }
.trust-logos img { height:38px; filter:grayscale(100%); opacity:.85; }

/* Main content: allow “Our Approach” image to float like reference */
.content-copy img.alignright { float:right; margin:0 0 1rem 1.5rem; max-width:45%; border-radius:4px; }
.content-copy img.alignleft  { float:left;  margin:0 1.5rem 1rem 0; max-width:45%; border-radius:4px; }

/* Cards (blog/cases) + CTA */
.card-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.card { background:#fff; border:1px solid #eee; border-radius:4px; overflow:hidden; }
.industry-cta { background:#f7fafc; border-radius:4px; text-align:center; }
.industry-cta__inner { padding:2rem; }
.button--primary { display:inline-block; padding:.75rem 1.25rem; border-radius:2px; background:#111; color:#fff; text-decoration:none; }

/* Testimonials grid */
.testimonial-grid {     display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 80px;
    row-gap: 80px; }
.testimonial { background:#fff; border:1px solid #eee; border-radius:4px; padding:1rem 1.25rem; }
.testimonial__logo { margin-top:.5rem; height:28px; filter:grayscale(100%); opacity:.85; }

/* Gravity Forms Styles */
.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, 
.gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover{
	background-color:
#58b6c9!important;
}

/* Mobile */
@media (max-width: 900px){
  .industry-hero__inner { grid-template-columns:1fr; }
  .content-copy img.alignleft, .content-copy img.alignright { float:none; max-width:100%; margin:1rem 0; }
}

.testimonial { background:#fff; border:1px solid #eee; border-radius:4px; padding:1rem 1.25rem; }
.testimonial__quote { font-size:1rem; line-height:1.6; }
.testimonial__by { margin-top:.75rem; font-weight:600; opacity:.85; }
.testimonial__logo { margin-top:.5rem; height:28px; filter: grayscale(100%); opacity:.85; }

/* Container + spacing */
.industry-faq h2 { text-align:center; margin-bottom: 1.5rem; }

/* Items */
.faq-item { background:#f7fbff; border:1px solid #e9eef5; border-radius:4px; margin:0 0 14px; overflow:hidden; }

/* Question row */
.faq-q {
  width:100%;
display:flex; 
	align-items:center; 
	justify-content:space-between;
  padding:1.5rem 2rem; 
	background-color:var(--base-2); 
	border:0; cursor:pointer; text-align:left;
	font-size:1.05rem;
	color:#000000;
	margin-bottom:5px;
}
.faq-q span.faq-q__text {
  font-weight: 700;
}

.faq-q:focus-visible,
.faq-q:focus,
.faq-q:active {
  background-color: var(--base-2);
  color: #000;
}

/* Default hover behavior */
.faq-q:hover {
  background-color: #fff;
  color: #000;
}

/* Override hover when active */
.faq-q.active:hover {
  background-color: var(--base-2); /* or inherit / transparent */
  color: #000; /* Optional: keep the color consistent */
}


/* Answer panel (no-JS default = visible; with JS we collapse via .js on <html>) */
.faq-a { padding:16px 20px 20px; }

/* Collapsed state when JS is enabled */
.js .faq-a { max-height:0; overflow:hidden; padding:0 20px; transition:max-height .25s ease; }
.js .faq-item--open .faq-a { max-height:1000px; padding:16px 20px 20px; }

/* Icon */
.faq-q__icon { font-size:1.25rem; line-height:1; transition:transform .2s ease; }
.js .faq-item--open .faq-q__icon { transform: rotate(45deg); } /* turns + into × (close) */

/* brand chip colors */
:root{
  --icon-1:#f05126;  /* orange */
  --icon-2:#f7e009;  /* yellow */
  --icon-3:#4fc4ca;  /* teal */
  --icon-4:#92c848;  /* green */
}

/* base chip styles (keep yours if you already have them) */
.service-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.service-chip{
  --chip-color: var(--icon-1);
  --chip-ink: #fff;                 /* text/icon color on hover */
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border:1px solid #e5e8ee; border-radius:2px;
  background:#fff; color:inherit; text-decoration:none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service-chip i{ width:1.1em; text-align:center; color:var(--chip-color); transition: color .18s ease, transform .18s ease; }

/* rotate colors 1→4, then repeat */
.service-chips .service-chip:nth-child(4n+1){ --chip-color:var(--icon-1); --chip-ink:#fff; }
.service-chips .service-chip:nth-child(4n+2){ --chip-color:var(--icon-2); --chip-ink:#111; } /* better contrast on yellow */
.service-chips .service-chip:nth-child(4n+3){ --chip-color:var(--icon-3); --chip-ink:#fff; }
.service-chips .service-chip:nth-child(4n+4){ --chip-color:var(--icon-4); --chip-ink:#fff; }

/* hover + focus-visible: flip to filled chip */
.service-chip:hover,
.service-chip:focus-visible{
  background:var(--chip-color);
  color:var(--chip-ink);
  border-color:var(--chip-color);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  outline: none;                  /* we’ll use a color ring instead */
}
.service-chip:focus-visible{ box-shadow:0 0 0 3px color-mix(in oklab, var(--chip-color) 30%, white); }
.service-chip:hover i,
.service-chip:focus-visible i{ color:var(--chip-ink); transform: translateY(-1px); }

.hero-cta{ margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.button{ display:inline-block; padding:.75rem 1.1rem; border-radius:2px; text-decoration:none; }
.button--primary{ background:#111; color:#fff; }
.button--primary:hover{ background:#000; color:#fff; }
.button--secondary{ background:#fff; color:#111; border:1px solid #e5e8ee; }
.button--secondary:hover{ background:#f7f7f9; border-color:#cfd6e2; }
.trust-logos { margin-top: 50px; }

/* More space between text and image on desktop */
@media (min-width: 1024px){

  /* HERO */
  .industry-header .industry-hero__inner{
    display: grid;                                 /* safe even if it was flex */
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    column-gap: 6rem !important;                   /* increase spacing */
    align-items: center;
  }

  /* SPLIT SECTIONS (We Understand / How We Help / What You Can Expect) */
 .industry-slab.slab--split .slab__inner {
    display: grid; /* Use grid for more reliable columns */
    grid-template-columns: 1fr 1fr; /* Set columns to equal width */
    gap: 5.5rem !important;
    align-items: center; /* Vertically align the content */
}
  /* If any copy has floated images, give them more breathing room */
  .content-copy img.alignleft{  margin-right: 2.5rem; }
  .content-copy img.alignright{ margin-left:  2.5rem; }
}

/* Optional utility: add "wide-gap" to any section to force extra spacing */
@media (min-width:1024px){
  .wide-gap .industry-hero__inner,
  .wide-gap .slab__inner{ column-gap: 7rem !important; gap: 7rem !important; }
}

.load-more-wrap{ text-align:center; margin-top:1rem; }
.js-load-more.is-disabled{ opacity:.6; cursor:default; }
@media (prefers-reduced-motion:no-preference){
  .card-grid .mra-slide-in{ opacity:0; transform:translateY(12px); }
}

:root{
  --icon-1:#f05126;  /* orange */
  --icon-2:#f7e009;  /* yellow */
  --icon-3:#4fc4ca;  /* teal */
  --icon-4:#92c848;  /* green */
}

/* Grid */
.case-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(12, 1fr);
}

/* Tile */
.case-tile{
  --accent: var(--icon-1);
  position:relative; display:block; overflow:hidden;
  border-radius:4px; min-height:240px; background:#0f172a; /* fallback */
  text-decoration:none; color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.case-tile:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }

.case-tile__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.02); transition: transform .35s ease;
}
.case-tile:hover .case-tile__bg{ transform: scale(1.06); }

/* Gradient overlay: dark-to-bottom + angled brand tint */
.case-tile__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,16,28,.0) 0%, rgba(10,16,28,.55) 68%, rgba(10,16,28,.75) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 36%, transparent) 0%, transparent 55%);
  mix-blend-mode: multiply;
}

.case-tile__content{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.case-tile__title{ font-weight:700; line-height:1.1; font-size:1.15rem; }
.case-tile__cta{ opacity:.95; font-weight:600; }

.case-tile__logo{
  position:absolute; right:1rem; top:1rem; height:34px; width:auto;
  background:#fff; padding:.25rem .4rem; border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* Featured tile spans 2 rows / half width on desktop */
.case-tile--featured{ grid-column: span 12; min-height:380px; }
@media (min-width: 1024px){
  .case-tile--featured{ grid-column: span 6; grid-row: span 2; min-height:460px; }
  .case-grid .case-tile:not(.case-tile--featured){ grid-column: span 3; min-height:240px; }
}

/* Rotate brand tint across tiles */
.case-grid .case-tile:nth-child(4n+1){ --accent:var(--icon-1); }
.case-grid .case-tile:nth-child(4n+2){ --accent:var(--icon-2); }
.case-grid .case-tile:nth-child(4n+3){ --accent:var(--icon-3); }
.case-grid .case-tile:nth-child(4n+4){ --accent:var(--icon-4); }

/* Section actions */
.case-grid__actions{ text-align:center; margin-top:1rem; }
/* Brand colors (already used elsewhere) */
:root{
  --brand-1:#f05126;  /* orange */
  --brand-2:#f7e009;  /* yellow */
  --brand-3:#4fc4ca;  /* teal */
  --brand-4:#92c848;  /* green */
}

/* Map classes to variables (also set an rgba fallback for older browsers) */
.case-tile--a1{ --accent:var(--brand-1); --accent-alpha:rgba(240,81,38,.35); }
.case-tile--a2{ --accent:var(--brand-2); --accent-alpha:rgba(247,224,9,.35); }
.case-tile--a3{ --accent:var(--brand-3); --accent-alpha:rgba(79,196,202,.35); }
.case-tile--a4{ --accent:var(--brand-4); --accent-alpha:rgba(146,200,72,.35); }

/* Two-layer overlay: dark gradient for legibility + angled brand tint */
.case-tile__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.55) 68%, rgba(12,18,28,.78) 100%),
    /* modern browsers: brand tint */
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 58%);
  mix-blend-mode:multiply;
}

/* Fallback if color-mix isn't supported */
@supports not (color-mix(in oklab, white 50%, black 50%)) {
  .case-tile__overlay{
    background:
      linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.55) 68%, rgba(12,18,28,.78) 100%),
      linear-gradient(135deg, var(--accent-alpha) 0%, transparent 58%);
  }
}

/* Slightly lighter tint on the big featured tile so the image still shines */
.case-tile--featured .case-tile__overlay{
  background:
    linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.45) 64%, rgba(12,18,28,.72) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 28%, transparent) 0%, transparent 58%);
}
@supports not (color-mix(in oklab, white 50%, black 50%)) {
  .case-tile--featured .case-tile__overlay{
    background:
      linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.45) 64%, rgba(12,18,28,.72) 100%),
      linear-gradient(135deg, color(from var(--accent-alpha) srgb r g b / .25) 0%, transparent 58%);
  }
}
/* ===== Case tiles – reliable dark/tint overlay + explicit stacking ===== */
.case-tile{ position:relative; }
.case-tile__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.case-tile__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Dark legibility gradient + angled brand tint (no blend-mode) */
  background:
    linear-gradient(180deg, rgba(10,16,28,0) 0%, rgba(10,16,28,.58) 62%, rgba(10,16,28,.78) 100%),
    linear-gradient(135deg, var(--accent-alpha, rgba(240,81,38,.30)) 0%, transparent 55%);
}
.case-tile__content,
.case-tile__logo{ position:absolute; z-index:2; }

/* Featured tile: a touch lighter so the hero image breathes */
.case-tile--featured .case-tile__overlay{
  background:
    linear-gradient(180deg, rgba(10,16,28,0) 0%, rgba(10,16,28,.46) 60%, rgba(10,16,28,.70) 100%),
    linear-gradient(135deg, var(--accent-alpha, rgba(240,81,38,.22)) 0%, transparent 55%);
}

/* Rotate brand tint across tiles (color + matching alpha) */
.case-grid .case-tile:nth-child(4n+1){ --accent:#f05126; --accent-alpha:rgba(240,81,38,.32); }
.case-grid .case-tile:nth-child(4n+2){ --accent:#f7e009; --accent-alpha:rgba(247,224,9,.28); }  /* slightly lower for contrast */
.case-grid .case-tile:nth-child(4n+3){ --accent:#4fc4ca; --accent-alpha:rgba(79,196,202,.30); }
.case-grid .case-tile:nth-child(4n+4){ --accent:#92c848; --accent-alpha:rgba(146,200,72,.30); }



.industry-engagements .engage__inner{
  position:relative; display:grid; gap:1rem;
  grid-template-columns: 320px 1fr;
  align-items:start;
	margin-bottom: 125px;
}
.engage__intro h3{ font-size:1.25rem; margin:0 0 .5rem; font-weight:800; }
.engage__intro p{ margin:.25rem 0 1rem; opacity:.9; }
.engage__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(300px, 1fr);
  gap:30px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
}
.engage-card{
  scroll-snap-align:start; background:#fff; border:1px solid #e8ecf2; border-radius:4px;
  padding:2.5rem; min-height: 220px; display:flex; flex-direction:column; gap:.5rem;
}
.engage-card__icon i{ font-size:1.4rem; }
.engage-card__title{ margin:.25rem 0 0; font-weight:700; }
.engage__intro h2 {font-size: 3rem;}
.engage-card__price{ font-weight:700; opacity:.9; }
.engage-card__excerpt{ flex:1; opacity:.95; }
.engage-card__btn{ align-self:flex-start; text-decoration:none; font-weight:600; border:1px solid #e5e8ee; padding:.4rem .7rem; border-radius:2px; }
.engage__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:999px; border:1px solid #e5e8ee; background:#fff;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.engage__nav--prev{ left:calc(320px + .25rem); }
.engage__nav--next{ right:.25rem; }
aside.engage__intro {
    padding-right: 16%;
}
@media (max-width: 900px){
  .industry-engagements .engage__inner{ grid-template-columns: 1fr; }
  .engage__nav--prev{ left:.25rem; }
}

/* ===== Engagement cards: brand rotation + contrast ===== */
:root{
  --brand-1:#f05126;  /* orange */
  --brand-2:#f7e009;  /* yellow */
  --brand-3:#4fc4ca;  /* teal */
  --brand-4:#92c848;  /* green */
}

/* Base card uses variables; nth-child sets them below */
.engage-card{
  --card-bg: #fff;
  --card-ink: #111;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.engage-card__title,
.engage-card__price,
.engage-card__excerpt { color: var(--card-ink); }
.engage-card__icon i{ color: var(--card-ink); opacity: .95; }

/* Rotate colors 1→4, repeat; ensure contrast on yellow */
.engage__rail .engage-card:nth-child(4n+1){ --card-bg:var(--brand-1); --card-ink:#fff; }   /* orange */
.engage__rail .engage-card:nth-child(4n+2){ --card-bg:var(--brand-2); --card-ink:#111; }  /* yellow = dark text */
.engage__rail .engage-card:nth-child(4n+3){ --card-bg:var(--brand-3); --card-ink:#fff; }  /* teal */
.engage__rail .engage-card:nth-child(4n+4){ --card-bg:var(--brand-4); --card-ink:#fff; }  /* green */

/* ===== Learn More button: wider padding, no underline on hover ===== */
.engage-card__btn{
  display:inline-block;
  padding: .55rem 1.1rem;      /* wider LR padding */
  border-radius: 2px;
  text-decoration: none;       /* no underline by default */
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.12);
  color: var(--card-ink);
}

/* Adjust border/background for dark-on-light (yellow) vs light-on-dark */
.engage__rail .engage-card:nth-child(4n+2) .engage-card__btn{ /* yellow bg */
  border-color: rgba(0,0,0,.25);
  background: rgba(0,0,0,.06);
}
.engage__rail .engage-card:not(:nth-child(4n+2)) .engage-card__btn{ /* colored bgs */
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  color:#fff;
}

/* Keep it clean on hover/focus (no underline) */
.engage-card__btn:hover,
.engage-card__btn:focus{
  text-decoration: none !important;   /* prevent theme underline */
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Optional: subtle focus ring for accessibility */
.engage-card__btn:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--card-ink) 30%, white);
  outline-offset: 2px;
}

/* Make the whole card a link; keep existing color rotation vars */
a.engage-card{ text-decoration:none; }

/* Card chrome & hover */
.engage-card{
  --card-bg:#fff; --card-ink:#111;
  background:var(--card-bg); color:var(--card-ink);
  border:0; border-radius:4px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  padding:2.5rem; min-height:220px; display:flex; flex-direction:column; gap:.5rem;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor:pointer;
}
.engage-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

/* Rotate branded backgrounds (white text on color; black on yellow) */
.engage__rail .engage-card:nth-child(4n+1){ --card-bg:#f05126; --card-ink:#fff; } /* orange */
.engage__rail .engage-card:nth-child(4n+2){ --card-bg:#f7e009; --card-ink:#111; } /* yellow */
.engage__rail .engage-card:nth-child(4n+3){ --card-bg:#4fc4ca; --card-ink:#fff; } /* teal */
.engage__rail .engage-card:nth-child(4n+4){ --card-bg:#92c848; --card-ink:#fff; } /* green */

.engage-card__title,.engage-card__price,.engage-card__excerpt,
.engage-card__icon i{ color:var(--card-ink); }

/* White button chip, no underline */
.engage-card__btn{
  align-self:flex-start; display:inline-block;
  padding:.6rem 1.15rem; border-radius:999px;
  background:#fff; color:#111; border:0; font-weight:700;
  text-decoration:none;
}
.engage-card:hover .engage-card__btn{ filter:brightness(1.02); }

/* Slider polish: slim scrollbar + edge fade; remove arrow buttons */
.engage__nav{ display:none !important; }

.engage__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr);
  gap:15px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:0 0 .5rem;
}

/* WebKit scrollbar */
.engage__rail::-webkit-scrollbar{ height:8px; }
.engage__rail::-webkit-scrollbar-track{ background:transparent; }
.engage__rail::-webkit-scrollbar-thumb{ background:#cfd6e2; border-radius:999px; }
.engage__rail:hover::-webkit-scrollbar-thumb{ background:#aab3c2; }

/* Firefox */
.engage__rail{ scrollbar-color:#cfd6e2 transparent; scrollbar-width:thin; }

.services-slider-section { margin-bottom: 125px; }

* extra breathing room around the slider */
.industry-engagements { margin-block: 1.25rem 1.5rem; }
.industry-engagements .engage__inner { row-gap: 1.25rem; }

/* rail spacing + friendlier snapping */
.engage__rail{
  padding: .25rem 8px 1rem;            /* top/left-right/bottom */
  gap: 20px;                            /* space between cards */
  scroll-snap-type: x proximity;        /* less “sticky” than mandatory */
  -webkit-overflow-scrolling: touch;    /* smooth on iOS */
}

/* make the scrollbar a clear handle to grab */
.engage__rail::-webkit-scrollbar{ height: 14px; }
.engage__rail::-webkit-scrollbar-track{
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}
.engage__rail::-webkit-scrollbar-thumb{
  background: #7c8aa0;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55); /* pill look */
}
.engage__rail:hover::-webkit-scrollbar-thumb{ background:#6a768e; }
/* Firefox */
.engage__rail{ scrollbar-width: thin; scrollbar-color:#7c8aa0 rgba(0,0,0,.08); }

/* cards still snap nicely */
.engage-card{ scroll-snap-align: start; }

/* tiny drag hint under the rail */
.engage__hint{
  font-size: .9rem; color:#6b7280;
  display:flex; align-items:center; gap:.35rem;
  user-select:none;
  transition: opacity .2s ease, transform .2s ease;
}
.engage__hint::before{ content: '↔'; font-size: 1.05rem; line-height: 1; }
.engage__hint.is-hidden{ opacity:0; transform: translateY(-4px); pointer-events:none; }

/* ===== Featured Case Study (industry) ===== */
.cs-featured{
  background: var(--base-2);
  padding: 3rem 1rem;
  border-radius: 4px;
  position: relative;
}
.cs-track{ overflow: hidden; }
.cs-slide{ width:100%; }
.cs-grid{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns: 1.1fr 1fr;
}
.cs-image img{ width:100%; height:auto; display:block; border-radius:8px; }
.cs-tag{ font-weight:700; color:#4d5d80; margin:0 0 .5rem; }
.cs-title{ font-size:clamp(1.8rem, 4vw, 2.4rem); margin:.25rem 0 1rem; line-height:1.1; }
.cs-excerpt{ opacity:.95; margin:0 0 1rem; }

/* Slider controls (hidden when only one) */
.cs-nav{
  position:absolute; top:50%;
  width:40px; height:40px; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer; z-index:5;
}
.cs-nav--prev{
  left: -55px; /* MODIFIED: Positioned outside the container */
  transform: translateY(-50%);
}
.cs-nav--next{
  right: -55px; /* MODIFIED: Positioned outside the container */
  transform: translateY(-50%);
}

@media (max-width:900px){
  .cs-grid{ grid-template-columns:1fr; }
  .cs-nav{ display:none; }
}


/* ===== Styles Moved from PHP Template & New Additions (2025-08-20) ===== */
.industry-header { padding:5rem 2rem 8rem 2rem; }
.industry-hero__image img { width:100%; height:auto; display:block; border-radius:4px; }
.industry-um-element{ background-color: var(--base-2); margin-left: auto; margin-right: auto; max-width: 1480px; overflow-x: hidden; overflow-y: hidden; position: relative; width: calc(100vw - 64px); padding: 8rem 2rem; }
.industry-header .trust-logos { justify-content:center; margin-top:4rem; gap:1rem; } /* Scoped to this template */
.faq-element{ align-items: center; flex-direction: column; }

/* Slab sections (split) */
.industry-slab .slab__inner { display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem; align-items:center; }
.slab--img-right .slab__inner { grid-template-columns: 1fr 1.1fr; }
.slab__image img { width:100%; height:auto; display:block; border-radius:4px; }
.slab__text h2 { margin:0 0 .5rem; }
.slab__text .wysiwyg p { margin:.6rem 0; }

/* Services slider (Legacy) */
.industry-services .services__title { margin-bottom:.75rem; }
.services__slider { display:flex; gap:1rem; overflow:hidden; scroll-behavior:smooth; }
.service-card { flex: 0 0 220px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:1rem; border:1px solid #eee; border-radius:12px; background:#fff; }
.service-card__icon img { width:72px; height:72px; object-fit:contain; }
.service-card__icon--placeholder { width:72px; height:72px; background:#f3f3f3; border-radius:4px; }
.service-card__name { margin-top:.5rem; font-weight:600; }
.services__nav { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
.services__prev,.services__next { border:1px solid #ddd; background:#fff; border-radius:4px; padding:.4rem .8rem; cursor:pointer; }

/* Responsive for slabs */
@media (max-width: 900px){
  .industry-slab .slab__inner,
  .slab--img-right .slab__inner { grid-template-columns: 1fr; }
}

/* === Featured Case Study Tweaks === */
.cs-grid {
  gap: 3.5rem; /* Increased space between image and content */
}

.cs-excerpt {
  margin-bottom: 1.75rem; /* Increased space above the button */
}

.cs-nav {
  color: #fff;
  border: none;
  font-size: 1.2rem;
  transition: background-color .2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs-nav:hover {
  background-color: #58b6c9;
  color: #fff;
}

/* Nudge icons for perfect visual centering */
.cs-nav--next i {
  transform: translateX(1px);
}
.cs-nav--prev i {
  transform: translateX(-1px);
}
/*
==========================================================================
    SERVICE TAXONOMY TEMPLATE STYLES
==========================================================================
*/

/* --- Hero Section --- */
.service-hero {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 2rem;
    align-items: center;
    padding: 2rem 0 4rem;
}

@media only screen and (min-width: 768px) {
    .service-hero {
        grid-template-columns: 1.5fr 1fr; /* Text left, icon right */
        gap: 4rem;
    }
}

.service-hero h1 {
    margin-bottom: 1.5rem;
}

.service-hero__icon-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-hero__icon-box {
    width: 150px;
    height: 150px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #fff;
}

.service-hero__icon-box i {
    font-size: 5rem;
    opacity: 0.9;
}

/* On yellow background, use dark icon for contrast */
.service-hero__icon-box[style*="#f7e009"] {
    color: #111;
}


/* --- Single Testimonial Block --- */
.single-testimonial-section {
    padding: 4rem 0;
    border-top: 1px solid #e5e8ee;
    border-bottom: 1px solid #e5e8ee;
    margin-bottom: 3rem;
}

.single-testimonial-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 768px) {
    .single-testimonial-block {
        padding-left: 5rem; /* Space for the quote mark */
    }
}

.stb__quote-mark {
    font-size: 8rem;
    line-height: 0.5;
    color: #4fc4ca; /* Teal color from screenshot */
    font-weight: 700;
    position: absolute;
    top: -1rem;
    left: -1.5rem;
    opacity: 0.8;
    user-select: none;
}

.stb__text {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #4d5d80;
    font-weight: 500;
    margin: 0;
}

.stb__attribution {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.stb__logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.stb__byline {
    display: flex;
    flex-direction: column;
}

.stb__name {
    font-weight: 700;
    color: #111;
}

.stb__title {
    color: #555;
    font-size: 0.95rem;
}

/* --- Client Logos Section --- */
.trust-logos-section {
    padding: 4rem 0;
    text-align: center;
}

.trust-logos-section .section-title {
    margin-bottom: 2rem;
}

.trust-logos-section .trust-logos {
    justify-content: center;
}
/*
==========================================================================
    SERVICE TAXONOMY TEMPLATE TWEAKS
==========================================================================
*/



/*
==========================================================================
    SERVICE TAXONOMY REVISIONS (2025-08-22)
==========================================================================
*/

/* --- 1. Hero Section & Integrated Testimonial --- */
.service-hero__right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.hero-testimonial {
    max-width: 400px; /* Constrain width of testimonial */
    text-align: center;
}

.hero-testimonial .gbp-section__text--sm {
    color: #4d5d80;
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hero-testimonial .gb-shape svg {
    width: 2.5rem;
    height: auto;
    color: #4fc4ca; /* Teal */
}

/* --- 2. Strategies "Blurbs" Grid --- */
.strategies-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-align: center;
}

.strategies-section h2 {
    margin-bottom: 3rem;
}

.strategies-grid {
    display: grid;
    gap: 2rem;
    text-align: left;
    /* Flexible grid that adapts from 1 to 3 columns */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.strategy-blurb {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.strategy-blurb h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #111;
}

.strategy-blurb p {
    margin-bottom: 0;
    color: #555;
}

/* --- 4. Engagements Section Tweaks --- */
.engage__intro-cta {
    margin-top: 1.5rem;
}

.engage__hint {
    text-align: center;
    width: 100%;
    margin-top: 1rem;
}

/* default is no extra class, or .is-style-default if you prefer */
.mra-testimonials.is-style-cards   { /* cards styling */ }
.mra-testimonials.is-style-minimal { /* minimal styling */ }

.footer-cta .wp-element-button {
    padding: 25px;
    margin-bottom: 10px;
}

/* Container styling */
.case-study-services {
    margin: auto 2em;
}

.case-study-services .services__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Chip Flexbox Grid */
.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Individual Chip Styling */
.service-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 50px; /* Makes it a pill shape */
    background-color: #fff;
    text-decoration: none !important;
    color: #333 !important;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.service-chip:hover {
    border-color: #0073aa; /* Change to your brand color */
    background-color: #f9f9f9;
    transform: translateY(-1px);
}

/* Icon Spacing */
.service-chip i {
    margin-right: 8px;
    font-size: 16px;
    color: #666; /* Default icon color */
}

/* Adjust colors based on your screenshot icons if needed */
.service-chip i.fa-bullhorn { color: #f39c12; }
.service-chip i.fa-rss { color: #f1c40f; }

/* Container Spacing */
.case-study-stats {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Individual Row Layout */
.stat-row {
    display: flex;
    align-items: center; /* Vertically centers the number with the text */
    padding: 20px 0;
    border-bottom: 1px dotted #ccc; /* Matches the divider in the image */
}

/* Remove border from last item */
.stat-row:last-child {
    border-bottom: none;
}

/* Big Purple Numbers */
.stat-row h3:first-child {
    margin: 0;
    padding-right: 20px;
    color: #4fc4ca; /* Adjust this hex to match your exact purple */
    font-size: 52px; /* Adjust size to match image */
    font-weight: 800;
    line-height: 1;
    min-width: 140px; /* Ensures numbers align even if they vary in width */
	font-family: var(--gp-font--headline);
}

/* Description Text */
.stat-row h3:last-child {
    margin: 0;
    color: #1a1a1a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
	font-family: var(--gp-font--headline);
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .stat-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .stat-row h3:first-child {
        padding-bottom: 10px;
    }
}


/* Container to line them up */
.blog-header-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between pills */
    align-items: center;
    margin-bottom: 20px; /* Space before the H1 Headline */
	justify-content: center;
}

/* Base Pill Style (Shared) */
.blog-header-pills .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between Icon and Text */
    padding: 6px 16px;
    border-radius: 50px; /* Fully rounded "Pill" shape */
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1;
}

/* VARIATION 1: Category (The "Format") - Outline Style */
.blog-header-pills .pill--category {
    border: 1px solid #000; /* Sharp Black Border */
    color: #000;
    background: transparent;
}
.blog-header-pills .pill--category:hover {
    background: #f0f0f0;
}

/* VARIATION 2: Service (The "Star") - Filled Style */
.blog-header-pills .pill--service {
    background-color: #E6F4F1; /* Light version of your brand color */
    color: #004D40; /* Dark contrast brand color */
    border: 1px solid #E6F4F1; /* Matches bg */
}
.blog-header-pills .pill--service i {
    font-size: 14px; /* Icon size adjustment */
}
.blog-header-pills .pill--service:hover {
    filter: brightness(0.95); /* Slight darken on hover */
}

/* VARIATION 3: Industry (The "Context") - Softer Outline */
.blog-header-pills .pill--industry {
    border: 1px solid #888; /* Grey border */
    color: #555;
    background: transparent;
}
.blog-header-pills .pill--industry:hover {
    border-color: #000;
    color: #000;
}


/* blog bi-line */
/* Container - Ensures full width for centering math to work */
.blog-byline-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%; 
    line-height: 1.4;
}

/* Common Column Styling */
.byline-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* BALANCING ACT: Left and Right get equal space to force Center to be Center */
.byline-left, 
.byline-right {
    flex: 1; 
}

/* LEFT SIDE (Date & Time) */
.byline-left {
    text-align: right;
    align-items: flex-end; 
}

.byline-date {
    /* Font styles will inherit from your theme */
    font-weight: 600; 
    color: #333; /* Adjust color if needed */
    font-size: 15px;
}

.byline-read-time {
    /* Make sure this is distinct from the date */
    font-size: 13px;
    color: #888; 
    text-transform: uppercase;
    margin-top: 2px; /* Small gap between date and time */
    letter-spacing: 0.5px;
}

/* CENTER SIDE (Avatar) */
.byline-center {
    flex: 0 0 auto; /* Keeps the avatar size fixed */
}

.byline-center .byline-avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: block;
    /* Optional: White ring to make it pop */
    border: 3px solid #fff; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

/* RIGHT SIDE (Name & Title) */
.byline-right {
    text-align: left;
    align-items: flex-start;
}

.byline-author {
    font-weight: 700;
    font-size: 16px;
    color: #000;
    text-decoration: none;
}

.byline-title {
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* MOBILE: Stack them vertically */
@media (max-width: 600px) {
    .blog-byline-split {
        flex-direction: column;
        gap: 10px;
    }
    .byline-left, .byline-right {
        text-align: center;
        align-items: center;
    }
}
/* Container - Adds 3D Perspective */
.pill--rotator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 309px; 
    height: 28px; /* Fixed height is crucial for flip effect */
    overflow: hidden; 
    vertical-align: middle;
    perspective: 500px; /* This creates the 3D depth */
}

/* Common Item Styles */
.rotator-item {
    position: absolute;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
    backface-visibility: hidden; /* Hides the back of the "card" */
    
    /* Start State: Waiting at the bottom, rotated down */
    opacity: 0;
    transform: rotateX(-90deg) translateY(10px);
    transform-origin: center bottom;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* STATE: ACTIVE (Visible) */
.rotator-item.active {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
    z-index: 2;
}

/* STATE: EXIT (Flipping Up and Away) */
.rotator-item.exit {
    opacity: 0;
    transform: rotateX(90deg) translateY(-10px);
    transform-origin: center top;
}

/* Featured Image - The "Cinematic" Container */
.wp-block-post-featured-image img {
    width: 100%;
    
    /* Forces the shape to be Short & Wide (Panoramic) */
    aspect-ratio: 2.25 / 1; 
    
    /* CRITICAL: This crops taller images to fit without squishing them */
    object-fit: cover;   
    
    /* Matches the rounded corners of your pills/avatar */
    border-radius: 12px; 
    
    /* Optional: A very subtle shadow to lift it off the white page */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    
    margin-bottom: 40px;
}

/* On Mobile: Make it a bit taller so it's not a tiny sliver */
@media (max-width: 600px) {
    .wp-block-post-featured-image img {
        aspect-ratio: 16 / 9; /* Standard video shape on phones */
    }
}

/* Constrain Comments to Content Width */
#comments, 
.comment-respond {
    max-width: 1200px; /* Adjust to match your blog text width */
    margin: 0 auto;   /* Centers the block */
    padding: 10px 0px 40px 0px;  /* Adds vertical breathing room */
}

/* Optional: Tame that huge "Leave a Comment" title */
.comment-reply-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
/* Related Posts Container */
.related-posts-section {
    max-width: 1000px; /* Can be wider than text */
    margin: 60px auto;
    padding-top: 40px;
    border-top: 1px solid #eee; /* Divider line */
}

.related-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;

}

/* The Grid (3 Columns) */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* The Thumbnail (Cinematic Ratio) */
.related-thumb {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    /* Force the Cinematic Look */
    aspect-ratio: 2.25 / 1; 
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop perfectly */
    transition: transform 0.3s ease;
}

.related-thumb:hover img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* The Title */
.related-heading {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
	color: var(--accent);
}
.related-heading a {
    text-decoration: none;
    color: #000;
}
.related-heading a:hover {
    color: #555; /* Brand color here */
}
.share-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 14px 0; /* Breathing room above/below */
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.share-label {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #333;
    margin-right: 10px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit; /* Fix for button element */
}

/* Colors */
.share-li {
    background-color: #0077b5;
    color: #fff;
}
.share-li:hover { background-color: #005582; color: #fff; }

.share-email {
    background-color: #f0f0f0;
    color: #333;
}
.share-email:hover { background-color: #e0e0e0; }

.share-copy {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #555;
}
.share-copy:hover { border-color: #aaa; color: #333; }

/* TOC Container - Positioned Relative to Content */
.toc-container {
    /* DEFAULT STATE: Anchored to the text (The "Start Point") */
    position: absolute; 
    top: 0;
    left: -260px; /* Pushed into the left gutter */
    
    width: 220px;
    z-index: 999; /* Ensure it stays on top */
    display: none; /* JS turns this on */
}

/* Styling stays the same */
.toc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 15px;
    font-weight: 700;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid #eee;
}

.toc-list li { margin-bottom: 12px; }

.toc-list a {
    display: block;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    padding-left: 15px;
    line-height: 1.3;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.toc-list a:hover {
    color: #000;
    border-left-color: #000;
}

/* Hide on Mobile */
@media (max-width: 1300px) {
    .toc-container { display: none !important; } 
    /* Also hide wrapper to prevent horizontal scroll issues */
    #toc-anchor-wrapper { display: none !important; }
}

.soft-sell-box {
    background: #f4f8fb; /* Very light brand blue tint */
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 25px 30px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; 
}

.soft-sell-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex: 1; 
    min-width: 280px;
}

.soft-sell-icon {
    font-size: 20px;
    color: #0077b5; /* Brand Blue */
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.soft-sell-title {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

.soft-sell-text {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.soft-sell-btn {
    background: #0077b5; 
    color: #fff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.soft-sell-btn:hover {
    background: #005582;
    color: #fff;
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
	padding-left: 13px;align-content
}
.pub-byline{
  font-size:13px;
  opacity:.78;
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.pub-byline__author{ font-weight:800; max-width: 180px; overflow:hidden; text-overflow:ellipsis; }
.pub-byline__dot{ opacity:.6; }

/* =====================================================
   BLOG POST MOBILE OPTIMIZATION
   Add this to your theme's CSS
   ===================================================== */

/* ===== 1. TIGHTER TOP SPACING ===== */
@media (max-width: 768px) {
  .single-post .site-content {
    padding-top: 1rem;
  }
  
  .single-post .breadcrumbs {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
  }
  
  .single-post .entry-header {
    padding-top: 0;
    margin-top: 0;
  }
}

/* ===== 2. CATEGORY/SERVICE PILLS - COMPACT & COLLAPSIBLE ===== */
@media (max-width: 768px) {
  .post-categories,
  .post-tags,
  .entry-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
    max-height: 35px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
  }
  
  .post-categories.expanded,
  .post-tags.expanded,
  .entry-meta-pills.expanded {
    max-height: 500px;
  }
  
  /* Compact pill style */
  .post-categories a,
  .post-tags a,
  .entry-meta-pills a,
  .entry-meta-pills span {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  
  .post-categories a i,
  .post-tags a i,
  .entry-meta-pills a i,
  .entry-meta-pills span i {
    font-size: 0.7rem;
  }
  
  /* Show more button for multiple pills */
  .pills-show-more {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 20px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #666;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ===== 3. SMALLER HEADLINE ===== */
@media (max-width: 768px) {
  .single-post .entry-title,
  .single-post h1.entry-title {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0.75rem 0;
  }
}

/* ===== 4. HORIZONTAL BYLINE (Photo left, text right) ===== */
@media (max-width: 768px) {
  .entry-meta,
  .author-meta,
  .post-author-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
  }
  
  .author-avatar,
  .entry-meta img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0;
  }
  
  .author-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
  }
  
  .author-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0;
  }
  
  .author-title,
  .author-role {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.2;
    margin: 0;
  }
  
  .post-date {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.25rem;
  }
}

/* ===== 5. SHARE SECTION - MOBILE FRIENDLY ===== */
@media (max-width: 768px) {
  .share-insight,
  .post-share,
  .share-section {
    padding: 1.25rem 1rem;
    margin: 1.5rem -1rem;
    background: #f8f9fa;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  
  .share-insight h3,
  .share-section h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    color: #666;
  }
  
  .share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .share-buttons a,
  .share-buttons button {
    flex: 1;
    min-width: calc(33.333% - 0.35rem);
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    border: 1px solid #ddd;
  }
  
  .share-buttons i {
    font-size: 1rem;
  }
  
  /* Specific button styles */
  .share-linkedin {
    background: #0077b5;
    color: white;
    border-color: #0077b5;
  }
  
  .share-email {
    background: white;
    color: #333;
  }
  
  .share-copy,
  .share-link {
    background: white;
    color: #333;
  }
}

/* ===== 6. RELATED POSTS - PROPER MARGINS ===== */
@media (max-width: 768px) {
  .related-posts-section,
  .related-posts,
  .more-insights {
    padding: 2rem 1rem;
    margin: 0 -1rem;
  }
  
  .related-grid,
  .related-posts .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0;
  }
  
  .related-card,
  .related-posts .gbp-card-custom {
    margin: 0;
  }
}

/* ===== 7. CTA BUTTONS - FULL WIDTH & CLOSE TOGETHER ===== */
@media (max-width: 768px) {
  .soft-sell-box,
  .cta-box,
  .post-cta {
    padding: 1.5rem 1rem;
    margin: 2rem -1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .soft-sell-btn,
  .cta-box .button,
  .post-cta .button {
    width: 100%;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
  }
  
  .button--primary {
    background: #ef4444;
    color: white;
  }
  
  .button--secondary {
    background: #6dd9e8;
    color: #0b4b57;
  }
  
  /* Close gap between buttons */
  .cta-box .button + .button,
  .post-cta .button + .button {
    margin-top: 0;
  }
}

/* ===== 8. COMMENT SECTION - PROPER MARGINS ===== */
@media (max-width: 768px) {
  .comment-form,
  .comment-respond {
    padding: 0;
  }
}

/* ===== 9. FEATURED IMAGE - FULL BLEED ON MOBILE ===== */
@media (max-width: 768px) {
  .single-post .entry-content > img:first-of-type,
  .single-post .featured-image,
  .single-post .post-thumbnail {
    margin: 1rem -1rem;
    width: calc(100% + 2rem);
    max-width: none;
    border-radius: 0;
  }
}

/* ===== 10. CONTENT READABILITY ===== */
@media (max-width: 768px) {
  .single-post .entry-content {
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .single-post .entry-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .single-post .entry-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .single-post .entry-content p {
    margin-bottom: 1.25rem;
  }
}

/* ===== BONUS: Read time indicator ===== */
@media (max-width: 768px) {
  .read-time {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}
/* =====================================================
   BLOG POST MOBILE OPTIMIZATION - CORRECT VERSION
   For blog shortcode classes from functions.php
   ===================================================== */

/* ===== 1. TIGHTER TOP SPACING ===== */
@media (max-width: 768px) {
  body.single-post .site-content {
    padding-top: 1rem !important;
  }
  
  body.single-post .entry-header {
    padding-top: 0 !important;
    margin-top: 0.5rem !important;
  }
}

/* ===== 2. COMPACT PILLS ([blog_header_pills]) ===== */
@media (max-width: 768px) {
  body.single-post .blog-header-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0.75rem 0 1rem 0 !important;
  }
  
  body.single-post .blog-header-pills .pill {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }
  
  /* Icons in pills */
  body.single-post .blog-header-pills .pill i {
    font-size: 0.7rem !important;
  }
  
  /* Industry rotator pill */
  body.single-post .pill--rotator {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 28px !important;
  }
}

/* ===== 3. SMALLER HEADLINE ===== */
@media (max-width: 768px) {
  body.single-post .entry-title,
  body.single-post h1.entry-title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin: 0.75rem 0 !important;
  }
}

/* ===== 4. HORIZONTAL BYLINE ([blog_post_byline]) ===== */
@media (max-width: 768px) {
  body.single-post .blog-byline-split {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 1rem 0 !important;
  }
  
  /* Hide left column (date/read time) on mobile */
  body.single-post .byline-left {
    display: none !important;
  }
  
  /* Center column - avatar */
  body.single-post .byline-center {
    flex-shrink: 0 !important;
  }
  
  body.single-post .byline-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: block !important;
  }
  
  /* Right column - name and title */
  body.single-post .byline-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    flex: 1 !important;
  }
  
  body.single-post .byline-author {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  
  body.single-post .byline-title {
    font-size: 0.8rem !important;
    color: #666 !important;
    line-height: 1.2 !important;
    font-style: italic !important;
  }
  
  /* Show date below author info */
  body.single-post .byline-date {
    font-size: 0.8rem !important;
    color: #999 !important;
    margin-top: 0.25rem !important;
  }
}

/* ===== 5. SHARE BAR ([share_bar]) ===== */
@media (max-width: 768px) {
  body.single-post .share-bar-container {
    padding: 1.25rem 1rem !important;
    margin: 1.5rem -1rem !important;
    background: #f8f9fa !important;
    border-top: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  body.single-post .share-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #666 !important;
    margin: 0 !important;
  }
  
  /* Create button row */
  body.single-post .share-bar-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  body.single-post .share-label {
    grid-column: 1 / -1 !important;
  }
  
  /* Stack buttons below label */
  body.single-post .share-bar-container {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  body.single-post .share-bar-container .share-btn {
    flex: 1 1 calc(33.333% - 0.5rem) !important;
    min-width: 90px !important;
    padding: 0.65rem 0.5rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    border: 1px solid #ddd !important;
    text-decoration: none !important;
    background: white !important;
    color: #333 !important;
    cursor: pointer !important;
  }
  
  /* LinkedIn button */
  body.single-post .share-li {
    background: #0077b5 !important;
    color: white !important;
    border-color: #0077b5 !important;
  }
  
  /* Make share label full width */
  body.single-post .share-label {
    flex-basis: 100% !important;
  }
}

/* ===== 6. RELATED POSTS - PROPER MARGINS ===== */
@media (max-width: 768px) {
  body.single-post .related-posts-section,
  body.single-post .related-posts {
    padding: 2rem 1rem !important;
    margin: 0 -1rem !important;
  }
  
  body.single-post .related-grid,
  body.single-post .related-posts .card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ===== 7. CTA BUTTONS - FULL WIDTH ===== */
@media (max-width: 768px) {
  body.single-post .soft-sell-box,
  body.single-post .cta-box {
    padding: 1.5rem 1rem !important;
    margin: 2rem -1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  body.single-post .soft-sell-btn,
  body.single-post .soft-sell-box a,
  body.single-post .cta-box .button {
    width: 100% !important;
    padding: 1rem !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    display: block !important;
  }
}

/* ===== 8. COMMENTS ===== */
@media (min-width: 768px){
  .comments-area{
    padding-left:2rem;
    padding-right:2rem;
  }
}
@media (max-width: 767px){
  .comments-area{
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

/* ===== 9. FEATURED IMAGE - FULL BLEED ===== */
@media (max-width: 768px) {
  body.single-post .entry-content > img:first-of-type,
  body.single-post .featured-image,
  body.single-post .post-thumbnail,
  body.single-post .wp-post-image {
    margin: 1rem -1rem !important;
    width: calc(100% + 2rem) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
}

/* ===== 10. CONTENT READABILITY ===== */
@media (max-width: 768px) {
  body.single-post .entry-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  
  body.single-post .entry-content h2 {
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  body.single-post .entry-content h3 {
    font-size: 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  body.single-post .entry-content p {
    margin-bottom: 1.25rem !important;
  }
}

/* ===== 11. AUTO TOC (if present) ===== */
@media (max-width: 768px) {
  body.single-post .auto-toc,
  body.single-post .toc-container {
    margin: 1.5rem 0 !important;
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }
  
  body.single-post .auto-toc ul,
  body.single-post .toc-container ul {
    padding-left: 1.25rem !important;
  }
}
@media (max-width: 768px) {
    .comments-area, body.single-post .related-posts-section, body.single-post .related-posts
Specificity: (0,2,1)
 {
        padding: 2rem 1rem !important;
        margin: -1rem auto !important;
        width: 90%;
    }
@media (max-width: 1024px) {
    .has-inline-mobile-toggle .inside-header
 {
        flex-direction: row;
        text-align: left;
        flex-wrap: wrap;
    }
	}