.elementor-7277 .elementor-element.elementor-element-cbb4f42{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS *//* =============================
   FRAMED MINDS — PHILOSOPHY PAGE
   (No wrapper needed)
   ============================= */

/* --- Shared layout --- */

.philo-section {
  padding: 72px 16px;
}

.philo-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.philo-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 36px;
  align-items: flex-start;
}

/* Keep all main sections on the same warm background
   so it doesn’t look like “new pages” starting */
.philo-hero,
.philo-frames,
.philo-pillars,
.philo-founder,
.philo-values {
  background: #f7f5ef;
}

/* Utility */
.philo-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #efe6d6;
  color: #151515;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.philo-lead {
  font-size: 1.03rem;
  margin-bottom: 16px;
}

/* Re-use your existing .btn-primary / .btn-secondary, but
   add a safer hover so you don’t get “green on green” */
.btn-primary:hover {
  background: #3a5a40;
  border-color: #3a5a40;
  color: #ffffff;
}

/* Text link under hero button */
.philo-hero-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #4a5560;
}
.philo-hero-link:hover {
  color: #96ca42;
}

/* -----------------------------------
   HERO
   ----------------------------------- */

.philo-hero {
  background: linear-gradient(
    180deg,
    #f4f1e8 0%,
    #f4f1e8 70%,
    #f7f5ef 100%
  );
}

.philo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.philo-hero-copy h1 {
  margin-bottom: 12px;
}

.philo-hero-copy p {
  margin-bottom: 10px;
}

.philo-hero-cta {
  margin-top: 16px;
}

/* Hero side card */
.philo-hero-card-wrap {
  display: flex;
  justify-content: flex-end;
}

.philo-hero-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #ebe7dd;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.10);
  padding: 20px 22px 22px;
  max-width: 360px;
}

.philo-hero-card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.philo-hero-card p {
  font-size: 0.92rem;
}

.philo-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.philo-hero-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: #f4f1e8;
  font-size: 0.78rem;
}

/* -----------------------------------
   “WHAT WE MEAN BY FRAMES”
   ----------------------------------- */

.philo-frames-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 36px;
  align-items: flex-start;
}

.philo-frames-copy p {
  margin-bottom: 10px;
}

.philo-frames-copy ul {
  margin: 8px 0 12px 18px;
}

.philo-frames-copy li {
  margin-bottom: 4px;
}

/* Right-hand stack */
.philo-side-stack-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a0a7b0;
  margin-bottom: 6px;
}

.philo-side-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.philo-note-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 18px;
  border: 1px solid #e5e2d7;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
  font-size: 0.9rem;
}

.philo-note-card h3 {
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* -----------------------------------
   PILLARS — HOW WE SUPPORT YOU
   ----------------------------------- */

.philo-pillars {
  /* same warm bg via base rule */
}

.philo-pillars-header {
  max-width: 640px;
  margin-bottom: 22px;
}

.philo-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.philo-pillar-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid #ebe7dd;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
}

.philo-pillar-card h3 {
  margin-bottom: 6px;
  font-size: 0.98rem;
}

/* -----------------------------------
   FOUNDER STORY
   ----------------------------------- */

.philo-founder-inner {
  background: #fdfbf6;
  border-radius: 24px;
  border: 1px solid #ebe7dd;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  padding: 26px 26px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr);
  gap: 26px;
  align-items: flex-start;
}

.philo-founder-copy p {
  margin-bottom: 9px;
  font-size: 0.95rem;
}

.philo-founder-signoff {
  margin-top: 10px;
  font-size: 0.88rem;
  font-style: italic;
}

.philo-founder-signoff span {
  display: block;
  font-style: normal;
  font-weight: 600;
}

/* Photo */
.philo-founder-photo-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 10px;
  border: 1px solid #ebe7dd;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  max-width: 220px;
  margin: 0 auto;
}

.philo-founder-photo-card img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* -----------------------------------
   VALUES
   ----------------------------------- */

.philo-values-header {
  max-width: 620px;
  margin-bottom: 20px;
}

.philo-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.philo-value-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid #ebe7dd;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
}

.philo-value-card h3 {
  margin-bottom: 6px;
  font-size: 0.98rem;
}

/* -----------------------------------
   FINAL CTA
   ----------------------------------- */

.philo-final {
  background: linear-gradient(180deg, #0e1a27 0%, #1b2a20 60%, #0e1a27 100%);
  color: #ffffff;
  text-align: center;
  padding: 70px 16px;
}

.philo-final h2,
.philo-final p {
  color: #ffffff;
}

/* -----------------------------------
   Responsive
   ----------------------------------- */

@media (max-width: 960px) {
  .philo-hero-grid,
  .philo-frames-grid,
  .philo-founder-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .philo-hero-card-wrap {
    justify-content: flex-start;
    margin-top: 16px;
  }

  .philo-pillars-grid,
  .philo-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .philo-section {
    padding: 54px 16px;
  }

  .philo-pillars-grid,
  .philo-values-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .philo-final {
    padding: 56px 16px;
  }
}

/* Remove Elementor's default padding on sections for this page */
.philosophy-page .elementor-top-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure consistent spacing using our custom section classes */
.philosophy-page .section,
.philosophy-page section {
  margin: 0 !important;
  padding: var(--section-padding, 4rem 0) !important; /* adjust if needed */
}

/* Tighten sections that should be visually closer */
.philosophy-page .section-tight {
  padding: 3rem 0 !important;
}/* End custom CSS */