/* ==========================================================================
   About — page styles on top of base.css.
   Ported 1:1 from 02 Pages/06 About.html. Rules are scoped to .about (on <main>), the page's
   dark-mode overrides became [data-theme="dark"] and keyframes are prefixed.
   !important is kept: in these pages it decides same-specificity conflicts
   (the .mobile-only / .desktop-only helpers), so dropping it breaks layout.
   ========================================================================== */

.about-page { overflow-x: hidden; background: #FFFBF5; }
/* The page's own background (the source's body rule) is painted here: fixed,
   behind everything, and inside <main> so it can read the page's tokens. */
.about::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
[data-theme="dark"] .about-page { background: #0E0E0E; }
.about { padding: 10px; }   /* the Elementor container's padding on live (0 or 10, per page) */
/* Blocksy wrapped every page's content in a container with overflow: clip, so
   anything wider than the page was trimmed rather than scrollable — Connect's
   directory grid is wider than its box, and its tools dropdown bleeds 100vw.
   clip (not hidden) doesn't make <main> a scroll container. */
.about { overflow-x: clip; }

/* The element baseline every page sat on in WordPress — measured on live by
   _migration/compare-baseline.py, not guessed. Anything the page doesn't
   style itself falls back to these, exactly as it did on live; the page's own
   rules below override them (same specificity, later in the file). */
/* Blocksy's element layer (its bundle/main.min.css), in its own order and at
   its own selector strength plus the scope — so a page's rules win or lose
   against it exactly as they did on live. Variables resolved to live values;
   sizes measured with _migration/compare-baseline.py. */
.about :is(p, h1, h2, h3, h4, h5, h6, em, ol, ul, li, tr, th, td, dl, ins, sub, sup, big, cite, form, small, label, table, figure, button, legend, strike, address, caption, fieldset, blockquote) { margin: 0; padding: 0; border: none; font: inherit; }
.about :is(b, strong) { font-weight: bold; }
.about small { font-size: 80%; }
.about hr { height: 1px; border: none; background-color: #E1E8ED; }
.about img { height: auto; max-width: 100%; vertical-align: middle; }
.about :is(figure, textarea) { display: block; }
.about hr { margin: 0; }
.about table { max-width: 100%; }
.about :is(code, kbd, samp) { padding: 3px 6px; background: #F2F5F7; border-radius: 3px; }
.about :is(table, th, td) { border: 1px solid #E1E8ED; }
.about :is(th, td) { padding: 0.7em 1em; }
.about th { font-weight: 600; }
.about h1 { color: #FF6B4A; font-family: "Bricolage Grotesque", sans-serif; font-size: 40px; }
.about h2 { color: #1A1A1A; font-family: "Bricolage Grotesque", sans-serif; font-size: 35px; }
.about h3 { color: #1A1A1A; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; }
.about h4 { color: #FFFBF5; font-size: 25px; }
.about h5 { color: #FFFBF5; font-size: 20px; }
.about h6 { color: #FFFBF5; font-size: 16px; }
.about :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.5; }
.about p { margin-block-end: 1.5em; }
.about :is(ul, ol) { padding-inline-start: 2.5em; margin-block-end: 1.5em; }
.about :is(h1, h2, h3, h4, h5, h6) { margin-block-end: calc(.3em + 10px); }
.about :is(h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.about ul:last-child, .about ol:last-child, .about ul li:last-child, .about ol li:last-child, .about label:last-child { margin-bottom: 0; }
.about a { color: #FF6B4A; }
.about select, .about textarea, .about input:is([type="url"], [type="tel"], [type="text"], [type="time"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="password"]) {
  appearance: none; width: 100%; height: 40px; padding: 0 15px; color: #1A1A1A;
  background-color: transparent; border: 1px solid #E1E8ED; border-radius: 3px;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: inherit;
  transition: color .12s, outline .12s, border-color .12s, background .12s; }
.about select { padding-inline-end: 25px; }
.about textarea { line-height: 1.5; resize: vertical; padding: 12px 15px; }
.about label { font-size: 15px; line-height: inherit; cursor: pointer; margin: 0 0 0.5em; }
.about blockquote:where(:not(.is-style-plain):not(.has-text-align-center):not(.has-text-align-right)) { padding-inline-start: 1.5em; border-inline-start: 4px solid #FF6B4A; }
.about [type="submit"] { appearance: none; height: 40px; padding: 5px 20px; border: 0; border-radius: 3px; color: #fff; background-color: #FF6B4A; font-size: 15px; font-weight: 500; }

.about { line-height: 1.65; color: #1A1A1A; color-scheme: normal; }
/* Inside Elementor's content area on live: <hr> without the theme's grey fill. */
.about hr { background-color: transparent; }

.about *, .about *::before, .about *::after { box-sizing: border-box; margin: 0; padding: 0; }
.about {
    --canvas: #FFFBF5;
    --ink: #1A1A1A;
    --orange: #FF6B4A;
    --peach: #FFD6A8;
    --peach-light: #FFF0D9;
    --border: #EDE6DC;
    --brown: #8B4A0C;
    --muted: #5A4A3A;
    --font-head: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-accent: 'Fraunces', serif;
  }
.about {
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    line-height: 1.7 !important;
  }
.about::before { background: var(--canvas) !important; }
/* ── HERO ── */
.about .hero {
    max-width: 1280px; 
    margin: 0 auto;
    padding: 6rem 4rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 6rem;
    align-items: center;
  }
.about .hero-content {
    display: flex;
    flex-direction: column;
  }
.about .hero-text {
    max-width: 700px;
  }
.about .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--peach-light);
    color: var(--brown);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.about .eyebrow-dot {
    width: 5px;
    height: 5px;
    background: var(--orange);
    border-radius: 50%;
  }
.about .hero h1 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 1.5rem !important;
    color: var(--ink) !important;
  }
.about .hero h1 .highlight {
    color: var(--orange);
    text-decoration: underline;
    text-decoration-color: var(--peach);
    text-decoration-thickness: 6px;
    text-underline-offset: 6px;
  }
.about .hero h1 .orange { color: var(--orange); }
.about .hero-sub {
    font-size: 1.15rem;
    color: var(--muted);
    line-height: 1.8;
    max-width: 520px;
  }
.about .iit-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 1.2rem 0.4rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
  }
.about .iit-dot {
    width: 28px;
    height: 28px;
    background: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    font-weight: 700;
    letter-spacing: 0.01em;
    flex-shrink: 0;
  }
/* Social Pills styling */
.about .social-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--canvas) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px;
    padding: 0.4rem 1.2rem 0.4rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: scale 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
.about .social-pill:hover {
    border-color: var(--orange);
    background: var(--peach-light);
    scale: 1.05; /* Use scale property instead of transform to not break floating animation */
  }
.about .social-icon-wrapper {
    width: 28px;
    height: 28px;
    background: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s ease;
  }
.about .social-pill:hover .social-icon-wrapper {
    background: var(--orange);
  }
/* ── FLOATING IMAGE COMPONENT ── */
.about .hero-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }
.about .hero-image-wrap {
    position: relative; /* Anchor for absolute floating pills */
    z-index: 1;
  }
.about .avatar-frame {
    width: 320px; 
    height: 320px;
    background: var(--peach-light);
    /* Changed to 25% for a smooth squircle/app icon shape */
    border-radius: 25%; 
    border: 4px solid var(--ink); 
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255, 107, 74, 0.45); 
    position: relative;
    z-index: 2;
  }
.about .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* Floating Pills Positioning & Animation */
.about .floating-pill {
    position: absolute;
    z-index: 10;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08); /* extra shadow to float above image */
  }
/* Unique keyframes so they float slightly out of sync */
@keyframes ab-float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ab-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ab-float3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ab-float4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.about .pill-1 { top: 8%; left: -15%; animation: ab-float1 4.5s ease-in-out infinite; }
.about .pill-2 { top: 12%; right: -25%; animation: ab-float2 5.2s ease-in-out infinite 0.5s; }
.about .pill-3 { bottom: 20%; left: -22%; animation: ab-float3 4.8s ease-in-out infinite 1s; }
.about .pill-4 { bottom: 8%; right: -18%; animation: ab-float4 5.5s ease-in-out infinite 0.2s; }
/* ── DARK BAND ── */
.about .dark-band {
    background: var(--ink);
    padding: 6rem 4rem;
  }
.about .dark-band-inner {
    max-width: 1280px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 8rem;
    align-items: start;
  }
.about .dark-band-label {
    font-family: var(--font-head) !important;
    font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.12 !important;
    color: white !important;
    position: sticky !important;
    top: 2rem !important;
  }
.about .dark-band-label .orange { color: var(--orange); }
.about .dark-band-body p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1.5rem;
    max-width: 700px;
  }
.about .dark-band-body p:last-child { margin-bottom: 0; }
.about .dark-band-body em {
    color: rgba(255,255,255,0.95);
    font-style: normal;
    font-weight: 500;
  }
/* ── STORY + STATS ── */
.about .story {
    max-width: 1280px; 
    margin: 0 auto;
    padding: 7rem 4rem;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 6rem;
    align-items: center;
  }
.about .story-text h2 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.15 !important;
  }
.about .story-text p {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    max-width: 650px;
  }
.about .story-stats {
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: var(--canvas) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.03) !important;
  }
.about .stat-row {
    padding: 2rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
  }
.about .stat-row:last-child { border-bottom: none; }
.about .stat-row:hover { background: var(--peach-light); }
.about .stat-number {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 1;
  }
.about .stat-number .frac {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--orange);
    font-size: 2.2rem;
  }
.about .stat-label {
    font-size: 0.95rem;
    color: var(--muted);
    margin-top: 8px;
    font-weight: 500;
    line-height: 1.5;
  }
/* ── BELIEFS ── */
.about .beliefs {
    background: var(--ink);
    padding: 7rem 4rem;
  }
.about .beliefs-inner {
    max-width: 1280px; 
    margin: 0 auto;
  }
.about .beliefs-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
  }
.about .beliefs-inner > h2 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
    color: white !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 4rem !important;
    line-height: 1.15 !important;
    max-width: 800px !important;
  }
.about .beliefs-inner > h2 .orange { color: var(--orange); }
.about .belief-list { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 4rem; 
  }
.about .belief-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.5rem 0 0 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
.about .belief-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--orange);
    opacity: 0.9;
  }
.about .belief-content h3 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: white !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.8rem !important;
    line-height: 1.2 !important;
  }
.about .belief-content p {
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
  }
/* ── CLOSING QUOTE ── */
.about .quote-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8rem 4rem;
    text-align: center;
  }
.about .quote-mark {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 9rem;
    color: var(--peach);
    line-height: 0.4;
    display: block;
    margin-bottom: 2rem;
  }
.about blockquote {
    font-family: var(--font-accent) !important;
    font-style: italic !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    color: var(--ink) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 2.5rem !important;
  }
.about blockquote .orange-word { color: var(--orange); }
.about .quote-attr {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.about .quote-attr span { color: var(--orange); }
/* ── RESPONSIVE: TABLET & LAPTOP ── */
@media (max-width: 1024px) {
  .about .hero { 
        display: flex;
        flex-direction: column;
        text-align: center; 
        gap: 3rem; 
    }
  .about .hero-content { display: contents; }
  .about .hero-text { 
        order: 1;
        max-width: 100%; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }
  .about .hero-image-container {
        order: 2; /* Pushes image below the text */
        margin: 2rem 0; /* Add breathing room for the floating pills */
    }
  /* Bring pills in slightly closer on tablet to avoid edge clipping */
  .about .pill-1 { left: -10%; }
  .about .pill-2 { right: -15%; }
  .about .pill-3 { left: -12%; }
  .about .pill-4 { right: -10%; }
  .about .dark-band-inner { 
        grid-template-columns: 1fr; 
        gap: 3rem; 
    }
  .about .dark-band-label { position: static; }
  .about .story { 
        grid-template-columns: 1fr; 
        gap: 4rem; 
    }
  .about .belief-list { 
        grid-template-columns: 1fr; 
        gap: 0; 
    }
  .about .belief-item { 
        display: grid; 
        grid-template-columns: 60px 1fr; 
        padding: 2.5rem 0; 
        gap: 2rem;
    }
  .about .belief-item:last-child {
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
}
/* ── RESPONSIVE: MOBILE ── */
@media (max-width: 720px) {
  .about .hero, .about .dark-band, .about .story, .about .beliefs, .about .quote-section { 
        padding: 4rem 1.5rem; 
    }
  .about .hero h1 { font-size: clamp(2.4rem, 10vw, 3rem); }
  .about .avatar-frame { 
        width: 260px; 
        height: 260px; 
    }
  /* Pull floating pills inwards so they don't break viewport width */
  .about .pill-1 { top: 0%; left: -5%; }
  .about .pill-2 { top: 15%; right: -8%; }
  .about .pill-3 { bottom: 15%; left: -8%; }
  .about .pill-4 { bottom: 0%; right: -5%; }
  .about .stat-row { padding: 1.5rem; }
  .about .stat-number { font-size: 2.2rem; }
  .about .belief-item { 
        grid-template-columns: 40px 1fr; 
        gap: 1.2rem; 
        padding: 2rem 0; 
    }
  .about blockquote { font-size: 1.5rem; }
}
/* ══════════════════════════════════════════
     DARK MODE
     Two entry points are used together:
       body.dark          — set by this page's script
       html[data-theme="dark"] — set by the global header (header.php)
     CSS custom properties do NOT reliably honour !important in all
     browsers and Elementor contexts, so we ALSO set explicit hex
     values on every element that needs a colour change.
  ══════════════════════════════════════════ */

  /* — Variables (no !important — they cascade by specificity) — */
[data-theme="dark"] .about, [data-theme="dark"] .about {
    --canvas:      #0E0E0E;
    --ink:         #EEEAE4;
    --peach:       #FFD6A8;
    --peach-light: rgba(255,107,74,0.12);
    --border:      rgba(255,255,255,0.09);
    --brown:       #FF6B4A;
    --muted:       rgba(238,234,228,0.5);
  }
/* — Page background & base text colour — */
[data-theme="dark"] .about, [data-theme="dark"] .about {
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about::before, [data-theme="dark"] .about::before { background: #0E0E0E !important; }
/* — Hero — */
[data-theme="dark"] .about .hero-eyebrow, [data-theme="dark"] .about .hero-eyebrow {
    background: rgba(255,107,74,0.12) !important;
    color: #FF6B4A !important;
  }
[data-theme="dark"] .about .hero h1, [data-theme="dark"] .about .hero h1 {
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about .hero-sub, [data-theme="dark"] .about .hero-sub {
    color: rgba(238,234,228,0.55) !important;
  }
/* — Floating pills — */
[data-theme="dark"] .about .iit-tag, [data-theme="dark"] .about .social-pill, [data-theme="dark"] .about .iit-tag, [data-theme="dark"] .about .social-pill {
    background: #1A1A1A !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about .social-icon-wrapper, [data-theme="dark"] .about .iit-dot, [data-theme="dark"] .about .social-icon-wrapper, [data-theme="dark"] .about .iit-dot {
    background: #2A2A2A !important;
  }
/* — Story section — */
[data-theme="dark"] .about .story-text h2, [data-theme="dark"] .about .story-text h2 {
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about .story-text p, [data-theme="dark"] .about .story-text p {
    color: rgba(238,234,228,0.5) !important;
  }
[data-theme="dark"] .about .story-stats, [data-theme="dark"] .about .story-stats {
    background: #141414 !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: none !important;
  }
[data-theme="dark"] .about .stat-row, [data-theme="dark"] .about .stat-row {
    border-bottom-color: rgba(255,255,255,0.09) !important;
  }
[data-theme="dark"] .about .stat-row:hover, [data-theme="dark"] .about .stat-row:hover {
    background: rgba(255,107,74,0.07) !important;
  }
[data-theme="dark"] .about .stat-number, [data-theme="dark"] .about .stat-number {
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about .stat-label, [data-theme="dark"] .about .stat-label {
    color: rgba(238,234,228,0.48) !important;
  }
/* — Dark band & Beliefs — keep these sections visually dark in dark mode.
     Both use background: var(--ink). In light mode --ink is #1A1A1A (dark) ✓.
     In dark mode --ink flips to #EEEAE4 (cream) which breaks them.
     Lock them to a hardcoded dark surface instead. — */
[data-theme="dark"] .about .dark-band, [data-theme="dark"] .about .dark-band, [data-theme="dark"] .about .beliefs, [data-theme="dark"] .about .beliefs {
    background: #141414 !important;
  }
/* — Quote section — */
[data-theme="dark"] .about .quote-section, [data-theme="dark"] .about .quote-section {
    background: #0E0E0E !important;
  }
[data-theme="dark"] .about .quote-mark, [data-theme="dark"] .about .quote-mark {
    color: rgba(255,214,168,0.55) !important;
  }
[data-theme="dark"] .about blockquote, [data-theme="dark"] .about blockquote {
    color: #EEEAE4 !important;
  }
[data-theme="dark"] .about .quote-attr, [data-theme="dark"] .about .quote-attr {
    color: rgba(238,234,228,0.48) !important;
  }