/* ── ImpromptuIndian About Page — brand palette ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600&display=swap');

:root {
  --ii-red: #A52422;
  --ii-maroon: #7F3937;
  --ii-grey: #7A7D7D;
  --ii-white: #FFFFFF;
  --ii-black: #000000;
  --ii-red-light: rgba(165, 36, 34, 0.08);
  --ii-red-glow: rgba(165, 36, 34, 0.22);
  --surface-off: #F7F6F4;
  --border: rgba(122, 125, 125, 0.18);
}

body {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ii-red-light);
  color: var(--ii-black);
}

/* ── Header (legacy pages only — not marketing nav) ── */
header:not(.marketing-nav-header) {
  background: var(--ii-white) !important;
  border-bottom: 1px solid var(--border);
  color: var(--ii-black) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

header:not(.marketing-nav-header) i[data-lucide="shirt"] {
  color: var(--ii-red) !important;
}

header:not(.marketing-nav-header) #menu-btn,
header:not(.marketing-nav-header) #menu-btn i {
  color: var(--ii-black) !important;
}

header:not(.marketing-nav-header) nav a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ii-black) !important;
  transition: color 0.2s ease;
}

header:not(.marketing-nav-header) nav a:hover {
  color: var(--ii-grey) !important;
}

header:not(.marketing-nav-header) nav a.nav-active {
  font-weight: 700 !important;
  color: var(--ii-red) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

header:not(.marketing-nav-header) .header-auth {
  gap: 0.75rem;
}

header:not(.marketing-nav-header) .header-login {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--ii-black) !important;
}

header:not(.marketing-nav-header) .header-login:hover {
  color: var(--ii-grey) !important;
}

header:not(.marketing-nav-header) .header-signup {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.375rem 0.75rem !important;
  background: var(--ii-red) !important;
  color: var(--ii-white) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

header:not(.marketing-nav-header) .header-signup:hover {
  background: var(--ii-maroon) !important;
}

#mobile-menu {
  background: var(--ii-white) !important;
  border-top: 1px solid var(--border) !important;
}

#mobile-menu a {
  color: var(--ii-black) !important;
}

#mobile-menu a:hover {
  background: var(--ii-red-light) !important;
}

#mobile-menu .nav-active {
  background: var(--ii-red-light) !important;
  color: var(--ii-red) !important;
  font-weight: 600;
}

#mobile-menu .header-login,
#mobile-menu .header-signup {
  font-size: 0.875rem !important;
}

/* ── Hero ── */
.about-hero {
  background: var(--ii-white);
  min-height: 60vh;
}

.about-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ii-black);
}

.about-hero h1 .accent {
  color: var(--ii-red);
}

.about-hero p {
  color: var(--ii-grey);
}

/* ── Section headings ── */
.about-section-title {
  color: var(--ii-red) !important;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.01em;
}

.about-stat {
  color: var(--ii-red) !important;
}

/* Image maroon shadow offset */
.about-img-shadow {
  background: var(--ii-red) !important;
}

/* ── Mission / Vision cards ── */
.about-card-mission {
  border-left-color: var(--ii-red) !important;
}

.about-card-mission .about-card-icon-wrap {
  background: var(--ii-red-light) !important;
}

.about-card-mission .about-card-icon {
  color: var(--ii-red) !important;
}

.about-card-vision {
  border-left-color: var(--ii-maroon) !important;
}

.about-card-vision .about-card-icon-wrap {
  background: rgba(127, 57, 55, 0.1) !important;
}

.about-card-vision .about-card-icon {
  color: var(--ii-maroon) !important;
}

/* ── Core values ── */
.about-values {
  background: #141414 !important;
}

.about-value-card:hover {
  border-color: var(--ii-red) !important;
}

.about-value-icon {
  color: var(--ii-red) !important;
}

.about-value-card:nth-child(even):hover {
  border-color: var(--ii-maroon) !important;
}

.about-value-card:nth-child(even) .about-value-icon {
  color: var(--ii-maroon) !important;
}

/* ── CTA ── */
.about-cta {
  background-image: url('../images/homebg.png');
  background-size: cover;
  background-position: center;
}

.about-cta-overlay {
  background: linear-gradient(140deg, rgba(10, 10, 10, 0.88) 0%, rgba(127, 57, 55, 0.9) 50%, rgba(165, 36, 34, 0.92) 100%) !important;
}

.about-cta-btn-primary {
  background: var(--ii-white) !important;
  color: var(--ii-red) !important;
}

.about-cta-btn-primary:hover {
  background: var(--surface-off) !important;
}

.about-cta-btn-outline:hover {
  background: var(--ii-white) !important;
  color: var(--ii-red) !important;
}

/* ── Footer ── */
footer a:hover {
  color: var(--ii-red) !important;
}

footer .footer-logo-icon {
  color: var(--ii-red) !important;
}

footer .footer-logo-text {
  color: var(--ii-red) !important;
}

footer .footer-logo-accent {
  color: var(--ii-maroon) !important;
}

footer i[data-lucide]:hover {
  color: var(--ii-red) !important;
}

/* ── Animations ── */
@keyframes aboutFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeUp {
  animation: aboutFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}