/* about.css — extracted page CSS (was inline). Tokens stay inline in the page. */
* { box-sizing: border-box; margin: 0; padding: 0; }
 body { background: var(--bg); color: var(--fg); font-family: 'Cormorant Garamond','IBM Plex Sans Arabic','Inter',serif; line-height: 1.7; transition: background .3s, color .3s; }
 [lang="en"] body { font-family: 'Cormorant Garamond','Inter','IBM Plex Sans Arabic',serif; }
 a { color: inherit; text-decoration: none; }
 .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

 /* Nav */
 header.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
 .nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; padding: 0 24px; max-width: 1180px; margin: 0 auto; }
 .brand { justify-self: center; }
 .brand-mark { width: 60px; height: 22px; object-fit: contain; }
 .brand-mark.for-dark { filter: invert(1); }
 [data-theme="dark"] .brand-mark.for-light, [data-theme="light"] .brand-mark.for-dark { display: none !important; }
 .nav-side-start { justify-self: start; }
 .nav-side-end { justify-self: end; display: flex; gap: 8px; }
 .btn-icon { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
 [dir="rtl"] #back-link svg { transform: scaleX(-1); }

 /* Hero */
 .hero { padding: 80px 0 60px; }
 .eyebrow { font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
 .eyebrow::before, .eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--muted); }
 .hero h1 {
 font-family: 'Cormorant Garamond','IBM Plex Sans Arabic',serif;
 font-size: clamp(48px, 8vw, 96px); font-weight: 400;
 line-height: 1.05; letter-spacing: -.02em; margin-bottom: 24px;
 max-width: 840px;
 }
 .hero h1 em { font-style: italic; color: var(--muted); }
 .hero p { color: var(--muted); font-size: 18px; max-width: 640px; font-weight: 300; }

 /* Story with photo */
 .story-row {
 padding: 60px 0 100px; border-top: 1px solid var(--line);
 display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start;
 }
 @media (max-width: 900px) { .story-row { grid-template-columns: 1fr; gap: 40px; } }
 .story h2 { font-family: 'Cormorant Garamond','IBM Plex Sans Arabic',serif; font-size: clamp(28px, 4vw, 44px); font-weight: 400; margin-bottom: 18px; letter-spacing: -.01em; }
 .story p { color: var(--muted); margin-bottom: 18px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.85; }
 .story p strong { color: var(--fg); font-weight: 600; }
 .about-img-wrap {
 position: sticky; top: 100px;
 border-radius: 20px; overflow: hidden;
 border: 1px solid var(--line);
 aspect-ratio: 2/3;
 }
 @media (max-width: 900px) { .about-img-wrap { position: static; max-width: 420px; aspect-ratio: 2/3; } }
 .about-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--card); }

 /* Values */
 section { padding: 80px 0; border-top: 1px solid var(--line); }
 .section-title { font-family: 'Cormorant Garamond','IBM Plex Sans Arabic',serif; font-size: clamp(28px, 4vw, 44px); font-weight: 400; margin-bottom: 16px; letter-spacing: -.01em; }
 .section-sub { color: var(--muted); margin-bottom: 48px; max-width: 540px; }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 @media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }
 .val { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; }
 .val-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 2px; margin-bottom: 14px; }
 .val h3 { font-family: 'Cormorant Garamond', 'IBM Plex Sans Arabic', serif; font-size: 24px; font-weight: 400; margin-bottom: 10px; }
 .val p { color: var(--muted); font-size: 14px; }

 /* Stats */
 .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
 @media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
 .stat strong {
 display: block;
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(48px, 6vw, 72px); font-weight: 400; line-height: 1;
 letter-spacing: -.02em;
 }
 .stat span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; display: block; }

 /* CTA */
 .cta-card {
 background: var(--card); border: 1px solid var(--line);
 border-radius: 22px; padding: 56px 40px; text-align: center;
 }
 .cta-card h3 { font-family: 'Cormorant Garamond','IBM Plex Sans Arabic',serif; font-size: clamp(28px, 4vw, 40px); font-weight: 400; margin-bottom: 12px; letter-spacing: -.01em; }
 .cta-card p { color: var(--muted); margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
 .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 14px; border: 1px solid var(--fg); cursor: pointer; transition: opacity .2s, transform .2s; }
 .btn:hover { transform: translateY(-1px); opacity: .9; }
 .btn-outline { background: transparent; color: var(--fg); border-color: var(--line); }
 .btn-outline:hover { border-color: var(--fg); }

 footer { border-top: 1px solid var(--line); padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }

 html[lang='en'] body{font-family:'Cormorant Garamond','Inter','IBM Plex Sans Arabic',serif!important}
 .stat-num,.pkg-price,.svc-price,.pkg .price,.ret-plan-price,.line-range,.big-price,.cta-price,.all-svc-price,.tier-item-price,.sum-row span:last-child,.service-card-price,.sp-price,.hero-price-badge strong,.svc-row-price,.gc-amount,.gc-price{font-family:'Cormorant Garamond',serif!important}
 .btn,.btn-primary,.btn-ghost,.btn-outline,.btn-next,.btn-back-step,.pkg-cta,.svc-row-cta,.cta-btn,.newsletter-btn,.coupon-btn,.filter-btn,.wa-book-btn,.wallet-pay-btn{font-family:'Cormorant Garamond','IBM Plex Sans Arabic',serif!important}
 *{font-family:'Cormorant Garamond','IBM Plex Sans Arabic',serif!important}