/* =========================================================
   IFE - Site Optimizations: front-end styles
   Scoped to .ife-section. Brand tokens can be overridden per
   widget from the Style tab (they map to the --ife-* vars).
   ========================================================= */

.ife-section {
  --ife-teal: #0D7377;
  --ife-teal-dark: #0A5C5F;
  --ife-navy: #16213E;
  --ife-navy-light: #1E2D4F;
  --ife-charcoal: #1A1A2E;
  --ife-coral: #E8553D;
  --ife-coral-hover: #D04530;
  --ife-slate: #64748B;
  --ife-offwhite: #F8F9FA;
  --ife-amber: #F59E0B;
  --ife-emerald: #10B981;
  --ife-indigo: #6366F1;

  --ife-font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --ife-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ife-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* tone defaults (white) */
  --ife-bg: #FFFFFF;
  --ife-heading: var(--ife-charcoal);
  --ife-text: var(--ife-slate);
  --ife-strong: var(--ife-charcoal);
  --ife-card: var(--ife-offwhite);
  --ife-card-alt: #FFFFFF;
  --ife-border: #E5E7EB;
  --ife-accent: var(--ife-teal);
  /* Buttons carry white text, and white on brand coral #E8553D is 3.62:1 (AA needs
     4.5:1 at button sizes). The CTA is the brand coral darkened just enough to pass:
     #C9442E is 4.83:1, the hover #B23A27 is 5.95:1. --ife-coral itself is unchanged
     for decorative uses (icon tints, borders, shadows) where no text sits on it. */
  --ife-cta: #C9442E;
  --ife-cta-hover: #B23A27;
  --ife-radius: 12px;

  background: var(--ife-bg);
  color: var(--ife-text);
  font-family: var(--ife-font-body);
  padding: 80px 0;
  line-height: 1.6;
  box-sizing: border-box;
}
.ife-section *, .ife-section *::before, .ife-section *::after { box-sizing: inherit; }

.ife-tone-offwhite { --ife-bg: var(--ife-offwhite); --ife-card: #FFFFFF; --ife-card-alt: var(--ife-offwhite); }
.ife-tone-navy {
  --ife-bg: var(--ife-navy);
  --ife-heading: #FFFFFF;
  --ife-text: #9CA3AF;
  --ife-strong: #FFFFFF;
  --ife-card: var(--ife-navy-light);
  --ife-card-alt: rgba(255,255,255,0.05);
  --ife-border: rgba(255,255,255,0.12);
}

.ife-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ife-faq .ife-container { max-width: 820px; }

/* ---------- Typography ---------- */
/* :where() keeps these element defaults at (0,1,0), so they still beat the theme's bare h1/p
   resets but lose to any later class rule (.ife-intro, .ife-card-title, .ife-footnote, ...).
   Written as plain ".ife-section p" they were (0,1,1) and silently cancelled those rules'
   margins and line-heights. */
.ife-section :where(h1, h2, h3, h4) {
  font-family: var(--ife-font-heading);
  color: var(--ife-heading);
  margin: 0;
  line-height: 1.2;
}
.ife-section :where(p) { margin: 0 0 1em; }
.ife-section :where(p:last-child) { margin-bottom: 0; }
.ife-section strong { color: var(--ife-strong); font-weight: 600; }
/* Buttons are excluded: this selector is (0,1,1) and would otherwise outrank the
   (0,1,0) .ife-btn--* colour rules, turning primary-button text teal instead of white.
   Every button carries the base .ife-btn class, so one exclusion covers all variants. */
.ife-section a:not(.ife-btn) { color: var(--ife-accent); }
.ife-tone-navy a:not(.ife-btn) { color: #5FC5C9; }

.ife-section-header { margin-bottom: 48px; }
.ife-align-center { text-align: center; }
.ife-align-center .ife-intro { margin-left: auto; margin-right: auto; }
.ife-align-left { text-align: left; }

.ife-eyebrow {
  display: inline-block;
  font-family: var(--ife-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(13,115,119,0.10);
  color: var(--ife-accent);
  margin-bottom: 16px;
}
.ife-tone-navy .ife-eyebrow { background: rgba(255,255,255,0.10); color: #E8ECF3; }
.ife-eyebrow--pill { font-family: var(--ife-font-body); text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 500; padding: 6px 14px; }

.ife-heading { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; }
.ife-heading--hero { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; margin-bottom: 22px; }
.ife-intro { font-size: 1.05rem; max-width: 680px; margin-top: 16px; }
.ife-intro--hero { font-size: 1.15rem; margin-bottom: 30px; }

.ife-card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.ife-card-text { font-size: 0.95rem; color: var(--ife-text); }
.ife-footnote { font-size: 0.85rem; color: var(--ife-text); margin-top: 28px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.ife-disclosure { font-style: italic; }

/* ---------- Layout ---------- */
.ife-grid { display: grid; gap: 28px; }
.ife-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ife-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ife-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ife-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ife-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ife-section { padding: 56px 0; }
  .ife-container { padding: 0 16px; }
  .ife-grid--2, .ife-grid--3, .ife-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ife-section-header { margin-bottom: 32px; }
}

/* ---------- Cards ---------- */
.ife-card {
  background: var(--ife-card);
  border: 1px solid var(--ife-border);
  border-radius: var(--ife-radius);
  padding: 32px;
  position: relative;
}
.ife-card--wide { padding: 32px; }
.ife-card--accent-left { border-left: 4px solid var(--ife-accent); }
.ife-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ife-card-head .ife-card-title { margin-bottom: 0; }

.ife-icon-badge {
  width: 48px; height: 48px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px; font-size: 1.25rem; flex-shrink: 0;
}
.ife-icon-badge--round { border-radius: 50%; width: 64px; height: 64px; font-size: 1.5rem; }
.ife-icon-badge--teal { background: rgba(13,115,119,0.10); color: var(--ife-teal); }
.ife-icon-badge--coral { background: rgba(232,85,61,0.10); color: var(--ife-coral); }
.ife-icon-badge--amber { background: rgba(245,158,11,0.12); color: var(--ife-amber); }
.ife-icon-badge--indigo { background: rgba(99,102,241,0.12); color: var(--ife-indigo); }
.ife-icon-badge--emerald { background: rgba(16,185,129,0.12); color: var(--ife-emerald); }
.ife-icon-badge svg { width: 1em; height: 1em; fill: currentColor; }
.ife-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ife-icon svg { width: 1em; height: 1em; fill: currentColor; }
.ife-icon--accent { color: var(--ife-accent); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.ife-tone-navy .ife-icon--accent { color: #5FC5C9; }

/* ---------- Lists ---------- */
.ife-check-list, .ife-x-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ife-check-list--compact { gap: 6px; font-size: 0.9rem; }
.ife-check-list li, .ife-x-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ife-strong); font-size: 0.95rem; }
.ife-check, .ife-x {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ife-check { background: rgba(16,185,129,0.15); }
.ife-check::before { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--ife-emerald); border-bottom: 2px solid var(--ife-emerald); transform: rotate(-45deg) translate(1px, -1px); }
.ife-x { background: rgba(100,116,139,0.15); }
.ife-x::before { content: "\00d7"; color: var(--ife-slate); font-size: 14px; line-height: 1; font-weight: 700; }
.ife-check-list a { color: var(--ife-strong); text-decoration: underline; text-decoration-color: rgba(13,115,119,0.4); text-underline-offset: 3px; }
.ife-check-list a:hover { color: var(--ife-accent); }

/* ---------- Buttons ---------- */
/* Themes and Elementor commonly set `white-space: nowrap` on `button`, and our button
   labels inherit it, so long labels get clipped instead of wrapping. Reset it for every
   button we render. Flex children additionally need min-width:0 before they will shrink,
   which is why the FAQ question and the option card text carry it below. */
.ife-section button, .ife-header button { white-space: normal; }

.ife-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  font-family: var(--ife-font-body); line-height: 1.2; transition: background .15s, color .15s, border-color .15s;
}
.ife-btn--primary { background: var(--ife-cta); color: #fff; box-shadow: 0 8px 20px -8px rgba(232,85,61,0.6); }
.ife-btn--primary:hover { background: var(--ife-cta-hover); color: #fff; }
.ife-btn--outline { background: transparent; color: var(--ife-accent); border-color: var(--ife-accent); }
.ife-btn--outline:hover { background: var(--ife-accent); color: #fff; }
.ife-tone-navy .ife-btn--outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.ife-tone-navy .ife-btn--outline:hover { background: #fff; color: var(--ife-navy); }
.ife-btn--ghost { background: transparent; color: var(--ife-text); padding-left: 12px; padding-right: 12px; }
.ife-btn--ghost:hover { color: var(--ife-strong); }
.ife-btn--block { width: 100%; margin-top: 22px; }
.ife-arrow { font-size: 1.05em; line-height: 1; }
.ife-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ife-cta-row--center { justify-content: center; margin-top: 40px; }
.ife-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--ife-accent); text-decoration: none; margin-top: 18px; }
.ife-textlink:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.ife-hero { padding-top: 96px; }
.ife-hero-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .ife-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.ife-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; align-items: center; }
.ife-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 500; color: var(--ife-strong);
  background: var(--ife-card-alt); border: 1px solid var(--ife-border);
  padding: 6px 12px; border-radius: 999px;
}
.ife-pill-icon { color: var(--ife-accent); display: inline-flex; }
.ife-pill-icon svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.ife-bbb-seal { height: 40px; width: auto; display: block; }
.ife-bbb-link { display: inline-flex; }
.ife-hero-aside { display: grid; gap: 20px; }

.ife-video-card { margin: 0; background: var(--ife-card-alt); border: 1px solid var(--ife-border); border-radius: var(--ife-radius); overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0,0,0,0.25); }
.ife-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ife-navy); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.ife-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ife-video-frame--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ife-video-frame--placeholder { border: 2px dashed rgba(255,255,255,0.35); }
.ife-video-frame--placeholder .ife-placeholder-note { color: #C8CEDA; font-size: 0.8rem; padding: 0 24px; text-align: center; }
.ife-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); position: relative; }
.ife-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid var(--ife-coral); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.ife-video-card figcaption { padding: 12px 16px; font-size: 0.82rem; color: var(--ife-text); }

.ife-stats-card { background: var(--ife-card-alt); border: 1px solid var(--ife-border); border-radius: var(--ife-radius); padding: 28px; box-shadow: 0 20px 40px -24px rgba(0,0,0,0.2); }
.ife-stats-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: #047857; margin-bottom: 18px; }
/* Brand emerald is 2.4:1 as text on off-white; emerald-700 is 5.20:1. The dot keeps the brand
   emerald, since it is decorative. On navy the brand emerald passes on its own. */
.ife-tone-navy .ife-stats-status { color: var(--ife-emerald); }
.ife-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ife-emerald); animation: ife-pulse 2s infinite; }
@keyframes ife-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ife-dot { animation: none; } }
.ife-stats { margin: 0; display: grid; gap: 0; }
.ife-stat { display: flex; flex-direction: column-reverse; padding: 12px 0; border-top: 1px solid var(--ife-border); }
.ife-stat:first-child { border-top: 0; padding-top: 0; }
.ife-stat dd { margin: 0; font-family: var(--ife-font-heading); font-weight: 800; font-size: 1.9rem; color: var(--ife-heading); line-height: 1.1; }
.ife-stat dt { font-size: 0.85rem; color: var(--ife-text); }
.ife-stats--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0 0 20px; }
.ife-stats--row .ife-stat { border: 1px solid var(--ife-border); border-radius: 10px; padding: 14px 16px; background: var(--ife-card); flex-direction: column; }
.ife-stats-footnote { margin-top: 14px; font-size: 0.75rem; color: var(--ife-text); }

/* ---------- Services ---------- */
.ife-services-layout { display: grid; gap: 28px; }
.ife-service-head { display: flex; gap: 18px; align-items: flex-start; }
.ife-service-head .ife-icon-badge { margin-bottom: 0; }
.ife-service--primary { border: 2px solid var(--ife-accent); background: var(--ife-card); }
.ife-service--primary .ife-card-title { font-size: 1.5rem; }
.ife-service--primary .ife-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.ife-service--supporting { background: var(--ife-card-alt); }
.ife-service--supporting .ife-service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 840px) {
  .ife-service--primary .ife-service-list, .ife-service--supporting .ife-service-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Product spotlight ---------- */
.ife-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ife-product--image-left .ife-product-media { order: -1; }
.ife-product-copy .ife-section-header { margin-bottom: 8px; }
/* Screenshot placeholder switched off and no screenshot: one centred column, as the founder
   section does without its photo. */
.ife-product-grid--no-media { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
/* A screenshot that opens full size in the lightbox below. */
.ife-zoom { position: relative; display: block; border-radius: var(--ife-radius); cursor: zoom-in; }
.ife-zoom:focus-visible { outline: 2px solid var(--ife-accent); outline-offset: 4px; }
.ife-zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(22,33,62,0.85); color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.2; pointer-events: none; }
.ife-zoom:hover .ife-zoom-hint, .ife-zoom:focus-visible .ife-zoom-hint { background: var(--ife-navy); }
.ife-product-shot { width: 100%; height: auto; border-radius: var(--ife-radius); border: 1px solid var(--ife-border); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35); display: block; }
.ife-product-shot--placeholder { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--ife-card) 0 12px, var(--ife-card-alt) 12px 24px); display: flex; align-items: center; justify-content: center; color: var(--ife-text); font-family: var(--ife-font-mono); font-size: 0.8rem; text-align: center; padding: 24px; }
@media (max-width: 900px) { .ife-product-grid { grid-template-columns: minmax(0, 1fr); } .ife-product--image-left .ife-product-media { order: 0; } }

/* ---------- Steps ---------- */
.ife-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; }
.ife-step-icon { margin: 0 auto 18px; }
.ife-step-number { font-family: var(--ife-font-heading); font-weight: 800; font-size: 2.75rem; color: #7C8799; line-height: 1; margin-bottom: 8px; }
.ife-tone-navy .ife-step-number { color: #6B7891; }
@media (max-width: 840px) { .ife-steps { grid-template-columns: minmax(0, 1fr); } }

.ife-callout { margin-top: 44px; display: flex; gap: 24px; align-items: center; justify-content: space-between; background: var(--ife-card); border: 1px solid var(--ife-border); border-left: 4px solid var(--ife-cta); border-radius: var(--ife-radius); padding: 24px 28px; }
.ife-callout .ife-btn { flex-shrink: 0; }
@media (max-width: 700px) { .ife-callout { flex-direction: column; align-items: flex-start; } }

.ife-agreement { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding: 22px 24px; background: var(--ife-card); border: 1px solid var(--ife-border); border-radius: var(--ife-radius); font-size: 0.9rem; font-weight: 500; color: var(--ife-strong); }
.ife-agreement > span { display: inline-flex; align-items: center; gap: 8px; }
.ife-agreement .ife-check { margin-top: 0; }

/* ---------- Pricing ---------- */
.ife-tiers .ife-card { display: flex; flex-direction: column; }
.ife-tiers .ife-check-list { flex: 1; align-content: start; }
.ife-tier--featured { border: 2px solid var(--ife-cta); box-shadow: 0 20px 40px -24px rgba(232,85,61,0.5); }
.ife-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ife-cta); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.ife-price { font-family: var(--ife-font-heading); font-weight: 800; font-size: 1.25rem; color: var(--ife-heading); margin-top: 4px; }
.ife-price-note { font-size: 0.82rem; color: var(--ife-text); margin: 4px 0 14px; }
.ife-policies { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ife-policy { display: flex; gap: 14px; align-items: flex-start; }
.ife-policy-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
@media (max-width: 840px) { .ife-policies { grid-template-columns: minmax(0, 1fr); } }
.ife-guarantee { margin-top: 28px; display: flex; gap: 16px; align-items: flex-start; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.35); border-radius: var(--ife-radius); padding: 20px 24px; }
.ife-guarantee .ife-card-text { color: #475569; } /* slate on the mint panel was 4.19:1; this is 6.69:1 */
.ife-tone-navy .ife-guarantee .ife-card-text { color: var(--ife-text); }
.ife-guarantee-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ife-emerald); position: relative; }
.ife-guarantee-icon::before { content: ""; position: absolute; left: 11px; top: 9px; width: 13px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }

/* ---------- Recent work ---------- */
.ife-work-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ife-work-card > * { padding-left: 28px; padding-right: 28px; }
.ife-work-card > .ife-work-image { padding: 0; }
.ife-work-image img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.ife-work-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 24px; margin-bottom: 12px; }
.ife-work-client { font-family: var(--ife-font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ife-accent); }
.ife-tone-navy .ife-work-client { color: #5FC5C9; }
.ife-work-logo { max-height: 32px; width: auto; }
.ife-tag { font-size: 0.72rem; color: var(--ife-text); background: var(--ife-card-alt); border: 1px solid var(--ife-border); padding: 3px 10px; border-radius: 999px; }
.ife-work-card .ife-check-list { flex: 1; align-content: start; }
.ife-work-card .ife-textlink, .ife-work-card .ife-check-list { margin-bottom: 26px; }
.ife-work-card .ife-check-list + .ife-textlink { margin-top: 0; }

/* ---------- What you get ---------- */
.ife-wyg-item { display: flex; gap: 12px; align-items: flex-start; }
.ife-wyg-title { font-weight: 600; font-size: 0.95rem; color: var(--ife-strong); }
.ife-wyg-text { font-size: 0.82rem; color: var(--ife-text); margin-top: 2px; }
.ife-downloads { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ife-border); display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ife-downloads .ife-textlink { margin-top: 0; }

/* ---------- Founder ---------- */
.ife-founder-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }
.ife-founder-photo img, .ife-founder-placeholder { width: 100%; max-width: 380px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; display: block; margin: 0 auto; }
.ife-founder-placeholder { background: var(--ife-card); border: 1px solid var(--ife-border); display: flex; align-items: center; justify-content: center; color: var(--ife-text); font-size: 0.85rem; }
.ife-founder-name { font-size: 1.6rem; font-weight: 700; }
.ife-founder-role { font-family: var(--ife-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ife-accent); margin: 6px 0 18px; }
.ife-prose { font-size: 0.97rem; color: var(--ife-text); }
.ife-prose p { margin-bottom: 1em; }
.ife-prose p:last-child { margin-bottom: 0; }
.ife-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.ife-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ife-card); border: 1px solid var(--ife-border); border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; color: var(--ife-strong); }
.ife-chip-icon { color: var(--ife-accent); display: inline-flex; }
.ife-chip-icon svg { width: 1em; height: 1em; fill: currentColor; }
@media (max-width: 900px) { .ife-founder-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ife-chips { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fit ---------- */
.ife-fit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ife-fit-head .ife-card-title { margin-bottom: 0; }
.ife-fit-badge { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; position: relative; }
.ife-fit-badge--good { background: rgba(16,185,129,0.15); }
.ife-fit-badge--good::before { content: ""; position: absolute; left: 13px; top: 11px; width: 13px; height: 7px; border-left: 3px solid var(--ife-emerald); border-bottom: 3px solid var(--ife-emerald); transform: rotate(-45deg); }
.ife-fit-badge--bad { background: rgba(100,116,139,0.15); }
.ife-fit-badge--bad::before { content: "\00d7"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ife-slate); font-size: 22px; font-weight: 700; }
.ife-fit-card--good { border-color: rgba(16,185,129,0.4); }

/* ---------- FAQ ---------- */
.ife-faq-list { display: grid; gap: 12px; }
.ife-faq-item { border: 1px solid var(--ife-border); border-radius: var(--ife-radius); background: var(--ife-card); overflow: hidden; }
.ife-faq-q { margin: 0; font-size: 1rem; }
.ife-faq-q button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: 0; padding: 18px 22px; text-align: left; cursor: pointer;
  font-family: var(--ife-font-heading); font-weight: 600; font-size: 1rem; color: var(--ife-heading);
}
/* Long questions must wrap. Two things stop them by default:
   1. Themes and Elementor commonly set `white-space: nowrap` on `button`, which the
      question text inherits, so we reset it explicitly here.
   2. The question is a flex item, and `min-width: auto` stops it shrinking below its
      intrinsic width.
   Without both, long questions overflow the card, get clipped by the overflow:hidden
   on .ife-faq-item, and push the chevron out of view. */
.ife-faq-q button > span:not(.ife-faq-chevron) { min-width: 0; overflow-wrap: anywhere; }
.ife-faq-chevron { flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--ife-text); border-bottom: 2px solid var(--ife-text); transform: rotate(45deg); transition: transform .2s; margin-top: -4px; }
.ife-faq-item.is-open .ife-faq-chevron { transform: rotate(225deg); margin-top: 4px; }
.ife-faq-a { padding: 0 22px 20px; }
.ife-faq-a .ife-prose { font-size: 0.95rem; }

/* ---------- Booking ---------- */
.ife-book-grid { display: grid; gap: 28px; }
.ife-book--two-col .ife-book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .ife-book--two-col .ife-book-grid { grid-template-columns: minmax(0, 1fr); } }
.ife-panel { background: var(--ife-card-alt); border: 1px solid var(--ife-border); border-radius: var(--ife-radius); padding: 28px; }
.ife-tone-navy .ife-panel { background: rgba(255,255,255,0.04); }
.ife-panel-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.ife-response { font-size: 0.88rem; margin-bottom: 18px; }
.ife-calendar-frame { width: 100%; border: 0; border-radius: 8px; background: #fff; }
.ife-calendar-placeholder { min-height: 360px; border: 2px dashed var(--ife-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-family: var(--ife-font-mono); font-size: 0.8rem; color: var(--ife-text); }
.ife-calendar-embed iframe { max-width: 100%; }

.ife-progress { height: 6px; border-radius: 999px; background: rgba(127,127,127,0.2); margin-bottom: 24px; overflow: hidden; }
.ife-progress-bar { height: 100%; background: var(--ife-cta); border-radius: 999px; transition: width .3s; }
.ife-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ife-step-title { font-family: var(--ife-font-heading); font-weight: 700; font-size: 1.1rem; color: var(--ife-heading); margin-bottom: 18px; padding: 0; }
.ife-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
@media (max-width: 520px) { .ife-option-grid { grid-template-columns: minmax(0, 1fr); } }
.ife-option {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--ife-card); border: 1px solid var(--ife-border); border-radius: 10px; padding: 14px;
  color: var(--ife-strong); font-family: var(--ife-font-body); transition: border-color .15s, background .15s;
}
.ife-option:hover { border-color: var(--ife-accent); }
.ife-option[aria-pressed="true"] { border-color: var(--ife-cta); box-shadow: 0 0 0 2px rgba(232,85,61,0.35); background: rgba(232,85,61,0.08); }
.ife-option-icon { color: var(--ife-accent); font-size: 1.3rem; flex-shrink: 0; display: inline-flex; }
.ife-option-icon svg { width: 1em; height: 1em; fill: currentColor; }
.ife-option-text { display: flex; flex-direction: column; min-width: 0; }
.ife-option-title { font-weight: 600; font-size: 0.92rem; }
.ife-option-sub { font-size: 0.78rem; color: var(--ife-text); }

.ife-field { margin-bottom: 16px; }
.ife-field label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ife-strong); margin-bottom: 6px; }
.ife-req { color: var(--ife-cta); }
.ife-tone-navy .ife-req { color: #F07A63; } /* 5.80:1 on navy */
.ife-field input, .ife-field select, .ife-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--ife-border);
  background: var(--ife-card); color: var(--ife-strong); font-family: var(--ife-font-body); font-size: 0.95rem;
}
.ife-tone-navy .ife-field input, .ife-tone-navy .ife-field select, .ife-tone-navy .ife-field textarea { background: rgba(255,255,255,0.06); color: #fff; }
.ife-tone-navy .ife-field select option { color: var(--ife-charcoal); }
.ife-field input:focus, .ife-field select:focus, .ife-field textarea:focus { outline: 2px solid var(--ife-cta); outline-offset: 1px; border-color: transparent; }
.ife-field textarea { resize: vertical; }
.ife-field-help { font-size: 0.78rem; color: var(--ife-text); margin-top: 14px; }
.ife-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ife-step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ife-step-nav--end { justify-content: flex-end; }
.ife-form-error { color: #FCA5A5; font-size: 0.85rem; margin-top: 12px; }
.ife-tone-white .ife-form-error, .ife-tone-offwhite .ife-form-error { color: #B91C1C; }
.ife-form.is-sending { opacity: .6; pointer-events: none; }
.ife-form-success { text-align: center; padding: 32px 0; }
.ife-success-icon { display: inline-block; width: 56px; height: 56px; border-radius: 50%; background: rgba(16,185,129,0.18); position: relative; margin-bottom: 18px; }
.ife-success-icon::before { content: ""; position: absolute; left: 18px; top: 16px; width: 20px; height: 11px; border-left: 3px solid var(--ife-emerald); border-bottom: 3px solid var(--ife-emerald); transform: rotate(-45deg); }

/* ---------- Case study ---------- */
.ife-cs-head { max-width: 820px; margin-bottom: 36px; }
.ife-cs-logo { max-height: 44px; width: auto; margin-bottom: 18px; display: block; }
.ife-cs-hero { margin: 0 0 40px; }
.ife-cs-hero img { width: 100%; border-radius: var(--ife-radius); border: 1px solid var(--ife-border); display: block; }
.ife-cs-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .ife-cs-grid { grid-template-columns: minmax(0, 1fr); } }
.ife-cs-section { margin-bottom: 36px; }
.ife-cs-title { font-size: 1.45rem; font-weight: 700; margin-bottom: 14px; }
.ife-cs-aside .ife-card { position: sticky; top: 100px; }
.ife-facts { margin: 0; display: grid; gap: 12px; }
.ife-facts--terms { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ife-border); }
.ife-facts dt { font-family: var(--ife-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ife-text); }
.ife-facts dd { margin: 2px 0 0; font-size: 0.95rem; color: var(--ife-strong); }
.ife-quote { margin: 0; padding: 24px 28px; border-left: 4px solid var(--ife-accent); background: var(--ife-card); border-radius: 0 var(--ife-radius) var(--ife-radius) 0; }
.ife-quote p { font-size: 1.1rem; color: var(--ife-strong); font-style: italic; }
.ife-quote footer { font-size: 0.88rem; color: var(--ife-text); }

/* =========================================================
   Site header
   ========================================================= */
.ife-header {
  --ife-teal: #0D7377;
  --ife-navy: #16213E;
  --ife-charcoal: #1A1A2E;
  --ife-coral: #E8553D;
  --ife-coral-hover: #D04530;
  --ife-slate: #64748B;
  --ife-font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --ife-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ife-bg: rgba(255,255,255,0.95);
  --ife-heading: var(--ife-charcoal);
  --ife-text: var(--ife-charcoal);
  --ife-strong: var(--ife-charcoal);
  --ife-accent: var(--ife-teal);
  /* Buttons carry white text, and white on brand coral #E8553D is 3.62:1 (AA needs
     4.5:1 at button sizes). The CTA is the brand coral darkened just enough to pass:
     #C9442E is 4.83:1, the hover #B23A27 is 5.95:1. --ife-coral itself is unchanged
     for decorative uses (icon tints, borders, shadows) where no text sits on it. */
  --ife-cta: #C9442E;
  --ife-cta-hover: #B23A27;
  --ife-border: #F0F1F3;

  position: relative;
  z-index: 100;
  background: var(--ife-bg);
  border-bottom: 1px solid var(--ife-border);
  font-family: var(--ife-font-body);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  transition: box-shadow .2s, background .2s;
}
.ife-header *, .ife-header *::before, .ife-header *::after { box-sizing: border-box; }
.ife-header--sticky { position: sticky; top: 0; }
/* In a Theme Builder header the widget sits inside Elementor's location wrapper, which is
   exactly as tall as the header, so sticky on .ife-header alone has no room to stick. Stick
   the wrapper instead, below the admin bar when it shows (it scrolls away at 600px and under). */
.elementor-location-header:has(.ife-header--sticky) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }
@media (max-width: 600px) { .elementor-location-header:has(.ife-header--sticky) { top: 0; } }
/* Land section links below the stuck header (80px tall, 64px at 1024px and under, plus border). */
html:has(.ife-header--sticky) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 81px); }
@media (max-width: 1024px) { html:has(.ife-header--sticky) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 65px); } }
.ife-header--transparent { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ife-header--transparent.is-scrolled { background: var(--ife-bg); border-bottom-color: var(--ife-border); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); }
.ife-header.is-scrolled { box-shadow: 0 4px 20px -12px rgba(0,0,0,0.35); }

.ife-header-inner { margin: 0 auto; padding: 0 20px; height: 80px; display: flex; align-items: center; gap: 28px; }
@media (max-width: 1024px) { .ife-header-inner { height: 64px; gap: 16px; } }

.ife-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.ife-logo img { display: block; width: auto; }
.ife-logo-icon { color: var(--ife-teal); font-size: 1.5rem; display: inline-flex; }
.ife-logo-icon svg { width: 1em; height: 1em; fill: currentColor; }
.ife-logo-text { font-family: var(--ife-font-heading); font-weight: 800; font-size: 1.2rem; color: var(--ife-teal); letter-spacing: -0.02em; }

.ife-nav { display: flex; align-items: center; gap: 26px; }
.ife-nav-link { font-size: 0.9rem; font-weight: 500; color: var(--ife-charcoal); text-decoration: none; white-space: nowrap; transition: color .15s; }
.ife-nav-link:hover { color: var(--ife-teal); }
.ife-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ife-btn--sm { padding: 9px 16px; font-size: 0.85rem; border-width: 1.5px; }

.ife-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 10px; background: none; border: 0; cursor: pointer; margin-left: auto; }
.ife-burger span { display: block; height: 2px; width: 100%; background: var(--ife-charcoal); border-radius: 2px; transition: transform .2s, opacity .2s; }
.ife-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ife-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ife-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ife-mobile-menu { display: none; border-top: 1px solid var(--ife-border); background: #fff; padding: 16px 20px 24px; }
.ife-mobile-menu[hidden] { display: none; }
.ife-mobile-menu nav { display: flex; flex-direction: column; }
.ife-mobile-link { padding: 12px 0; font-size: 0.98rem; font-weight: 500; color: var(--ife-charcoal); text-decoration: none; border-bottom: 1px solid var(--ife-border); }
.ife-mobile-actions { display: grid; gap: 10px; margin-top: 18px; }
.ife-mobile-phone { display: block; text-align: center; margin-top: 14px; font-size: 0.9rem; color: var(--ife-teal); text-decoration: none; }

@media (max-width: 1024px) {
  .ife-nav, .ife-header-actions { display: none; }
  .ife-burger { display: flex; }
  .ife-mobile-menu:not([hidden]) { display: block; }
}
/* Set by ife-widgets.js when the desktop menu does not fit the width, so a longer menu
   switches to the burger instead of overflowing. Same rules as the breakpoint above. */
.ife-header--compact .ife-nav, .ife-header--compact .ife-header-actions { display: none; }
.ife-header--compact .ife-burger { display: flex; }
.ife-header--compact .ife-mobile-menu:not([hidden]) { display: block; }

/* =========================================================
   Site footer
   ========================================================= */
.ife-footer { padding: 64px 0 32px; }
.ife-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; }
@media (max-width: 1024px) { .ife-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 600px) { .ife-footer-grid { grid-template-columns: minmax(0, 1fr); } }

.ife-logo--footer { margin-right: 0; margin-bottom: 16px; }
.ife-footer .ife-logo-text { color: #fff; }
.ife-footer .ife-logo-icon { color: #5FC5C9; }
.ife-footer-blurb { font-size: 0.9rem; max-width: 42ch; }
.ife-footer .ife-bbb-seal { height: 48px; margin-top: 18px; }

.ife-footer-heading { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: 0.01em; }
.ife-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.88rem; }
/* Prefixed with .ife-footer so the generic link rule cannot outrank these (it did, and
   turned the intended grey links teal at 2.83:1 on navy). */
.ife-footer .ife-footer-links a { color: var(--ife-text); text-decoration: none; transition: color .15s; }
.ife-footer .ife-footer-links a:hover { color: #fff; }
.ife-footer-cta { margin-top: 18px; }
.ife-social { display: flex; gap: 10px; margin-top: 18px; }
.ife-social-link { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--ife-text); text-decoration: none; transition: background .15s, color .15s; }
.ife-social-link:hover { background: rgba(255,255,255,0.14); color: #fff; }

.ife-footer-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ife-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ife-copyright { font-size: 0.78rem; color: var(--ife-text); margin: 0; }
.ife-legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.78rem; }
.ife-footer .ife-legal-links a { color: var(--ife-text); text-decoration: none; }
.ife-footer .ife-legal-links a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Partner landing pages. Every rule below targets a class or state that only
   appears when one of the new, off-by-default controls is used, so the
   homepage renders exactly as before.
   ========================================================================== */

/* Hero with no photo, video or stats card: let the copy use the full row
   instead of leaving the 2fr media column empty. */
.ife-hero-grid > .ife-hero-copy:only-child { grid-column: 1 / -1; max-width: 820px; }

.ife-partner-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 6px 14px 6px 8px; background: var(--ife-card); border: 1px solid var(--ife-border); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--ife-strong); }
.ife-partner-logo { height: 22px; width: auto; display: block; }

/* How We Work, list layout: the number holds its own column so a wrapped title
   or description never runs back underneath it. Accent colour rather than the
   grid layout's faint grey, because here the number is the visible marker. */
.ife-steps--list { grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: left; max-width: 760px; margin: 0 auto; }
.ife-steps--list .ife-step { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 18px; align-items: start; }
.ife-steps--list .ife-step-number { font-size: 1.6rem; line-height: 1.25; margin: 0; color: var(--ife-accent); }
.ife-steps--list .ife-card-title { margin: 0 0 6px; }
.ife-tone-navy .ife-steps--list .ife-step-number { color: #5FC5C9; }
.ife-step-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--ife-amber); color: var(--ife-charcoal); font-family: var(--ife-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Founder with the photo column switched off. */
.ife-founder-grid--no-photo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }

/* Checklist. The warning marker's "!" is amber-700 rather than the brand amber
   so the glyph clears 4.5:1 on its tinted circle; brand amber on that tint is
   closer to 2:1.
   ul.ife-checklist is the class the list had before it was renamed. Elementor caches widget
   HTML, so pages saved earlier keep serving the old markup after a deploy; style both. */
.ife-checklist-items, ul.ife-checklist { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; gap: 14px; }
.ife-checklist-items li, ul.ife-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--ife-strong); font-size: 1rem; line-height: 1.5; }
.ife-warn { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,158,11,0.18); }
.ife-warn::before { content: "!"; color: #B45309; font-weight: 800; font-size: 13px; line-height: 1; }
.ife-tone-navy .ife-warn::before { color: var(--ife-amber); }

/* Scope Compare: stacked on phones, side by side from 768px. Neutral slate for
   the partner's column, the accent (or the Style tab highlight) for ours. */
.ife-scope-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .ife-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ife-scope-col { --ife-scope-mark: var(--ife-slate); border-top: 4px solid var(--ife-border); }
.ife-scope-col--right { --ife-scope-mark: var(--ife-scope-highlight, var(--ife-accent)); border-top-color: var(--ife-scope-highlight, var(--ife-accent)); }
.ife-scope-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ife-scope-icon { color: var(--ife-scope-mark); display: inline-flex; }
.ife-scope-icon svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.ife-scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ife-scope-list li { position: relative; padding-left: 20px; color: var(--ife-strong); font-size: 0.95rem; line-height: 1.5; }
.ife-scope-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ife-scope-mark); }
/* Optional per-column button, pinned to the foot so both columns' buttons line up. */
.ife-scope-col--has-cta { display: flex; flex-direction: column; }
.ife-scope-cta { margin-top: auto; padding-top: 22px; }
@media (max-width: 680px) { .ife-scope-cta .ife-btn { width: 100%; } }

/* Calendly Embed. The frame's height is set inline from the widget so the
   space is reserved before Calendly loads and nothing below it shifts. */
.ife-calendly-embed { max-width: 1000px; margin: 0 auto; background: var(--ife-card); border: 1px solid var(--ife-border); border-radius: var(--ife-radius); overflow: hidden; }
.ife-calendly-frame { position: relative; width: 100%; }
.ife-calendly-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ife-calendly-link { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ife-calendly-note { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font-size: 0.85rem; color: var(--ife-text); }
.ife-calendly-alt { margin: 18px 0 0; text-align: center; color: var(--ife-text); }
.ife-smallprint { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 0.8rem; line-height: 1.55; color: var(--ife-text); }

/* ---------- Theme button states ----------
   Hello Elementor's reset.css gives every button white text on #c36 pink for :hover and
   :focus, and its selector ([type="button"]:hover) is (0,2,0), so it beats most of the rules
   above. Each plugin <button> therefore restates its own colours for both states here, at
   (0,2,1) or higher. Focus comes first so that hover wins when a button is both. The theme's
   :focus-visible outline is left alone: keyboard users still get a visible focus ring. */
button.ife-btn--primary:focus { background: var(--ife-cta); color: #fff; }
button.ife-btn--primary:hover { background: var(--ife-cta-hover); color: #fff; }
button.ife-btn--outline:focus { background: transparent; color: var(--ife-accent); }
button.ife-btn--outline:hover { background: var(--ife-accent); color: #fff; }
.ife-tone-navy button.ife-btn--outline:focus { background: transparent; color: #fff; }
.ife-tone-navy button.ife-btn--outline:hover { background: #fff; color: var(--ife-navy); }
button.ife-btn--ghost:focus { background: transparent; color: var(--ife-text); }
button.ife-btn--ghost:hover { background: transparent; color: var(--ife-strong); }
.ife-faq-q button:focus { background: none; color: var(--ife-heading); }
.ife-faq-q button:hover { background: rgba(0,0,0,0.025); color: var(--ife-heading); }
.ife-tone-navy .ife-faq-q button:hover { background: rgba(255,255,255,0.05); }
button.ife-option:focus, button.ife-option:hover { background: var(--ife-card); color: var(--ife-strong); }
button.ife-option[aria-pressed="true"]:focus, button.ife-option[aria-pressed="true"]:hover { background: rgba(232,85,61,0.08); }
button.ife-burger:focus, button.ife-burger:hover { background: none; color: inherit; }

/* ---------- Icon columns ----------
   Font Awesome glyphs have different natural widths, so text beside them started a few pixels
   further right on some rows than others. A fixed-width, centred icon box keeps every row's
   text on the same left line. */
.ife-icon--accent, .ife-chip-icon, .ife-pill-icon, .ife-option-icon, .ife-scope-icon { width: 1.25em; justify-content: center; flex-shrink: 0; }

/* Lists inside rich-text fields (founder bio, FAQ answers): a modest indent, not the
   browser's 40px. */
.ife-prose ul, .ife-prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.ife-prose li + li { margin-top: 4px; }

/* ---------- Phones ---------- */
@media (max-width: 680px) {
  /* The hero kept its 96px desktop top padding under a 64px header. */
  .ife-hero { padding-top: 40px; }
  /* The hero eyebrow is too long to fit a pill on most phones (52 characters needs about
     390px at 14px), and a wrapped pill becomes a wide box. Show it as a plain kicker line
     instead; the short section eyebrows keep their pills. */
  .ife-eyebrow--pill { background: none; padding: 0; border-radius: 0; font-weight: 600; text-wrap: balance; }
  /* Buttons stack full width, so a row never shows two buttons of different widths
     and a ghost button's padding never pushes its text off the left edge. */
  .ife-cta-row { flex-direction: column; align-items: stretch; }
  .ife-cta-row .ife-btn { width: 100%; }
  /* Service cards: icon beside the title, then the description at full card width,
     on the same left edge as the bullet list below it. */
  .ife-service-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .ife-service-head > div:last-child { display: contents; }
  .ife-service-head .ife-card-title { margin-bottom: 0; }
  .ife-service-head .ife-card-text { grid-column: 1 / -1; margin-top: 14px; }
}

/* ---------- Image lightbox ----------
   A native <dialog> appended to <body> by ife-widgets.js, so it sits outside .ife-section and
   its tokens; the brand navy is written out here. */
html.ife-lightbox-open { overflow: hidden; }
.ife-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 92vh; overflow: visible; }
.ife-lightbox::backdrop { background: rgba(10,13,18,0.88); }
.ife-lightbox img { display: block; width: auto; height: auto; max-width: 96vw; max-height: 92vh; border-radius: 8px; }
.ife-lightbox-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #16213E; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
button.ife-lightbox-close:focus, button.ife-lightbox-close:hover { background: #fff; color: #16213E; }