/* TEO Marketing Landing Page */

/* Arabic-only Almarai. Latin/English glyphs keep the next font in the stack. */
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tssoApxBaigK_hnnS_antnqWo572.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tsstApxBaigK_hnnQ1iFo0C3.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tsstApxBaigK_hnnQ1iFo0C3.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tssoApxBaigK_hnnS-agtnqWo572.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tssoApxBaigK_hnnS-agtnqWo572.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'AlmaraiArabic';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v19/tssoApxBaigK_hnnS_qjtnqWo572.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
:root {
    --lp-arabic: ;
    --teo-red: #cb1e31;
    --teo-brown: #6d5f5a;
    --teo-dark: #161616;
    --teo-modules: #4d4130;
    --teo-transform: #603f22;
    --teo-max: 1280px;
    --header-pad: 100px;
    --lp-section-logo-left: 7.8125%; /* 100/1280 */
    --lp-section-logo-top: 3.365%;   /* 28/832 */
    --lp-section-logo-w: 92px;
    --lp-section-logo-h: 63.652px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--lp-arabic) 'Geist', 'Inter', system-ui, sans-serif;
    color: var(--teo-brown);
    background: #fff;
    overflow-x: hidden;
}

body.lp-lang-ar {
    --lp-arabic: 'AlmaraiArabic',;
}

body.lp-nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Sticky header ── */
.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
}

.lp-header__inner {
    max-width: var(--teo-max);
    margin: 0 auto;
    padding: 28px var(--header-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-header__logo {
    pointer-events: auto;
    height: 64px;
    width: auto;
}

.lp-header__logo img { height: 64px; width: auto; }

.lp-header__actions {
    display: none;
}

.lp-lang {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.lp-lang__btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-lang__btn.is-active {
    background: #fff;
    color: #767676;
    font-weight: 600;
}

@media (hover: hover) {
    .lp-lang__btn:hover:not(.is-active) {
        background: rgba(255, 255, 255, 0.24);
        color: #fff;
    }

    .lp-lang__btn.is-active:hover {
        background: #fff;
        color: #5a5a5a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    }

    .lp-hero__menu:hover,
    .lp-menu-btn:hover {
        background: rgba(0, 0, 0, 0.58);
        border-color: #8a7a74;
        transform: scale(1.04);
    }
}

.lp-lang__btn:active:not(.is-active) {
    background: rgba(255, 255, 255, 0.34);
}

.lp-lang__btn.is-active:active {
    transform: scale(0.96);
}

.lp-lang--nav {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.lp-menu-btn {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--teo-brown);
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lp-menu-btn img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.lp-header--light .lp-menu-btn img { filter: none; }
.lp-header--dark .lp-menu-btn { border-color: rgba(255,255,255,0.5); }

/* ── Full-screen nav ── */

    .lp-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(22, 22, 22, 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 72px 24px 36px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.lp-nav.is-open { opacity: 1; visibility: visible; }

.lp-nav__close {
    position: absolute;
    top: 28px;
    right: var(--header-pad);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.lp-nav > a:not(.lp-nav__course) {
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.25;
    color: #fff;
    transition: color 0.2s;
}


.lp-nav > a:not(.lp-nav__btn):hover { color: var(--teo-red); }

.lp-nav__auth {
    margin-top: 1.1rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.lp-nav__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-family: var(--lp-arabic) Geist, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.lp-nav__btn--login {
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
}

.lp-nav__btn--login:hover {
    border-color: #fff;
    color: #fff;
}

.lp-nav__btn--course {
    border: 1px solid #cb1e31;
    background: #cb1e31;
    color: #fff;
}

.lp-nav__btn--course:hover {
    background: #a81828;
    border-color: #a81828;
    color: #fff;
}

/* Sections — each slide is exactly one viewport */
.lp-section {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}

.lp-curriculum__logo,
.lp-modules__logo,
.lp-unique__logo,
.lp-transform__logo,
.lp-instructor__logo,
.lp-science__logo,
.lp-taleen__logo,
.lp-faq__logo {
    position: absolute;
    left: var(--lp-section-logo-left);
    top: var(--lp-section-logo-top);
    width: var(--lp-section-logo-w);
    height: var(--lp-section-logo-h);
    aspect-ratio: 92 / 63.652;
    z-index: 3;
}

.lp-section__inner {
    max-width: var(--teo-max);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 100%;
}

/* ── Typography helpers ── */
.lp-serif { font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif; }
.lp-script { font-family: var(--lp-arabic) 'Great Vibes', cursive; }

.lp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    background: var(--teo-red);
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-transform: uppercase;
}

.lp-cta:hover {
    background: #a81828;
    transform: translateY(-1px);
    color: #fff;
}

.lp-cta--white {
    background: #fff;
    color: var(--teo-dark);
}

.lp-cta--white:hover {
    background: #f5f5f5;
    color: var(--teo-dark);
}

.lp-cta--outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

/* ══════════════════════════════════════
   S1 — Hero (Figma 99:87) — pixel match
   Section = 100vh. Canvas = exact 1280×832.
   Scale with CONTAIN (Math.min) so the full
   Figma frame is always visible — never cropped.
   ══════════════════════════════════════ */
.lp-header--on-hero .lp-header__logo {
    opacity: 0;
    pointer-events: none;
}

.lp-hero {
    background: #f5f0eb;
    overflow: hidden;
}

/* Marble on the outer 100vh section — one continuous BG */
.lp-hero__marble {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.lp-hero__marble img {
    position: absolute;
    width: 144.76%;
    height: 148.44%;
    left: -21.05%;
    top: -21.15%;
    max-width: none;
    object-fit: cover;
}

/* Content artboard only (no BG) — JS: translate(-50%,-50%) scale(min) */
.lp-hero__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1280px;
    height: 832px;
    overflow: hidden;
    background: transparent;
    transform-origin: center center;
    will-change: transform;
    z-index: 1;
}

/* Model — Figma 99:89 / 99:88 with inner crop */
.lp-hero__model-blur,
.lp-hero__model {
    position: absolute;
    width: 512px;
    height: 893px;
    pointer-events: none;
    z-index: 1;
}

.lp-hero__model-blur {
    left: calc(79.17% - 57.33px);
    top: 30px;
    transform: translateX(-50%);
    opacity: 0.2;
    filter: blur(32px);
}

.lp-hero__model {
    left: calc(75% - 34px);
    top: 0;
    transform: translateX(-50%);
    filter: drop-shadow(-20px 34px 114px rgba(0,0,0,0.13))
            drop-shadow(30px 34px 34px rgba(0,0,0,0.09))
            drop-shadow(0 0 32px rgba(0,0,0,0.25));
}

.lp-hero__model-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Exact Figma freepik crop inside 512×893 */
.lp-hero__model-clip img {
    position: absolute;
    width: 223.39%;
    height: 149.62%;
    left: -64.59%;
    top: 0;
    max-width: none;
}

/* Logo vectors — frame-relative insets from Figma */
.lp-hero__logo-t,
.lp-hero__logo-e,
.lp-hero__logo-sil {
    position: absolute;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
}

/* Mobile-only Figma brand mark — shown in landing-mobile.css */
.lp-hero__brand {
    display: none;
}

.lp-hero__logo-t {
    left: 7.81%;
    top: 18.15%;
    width: 24.16%;   /* 100 - 68.03 - 7.81 */
    height: 33.23%;  /* 100 - 48.62 - 18.15 */
    z-index: 2;
}

.lp-hero__logo-e {
    left: 30.02%;
    top: 20.44%;
    width: 14.27%;   /* 100 - 55.71 - 30.02 */
    height: 36.53%;  /* 100 - 43.03 - 20.44 */
    z-index: 2;
}

.lp-hero__logo-sil {
    left: 30.52%;
    top: 29.45%;
    width: 10.32%;   /* 100 - 59.16 - 30.52 */
    height: 24.01%;  /* 100 - 46.54 - 29.45 */
    z-index: 3;
}

.lp-hero__discover {
    position: absolute;
    left: 96px;
    top: 527px;
    width: 330px;
    margin: 0;
    z-index: 3;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 40px;
    color: #6d5f5a;
}

.lp-hero__elegance {
    position: absolute;
    left: calc(8.33% + 79.33px);
    top: 553px;
    margin: 0;
    z-index: 4;
    font-family: var(--lp-arabic) 'Great Vibes', cursive;
    font-size: 146.592px;
    line-height: 91.62px;
    color: #cb1e31;
    white-space: nowrap;
}

.lp-hero__built {
    position: absolute;
    left: 96px;
    top: 645px;
    margin: 0;
    z-index: 3;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 40px;
    color: rgba(22, 22, 22, 0.51);
    white-space: nowrap;
}

.lp-hero__cta {
    position: absolute;
    left: 100px;
    top: 737px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #cb1e31;
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.lp-hero__cta:hover {
    background: #a81828;
    color: #fff;
    transform: translateY(-1px);
}

/* Global EN/AR + menu — same position on every homepage section */
.lp-hero__actions {
    position: fixed;
    top: 3.365%;
    right: 7.8125%;
    left: auto;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    pointer-events: auto;
}

.lp-video__menu,
.lp-curriculum__menu,
.lp-modules__menu,
.lp-unique__menu,
.lp-transform__menu,
.lp-instructor__menu,
.lp-science__menu,
.lp-taleen__menu,
.lp-faq__menu {
    display: none !important;
}

.lp-hero__menu {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lp-hero__menu:active,
.lp-menu-btn:active {
    transform: scale(0.96);
    background: rgba(0, 0, 0, 0.65);
}

.lp-hero__menu img {
    width: 24px;
    height: 24px;
}

/* ══════════════════════════════════════
   S2 — Video (Figma 99:197) — 100% match
   Outer 100vh video BG + positions as % of
   the Figma 1280×832 frame (full-bleed).
   ══════════════════════════════════════ */
.lp-video {
    background: #000;
    overflow: hidden;
}

.lp-video__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lp-video__el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Figma 99:198 — top:454 h:378 of 832 */
.lp-video__gradient {
    position: absolute;
    left: 0;
    right: 0;
    top: 54.567%;   /* 454/832 */
    height: 45.433%; /* 378/832 */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 36.538%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Figma menu: left calc(75%+…)/ bar end → 1132px, top ~35.83 */
.lp-video__menu {
    position: absolute;
    right: 7.8125%; /* 100/1280 */
    top: 4.306%;    /* ~35.83/832 — matches Figma bar alignment */
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
}

.lp-video__menu img {
    width: 50%;
    height: 50%;
    max-width: 24px;
    max-height: 24px;
}

/* Figma 99:209 — left:100 top:543, gap:185, items-end */
.lp-video__bottom {
    position: absolute;
    left: 7.8125%;   /* 100/1280 */
    top: 65.264%;    /* 543/832 */
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 14.453vw;   /* 185/1280 */
    max-width: 84.375%; /* 1080/1280 */
    pointer-events: none;
}

.lp-video__text {
    flex: 0 0 auto;
    width: min(632px, 49.375vw);
    margin: 0;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 1.875vw, 24px);
    line-height: 1.5;
    color: #fff;
    pointer-events: auto;
}

.lp-video__brand {
    flex: 0 0 auto;
    width: min(263px, 20.55vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 1.25vw, 16px);
    pointer-events: auto;
}

.lp-video__mark {
    position: relative;
    width: 94%; /* 247.156/263 */
    aspect-ratio: 247.156 / 171;
    align-self: flex-start;
}

.lp-video__mark img {
    position: absolute;
    /* Figma inset-[-4.68%_0_0_-4.86%] */
    left: -4.86%;
    top: -4.68%;
    width: calc(100% + 4.86%);
    height: calc(100% + 4.68%);
    max-width: none;
    object-fit: fill;
}

.lp-video__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(40px, 5.77vw, 48px);
    padding: 10px 16px;
    border-radius: 999px;
    background: #cb1e31;
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.17vw, 15px);
    line-height: normal;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.lp-video__cta:hover {
    background: #a81828;
    color: #fff;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════
   S3 — Curriculum (Figma 99:218)
   100vh — marble left + portrait right (top-anchored, no head crop)
   ══════════════════════════════════════ */
.lp-curriculum {
    background: #f6f8fa;
    overflow: hidden;
}

.lp-curriculum__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Left book-matched marble — overlaps photo by 2px to kill white seam */
.lp-curriculum__marble {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(54.0625% + 2px); /* (1280-588)/1280 + overlap */
    height: 106.0096%; /* 882/832 — matches Figma image height */
    overflow: hidden;
}

.lp-curriculum__marble img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right top;
}

/* Right portrait — Figma 588×882, top:0 so head is never cropped */
.lp-curriculum__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 45.9375%; /* 588/1280 */
    height: 106.0096%; /* 882/832 */
    overflow: hidden;
}

.lp-curriculum__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top; /* keep turban/head fully visible */
}

/* Figma 99:235 — left fade */
.lp-curriculum__fade {
    position: absolute;
    left: -0.234%; /* -3/1280 */
    top: 0;
    width: 61.5625%; /* 788/1280 */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(246, 248, 250, 0.84) 36.358%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.lp-curriculum__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.lp-curriculum__menu {
    position: absolute;
    right: 7.8125%;
    top: 4.306%;
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.lp-curriculum__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
}

/* Figma 99:236 — left 96, vertically centered, w 532, gap 32 */
.lp-curriculum__copy {
    position: absolute;
    left: 7.5%; /* 96/1280 */
    top: 50%;
    transform: translateY(-50%);
    width: min(532px, 41.5625vw);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 2.5vw, 32px);
}

.lp-curriculum__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.lp-curriculum__label {
    margin: 0;
    width: 100%;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-size: clamp(28px, 3.125vw, 40px);
    line-height: 42px;
    color: #cb1e31;
}

.lp-curriculum__title {
    margin: 0;
    width: 100%;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3.75vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.05em; /* -2.4px at 48px */
    color: #6d5f5a;
}

.lp-curriculum__body {
    width: 100%;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.17vw, 15px);
    line-height: normal;
    text-align: justify;
    color: #000;
}

.lp-curriculum__body p {
    margin: 0 0 1em;
}

.lp-curriculum__body p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════
   S4 — Modules (Figma 99:251) — 100vh, % layout
   ══════════════════════════════════════ */
.lp-modules {
    background: #4d4130;
    overflow: hidden;
    color: #fff;
}

/* Right portrait panel — never stretch (cover crops, keeps proportions) */
.lp-modules__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 43.359375%; /* 555/1280 */
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.lp-modules__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

/* Soft seam into brown (Figma left mask) */
.lp-modules__veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        #4d4130 0%,
        #4d4130 87%,
        rgba(77, 65, 48, 0) 100%
    );
}

.lp-modules__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.lp-modules__menu {
    position: absolute;
    right: 7.8125%;
    top: 4.306%; /* ~36/832 */
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.lp-modules__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
}

.lp-modules__heading {
    position: absolute;
    left: 7.8125%;
    top: 14.5%;
    width: 50.546875%; /* 647/1280 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 2;
}

.lp-modules__label,
.lp-modules__subtitle {
    margin: 0;
    width: 100%;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-style: normal;
    color: #fff;
}

.lp-modules__label {
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.1;
}

.lp-modules__subtitle {
    font-size: clamp(13px, 1.25vw, 16px);
    line-height: 1.25;
    max-width: 92%;
}

.lp-modules__list {
    position: absolute;
    left: 7.8125%;
    top: 27%;
    bottom: 12.5%;
    width: 50.5%;
    display: flex;
    align-items: flex-start;
    column-gap: 1.4vw;
    z-index: 2;
    overflow: hidden;
}

.lp-modules__col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 24px;
}

.lp-modules__col:last-child {
    flex: 1.15 1 0;
}

.lp-modules__item {
    display: flex;
    gap: 0.55vw;
    align-items: flex-start;
    min-height: 0;
}
.lp-modules__num {
    position: static;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

.lp-modules__item p {
    margin: 0;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: break-word;
}

.lp-modules__cta {
    position: absolute;
    left: 7.8125%;
    top: auto;
    bottom: 3.8%;
    height: 44px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #cb1e31;
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    z-index: 3;
}

.lp-modules__cta:hover {
    filter: brightness(1.05);
}


/* ══════════════════════════════════════
   S5 — Unique (Figma 99:282)
   Full-bleed left portrait + brown panel + list
   ══════════════════════════════════════ */
.lp-unique {
    background: #603f22;
    overflow: hidden;
    color: #fff;
}

/* Left portrait — 575/1280; source taller than slide */
.lp-unique__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 44.921875%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: url('../images/unique-mask.svg');
    mask-image: url('../images/unique-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.lp-unique__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

/* Soft seam into brown */
.lp-unique__veil {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to left,
        #603f22 0%,
        #603f22 78%,
        rgba(96, 63, 34, 0) 100%
    );
}

.lp-unique__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    display: block;
}

.lp-unique__menu {
    position: absolute;
    left: 88.4375%;
    top: 4.306%;
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.lp-unique__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
    display: block;
}

/* Title — 603/1280, 140/832, 394/1280 */
.lp-unique__title {
    position: absolute;
    left: 47.109375%;
    top: 16.827%;
    width: 30.78125%;
    margin: 0;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.984;
    color: #fff;
    word-break: break-word;
    z-index: 2;
}

/* List — texts @ 622/1280, bars @ 608/1280 */
.lp-unique__list {
    position: absolute;
    left: 47.109375%;
    top: 37.139%;
    width: 41.328125%; /* 529/1280 */
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4.8vh, 40px);
    z-index: 2;
}

.lp-unique__item {
    display: flex;
    gap: clamp(10px, 1.1vw, 14px);
    align-items: flex-start;
}

.lp-unique__bar {
    width: 5px;
    height: 68px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 0 999px 999px 0;
    margin-top: 6px;
}

.lp-unique__item--short .lp-unique__bar {
    height: 51px;
}

.lp-unique__item p {
    margin: 0;
    flex: 1;
    font-family: var(--lp-arabic) 'Geist', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.40625vw, 18px);
    line-height: 1.5;
    text-align: justify;
    color: #fff;
}

/* ══════════════════════════════════════
   S6 — Transform (Figma 35:6467)
   Full-bleed % layout matching 1280×832
   ══════════════════════════════════════ */
.lp-transform {
    background: #edeff4;
    overflow: hidden;
    color: #000;
}

/* Left portrait — 555/1280 edge to edge */
.lp-transform__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 43.359375%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: url('../images/transform-after-mask.svg');
    mask-image: url('../images/transform-after-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.lp-transform__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

/* Logo — 100/1280, 28/832 */
.lp-transform__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    display: block;
}

/* Menu — 1132/1280, 35.83/832 */
.lp-transform__menu {
    position: absolute;
    left: 88.4375%;
    top: 4.306%;
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.lp-transform__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
    display: block;
}

/* Title — 519/1280, 277/832, 234/1280 */
.lp-transform__title {
    position: absolute;
    left: 40.546875%;
    top: 33.293%;
    width: 18.28125%;
    margin: 0;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.984;
    color: #000;
    word-break: break-word;
    z-index: 2;
}

/* Copy + CTA — 886/1280, 345/832, 252/1280 */
.lp-transform__copy {
    position: absolute;
    left: 69.21875%;
    top: 41.466%;
    width: 19.6875%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.88vh, 24px);
    z-index: 2;
}

.lp-transform__body {
    margin: 0;
    width: 100%;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.40625vw, 18px);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

.lp-transform__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #cb1e31;
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.17vw, 15px);
    line-height: normal;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.lp-transform__cta:hover {
    background: #a81828;
    color: #fff;
}

/* ══════════════════════════════════════
   S6 — Instructor (Figma 99:456)
   Marble left + portrait right + copy + chrome
   ══════════════════════════════════════ */
.lp-instructor {
    background: #fff url('../images/instructor-marble.jpg') center / cover no-repeat;
    overflow: hidden;
}

.lp-instructor__marble {
    display: none;
}

/* Portrait — default img crop (mobile inherits these; do not change) */
.lp-instructor__photo {
    position: absolute;
    left: 45.703125%; /* 585/1280 */
    top: -26.322115%; /* -219/832 */
    right: auto;
    width: 64.375%; /* 824/1280 */
    height: 150.240385%; /* 1250/832 */
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    background: none;
}

.lp-instructor__photo img {
    position: absolute;
    left: -1.12%;
    top: 0;
    width: 101.15%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

/* Desktop only — Figma 99:612 left fade; scale the 900×1250 asset
   so the gold frame and full figure sit in the 832 slide. */
@media (min-width: 769px) {
    .lp-instructor__photo {
        left: 43.5%;
        top: -8%;
        right: 0;
        width: auto;
        height: 116%;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-mode: alpha;
    }

    .lp-instructor__photo img {
        left: 2%;
        width: auto;
        object-fit: unset;
        object-position: unset;
    }
}

.lp-instructor__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.lp-instructor__menu {
    position: absolute;
    right: 7.8125%;
    top: 4.306%;
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.lp-instructor__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
}

.lp-instructor__copy {
    position: absolute;
    left: 7.8125%; /* 100/1280 */
    top: 50%;
    transform: translateY(calc(-50% + 2.043%)); /* +17/832 */
    width: 41.5625%; /* 532/1280 */
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3.85vh, 2rem); /* ~32px */
    z-index: 2;
}

.lp-instructor__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.lp-instructor__label {
    margin: 0;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(28px, 3.125vw, 40px);
    line-height: 1.05;
    color: #cb1e31;
}

.lp-instructor__title {
    margin: 0;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3.75vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: #6d5f5a;
}

.lp-instructor__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 382px);
}

.lp-instructor__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-height: 80px;
    height: 80px;
    padding: 10px 38px 10px 18px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}

.lp-instructor__btn:last-child {
    padding-left: 48px;
    padding-right: 48px;
}

.lp-instructor__btn img {
    width: 41.5px;
    height: 41.5px;
    flex-shrink: 0;
    max-width: none;
}

.lp-instructor__btn:hover {
    background: #222;
    color: #fff;
}

/* ══════════════════════════════════════
   S7 — Science (Figma 99:307 + card frames)
   ══════════════════════════════════════ */
.lp-science {
    background: #edeff4;
    overflow: hidden;
    color: #000;
}

.lp-science__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.lp-science__menu {
    position: absolute;
    right: 7.8125%;
    top: 4.306%;
    width: 48px;
    height: 48px;
    z-index: 3;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.lp-science__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
}

.lp-science__title {
    position: absolute;
    left: 50%;
    top: 7.8125%;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 92%;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 5vw, 64px);
    line-height: 1;
    text-align: center;
    color: #000;
    white-space: nowrap;
    z-index: 2;
}

.lp-science__viewport {
    position: absolute;
    left: 0;
    right: 0;
    top: 17.548%;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
}

.lp-science__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: 100%;
    height: 100%;
    padding: 0 max(24px, calc((100% - min(1000px, 88vw)) / 2));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}

.lp-science__track:active { cursor: grabbing; }

.lp-science__track::-webkit-scrollbar { display: none; }

.lp-science__card {
    background: #4d4130;
    border-radius: 40px;
    width: min(1000px, 88vw);
    height: min(546px, 66vh);
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    gap: clamp(24px, 3.5vw, 50px);
    padding: clamp(24px, 3.5vw, 48px);
    box-sizing: border-box;
    opacity: 0.4;
    transition: opacity 0.35s ease;
}

.lp-science__card.is-active { opacity: 1; }

.lp-science__media {
    width: clamp(180px, 27.34vw, 350px);
    height: clamp(260px, 54.08vh, 450px);
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.lp-science__media img,
.lp-science__pair img,
.lp-science__thumbs img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    border-radius: 20px;
    display: block;
}

.lp-science__pair {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

.lp-science__pair img {
    width: clamp(130px, 21.09vw, 270px);
    height: clamp(260px, 54.08vh, 450px);
}

.lp-science__pair--wide img { width: clamp(130px, 21.33vw, 273px); }
.lp-science__pair--xl img { width: clamp(130px, 21.95vw, 281px); }

.lp-science__body,
.lp-science__quote {
    margin: 0;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    min-width: 0;
}

.lp-science__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vh, 48px);
    max-width: 504px;
}

.lp-science__body p { margin: 0; }
.lp-science__body--solo { justify-content: center; }

.lp-science__thumbs {
    display: flex;
    gap: 28px;
}

.lp-science__thumbs img {
    width: clamp(100px, 18.6vw, 238px);
    height: clamp(90px, 24vh, 200px);
    flex-shrink: 0;
}

.lp-science__quote {
    flex: 1;
    max-width: 294px;
    display: flex;
    align-items: center;
}

.lp-science__quote--narrow { max-width: 284px; }
.lp-science__quote--tight { max-width: 268px; }

/* ══════════════════════════════════════
   S8 — Taleen (Figma 99:326)
   ══════════════════════════════════════ */
.lp-taleen {
    background: #4d4130;
    color: #fff;
    overflow: hidden;
}

.lp-taleen__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.lp-taleen__menu {
    position: absolute;
    right: 7.8125%; /* 100/1280 from right: (1280-100-48)/1280... Frame at x=100 w=1080, menu at end → right = 100px = 7.8125% */
    top: 5.048%; /* 34+7.826 ≈ 42/832 */
    width: 48px;
    height: 48px;
    z-index: 4;
    border-radius: 999px;
    border: 1px solid #fff;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.lp-taleen__menu img {
    width: 24px;
    height: 24px;
    max-width: none;
}

.lp-taleen__portrait {
    position: absolute;
    left: 3.984375%; /* 51/1280 */
    bottom: 8.413%;  /* 70/832 */
    width: 37.265625%; /* 477/1280 */
    height: 75.240%; /* 626/832 */
    border-radius: 30px;
    overflow: hidden;
    z-index: 2;
}

.lp-taleen__portrait img {
    position: absolute;
    left: 0;
    top: -8.82%;
    width: 100%;
    height: 114.28%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.lp-taleen__copy {
    position: absolute;
    left: calc(50% - 12px); /* Figma: left-[calc(50%-12px)] */
    top: 27.163%; /* 226/832 */
    width: min(533px, 41.64%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 4;
}

.lp-taleen__label {
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 2.5vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    color: #fff;
}

.lp-taleen__body {
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.lp-taleen__watermark {
    position: absolute;
    left: calc(58.33% - 426.67px); /* ≈ 320px on 1280 */
    top: 45.553%; /* 379/832 */
    margin: 0;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(120px, 28.806vw, 368.718px);
    line-height: normal;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3; /* above portrait, below copy — Figma overlay */
}

.lp-taleen__watermark-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
}

/* ══════════════════════════════════════
   S9 — FAQ (Figma 99:109)
   Section = 100vh. Canvas = exact 1280×832.
   ══════════════════════════════════════ */
.lp-faq {
    background: #e8e4df;
    color: #040404;
    overflow: hidden;
}

.lp-faq__marble {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.lp-faq__marble img {
    position: absolute;
    left: -17.13%;
    top: -7.88%;
    width: 120.18%;
    height: 123.23%;
    max-width: none;
    object-fit: cover;
}

.lp-faq__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1280px;
    height: 832px;
    overflow: hidden;
    background: transparent;
    transform-origin: center center;
    z-index: 2;
}

.lp-faq__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    display: block;
}

.lp-faq__menu {
    position: absolute;
    left: calc(91.67% - 41.33px); /* 1132.05 */
    top: 35.83px;
    width: 48px;
    height: 48px;
    z-index: 4;
    border-radius: 999px;
    border: 1px solid #6d5f5a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.lp-faq__menu img {
    width: 24px;
    height: 24px;
    display: block;
}

.lp-faq__header {
    position: absolute;
    left: 50%;
    top: 190px;
    transform: translateX(-50%);
    width: 644px;
    height: 114px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 3;
    overflow: visible;
}

.lp-faq__badge {
    border: 0.5px solid #040404;
    border-radius: 99px;
    padding: 6px 12px;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #040404;
    white-space: nowrap;
    flex-shrink: 0;
}

.lp-faq__title {
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 66px;
    letter-spacing: -1.12px;
    text-align: center;
    color: #040404;
    margin: 0;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}

.lp-faq__grid {
    position: absolute;
    left: 99px;
    top: 336px;
    width: 1082px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 3;
}

.lp-faq__col {
    display: flex;
    flex-direction: column;
    gap: 19.793px;
    width: 531.104px;
    flex-shrink: 0;
}

.lp-faq__item {
    background: #fff;
    border-radius: 6.598px;
    padding: 19.793px;
    margin: 0;
    width: 100%;
    height: 69.274px;
    box-sizing: border-box;
    overflow: hidden;
}

.lp-faq__item[open] {
    height: 128.652px;
    display: flex;
    flex-direction: column;
    gap: 19.793px;
}

.lp-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #040404;
    width: 100%;
    flex-shrink: 0;
}

.lp-faq__item summary::-webkit-details-marker { display: none; }

.lp-faq__q {
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18.5px;
    line-height: 28.04px;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: #040404;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
}

.lp-faq__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.948px;
    border-radius: 24.741px;
    box-sizing: border-box;
}

.lp-faq__icon {
    width: 19.793px;
    height: 19.793px;
    display: block;
    max-width: none;
}

.lp-faq__icon--minus { display: none; }
.lp-faq__item[open] .lp-faq__icon--plus { display: none; }
.lp-faq__item[open] .lp-faq__icon--minus { display: block; }

.lp-faq__item p {
    margin: 0;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.195px;
    line-height: 19.793px;
    color: #040404;
    width: 100%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   S10 — Testimonials (Figma 99:169)
   Section = 100vh. Canvas = exact 1280×832.
   ══════════════════════════════════════ */
.lp-testimonials {
    background: #fff;
    color: #000;
    overflow: hidden;
}

.lp-testimonials__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1280px;
    height: 832px;
    overflow: hidden;
    background: #fff;
    transform-origin: center center;
    z-index: 2;
}

.lp-testimonials__rings {
    position: absolute;
    left: 50%;
    top: -843px;
    width: 1551px;
    height: 1551px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.lp-testimonials__ring {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    max-width: none;
    height: auto;
    display: block;
}

.lp-testimonials__ring--1 { width: 1551px; }
.lp-testimonials__ring--2 { width: 1286px; }
.lp-testimonials__ring--3 { width: 1070px; }

.lp-testimonials__title {
    position: absolute;
    left: 50%;
    top: 111px;
    transform: translateX(-50%);
    width: 489px;
    margin: 0;
    font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 63px;
    text-align: center;
    color: #000;
    z-index: 2;
}

.lp-testimonials__intro {
    position: absolute;
    left: 50%;
    top: 257px;
    transform: translateX(-50%);
    width: 533px;
    margin: 0;
    font-family: var(--lp-arabic) 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

.lp-testimonial {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    background: #d9d9d9;
    cursor: pointer;
    overflow: hidden;
    z-index: 3;
    display: block;
    -webkit-appearance: none;
    appearance: none;
}

.lp-testimonial:focus-visible {
    outline: 2px solid #cb1e31;
    outline-offset: 3px;
}

.lp-testimonial > img,
.lp-testimonial__media {
    display: block;
    width: 100%;
    height: 100%;
}

.lp-testimonial > img {
    object-fit: cover;
    max-width: none;
}

.lp-testimonial__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.lp-testimonial__media img {
    position: absolute;
    max-width: none;
    display: block;
}

/* New thumbs are already cropped to each card’s aspect */
.lp-testimonial--c .lp-testimonial__media img,
.lp-testimonial--f .lp-testimonial__media img,
.lp-testimonial--g .lp-testimonial__media img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-testimonial__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 59px;
    height: 59px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.lp-testimonial__play img {
    width: 59px;
    height: 59px;
    max-width: none;
    transform: rotate(90deg);
    display: block;
}

/* All cards share the same 20px rounded clip */
.lp-testimonial--a,
.lp-testimonial--b,
.lp-testimonial--c,
.lp-testimonial--d,
.lp-testimonial--e,
.lp-testimonial--f,
.lp-testimonial--g {
    border-radius: 20px;
    overflow: hidden;
}

/* Exact Figma 1280×832 positions */
.lp-testimonial--a {
    left: 100px;
    top: 362px;
    width: 202px;
    height: 277px;
}
.lp-testimonial--a > img {
    width: 202px;
    height: 277px;
    object-fit: cover;
}

.lp-testimonial--b {
    left: calc(16.67% + 105.67px); /* 319.05 */
    top: 421px;
    width: 202px;
    height: 366px;
}
.lp-testimonial--b > img {
    width: 202px;
    height: 366px;
    object-fit: cover;
}

.lp-testimonial--c {
    left: calc(41.67% + 4.67px); /* 538.05 */
    top: 495px;
    width: 206px;
    height: 294px;
}

.lp-testimonial--d {
    left: calc(58.33% + 12.33px); /* 758.95 */
    top: 421px;
    width: 202px;
    height: 366px;
}
.lp-testimonial--d > img {
    width: 202px;
    height: 366px;
    object-fit: cover;
}

.lp-testimonial--e {
    left: calc(75% + 18px); /* 978 */
    top: 362px;
    width: 202px;
    height: 277px;
}
.lp-testimonial--e > img {
    width: 202px;
    height: 277px;
    object-fit: cover;
}

.lp-testimonial--f {
    left: 100px;
    top: 659px;
    width: 201px;
    height: 130px;
}

.lp-testimonial--g {
    left: calc(75% + 19px); /* 979 */
    top: 659px;
    width: 201px;
    height: 130px;
}

/* Video popup */
.lp-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lp-video-modal[hidden] { display: none !important; }

.lp-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.lp-video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 92vw);
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.lp-video-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.lp-video-modal__player {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #000;
}

body.lp-video-modal-open { overflow: hidden; }

/* ══════════════════════════════════════
   S11 — Footer (Figma 99:343)
   Full-bleed BG on section. Content = 1280×832 canvas.
   ══════════════════════════════════════ */
.lp-footer {
    background: #111;
    color: #fff;
    overflow: hidden;
}

/* Photo: exact Figma 1294×1435 @ top -425 on 1280×832, then COVER-scale to fill section */
.lp-footer__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.lp-footer__bg-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1280px;
    height: 832px;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform;
}

.lp-footer__bg-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.lp-footer__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.54);
    z-index: 1;
}

.lp-footer__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1280px;
    height: 832px;
    overflow: hidden;
    background: transparent;
    transform-origin: center center;
    z-index: 2;
}

.lp-footer__hero {
    position: absolute;
    left: 50%;
    top: 225px;
    transform: translateX(-50%);
    width: 399.148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    z-index: 2;
}

.lp-footer__logo {
    width: 399.148px;
    height: 252.001px;
    flex-shrink: 0;
}

.lp-footer__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: fill;
}

.lp-footer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 10px 48px;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    border-radius: 999px;
    font-family: var(--lp-arabic) 'Geist', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.lp-footer__cta:hover {
    opacity: 0.92;
}

.lp-footer__bar {
    position: absolute;
    left: 100px;
    top: 663px;
    width: 1081px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 2;
}

.lp-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.lp-footer__social,
.lp-footer__payment {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 291px;
    flex-shrink: 0;
}

.lp-footer__payment {
    justify-content: flex-end;
}

.lp-footer__social-label,
.lp-footer__payment-label {
    font-family: var(--lp-arabic) 'Inter', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
}

.lp-footer__icons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lp-footer__icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.lp-footer__icons a img {
    width: 24px;
    height: 24px;
    max-width: none;
    display: block;
}

.lp-footer__icons--pay a,
.lp-footer__pay {
    width: 34px;
    height: 24px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid rgba(15, 44, 36, 0.08);
    box-sizing: border-box;
    overflow: hidden;
}

.lp-footer__pay--visa {
    background: transparent;
    border: none;
}

.lp-footer__icons--pay a img,
.lp-footer__pay img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.lp-footer__gpay {
    gap: 2px;
    padding: 0 4px;
}

.lp-footer__gpay-g {
    width: 8px !important;
    height: 8px !important;
}

.lp-footer__gpay-pay {
    width: 14px !important;
    height: 7px !important;
}

.lp-footer__rule {
    width: 100%;
    height: 0;
    position: relative;
    flex-shrink: 0;
}

.lp-footer__rule img {
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 1px;
    max-width: none;
    display: block;
}

.lp-footer__thanks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.lp-footer__thanks-label {
    font-family: var(--lp-arabic) 'Inter', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    white-space: nowrap;
}

.lp-footer__credits {
    display: flex;
    align-items: center;
    gap: 31px;
    text-align: center;
}

.lp-footer__credit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--lp-arabic) 'Inter', 'Lato', sans-serif;
}

.lp-footer__credit-item strong {
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    color: #fff;
}

.lp-footer__credit-item em {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: normal;
    color: rgba(255, 255, 255, 0.6);
}

.lp-footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    font-family: var(--lp-arabic) 'Inter', 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.lp-footer__links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.lp-footer__links a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.lp-footer__links a:hover { opacity: 0.8; }

/* ── Responsive (tablet / shared; mobile ≤768 lives in landing-mobile.css) ── */
@media (max-width: 1024px) {
    :root { --header-pad: 48px; }

    .lp-transform__title {
        font-size: clamp(28px, 4.5vw, 48px);
    }

    .lp-transform__cta {
        white-space: normal;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
    }

    #taleen .lp-section__inner {
        grid-template-columns: 1fr;
    }

    .lp-taleen__portrait {
        left: 5%;
        width: min(420px, 55%);
        height: 58%;
        bottom: 10%;
    }

    .lp-taleen__copy {
        left: auto;
        right: 5%;
        width: min(420px, 42%);
        top: 22%;
    }

    .lp-taleen__watermark {
        font-size: clamp(90px, 22vw, 240px);
    }
}

@media (max-width: 640px) {
    :root { --header-pad: 24px; }

    .lp-header__logo img { height: 48px; width: auto; }

    .lp-header--on-hero .lp-header__logo {
        opacity: 1;
        pointer-events: auto;
    }

    .lp-science__title {
        white-space: normal;
        font-size: clamp(22px, 7vw, 40px);
        line-height: 1.05;
        top: 5.5%;
        max-width: 88%;
        text-wrap: balance;
    }

    .lp-science__viewport { top: 16%; }

    .lp-science__card {
        flex-direction: column;
        width: min(92vw, 420px);
        height: auto;
        min-height: 0;
        max-height: 72vh;
        padding: 20px;
        gap: 16px;
        overflow-y: auto;
    }

    .lp-science__media {
        width: 100%;
        height: 220px;
    }

    .lp-science__pair {
        width: 100%;
        gap: 10px;
    }

    .lp-science__pair img,
    .lp-science__pair--wide img,
    .lp-science__pair--xl img {
        width: 48%;
        height: 220px;
    }

    .lp-science__body,
    .lp-science__quote {
        font-size: 16px;
        max-width: none;
    }

    .lp-science__thumbs {
        gap: 12px;
    }

    .lp-science__thumbs img {
        width: calc(50% - 6px);
        height: 110px;
    }

    .lp-taleen__portrait {
        left: 50%;
        transform: translateX(-50%);
        width: min(280px, 70vw);
        height: 42%;
        bottom: auto;
        top: 14%;
    }

    .lp-taleen__copy {
        left: 6%;
        right: 6%;
        width: auto;
        top: auto;
        bottom: 8%;
    }

    .lp-taleen__watermark {
        top: auto;
        bottom: 28%;
        left: 4%;
        font-size: clamp(72px, 28vw, 160px);
        opacity: 0.35;
    }

    .lp-instructor__btn { white-space: normal; text-align: center; font-size: 14px; }
}