/* Compact shared navigation refinements for all official public pages. */
.desktop-nav{gap:clamp(10px,1vw,17px)}
.desktop-nav a{font-size:11px}
.desktop-nav a[aria-current="page"]{color:var(--gold)}
@media(max-width:1190px){.desktop-nav{display:none}.menu-btn{display:flex}.portal-link{display:none}.mobile-nav{display:none;position:absolute;top:94px;inset-inline:0;background:#11150f;border-top:1px solid rgba(255,255,255,.15);box-shadow:0 22px 28px rgba(0,0,0,.23);padding:21px clamp(22px,4.1vw,64px);max-height:calc(100vh - 94px);overflow-y:auto}.mobile-nav.is-open{display:flex;flex-direction:column}.mobile-nav a{padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px}}
@media(min-width:1191px) and (max-width:1330px){.header-content{gap:13px}.header-actions{gap:12px}.logo-link{width:175px}.nav-cta{padding:13px 15px}}
@media(max-width:760px){.mobile-nav{top:79px;max-height:calc(100vh - 79px)}}
@media(max-width:420px){.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}

/* ============================================================
   AMERICAN LAB — MOTION EDITION 1.0 (23 Oct 2026)
   Progressive enhancement: content stays visible without JS.
   Hardware-friendly transforms/opacity. No layout-affecting effects.
   ============================================================ */

/* Small premium touches that work without JavaScript. */
.desktop-nav a,
.mobile-nav a { position: relative; }
.desktop-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 1px; background: var(--gold); transform: scaleX(0);
  transform-origin: left center; transition: transform .4s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.locale-ar .desktop-nav a::after { transform-origin: right center; }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.btn-gold, .nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after, .nav-cta::after {
  content: ""; position: absolute; inset: -50% auto -50% -65%; width: 48%;
  transform: rotate(22deg) translateX(-200%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.37),transparent);
  pointer-events: none; z-index: 1;
  transition: transform .75s cubic-bezier(.22,1,.36,1);
}
.btn-gold:hover::after, .btn-gold:focus-visible::after,
.nav-cta:hover::after, .nav-cta:focus-visible::after {
  transform: rotate(22deg) translateX(630%);
}

.program-card, .inner-page .feature-card, .inner-page .stat-card,
.inner-page .contact-card, .inner-page .resource-card {
  transition: transform .46s cubic-bezier(.22,1,.36,1),
    border-color .35s ease, box-shadow .46s ease, background .28s ease;
}
@media (hover: hover) and (pointer: fine) {
  .program-card:hover, .inner-page .feature-card:hover,
  .inner-page .stat-card:hover, .inner-page .contact-card:hover,
  .inner-page .resource-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 21px 50px rgba(15,20,12,.13);
  }
  .inner-page .feature-card:hover, .inner-page .stat-card:hover,
  .inner-page .contact-card:hover, .inner-page .resource-card:hover {
    border-color: rgba(201,158,48,.52);
  }
  .gallery-item img, .people-gallery img {
    transition: transform 1.05s cubic-bezier(.22,1,.36,1);
  }
  .gallery-item:hover img, .people-gallery:hover img { transform: scale(1.045); }
  .program-card .arrow-circle { transition: transform .35s cubic-bezier(.22,1,.36,1); }
  .program-card:hover .arrow-circle { transform: translate(4px,-4px); }
}

/* Native FAQ state is preserved; animate the newly opened answer only. */
.faq-item[open] .faq-answer,
.faq-list details[open] > :not(summary) {
  animation: al-faq-appear .36s cubic-bezier(.22,1,.36,1) both;
}
@keyframes al-faq-appear { from { opacity: .1; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Run entrance effects only when motion JS has successfully initialized. */
@media (prefers-reduced-motion: no-preference) {
  html.al-motion-active .hero-v2 .hero-kicker { animation: al-enter-up .64s .08s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-v2 h1 { animation: al-enter-up .94s .18s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-v2 .hero-description { animation: al-enter-up .78s .38s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-v2 .hero-cta { animation: al-enter-up .72s .5s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-v2 .hero-signals { animation: al-enter-up .7s .62s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-main-photo { animation: al-photo-reveal 1.35s .2s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-inset-photo { animation: al-enter-scale .85s .86s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .hero-visual-bar { animation: al-enter-down .7s .96s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .page-hero-copy { animation: al-enter-up .88s .1s both cubic-bezier(.22,1,.36,1); }
  html.al-motion-active .page-hero .page-card { animation: al-enter-scale 1s .24s both cubic-bezier(.22,1,.36,1); }

  html.al-motion-active .al-reveal:not(.al-visible) {
    opacity: 0; transform: translate3d(0,36px,0);
  }
  html.al-motion-active .al-reveal {
    transition: opacity .84s cubic-bezier(.22,1,.36,1),
                transform .84s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--al-delay, 0ms);
  }
  html.al-motion-active .al-reveal.al-visible { opacity: 1; transform: none; }

  html.al-motion-active .hero-main-photo img {
    transform: scale(1.035) translate3d(var(--al-parallax-x,0px),var(--al-parallax-y,0px),0);
    transition: transform .65s cubic-bezier(.2,.7,.2,1);
  }
}
@keyframes al-enter-up { from {opacity:0;transform:translate3d(0,30px,0)} to {opacity:1;transform:none} }
@keyframes al-enter-down { from {opacity:0;transform:translate3d(0,-18px,0)} to {opacity:1;transform:none} }
@keyframes al-enter-scale { from {opacity:0;transform:translate3d(0,24px,0) scale(.92)} to {opacity:1;transform:none} }
@keyframes al-photo-reveal { from {opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.045)} to {opacity:1;clip-path:inset(0 0 0 0);transform:none} }

/* Elegant progress cue. Passive, no focusable control or interaction trap. */
.al-scroll-progress {
  pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 10000; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg,#b58822,#e6c968,#b58822);
  box-shadow: 0 0 13px rgba(218,173,55,.35);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .al-scroll-progress { display: none; }
  .btn-gold::after, .nav-cta::after, .desktop-nav a::after { display:none; }
  .program-card, .inner-page .feature-card, .inner-page .stat-card,
  .inner-page .contact-card, .inner-page .resource-card,
  .gallery-item img, .people-gallery img, .faq-item[open] .faq-answer,
  .faq-list details[open] > :not(summary) { animation: none!important; transition: none!important; transform: none!important; }
}

/* Keep card elevation active after its scroll-reveal completes. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.al-motion-active .al-reveal.al-visible.program-card:hover,
  html.al-motion-active .al-reveal.al-visible.feature-card:hover,
  html.al-motion-active .al-reveal.al-visible.stat-card:hover,
  html.al-motion-active .al-reveal.al-visible.contact-card:hover,
  html.al-motion-active .al-reveal.al-visible.resource-card:hover {
    transform: translateY(-6px);
  }
}


/* ============================================================
   AMERICAN LAB — PREMIUM GOLD COMPONENT REFINEMENT · 2026-10-23
   Purely visual. No change to links, forms, navigation or motion JS.
   Loaded last from release.css on all 14 public pages.
   ============================================================ */

/* Primary gold actions: consistent modern corners and restrained depth. */
.nav-cta,
.btn-gold,
.inner-page .button-primary,
.inner-page .button-whatsapp {
  border-radius: 16px;
  background: linear-gradient(135deg, #e9c451 0%, #dfb43b 52%, #d1a12b 100%);
  box-shadow: 0 8px 22px rgba(10, 13, 7, .16), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: background .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1),
              transform .3s cubic-bezier(.22,1,.36,1);
}

/* Consistent secondary/action silhouettes without forcing gold fills. */
.btn-outline,
.inner-page .button-secondary,
.program-help a {
  border-radius: 15px;
}

/* Editorial gold accents: softer corners, still aligned to their photos. */
.hero-visual-bar {
  border-radius: 16px;
  background: linear-gradient(125deg, #e8c14c 0%, #dbaf35 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255,255,255,.30);
}
.bar-square { border-radius: 2px; }
.approach-photo-label,
.hero-card {
  border-radius: 18px;
  background: linear-gradient(135deg, #e8c14d 0%, #d9aa32 100%);
  box-shadow: 0 14px 32px rgba(16, 19, 12, .15);
}
.people-stamp { border-radius: 13px; }

/* Make CEFR active tab feel deliberate instead of a sharp square tile. */
.level-tabs { gap: 4px; padding: 5px; border-radius: 16px; }
.level-button { border-radius: 11px; border-inline-end: 0; }
.level-button.is-selected {
  background: linear-gradient(135deg, #e8c14d, #d5aa35);
  box-shadow: 0 4px 10px rgba(60, 45, 7, .12);
}

/* Hover only on pointer devices; keep tap targets visually stable on touch. */
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .btn-gold:hover,
  .inner-page .button-primary:hover,
  .inner-page .button-whatsapp:hover {
    background: linear-gradient(135deg, #f3d46d 0%, #e8c04d 54%, #dcaf35 100%);
    box-shadow: 0 13px 30px rgba(12, 14, 7, .20), inset 0 1px 0 rgba(255,255,255,.42);
    transform: translateY(-2px);
  }
}

/* Visible keyboard focus independent of hover animation. */
.nav-cta:focus-visible,
.btn-gold:focus-visible,
.inner-page .button-primary:focus-visible,
.inner-page .button-whatsapp:focus-visible,
.program-help a:focus-visible,
.level-button:focus-visible {
  outline: 3px solid #fff1b1;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .nav-cta, .btn-gold,
  .inner-page .button-primary,
  .inner-page .button-whatsapp { border-radius: 14px; }
  .hero-visual-bar { border-radius: 11px; }
  .approach-photo-label, .hero-card { border-radius: 14px; }
  .people-stamp { border-radius: 10px; }
  .level-tabs { gap: 2px; padding: 3px; border-radius: 13px; }
  .level-button { border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .btn-gold,
  .inner-page .button-primary,
  .inner-page .button-whatsapp { transition: none; }
}

/* ============================================================
   AMERICAN LAB — REFINED DARK SURFACES · 2026-10-23
   Gentle black/charcoal gradients + warm, low-opacity reflections.
   Backgrounds only: retains every existing image, animation and link.
   ============================================================ */

/* The hero retains its original subtle dot texture via ::before. */
.hero-v2 {
  background:
    radial-gradient(ellipse at 83% 18%, rgba(206, 171, 72, .075) 0%, rgba(206, 171, 72, 0) 50%),
    radial-gradient(ellipse at 9% 91%, rgba(72, 89, 67, .16) 0%, rgba(72, 89, 67, 0) 54%),
    linear-gradient(125deg, #0b0d0b 0%, #141914 49%, #20221a 100%);
}

/* Dark program and editorial sections: no bright gold flood fills. */
.dark-section {
  background:
    radial-gradient(ellipse at 91% 16%, rgba(198, 164, 64, .075), transparent 56%),
    linear-gradient(145deg, #10140f 0%, #192019 58%, #23251d 100%);
}

/* The last CTA uses a different, warm charcoal direction. */
.final-cta {
  background:
    radial-gradient(ellipse at 86% 70%, rgba(204, 166, 60, .105), transparent 49%),
    linear-gradient(125deg, #0e120f 0%, #171b15 58%, #252319 100%);
}

.footer {
  background:
    radial-gradient(ellipse at 10% 5%, rgba(163, 139, 68, .055), transparent 50%),
    linear-gradient(150deg, #0b0d0b 0%, #111610 57%, #1c1d17 100%);
}

.announcement {
  background: linear-gradient(100deg, #080a08 0%, #111510 58%, #171710 100%);
}

/* Maintain the same contrast when the mobile navigation expands. */
@media (max-width: 1190px) {
  .mobile-nav,
  .mobile-nav.is-open {
    background: linear-gradient(145deg, #111510 0%, #1a2018 62%, #24221b 100%);
  }
}

/* Inner-page banners and highlight panels should match the homepage. */
.inner-page .page-hero {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(207, 169, 62, .09), transparent 57%),
    linear-gradient(128deg, #0c100d 0%, #171c16 58%, #23241b 100%);
}
.inner-page .page-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 167, 76, .075), transparent 63%),
    linear-gradient(137deg, #171d16 0%, #23251d 100%);
}

@media (hover: hover) and (pointer: fine) {
  .program-card:hover {
    background: linear-gradient(135deg, rgba(190, 156, 68, .095), rgba(255, 255, 255, .025));
  }
}