/*
 * Child theme customization layer.
 * Design polish, form enhancements, spacing refinement, accessibility improvements.
 */

/* Form inputs: styling + states */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  background: #fff;
  color: var(--im-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
  border-color: rgba(0, 111, 230, 0.24);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--im-blue);
  box-shadow: 0 0 0 3px rgba(0, 111, 230, 0.12);
}

/* Placeholder styling */
::placeholder {
  color: var(--im-muted);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--im-muted);
  opacity: 1;
}

::-ms-input-placeholder {
  color: var(--im-muted);
  opacity: 1;
}

/* Disabled state */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
  background-color: rgba(238, 248, 255, 0.5);
  border-color: rgba(217, 233, 247, 0.6);
  color: var(--im-muted);
  cursor: not-allowed;
}

/* Textarea: resize + min-height */
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select arrow enhancement */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23006fe6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 38px;
}

/* Button refinements */
.im-button {
  position: relative;
  overflow: hidden;
}

.im-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.im-button:active::before {
  opacity: 1;
}

.im-button:disabled,
.im-button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Button variants: outline dark */
.im-button-outline-dark {
  position: relative;
}

.im-button-outline-dark:hover,
.im-button-outline-dark:focus-visible {
  box-shadow: 0 8px 24px rgba(7, 28, 66, 0.16);
}

/* Button light variant depth */
.im-button-light:hover,
.im-button-light:focus-visible {
  box-shadow: 0 8px 20px rgba(0, 111, 230, 0.16);
  transform: translateY(-2px);
}

/* Form group spacing */
.wpcf7-form-control-wrap,
.wpcf7-form-group,
.form-group,
.field {
  margin-bottom: 20px;
}

.wpcf7-form-control-wrap:last-child,
.wpcf7-form-group:last-child,
.form-group:last-child,
.field:last-child {
  margin-bottom: 0;
}

/* Labels styling */
label {
  display: block;
  margin-bottom: 8px;
  color: var(--im-ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

/* Card refinements */
.im-resource-card,
.im-card-one,
.im-card-two {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.im-resource-card:hover,
.im-resource-card:focus-within,
.im-card-one:hover,
.im-card-one:focus-within,
.im-card-two:hover,
.im-card-two:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(7, 28, 66, 0.16);
}

/* Shadow system consistency */
.im-card-elevation-1 {
  box-shadow: 0 4px 12px rgba(7, 28, 66, 0.08);
}

.im-card-elevation-2 {
  box-shadow: 0 8px 24px rgba(7, 28, 66, 0.12);
}

.im-card-elevation-3 {
  box-shadow: 0 12px 32px rgba(7, 28, 66, 0.16);
}

/* Spacing utility refinement */
.im-section {
  padding-block: var(--im-section-space);
}

/* Typography micro-refinement */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  font-weight: 700;
}

.im-section-label {
  letter-spacing: 0.08em;
}

/* Link underline refinement */
a:not(.im-button):not(.im-resource-link):not([class*="menu"]):not([class*="nav"]) {
  text-decoration: underline;
  text-decoration-color: rgba(0, 111, 230, 0.32);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
}

a:not(.im-button):not(.im-resource-link):not([class*="menu"]):not([class*="nav"]):hover {
  text-decoration-color: var(--im-blue);
}

/* Focus visible enhancement for better accessibility (WCAG 2.4.7 / 2.4.11) */
*:focus-visible {
  outline: 2px solid var(--im-blue, #006fe6);
  outline-offset: 2px;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile: typography + spacing adjustments */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 14px 12px;
  }

  .im-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .im-resource-card:hover,
  .im-resource-card:focus-within,
  .im-card-one:hover,
  .im-card-one:focus-within,
  .im-card-two:hover,
  .im-card-two:focus-within {
    transform: translateY(-2px);
  }
}

/* Small mobile: form field adjustments */
@media (max-width: 520px) {
  label {
    font-size: 13px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    padding: 12px 10px;
    font-size: 16px;
  }

  .wpcf7-form-control-wrap,
  .wpcf7-form-group,
  .form-group,
  .field {
    margin-bottom: 16px;
  }
}

/* Selection color accessibility */
::selection {
  background-color: rgba(0, 111, 230, 0.2);
  color: var(--im-ink);
}

::-moz-selection {
  background-color: rgba(0, 111, 230, 0.2);
  color: var(--im-ink);
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    border-width: 2px;
  }

  .im-button {
    font-weight: 800;
  }
}

/* Contact Form 7 specific enhancements */
.wpcf7-form {
  width: 100%;
}

.wpcf7-form-control {
  width: 100%;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  background: #fff;
  color: var(--im-ink);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
  border-color: var(--im-blue);
  box-shadow: 0 0 0 3px rgba(0, 111, 230, 0.12);
  outline: none;
}

/* CF7 submit button */
.wpcf7-submit {
  padding: 12px 28px;
  border: none;
  border-radius: var(--im-radius);
  background: var(--im-blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.wpcf7-submit:hover,
.wpcf7-submit:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 111, 230, 0.24);
  outline: none;
}

.wpcf7-submit:active {
  transform: translateY(0);
}

.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* CF7 validation messages */
.wpcf7-form-control.wpcf7-not-valid {
  border-color: #d32f2f;
  background-color: rgba(211, 47, 47, 0.04);
}

.wpcf7-form-control.wpcf7-not-valid:focus {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
}

.wpcf7-not-valid-tip {
  display: block;
  color: #d32f2f;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  animation: slideDown 160ms ease;
}

/* CF7 success/error states */
.wpcf7-response-output.wpcf7-form-submitted {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--im-radius);
  font-size: 14px;
  line-height: 1.5;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  border: 1px solid rgba(76, 175, 80, 0.24);
  background-color: rgba(76, 175, 80, 0.08);
  color: #2e7d32;
}

.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-validation-errors {
  border: 1px solid rgba(211, 47, 47, 0.24);
  background-color: rgba(211, 47, 47, 0.08);
  color: #b71c1c;
}

/* Fieldset styling */
.wpcf7-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.wpcf7-fieldset:last-child {
  margin-bottom: 0;
}

.wpcf7-fieldset legend {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

/* Checkbox and radio styling */
.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wpcf7-form-control.wpcf7-checkbox label,
.wpcf7-form-control.wpcf7-radio label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"],
.wpcf7-form-control.wpcf7-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--im-blue);
}

/* Animation for validation messages */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark color scheme foundation (if needed in future) */
@media (prefers-color-scheme: dark) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select,
  .wpcf7-form-control.wpcf7-text,
  .wpcf7-form-control.wpcf7-email,
  .wpcf7-form-control.wpcf7-tel,
  .wpcf7-form-control.wpcf7-url,
  .wpcf7-form-control.wpcf7-textarea,
  .wpcf7-form-control.wpcf7-select {
    background-color: rgba(7, 28, 66, 0.4);
    color: #fff;
  }

  ::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .wpcf7-form-control.wpcf7-not-valid {
    background-color: rgba(211, 47, 47, 0.12);
    border-color: #ff6b6b;
  }
}

/* ============================================================
 * Contact PAGE form fix.
 * The im-home-contact-form is designed for dark homepage sections
 * (white labels, translucent wrapper). On the contact page it sits
 * on a light background, so labels/inputs/wrapper must flip to a
 * light-context treatment for visibility and contrast.
 * ============================================================ */

.im-contact-content .im-home-contact-form-wrap {
  border: 1px solid var(--im-border);
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 28, 66, 0.1);
  backdrop-filter: none;
}

.im-contact-content .im-home-contact-form p,
.im-contact-content .im-home-contact-form label,
.im-contact-content .im-contact-form-title {
  color: var(--im-ink);
}

.im-contact-content .im-home-contact-form label {
  font-weight: 600;
  font-size: 14px;
}

.im-contact-content .im-home-contact-form input,
.im-contact-content .im-home-contact-form textarea,
.im-contact-content .im-home-contact-form select {
  border: 1px solid var(--im-border);
  background: #fff;
  color: var(--im-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.im-contact-content .im-home-contact-form input:hover,
.im-contact-content .im-home-contact-form textarea:hover,
.im-contact-content .im-home-contact-form select:hover {
  border-color: rgba(0, 111, 230, 0.32);
}

.im-contact-content .im-home-contact-form input:focus,
.im-contact-content .im-home-contact-form textarea:focus,
.im-contact-content .im-home-contact-form select:focus {
  border-color: var(--im-blue);
  box-shadow: 0 0 0 3px rgba(0, 111, 230, 0.12);
  outline: none;
}

.im-contact-content .im-home-contact-form ::placeholder {
  color: var(--im-muted);
  opacity: 1;
}

/* Keep the contact-page form input text dark even under OS dark mode */
@media (prefers-color-scheme: dark) {
  .im-contact-content .im-home-contact-form input,
  .im-contact-content .im-home-contact-form textarea,
  .im-contact-content .im-home-contact-form select {
    background-color: #fff;
    color: var(--im-ink);
  }

  .im-contact-content .im-home-contact-form ::placeholder {
    color: var(--im-muted);
  }
}

/* Our Team "Team model" section is designed dark (white text), but the
   global `.im-section:nth-of-type(odd)` zebra rule (specificity 0,2,0)
   beats `.im-team-command` (0,1,0) and repaints it pale — leaving white
   text on a near-white background. Reassert the intended dark background
   at higher specificity. Section copy stays editable in WordPress page meta. */
.im-page-team-redesign .im-section.im-team-command {
  background:
    radial-gradient(circle at 12% 18%, rgba(39, 199, 255, 0.16), transparent 30%),
    #061428;
}

/* Work page "Proof method" section: the heading column is short while the
   process list beside it is tall. `align-items: center` floated the heading
   in the vertical middle, leaving large empty gaps above and below it. Anchor
   the heading to the top so it reads next to the first list item. Heading and
   list copy stay editable in the page meta (im_detail_process*). */
.im-work-proof-method-grid {
  align-items: start;
}

/* ============================================================
 * Dark-section guard against the zebra repaint.
 * `.im-section:nth-of-type(odd)` (specificity 0,2,0) repaints every odd
 * section pale and beats single-class section rules (0,1,0). Sections that
 * are *designed* dark (white headings, translucent-white cards) then lose
 * their dark background and render white-on-white — invisible. Each selector
 * below matches the zebra at 0,2,0 and wins on cascade order (child loads
 * last), reasserting the intended dark background. Add new dark sections here
 * rather than re-discovering this bug per page. All copy stays CMS-editable.
 * ============================================================ */
.im-section.im-tech-stack,
.im-section.im-solution-components {
  background: var(--im-blue-deep);
}

/* Sections whose designed background is a gradient: reassert the full
   gradient, not just the base color, so the glow survives the zebra. */
.im-section.im-industry-playbook {
  background:
    radial-gradient(circle at 14% 18%, rgba(39, 199, 255, 0.16), transparent 30%),
    var(--im-blue-deep);
}

.im-section.im-ai-growth {
  background:
    radial-gradient(circle at 82% 18%, rgba(39, 199, 255, 0.18), transparent 30%),
    radial-gradient(circle at 18% 80%, rgba(0, 111, 230, 0.22), transparent 28%),
    #02070f;
}

.im-section.im-work {
  background:
    radial-gradient(circle at 12% 16%, rgba(39, 199, 255, 0.13), transparent 26%),
    linear-gradient(135deg, #020712 0%, var(--im-blue-deep) 100%);
}

/* Work "Proof library" gallery and Our Team "Team model" use their own
   darker values, so they get dedicated rules. */
.im-page-work-redesign .im-section.im-work-gallery-redesign {
  background: #020813;
}

/* ============================================================
 * Site-wide left alignment of section headings.
 * Owner direction: headings and labels read left, not centered.
 * The theme default centers `.im-section h2` (margin: 0 auto) and a set of
 * homepage / CPT-detail headings + labels. The redesigned inner pages
 * (work, team, pricing, about) already align left via their own selectors;
 * this block brings the remaining surfaces in line. Each selector matches a
 * theme rule at equal specificity and wins on cascade order (child loads
 * last). Copy stays editable in WordPress.
 * ============================================================ */
.im-section h2,
.im-section-intro,
.im-section .im-section-label,
.im-services .im-section-label,
.im-process .im-section-label,
.im-testimonials .im-section-label,
.im-pricing .im-section-label,
.im-work .im-section-label,
.im-tech-stack .im-section-label,
.im-brand-strip .im-section-label,
.im-home-articles .im-section-label,
.im-home-faq .im-section-label,
.im-service-deliverables .im-section-label,
.im-service-deliverables h2,
.im-industry-playbook .im-section-label,
.im-industry-playbook h2,
.im-solution-workflow .im-section-label,
.im-solution-workflow h2,
.im-case-approach h2,
.im-case-outcomes .im-section-label,
.im-case-outcomes h2,
.im-brand-strip h2 {
  text-align: left;
  margin-inline: 0;
}

/* Center the Achievements and Technology Stack section headers (label,
   title, intro) per request. Placed after the global left-align block so
   it wins on cascade order at equal specificity. */
.im-achievements .im-section-label,
.im-achievements h2,
.im-achievements .im-section-intro,
.im-brand-strip .im-section-label,
.im-brand-strip h2,
.im-brand-strip .im-section-intro {
  text-align: center;
}
.im-achievements h2,
.im-achievements .im-section-intro,
.im-brand-strip h2,
.im-brand-strip .im-section-intro {
  margin-inline: auto;
}

/* ============================================================
 * Our Team — "The people behind every project" section.
 * Names, roles, and optional photos are editable in WordPress page meta
 * (im_detail_people: "Name|Role|Photo URL"). Photoless members fall back
 * to a gradient initials avatar so the grid stays complete.
 * ============================================================ */
.im-team-people-head {
  margin-bottom: 36px;
}

.im-team-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 22px;
}

.im-team-person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  background: #fff;
  box-shadow: 0 18px 52px rgba(7, 28, 66, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.im-team-person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(7, 28, 66, 0.14);
}

.im-team-person-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--im-blue-deep), var(--im-blue));
  color: #fff;
}

.im-team-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-team-person-initials {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.im-team-person-card strong {
  color: var(--im-ink);
  font-size: 18px;
  line-height: 1.2;
}

.im-team-person-card span:not(.im-team-person-avatar):not(.im-team-person-initials) {
  color: var(--im-muted);
  font-size: 14px;
}

/* ============================================================
 * PREMIUM REDESIGN LAYER (bolder, more premium).
 * A site-wide override layer. The theme reuses ~40 bespoke card classes
 * and a fragile zebra background; this block unifies the building blocks
 * (tokens, buttons, cards, section rhythm, type) so every page that reuses
 * them lifts at once. Child loads last, so equal-specificity rules win on
 * cascade order. All copy stays CMS-editable; this is presentation only.
 * ============================================================ */
:root {
  /* Depth + surface scale */
  --im-card-radius: 18px;
  --im-ring: rgba(0, 111, 230, 0.12);
  --im-ring-strong: rgba(0, 111, 230, 0.22);
  --im-shadow-sm: 0 2px 10px rgba(7, 28, 66, 0.05);
  --im-shadow-card: 0 18px 48px -22px rgba(7, 28, 66, 0.28), 0 2px 8px rgba(7, 28, 66, 0.04);
  --im-shadow-card-hover: 0 34px 70px -26px rgba(7, 28, 66, 0.4), 0 4px 12px rgba(7, 28, 66, 0.06);
  --im-surface-light: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  --im-surface-dark: linear-gradient(165deg, #0a1f44 0%, var(--im-blue-deep) 60%, #020c22 100%);
  /* Easing */
  --im-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Section rhythm: more breathing room, cleaner top hairline ---- */
.im-section {
  padding-block: clamp(64px, 6.5vw, 104px);
  border-top: 1px solid rgba(0, 111, 230, 0.05);
}

/* ---- Split sections (heading-left / step-list-right): top-align so the
   heading no longer floats in the vertical center of a tall list leaving
   dead space above and below. Heading column sticks while the list scrolls. */
.im-about-method-grid,
.im-work-proof-method-grid,
.im-team-command-grid,
.im-work-lens-grid {
  align-items: start;
}
.im-about-method-grid > :first-child,
.im-work-proof-method-grid > :first-child,
.im-team-command-grid > :first-child,
.im-work-lens-grid > :first-child {
  position: sticky;
  top: 110px;
}

/* About method section: a short heading sitting beside a tall four-step
   list stranded the heading and left a large empty left column. Stack it
   instead (heading on top, steps in a balanced two-up grid) so it fills
   the width and matches the principles row above it. Only the about page
   is retargeted; the other split grids keep the sticky behavior. */
.im-about-method-grid {
  grid-template-columns: 1fr;
  row-gap: 4px;
}
.im-about-method-grid > :first-child {
  position: static;
  top: auto;
  max-width: 720px;
}
.im-about-method-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
@media (max-width: 720px) {
  .im-about-method-list {
    grid-template-columns: 1fr;
  }
}

/* About system panel: five tiles in a three-column grid left an awkward
   empty sixth cell. Let the last tile span the trailing space so the
   panel reads as a deliberate composition. */
.im-about-system-card span:last-child {
  grid-column: span 2;
}

/* The about "system" visual carried a floating glass rectangle (::before)
   pinned over the Design tile; it read as a misplaced/stuck overlay. Drop it
   so the tile grid reads cleanly. */
.im-about-system-card::before {
  display: none;
}

/* ---- Heading typography: bolder, tighter, larger ---- */
.im-section h2,
.im-section-heading h2,
.im-page-hero h1,
.im-solution-ref-copy h1,
.im-hero h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.im-section h2,
.im-section-heading h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
}
.im-pill-label,
.im-section .im-section-label,
.im-eyebrow {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 12.5px;
}

/* ---- Buttons: premium weight, refined gradient, lift + glow on hover ---- */
.im-button,
.im-header-cta {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  gap: 8px;
  box-shadow: 0 18px 38px -12px rgba(0, 111, 230, 0.5);
  transition: transform 220ms var(--im-ease), box-shadow 220ms var(--im-ease), background 220ms var(--im-ease);
}
.im-button:hover,
.im-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 50px -14px rgba(0, 111, 230, 0.6);
}
.im-button-outline-dark {
  border-width: 1.5px;
  box-shadow: none;
}
.im-button-outline-dark:hover {
  background: var(--im-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -16px rgba(0, 111, 230, 0.5);
}
.im-button-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -16px rgba(7, 28, 66, 0.4);
}
.im-button-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

/* ---- Unified premium card recipe (light surfaces) ----
   Applied to the real card classes the templates use so the whole site
   shares one refined, layered treatment instead of flat white boxes. */
.im-service-card,
.im-industry-card,
.im-outcome-card,
.im-article-card,
.im-price-card,
.im-pricing-plan-card,
.im-case-card,
.im-case-outcome-card,
.im-credential-card,
.im-team-pod-card,
.im-team-card,
.im-resource-card,
.im-design-proof-card,
.im-about-principle-card,
.im-solution-signal-card,
.im-solution-audience-card,
.im-service-deliverable-card,
.im-industry-solution-card,
.im-graphic-evidence-card,
.im-project-card,
.im-team-person-card,
.im-service-method-list li {
  background: var(--im-surface-light);
  border: 1px solid var(--im-ring);
  border-radius: var(--im-card-radius);
  box-shadow: var(--im-shadow-card);
  transition: transform 260ms var(--im-ease), box-shadow 260ms var(--im-ease), border-color 260ms var(--im-ease);
}
.im-service-card:hover,
.im-industry-card:hover,
.im-outcome-card:hover,
.im-article-card:hover,
.im-price-card:hover,
.im-pricing-plan-card:hover,
.im-case-card:hover,
.im-case-outcome-card:hover,
.im-credential-card:hover,
.im-team-pod-card:hover,
.im-team-card:hover,
.im-resource-card:hover,
.im-design-proof-card:hover,
.im-about-principle-card:hover,
.im-solution-signal-card:hover,
.im-solution-audience-card:hover,
.im-service-deliverable-card:hover,
.im-industry-solution-card:hover,
.im-graphic-evidence-card:hover,
.im-project-card:hover,
.im-team-person-card:hover,
.im-service-method-list li:hover {
  transform: translateY(-4px);
  box-shadow: var(--im-shadow-card-hover);
  border-color: var(--im-ring-strong);
}

/* ---- Dark-surface cards: translucent glass over the restored dark bg ---- */
.im-tech-stack-card,
.im-industry-playbook-card,
.im-solution-component-card,
.im-ai-feature-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--im-card-radius);
  transition: transform 260ms var(--im-ease), background 260ms var(--im-ease), border-color 260ms var(--im-ease);
}
.im-tech-stack-card:hover,
.im-industry-playbook-card:hover,
.im-solution-component-card:hover,
.im-ai-feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(158, 233, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .im-button,
  .im-header-cta,
  .im-service-card,
  .im-industry-card,
  .im-outcome-card,
  .im-article-card,
  .im-price-card,
  .im-pricing-plan-card,
  .im-case-card,
  .im-case-outcome-card,
  .im-credential-card,
  .im-team-pod-card,
  .im-team-card,
  .im-resource-card,
  .im-design-proof-card,
  .im-about-principle-card,
  .im-about-system-card,
  .im-solution-signal-card,
  .im-solution-audience-card,
  .im-service-deliverable-card,
  .im-industry-solution-card,
  .im-graphic-evidence-card,
  .im-project-card,
  .im-team-person-card,
  .im-service-method-list li,
  .im-tech-stack-card,
  .im-industry-playbook-card,
  .im-solution-component-card,
  .im-ai-feature-card {
    transition: none;
  }
  .im-button:hover,
  .im-header-cta:hover,
  [class*="-card"]:hover,
  .im-service-method-list li:hover {
    transform: none;
  }
}

/* =====================================================================
   QA FIX PASS (homepage critique: service cards, testimonials, FAQ,
   contact form). Child-first overrides; nothing destructive.
   ===================================================================== */

/* --- #1/#2 Service cards: source images vary in brightness, so some
   cards read as flat dark panels and others let a busy stock photo
   dominate. Reassert ONE cohesive treatment: the photo becomes a calm,
   blue-tinted texture under a strong, even scrim, so every card reads
   the same and the title/body stays legible regardless of the image.
   Owners can still swap --service-image per card from the CMS. */
.im-service-card::before {
  filter: saturate(0.85) brightness(0.82) contrast(0.96);
}
.im-service-card::after {
  background:
    linear-gradient(180deg, rgba(3, 16, 38, 0.62) 0%, rgba(2, 10, 26, 0.86) 100%),
    linear-gradient(115deg, rgba(0, 70, 150, 0.45), transparent 62%),
    radial-gradient(circle at 16% 18%, rgba(39, 199, 255, 0.22), transparent 36%);
}
.im-service-card:hover::after,
.im-service-card:focus-within::after {
  background:
    linear-gradient(180deg, rgba(0, 60, 140, 0.5) 0%, rgba(2, 10, 26, 0.9) 100%),
    radial-gradient(circle at 16% 18%, rgba(39, 199, 255, 0.34), transparent 36%);
}
/* Lift the title off the body so the card has a clear focal line. */
.im-service-content strong {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 8, 24, 0.4);
}

/* --- #3 Testimonial avatars/poster: when an owner has not uploaded a
   photo the fallback initial sat in a pale, washed block that read as a
   broken placeholder. Make the fallback an intentional brand-gradient
   plate with a confident monogram. */
.im-testimonial-video:not(:has(img)) {
  background:
    radial-gradient(circle at 78% 22%, rgba(39, 199, 255, 0.28), transparent 42%),
    linear-gradient(150deg, #0a2e63 0%, var(--im-blue-deep, #04173a) 70%, #02102b 100%);
}
.im-testimonial-video span {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--im-blue), var(--im-cyan));
  box-shadow: 0 14px 34px rgba(3, 18, 45, 0.45);
}
.im-testimonial-video:not(:has(img))::before {
  border-color: rgba(255, 255, 255, 0.16);
}
.im-testimonial-avatar {
  background: linear-gradient(135deg, var(--im-blue), var(--im-cyan)) !important;
  color: #fff !important;
}

/* --- #9 FAQ: a centered, narrow accordion sitting under a left-aligned
   heading read as a large empty right gutter. Reflow to a two-column
   layout: heading + CTA on the left, the question list filling the
   right. Also drop the 4px side-stripe accent on open items (a banned
   accent pattern) in favor of the existing full-border emphasis. */
.im-home-faq .im-container {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  column-gap: 64px;
  row-gap: 18px;
  align-items: start;
}
.im-home-faq .im-section-label {
  grid-column: 1;
  grid-row: 1;
  text-align: left !important;
}
.im-home-faq h2 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 6px;
  /* The global h2 clamp tops out at 36px, which wraps to 3+ heavy lines
     inside this 340px column. Tighter scale keeps the heading compact. */
  font-size: clamp(24px, 2.2vw, 30px);
}
.im-home-faq .im-faq-list {
  grid-column: 2;
  grid-row: 1 / span 4;
  max-width: none;
  margin: 0;
}
.im-home-faq .im-faq-cta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  margin-top: 8px;
  /* Theme styles this card as a horizontal row (text + wide button) for a
     920px strip. Inside the 340px FAQ column that crams the copy into
     one-word lines, so stack it vertically here. */
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}
.im-home-faq .im-faq-cta .im-button {
  min-width: 0;
  width: auto !important;
  white-space: normal;
}
.im-faq-list details[open]::before {
  display: none;
}
@media (max-width: 880px) {
  .im-home-faq .im-container {
    grid-template-columns: 1fr;
  }
  .im-home-faq .im-section-label,
  .im-home-faq h2,
  .im-home-faq .im-faq-list,
  .im-home-faq .im-faq-cta {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --- #8 Contact form: the message textarea ballooned and dominated the
   glass card. Cap its height and give all controls a consistent floor
   so the form reads as a tidy stack, not one giant white slab. */
.im-home-contact-form input,
.im-home-contact-form textarea,
.im-home-contact-form select {
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.im-home-contact-form textarea {
  min-height: 116px;
  max-height: 168px;
}
.im-home-contact-form input::placeholder,
.im-home-contact-form textarea::placeholder {
  color: #5a6b82;
}

/* --- #7 Tech marquee polish: slightly larger logos for scannability. */
.im-platform-mark img {
  width: 27px;
  height: 27px;
}

/* =====================================================================
   AUDIT POLISH PASS
   Four targeted fixes — child.css only, all verified against staging
   markup via curl. Design tokens used where colours needed. No hex
   equivalents of tokens hardcoded.
   ===================================================================== */

/* ------------------------------------------------------------------
   P1 · Achievements grid — mobile clip / single-column fix
   Context: .im-achievement-badge is a 2-col internal grid (52px icon
   + 1fr text). At ≤480px the parent forces the cloud to 2 columns,
   giving ~175px per card; the 1fr text cell has no min-width:0 so
   long labels ("WooCommerce", "Google Analytics") overflow or get
   clipped by overflow:hidden on the card. Fix 1 adds min-width:0 to
   the text children so text wraps correctly at any width. Fix 2
   collapses the cloud to a single column at ≤480px so each card has
   the full container width, eliminating both clipping and the ragged
   one-word-per-line wrap.
   Specificity: 0,2,0 each — beats parent 0,1,0 class rules; child
   loads last so it wins cascade ties.
   ------------------------------------------------------------------ */
.im-achievement-badge strong,
.im-achievement-badge span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* The description span auto-places into the 52px icon column (row 2,
   col 1) and wraps letter-by-letter. Make it span the full card width. */
.im-achievement-badge span {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .im-achievement-cloud {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   P2 · Our Team people grid — 3-column balanced layout
   Context: .im-team-people-grid is defined in this file (child.css,
   above) as repeat(auto-fit, minmax(min(100%,220px),1fr)). With 9
   members this resolves to 5 columns at desktop (≥1100px container),
   leaving a 5+4 orphan row. Switching to repeat(3,minmax(0,1fr))
   gives three even rows of 3 — no orphan.
   This rule is placed after the definition above (same specificity
   0,1,0) so cascade order wins without needing a scope wrapper. The
   auto-fit fallback still kicks in below 768px via the responsive
   rule that follows.
   ------------------------------------------------------------------ */
.im-team-people-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .im-team-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .im-team-people-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   P2 · Pricing page FAQ section header — center alignment
   Context: on /pricing/ the .im-pricing-faq section uses .im-pill-label
   (inline-flex, width:fit-content, naturally left-aligned) and an h2
   (margin:0, no centering). The plans section above has a centred
   heading visually, creating a jarring left/center jump. Scope these
   rules tightly to .im-pricing-faq so the homepage FAQ (which uses
   a two-column grid layout defined above) is unaffected.
   Specificity: 0,2,0 — beats parent 0,1,0 pill-label and faq h2 rules;
   child loads last.
   ------------------------------------------------------------------ */
.im-pricing-faq .im-pill-label {
  display: block;
  text-align: center;
  margin-inline: auto;
  width: fit-content;
}

.im-pricing-faq h2 {
  text-align: center;
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   P2 · Service detail deliverable cards — hide empty icon block
   Context: .im-service-deliverable-card::before generates a 46×46px
   gradient square (linear-gradient chevron over a blue-deep base).
   With the current Customizer token values (--im-blue:#1097c0,
   --im-blue-deep:#163b6b) the diagonal stripe is barely perceptible
   and the block renders as a plain solid blue square with no legible
   glyph — an unintentional placeholder appearance. The deliverable
   cards contain no icon element; the h3 heading carries all meaning.
   Hiding the ::before and tightening the card's min-height lets the
   h3 lead cleanly, which is the "minimal option" described in the
   brief. Padding-top is reduced to remove the gap the pseudo-element
   used to fill.
   Specificity: 0,2,0 (.im-service-deliverables .im-service-deliverable-card)
   beats parent 0,1,0 for the ::before rule.
   ------------------------------------------------------------------ */
.im-service-deliverables .im-service-deliverable-card::before {
  display: none;
}

.im-service-deliverables .im-service-deliverable-card {
  min-height: 160px;
  padding-top: 24px;
}

/* ------------------------------------------------------------------
   P0 · Contact page submit button invisible
   Context: theme.css styles .im-home-contact-form button for the dark
   homepage section (transparent background, white border, white text).
   The contact page renders the same [im_form] inside the light
   .im-contact-content card, so the button rendered white-on-white and
   read as "missing" — the form was unusable. The light-context flip
   above (inputs/labels) never covered the button. Restyle it for the
   light card; specificity 0,2,1 beats theme's 0,1,1, child loads last.
   ------------------------------------------------------------------ */
.im-contact-content .im-home-contact-form button {
  border-color: var(--im-blue);
  background: var(--im-blue);
  color: #fff;
}

.im-contact-content .im-home-contact-form button:hover,
.im-contact-content .im-home-contact-form button:focus-visible {
  border-color: var(--im-blue-deep);
  background: var(--im-blue-deep);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 111, 230, 0.22);
}

/* ------------------------------------------------------------------
   Our Team — full-bleed portrait cards (Elevar-style)
   The photo fills the whole card; name + role sit over a dark gradient
   at the bottom. Photoless members keep the brand-gradient initials,
   now centered full-card. Placed last so it wins on cascade order over
   the earlier white-card recipe and the 3-column grid rule above.
   Members are edited in Pages -> Our Team -> "Team Members" box
   (Name = name, Role = the short quote/caption, Photo = uploader).
   ------------------------------------------------------------------ */
.im-team-people-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.im-team-person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  aspect-ratio: 3 / 4;
  padding: 24px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1320;
  box-shadow: 0 18px 50px rgba(7, 28, 66, 0.12);
  isolation: isolate;
}

.im-team-person-avatar {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--im-blue-deep), var(--im-blue));
}

.im-team-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.im-team-person-initials {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}

.im-team-person-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 12, 22, 0.94) 6%,
    rgba(6, 12, 22, 0.5) 32%,
    rgba(6, 12, 22, 0) 58%
  );
}

.im-team-person-card strong {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.im-team-person-card span:not(.im-team-person-avatar):not(.im-team-person-initials) {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  max-width: 26ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
}

.im-team-person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(7, 28, 66, 0.2);
}

.im-team-person-card:hover .im-team-person-avatar img {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .im-team-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .im-team-people-grid {
    grid-template-columns: 1fr;
  }
  .im-team-person-card {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   Linked team card — im-team-person-card--linked
   Scoped to the <a> wrapper introduced for CPT-linked members. Leaves the
   existing article.im-team-person-card Elevar portrait styles untouched.
   ========================================================================== */

a.im-team-person-card--linked {
  display: flex;         /* match article flex flow set in parent theme */
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.im-team-person-card--linked:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 72px rgba(7, 28, 66, 0.22);
}

a.im-team-person-card--linked:focus-visible {
  outline: 3px solid var(--im-blue);
  outline-offset: 3px;
  border-radius: var(--im-radius, 12px);
}

/* ==========================================================================
   Single team member page — .im-team-profile
   ========================================================================== */

.im-team-profile {
  background:
    radial-gradient(circle at 10% 10%, rgba(var(--im-cyan-rgb), 0.13), transparent 30%),
    linear-gradient(180deg, #f8fcff 0%, #ffffff 42%, #f6fbff 100%);
}

.im-team-profile .im-member-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 116px);
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--im-cyan-rgb), 0.22), transparent 34%),
    linear-gradient(135deg, var(--im-blue-deep) 0%, var(--im-blue-dark, #042d72) 58%, var(--im-blue) 128%);
  color: #fff;
}

.im-team-profile .im-member-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -42% 34%;
  height: 72%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(-8deg);
  pointer-events: none;
}

.im-team-profile .im-member-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
}

.im-team-profile .im-member-copy {
  max-width: 780px;
}

.im-team-profile .im-member-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: gap 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.im-team-profile .im-member-back:hover {
  gap: 13px;
  opacity: 0.86;
}

.im-team-profile .im-member-back--top {
  margin-bottom: clamp(26px, 4vw, 48px);
}

.im-team-profile .im-member-role,
.im-team-profile .im-member-kicker {
  margin: 0 0 14px;
  color: var(--im-cyan-light, #9ee9ff);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.im-team-profile h1 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 9vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}



.im-team-profile .im-member-actions,
.im-team-profile .im-member-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(26px, 4vw, 42px);
}

.im-team-profile .im-member-pill {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--im-button-radius, var(--im-radius));
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.im-team-profile .im-member-pill span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 900;
}

.im-team-profile .im-member-pill:hover,
.im-team-profile .im-member-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.14);
}

.im-team-profile .im-member-portrait {
  position: relative;
  margin: 30px;
  padding: 20px;
  overflow: hidden;
  border-radius: calc(var(--im-radius) * 2.5);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
}



.im-team-profile .im-member-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  background: var(--im-soft);
}

.im-team-profile .im-member-photo--initials {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(var(--im-cyan-rgb), 0.42), transparent 34%),
    linear-gradient(145deg, var(--im-blue-dark), var(--im-blue));
}

.im-team-profile .im-member-photo--initials span {
  color: #fff;
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.im-team-profile .im-member-portrait figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 3vw, 48px) clamp(20px, 3vw, 38px);
  background: linear-gradient(to top, rgba(3, 27, 77, 0.92) 0%, rgba(3, 27, 77, 0.6) 55%, transparent 100%);
  color: #fff;
}



.im-team-profile .im-member-portrait figcaption strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.im-team-profile .im-member-portrait figcaption span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.im-team-profile .im-member-story {
  padding-block: clamp(64px, 8vw, 112px);
}

.im-team-profile .im-member-story-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: start;
}

.im-team-profile .im-member-story-aside {
  position: sticky;
  top: 118px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--im-border);
  border-radius: calc(var(--im-radius) * 2.5);
  background: #fff;
  box-shadow: 0 20px 60px rgba(var(--im-ink-rgb), 0.08);
}

.im-team-profile .im-member-story-aside .im-member-kicker {
  color: var(--im-blue);
}

.im-team-profile .im-member-story-aside h2,
.im-team-profile .im-member-cta h2 {
  margin: 0;
  color: var(--im-ink);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.im-team-profile .im-member-story-aside p,
.im-team-profile .im-member-cta p {
  margin: 16px 0 0;
  color: var(--im-muted);
  font-size: 17px;
  line-height: 1.7;
}

.im-team-profile .im-member-bio-body {
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--im-border);
  border-radius: calc(var(--im-radius) * 3);
  background: linear-gradient(180deg, #fff 0%, var(--im-soft-bright, #f4fbff) 100%);
  box-shadow: 0 24px 72px rgba(var(--im-ink-rgb), 0.1);
}

.im-team-profile .im-member-bio-body > *:first-child {
  margin-top: 0;
}

.im-team-profile .im-member-bio-body > *:last-child {
  margin-bottom: 0;
}

.im-team-profile .im-member-bio-body p {
  max-width: 78ch;
  margin: 0 0 1.25em;
  color: #273d5d;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.82;
  text-wrap: pretty;
}

.im-team-profile .im-member-bio-body h2,
.im-team-profile .im-member-bio-body h3 {
  margin: 1.35em 0 0.55em;
  color: var(--im-ink);
  line-height: 1.12;
}

.im-team-profile .im-member-cta {
  padding-block: clamp(48px, 7vw, 86px);
}

.im-team-profile .im-member-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: calc(var(--im-radius) * 3);
  background:
    radial-gradient(circle at 88% 20%, rgba(var(--im-cyan-rgb), 0.22), transparent 34%),
    linear-gradient(135deg, var(--im-blue-deep), var(--im-blue-dark));
  color: #fff;
  box-shadow: 0 28px 82px rgba(var(--im-ink-rgb), 0.2);
}

.im-team-profile .im-member-cta h2,
.im-team-profile .im-member-cta p {
  color: #fff;
}

.im-team-profile .im-member-cta p {
  max-width: 66ch;
  color: rgba(255, 255, 255, 0.78);
}

.im-team-profile .im-member-pill--light {
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 980px) {
  .im-team-profile .im-member-hero-grid,
  .im-team-profile .im-member-story-grid,
  .im-team-profile .im-member-cta-inner {
    grid-template-columns: 1fr;
  }

  .im-team-profile .im-member-copy {
    max-width: none;
  }

  .im-team-profile .im-member-portrait {
    max-width: 520px;
  }

  .im-team-profile .im-member-story-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .im-team-profile .im-member-hero {
    padding-block: 46px 64px;
  }

  .im-team-profile h1 {
    font-size: clamp(44px, 15vw, 68px);
  }
  .im-team-profile .im-member-bio-body p {
    font-size: 16px;
  }

  .im-team-profile .im-member-actions,
  .im-team-profile .im-member-cta-actions {
    align-items: stretch;
  }

  .im-team-profile .im-member-actions > *,
  .im-team-profile .im-member-cta-actions > * {
    width: 100%;
  }

  .im-team-profile .im-member-photo {
    aspect-ratio: 1 / 1.12;
  }

  /* figcaption stays as gradient overlay on mobile */
}

/* ============================================================
   ABOUT PAGE — SAATOSA STYLE
   Centered pill+heading sections, rounded media, check-circle
   feature lists, a 3-up icon row, a stats band, and alternating
   white / blue-gradient sections. All copy/images come from the
   page's existing editable meta fields (see page-about.php).
   Local rounded-card radius derives from --im-radius so it tracks
   the token; the larger ~16-20px corners are calc(var(--im-radius)*N).
   ZEBRA GUARD: .im-ab-hero and .im-ab-band are dark/gradient
   sections, so each reasserts its background with a two-class
   selector (.im-section.im-ab-*) to beat theme.css
   .im-section:nth-of-type(odd) (specificity 0,2,0).
   ============================================================ */

.im-about-saatosa {
  --im-ab-radius: calc(var(--im-radius) * 2.5);   /* ~20px rounded media/cards */
  --im-ab-radius-sm: calc(var(--im-radius) * 1.75);
}

/* Generous whitespace on every band. */
.im-about-saatosa .im-section {
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 0;
}

/* ---- Centered section heading (pill + bold heading) ---- */
.im-about-saatosa .im-ab-heading.is-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.im-about-saatosa .im-ab-heading.is-center h2 {
  margin-inline: auto;
  text-align: center;
  max-width: 760px;
}
.im-about-saatosa .im-ab-heading .im-pill-label {
  letter-spacing: 0.08em;
}

/* ============================================================
   HERO — dark navy->blue gradient, centered, image bleeding down
   ============================================================ */
.im-section.im-ab-hero {
  /* Reassert dark background to beat zebra nth-of-type(odd). */
  background:
    radial-gradient(circle at 78% 14%, rgba(39, 199, 255, 0.20), transparent 30%),
    linear-gradient(135deg, var(--im-blue-deep) 0%, var(--im-blue-dark) 48%, var(--im-blue) 150%);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
.im-about-saatosa .im-ab-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.im-about-saatosa .im-ab-hero h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
}
.im-about-saatosa .im-ab-hero .im-ab-hero-sub {
  margin: 18px auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
}
/* Pill on dark: brighten so it reads on navy. */
.im-about-saatosa .im-ab-hero .im-pill-label,
.im-about-saatosa .im-ab-heading.is-on-dark .im-pill-label {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
/* Wide rounded image bleeding into the next (white) section. */
.im-about-saatosa .im-ab-hero-media {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * clamp(48px, 8vw, 120px));
}
.im-about-saatosa .im-ab-hero-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 38vw, 460px);
  object-fit: cover;
  border-radius: var(--im-ab-radius);
  box-shadow: var(--im-shadow);
}

/* ============================================================
   FEATURE-LIST BLOCKS — rounded image + check-circle bullets
   ============================================================ */
.im-about-saatosa .im-ab-feature {
  background: #fff;
}
/* First feature block sits below the bleeding hero image. */
.im-about-saatosa .im-ab-hero + .im-ab-feature {
  padding-top: clamp(96px, 12vw, 168px);
}
.im-about-saatosa .im-ab-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.im-about-saatosa .im-ab-media img {
  display: block;
  width: 100%;
  height: clamp(280px, 32vw, 440px);
  object-fit: cover;
  border-radius: var(--im-ab-radius);
  box-shadow: var(--im-shadow);
}
.im-about-saatosa .im-ab-feature-lede {
  margin: 0 0 24px;
  color: var(--im-muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
}
/* Reverse layout: copy left, image right is default; flip media side. */
.im-about-saatosa .im-ab-feature-reverse .im-ab-heading {
  margin-bottom: 24px;
}

/* Check-circle bullet list. */
.im-about-saatosa .im-ab-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.im-about-saatosa .im-ab-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.im-about-saatosa .im-ab-check {
  flex: none;
  margin-top: 2px;
  color: var(--im-blue);
}
.im-about-saatosa .im-ab-checklist strong {
  display: block;
  margin-bottom: 4px;
  color: var(--im-ink);
  font-size: 17px;
  font-weight: 800;
}
.im-about-saatosa .im-ab-checklist span {
  display: block;
  color: var(--im-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ============================================================
   ICON + STATS BAND — blue gradient, 3-up icon row + stats row
   ============================================================ */
.im-section.im-ab-band {
  /* Reassert gradient background to beat zebra nth-of-type(odd). */
  background:
    radial-gradient(circle at 12% 20%, rgba(39, 199, 255, 0.22), transparent 38%),
    linear-gradient(120deg, var(--im-blue) 0%, var(--im-blue-dark) 60%, var(--im-blue-deep) 130%);
}
.im-about-saatosa .im-ab-band h2,
.im-about-saatosa .im-ab-band h3 {
  color: #fff;
}
.im-about-saatosa .im-ab-icon-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  text-align: center;
}
.im-about-saatosa .im-ab-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.im-about-saatosa .im-ab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--im-cyan);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0.02em;
}
.im-about-saatosa .im-ab-icon-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
}
.im-about-saatosa .im-ab-icon-card p {
  margin: 0;
  max-width: 280px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.6;
}
/* Stats row on the gradient. */
.im-about-saatosa .im-ab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(36px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.im-about-saatosa .im-ab-stats div {
  text-align: left;
}
.im-about-saatosa .im-ab-stats strong {
  display: block;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 850;
  line-height: 1;
}
.im-about-saatosa .im-ab-stats small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .im-about-saatosa .im-ab-feature-grid {
    grid-template-columns: 1fr;
  }
  /* Keep media above copy when stacking, even in reverse layout. */
  .im-about-saatosa .im-ab-feature-reverse .im-ab-media {
    order: -1;
  }
  .im-about-saatosa .im-ab-icon-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .im-about-saatosa .im-ab-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .im-about-saatosa .im-ab-hero-media {
    margin-bottom: calc(-1 * clamp(32px, 10vw, 56px));
  }
  .im-about-saatosa .im-ab-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================================
   PRICING PAGE — SAATOSA STYLE
   Centered dark gradient hero + Monthly/Yearly toggle, three plan cards
   (featured middle), a white "Compare Between Plans" grouped table, and the
   reused FAQ accordion. All copy is editable in WordPress (see page-pricing.php).
   Tokens only: var(--im-blue), var(--im-blue-deep), var(--im-blue-dark),
   var(--im-cyan), var(--im-ink), var(--im-muted), var(--im-soft),
   var(--im-border), var(--im-radius), var(--im-section-space).
   ========================================================================= */

/* Visually-hidden helper for screen-reader-only compare-cell labels. */
.im-pricing-saatosa .im-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared pill eyebrow. */
.im-pricing-saatosa .im-pricing-pill {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.im-pricing-saatosa .im-pricing-pill.is-light {
  background: var(--im-soft);
  color: var(--im-blue);
  border-color: var(--im-border);
}

/* -------- Hero (DARK — zebra guard required) ---------------------------- */
/* Two-class selector (0,2,0) reasserts the dark gradient so it beats
   theme.css `.im-section:nth-of-type(odd)` and renders correctly. */
.im-section.im-pricing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(39, 199, 255, 0.28), transparent 42%),
    linear-gradient(135deg, var(--im-blue-deep) 0%, var(--im-blue-dark) 46%, var(--im-blue) 130%);
}
.im-section.im-pricing-hero,
.im-section.im-pricing-hero .im-pricing-hero-head h1,
.im-section.im-pricing-hero .im-pricing-hero-sub {
  color: #fff;
}

.im-pricing-hero-head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.im-pricing-hero-head h1 {
  margin: 0 0 16px;
  font-weight: 800;
}
.im-pricing-hero-sub {
  margin: 0 auto 28px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.82;
}

/* Monthly / Yearly switch. */
.im-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
}
.im-pricing-toggle-label {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.im-pricing-toggle-label.is-monthly { color: #fff; }
.im-pricing-toggle.is-yearly .im-pricing-toggle-label.is-monthly { color: rgba(255, 255, 255, 0.6); }
.im-pricing-toggle.is-yearly .im-pricing-toggle-label.is-yearly { color: #fff; }

.im-pricing-toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--im-blue);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.im-pricing-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s ease;
}
.im-pricing-toggle.is-yearly .im-pricing-toggle-thumb {
  transform: translateX(24px);
}

/* -------- Plan cards (sit on the dark hero) ----------------------------- */
.im-pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.im-pricing-plan-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--im-radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(4px);
}
/* Featured middle card: solid blue, elevated, white text. */
.im-pricing-plan-card.is-featured {
  background: var(--im-blue);
  border-color: var(--im-blue);
  box-shadow: 0 26px 60px rgba(0, 111, 230, 0.4);
  transform: translateY(-14px);
}
.im-pricing-plan-name {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
}
.im-pricing-plan-price {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.im-pricing-plan-price strong {
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1;
}
.im-pricing-plan-per {
  font-size: 14px;
  opacity: 0.7;
  font-weight: 500;
}
.im-pricing-plan-free {
  margin: 0 0 22px;
  padding-bottom: 22px;
  font-size: 14px;
  opacity: 0.72;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.im-pricing-plan-card.is-featured .im-pricing-plan-free {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.im-pricing-plan-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
}
.im-pricing-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.im-pricing-feature-icon {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-weight: 700;
}
.im-pricing-plan-features li.is-included .im-pricing-feature-icon {
  color: var(--im-cyan);
}
.im-pricing-plan-card.is-featured .im-pricing-plan-features li.is-included .im-pricing-feature-icon {
  color: #fff;
}
.im-pricing-plan-features li.is-excluded {
  opacity: 0.55;
}
.im-pricing-plan-features li.is-excluded .im-pricing-feature-icon {
  color: rgba(255, 255, 255, 0.6);
}
.im-pricing-plan-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* -------- Compare Between Plans (WHITE / light, no zebra guard needed) --- */
.im-pricing-compare-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.im-pricing-compare-head h2 {
  margin: 0;
  font-weight: 800;
  color: var(--im-ink);
}
/* NOTE: this site's Customizer sets --im-soft to #000000, so the table must
   not use it as a surface. Use an explicit light grey; labels stay --im-ink. */
.im-pricing-compare-table {
  max-width: 920px;
  margin: 0 auto;
  background: #eef3f9;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  padding: clamp(16px, 2vw, 24px);
}
.im-pricing-compare-group + .im-pricing-compare-group {
  margin-top: 24px;
}
.im-pricing-compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--im-border);
}
.im-pricing-compare-row:last-child {
  border-bottom: 0;
}
.im-pricing-compare-grouphead {
  background: #fff;
  border-radius: var(--im-radius);
  border-bottom: 0;
  margin-bottom: 4px;
}
.im-pricing-compare-feature {
  font-size: 15px;
  font-weight: 600;
  color: var(--im-ink);
}
.im-pricing-compare-grouphead .im-pricing-compare-feature {
  font-size: 17px;
}
.im-pricing-compare-col {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--im-ink);
}
.im-pricing-compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--im-border);
  font-size: 14px;
  font-weight: 700;
}
.im-pricing-compare-mark.is-yes {
  color: var(--im-blue);
  border-color: var(--im-blue);
}
.im-pricing-compare-mark.is-no {
  color: var(--im-muted);
}

/* -------- FAQ (light; reuses shared .im-faq-list styling) --------------- */
.im-pricing-faq-head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.im-pricing-faq-head h2 {
  margin: 0;
  font-weight: 800;
  color: var(--im-ink);
}

/* -------- Responsive ---------------------------------------------------- */
@media (max-width: 860px) {
  .im-pricing-plan-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .im-pricing-plan-card.is-featured {
    transform: none;
  }
  .im-pricing-compare-row {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .im-pricing-compare-table {
    overflow-x: auto;
  }
  .im-pricing-compare-row {
    min-width: 460px;
  }
}

/* Reduced-motion: disable the toggle thumb + card lift transitions. */
@media (prefers-reduced-motion: reduce) {
  .im-pricing-toggle-thumb,
  .im-pricing-plan-card {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Hero review badges — gold star glyphs instead of "4.7 5 stars" text.
   The rating now renders as filled star characters; brand logos resolve
   via im_theme_platform_logo_url (Google/HubSpot/WordPress) so the avatar
   shows the platform icon rather than a single letter.
   ------------------------------------------------------------------ */
.im-hero-review-stars {
  display: inline-flex;
  gap: 1px;
  color: #f5b50a;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
}

.im-hero-review > span img {
  object-fit: contain;
}

/* ------------------------------------------------------------------
   Pricing plan cards — contrast fix for the non-featured (side) cards.
   theme.css colors h3/p directly, beating the card's inherited #fff, so
   the side cards rendered dark-on-dark. The featured (middle) card keeps
   its existing dark text (readable on its lighter blue). Also neutralize
   the inherited ">" ::before marker that showed on the dark side cards.
   ------------------------------------------------------------------ */
.im-pricing-plan-features li::before {
  content: none !important;
}

.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-name,
.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-price,
.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-price strong {
  color: #fff;
}

.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-per,
.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-free {
  color: rgba(255, 255, 255, 0.72);
}

.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-features li {
  color: rgba(255, 255, 255, 0.9);
}

.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-cta.im-button-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}

.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-cta.im-button-outline:hover,
.im-pricing-plan-card:not(.is-featured) .im-pricing-plan-cta.im-button-outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ------------------------------------------------------------------
   "Automation systems" (ai-growth) tabs were stretched to 3 full-width
   columns. Make them compact auto-width pills that wrap, so the tab row
   no longer dominates the section.
   ------------------------------------------------------------------ */
.im-ai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  grid-template-columns: none;
}
.im-ai-tabs button {
  min-height: 0;
  width: auto;
  flex: 0 0 auto;
  padding: 13px 22px;
  font-size: 15px;
}

/* ------------------------------------------------------------------
   Pricing Monthly/Yearly toggle — actually swap the displayed price.
   child.js flags the pricing section with .is-yearly; show the matching
   price + per-label. Yearly price is the monthly x10 (two months free),
   computed in the template from the editable monthly price.
   ------------------------------------------------------------------ */
.im-pricing-plan-price .im-price-yearly,
.im-pricing-plan-per.im-per-yearly {
  display: none;
}
.is-yearly .im-pricing-plan-price .im-price-monthly,
.is-yearly .im-pricing-plan-per.im-per-monthly {
  display: none;
}
.is-yearly .im-pricing-plan-price .im-price-yearly {
  display: inline;
}
.is-yearly .im-pricing-plan-per.im-per-yearly {
  display: inline;
}

/* ------------------------------------------------------------------
   Automation systems section
   - Rotating highlighted phrase in the heading (swaps every 1.5s via
     child.js). inline-block + nowrap so the heading line never reflows.
   - The "From Strategy to Growth" CTA band used a brown-tinted dark
     gradient that blended into the near-black section; give it a brand
     blue gradient + border + extra spacing so it reads as a distinct band.
   ------------------------------------------------------------------ */
.im-rotate-word {
  display: inline-block;
  white-space: nowrap;
  color: var(--im-blue);
  transition: opacity 240ms ease, transform 240ms ease;
}
.im-rotate-word.is-swapping {
  opacity: 0;
  transform: translateY(-6px);
}

.im-ai-cta-band {
  margin-top: 64px;
  background: linear-gradient(120deg, var(--im-blue-deep), var(--im-blue));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .im-rotate-word {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Hero rotating phrase — locked to a stable 2-line heading.
   The lead-in stays on line 1; the rotating phrase sits on its own
   line (block + nowrap) so a longer phrase can NEVER wrap to a 3rd line
   or shift the layout. Font trimmed so the lead-in holds one line.
   Loops continuously via enhanceRotateWords() in child.js.
   ------------------------------------------------------------------ */
.im-hero h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 940px;
}
.im-hero h1 .im-hero-rotate {
  display: block;
  white-space: nowrap;
  color: var(--im-cyan);
}
@media (max-width: 600px) {
  .im-hero h1 .im-hero-rotate {
    white-space: normal;
  }
}

/* ------------------------------------------------------------------
   Hero spacing + rhythm (impeccable /layout pass)
   Problems fixed:
   - .im-hero forced min-height:760px with .im-hero-grid align-content:end,
     so content dumped to the bottom and left a dead band under the nav.
     Drop the forced height and top-align with fluid padding so the hero
     is sized by its content and the void disappears.
   - The dark hero image now covers the full (shorter) hero height on the
     right so that column reads as an intentional visual, not empty space.
   - The story row used 330px min-width cards in a horizontal scroller
     (only two visible) with a floating animation. Make three equal cards
     fit the content column, remove the scroller and the float.
   ------------------------------------------------------------------ */
.im-hero {
  min-height: 0;
  /* Top padding must clear the absolute-positioned header overlaid on the
     hero; keep it generous. Bottom is free to tighten. */
  padding-block: clamp(116px, 11vw, 140px) clamp(44px, 5vw, 68px);
}
.im-hero-grid {
  align-content: start;
  min-height: 0;
  gap: clamp(22px, 2.6vw, 34px);
}
.im-hero-media {
  inset: 0 0 0 auto;
  width: min(56vw, 1060px);
}
.im-hero-media img {
  min-height: 100%;
  height: 100%;
  object-position: center right;
}
.im-hero-story-row {
  max-width: 720px;
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: clamp(18px, 2.4vw, 24px);
  gap: clamp(16px, 2vw, 26px);
  overflow: visible;
}
.im-hero-story-row a {
  min-width: 0;
  flex: 1 1 0;
  animation: none;
}
@media (max-width: 760px) {
  .im-hero-story-row {
    flex-wrap: wrap;
  }
  .im-hero-story-row a {
    flex-basis: 100%;
  }
}

/* ------------------------------------------------------------------
   Solution pages — keep each section's cards on ONE even row.
   "Signals we improve" and "What gets built" used a split layout
   (heading beside the cards), squeezing the cards into a partial width
   so they wrapped unevenly (3+1, 4+1). Stack the heading above and give
   the cards the full width, then lay every item out in a single row of
   equal columns (auto-columns) so any item count fits one line.
   Delivery workflow (timeline) gets the same single-row treatment.
   ------------------------------------------------------------------ */
.im-solution-ref-split-heading,
.im-solution-ref-component-grid {
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.im-solution-ref-card-row,
.im-solution-ref-build-grid,
.im-solution-ref-timeline {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
@media (max-width: 1024px) {
  .im-solution-ref-card-row,
  .im-solution-ref-build-grid,
  .im-solution-ref-timeline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .im-solution-ref-card-row,
  .im-solution-ref-build-grid,
  .im-solution-ref-timeline {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Service Method: 5 steps on one row (was repeat(4) -> 4+1).
   Service Deliverables: even 3-per-row (3+3 for six) instead of auto-fit.
   ------------------------------------------------------------------ */
.im-service-method-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.im-service-deliverable-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .im-service-method-list,
  .im-service-deliverable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .im-service-method-list,
  .im-service-deliverable-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Per-card topic icons on technology "Use cases"/components and industry
   "Core capabilities"/playbook cards. Each card renders an inline SVG
   (im_theme_keyword_icon) chosen from its title; hide the old ::before box.
   ------------------------------------------------------------------ */
.im-solution-signal-card::before,
.im-industry-solution-card::before {
  display: none !important;
}
.im-card-kw-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(0, 111, 230, 0.1);
  color: var(--im-blue);
}
.im-card-kw-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Homepage service cards: size the inline SVG within the 34px icon badge. */
.im-service-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Home "Growth signals" outcome cards: size the inline SVG icon in the chip. */
.im-outcome-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Solution hero + CTA art: when a custom image is set, hide the CSS mockup
   and show the image filling the container. */
.im-solution-dashboard.has-custom-media > :not(.im-solution-custom-media),
.im-solution-cta-art.has-custom-media > :not(.im-solution-custom-media) {
  display: none !important;
}
.im-solution-custom-media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 16px;
}

/* Topic-icon chips on dark card sections (tech components, industry playbook)
   need lighter contrast than brand blue on navy. */
.im-solution-component-card .im-card-kw-icon,
.im-industry-playbook-card .im-card-kw-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--im-cyan);
}

/* Solution sections (Signals / What gets built / Delivery workflow): size the
   topic SVG inside the existing 52px gradient circle (white icon inherits). */
.im-solution-ref-mini-card > span svg,
.im-solution-ref-build-grid article > span svg,
.im-solution-ref-timeline li > span svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Solution icon chips: consistent high-contrast blue gradient with white icon
   across Signals / What gets built / Delivery workflow. */
.im-solution-ref-mini-card > span,
.im-solution-ref-build-grid article > span,
.im-solution-ref-timeline li > span {
  background: linear-gradient(135deg, var(--im-blue), #27c7ff) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------
   Home testimonials: auto-scrolling marquee (one-by-one), photo avatars
   in front of the name, and no oversized feature image.
   Each card carries its own trailing margin so the duplicated set loops
   seamlessly at translateX(-50%). Pauses on hover; static for reduced motion.
   ------------------------------------------------------------------ */
.im-testimonial-marquee-wrap {
  position: relative;
}
.im-marquee-pause {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 2;
  padding: 4px 12px;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  background: transparent;
  color: var(--im-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.im-marquee-pause:hover,
.im-marquee-pause[aria-pressed="true"] {
  color: var(--im-blue);
  border-color: var(--im-blue);
}
.im-testimonial-marquee {
  margin-top: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  will-change: scroll-position;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.im-testimonial-marquee::-webkit-scrollbar {
  display: none;
}
.im-testimonial-marquee.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.im-testimonial-marquee.is-dragging a {
  pointer-events: none;
}
.im-testimonial-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  padding-block: 8px;
}
.im-testimonial-marquee .im-testimonial-card {
  flex: 0 0 360px;
  width: 360px;
  margin-right: 24px;
  background: #fff;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: 0 18px 50px rgba(7, 28, 66, 0.08);
}
.im-testimonial-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--im-blue-deep), var(--im-blue));
  color: #fff;
  font-weight: 800;
}
.im-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .im-testimonial-marquee .im-testimonial-card {
    flex-basis: 300px;
    width: 300px;
  }
}

/* D-004: hero dot-grid texture (always present, especially visible when no CMS image) */
.im-hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* D-004: mobile hero — boost image visibility from 0.32 to 0.48 */
@media (max-width: 700px) {
  .im-hero-media {
    opacity: 0.48;
  }
}