/* ==========================================================================
   ABOUT PAGE — PREMIUM FOUNDER STORY & VALUES REDESIGN
   ========================================================================== */

/* Google Font for handwritten signature */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* ---------- About: Design Tokens --------------------------------------- */
:root {
  --blush:          #FFF0F0;
  --blush-soft:     #FFF7F5;
  --blush-medium:   #FFE8E5;
  --blush-border:   #FCDBD8;
  --ivory:          #FFFBF9;
  --signature-red:  #C41E2A;

  /* Sunset accent palette — warm amber/coral/golden tones */
  --sunset-amber:    #F4A261;
  --sunset-coral:    #E76F51;
  --sunset-gold:     #E9C46A;
  --sunset-peach:    #F7C59F;
  --sunset-warm-bg:  #FFF3E6;
  --sunset-glow:     rgba(244, 162, 97, 0.12);

  /* Card styling tokens */
  --card-border:       rgba(244, 162, 97, 0.22);
  --card-shadow:       0 10px 30px rgba(27, 58, 92, 0.05);
  --card-shadow-hover: 0 18px 40px rgba(27, 58, 92, 0.12);
}

/* ---------- About: Founder Hero Section -------------------------------- */
.about-hero {
  padding: 140px 0 100px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

/* Decorative circle removed per client request */

.about-hero .container {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* --- Left Column: Text Content --- */
.about-text {
  padding-right: 16px;
}

/* Eyebrow Label */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 20px;
}
.about-eyebrow i {
  font-size: 0.85rem;
}

/* Main Headline */
.about-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-accent);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.about-headline .highlight {
  color: var(--color-primary);
}

/* Decorative Divider Under Headline */
.about-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.about-divider::before,
.about-divider::after {
  content: '';
  height: 1px;
  width: 40px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}
.about-divider::after {
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 100%);
}
.about-divider i {
  color: var(--color-primary);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Body Copy */
.about-body p {
  color: #475569;
  font-size: 1.05rem; /* Spacious premium font size */
  line-height: 1.85; /* Refined readability line height */
  margin-bottom: 20px;
  max-width: 580px;
}
.about-body p:last-child {
  margin-bottom: 0;
}

/* --- Credential Badges --- */
.about-badges {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr; /* Allocates more horizontal width to the third bubble on desktop */
  gap: 16px;
  margin-top: 40px;
  width: 100%;
}

.about-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sunset-warm-bg);
  border: 1px solid rgba(244, 162, 97, 0.3);
  border-radius: 50px;
  padding: 14px 20px 14px 14px;
  box-shadow: 0 8px 24px rgba(244, 162, 97, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  width: 100%;
  min-width: 0; /* Prevents flex/grid blowouts */
}
.about-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(232, 145, 58, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  border-color: rgba(232, 145, 58, 0.3);
}

.about-badge-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #A31823 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(196, 30, 42, 0.25);
}
.about-badge-icon i {
  color: var(--white);
  font-size: 1.1rem;
}

.about-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.about-badge-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-accent);
  line-height: 1.25;
}
.about-badge-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 1px;
}

/* --- Right Column: Portrait Card --- */
.about-portrait-wrapper {
  display: flex;
  justify-content: flex-end; /* Perfectly aligned to the right margin */
  align-items: center;
  position: relative;
  width: 100%;
}

.portrait-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(135deg, #F5EDE4 0%, #EDE4D8 50%, #E8DDD0 100%); /* Clean beige, professional */
  border: 1px solid rgba(210, 195, 175, 0.5);
  border-radius: 40px;
  padding: 24px 24px 0;
  box-shadow:
    0 32px 64px rgba(140, 120, 90, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.06);
  overflow: visible;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.portrait-card:hover {
  transform: translateY(-6px);
}

/* Portrait heart SVG removed per client request */

.portrait-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 28px 28px 0 0; /* Grounded bottom edge */
  object-fit: cover;
  display: block;
}

/* Founder Nameplate / Signature Strip */
.portrait-nameplate {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #FFFFFF; /* Ultra clean white for contrast */
  border-radius: 24px;
  padding: 16px 24px;
  width: calc(100% - 16px); /* Clean layout, overlapping card borders nicely */
  margin: -24px auto 20px; /* Centered, overlapping image bottom, nicely spaced bottom */
  position: relative;
  z-index: 2;
  box-shadow:
    0 20px 48px rgba(196, 30, 42, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(196, 30, 42, 0.08);
}

.portrait-nameplate::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%);
  z-index: -1;
}

.portrait-signature {
  font-family: 'Great Vibes', cursive;
  font-size: 2.5rem; /* Perfectly scaled Great Vibes signature */
  font-weight: 400;
  color: var(--signature-red);
  line-height: 1;
  flex-shrink: 0;
  text-shadow: 1px 2px 4px rgba(196, 30, 42, 0.08);
  transform: rotate(-3deg) translateY(-2px); /* Sleek angle and alignment */
}

.portrait-nameplate-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(196, 30, 42, 0.25) 20%, rgba(196, 30, 42, 0.25) 80%, transparent);
  flex-shrink: 0;
}

.portrait-title {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.portrait-title-role {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
}
.portrait-title-company {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 1px;
}

/* ---------- About: Core Values Section --------------------------------- */
.values-section {
  padding: 100px 0 110px;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(244, 162, 97, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--sunset-warm-bg) 0%, #FFF5EB 50%, var(--sunset-warm-bg) 100%);
  position: relative;
}

/* Section top transition curve removed per client request for a cleaner, modern flow */

/* Section Heading Area */
.values-heading {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}

/* Decorative heart motif above heading */
.values-motif {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.values-motif::before,
.values-motif::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(196, 30, 42, 0.3), transparent);
}
.values-motif i {
  color: var(--color-primary);
  font-size: 0.9rem;
  opacity: 0.6;
}

.values-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.values-heading p {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Core Values Cards Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.value-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px 32px 40px;
  text-align: center;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Warm sunset gradient top-edge accent on cards */
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--sunset-coral), var(--sunset-amber));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Subtle warm corner detail */
.value-card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 162, 97, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(196, 30, 42, 0.35);
}

.value-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: transform 0.3s ease;
}
.value-card:hover .value-card-icon {
  transform: scale(1.08);
}

.value-card-icon i {
  font-size: 1.5rem;
  color: var(--sunset-amber);
}

.value-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

/* Sunset gradient underline accent under card title */
.value-card-accent {
  width: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--sunset-coral), var(--sunset-amber));
  border-radius: 2px;
  margin: 0 auto 16px;
}

.value-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.72;
}

/* ---------- About: Responsive ------------------------------------------ */
@media (max-width: 1024px) {
  .about-hero .container {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .about-text {
    padding-right: 12px;
  }
  .about-badges {
    grid-template-columns: 1fr; /* Stack vertically on smaller screens for clean visual layout */
    gap: 12px;
  }
  .portrait-card {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 120px 0 60px;
  }
  .about-hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .about-text {
    padding-right: 0;
    order: 1;
  }
  .about-portrait-wrapper {
    order: 0;
    justify-content: center; /* Center portrait on mobile */
  }
  .about-eyebrow {
    justify-content: center;
  }
  .about-divider {
    justify-content: center;
  }
  .about-body p {
    max-width: 100%;
    margin-inline: auto;
  }
  .about-badges {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 32px auto 0;
  }
  .about-headline {
    font-size: clamp(1.75rem, 6vw, 2.4rem);
  }
  .portrait-card {
    max-width: 360px;
  }
  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .about-hero {
    padding: 110px 0 48px;
  }
  .about-badges {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 28px auto 0;
  }
  .about-badge {
    width: 100%;
  }
  .portrait-card {
    max-width: 280px;
    padding: 16px 16px 0; /* Symmetrical grounded mobile padding */
  }
  .portrait-nameplate {
    padding: 12px 16px;
    gap: 12px;
    margin-top: -20px;
    margin-bottom: 12px;
    width: calc(100% - 8px);
  }
  .portrait-signature {
    font-size: 1.3rem;
  }
  .portrait-title-role {
    font-size: 0.65rem;
  }
  .portrait-title-company {
    font-size: 0.72rem;
  }
}