/* Primary Project Labs — homepage overrides.
   Loaded after styles.css. Consolidates what used to be homepage-links.css plus the
   three runtime-injected <style> blocks (script.js, final-overrides.js,
   website-tweaks.js). Order below preserves the original cascade order exactly:
     1. homepage link pills + on-dark text
     2. layout polish (was script.js)
     3. micro-polish + mobile (was final-overrides.js)
     4. final layout tweaks (was website-tweaks.js)
   Rules targeting the removed Framework / Rhythm / Clusters sections have been dropped. */

/* ---------- 1. Homepage CTA rows on dark bands ---------- */

html body .studio .studio-cta,
html body .projects .projects-cta {
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

/* Dark-section text refinement: use PPL off-white instead of pure white */
html body .on-dark h1,
html body .on-dark h2,
html body .on-dark h3,
html body .hero-content h1,
html body .hero-badge,
html body .hero .cta-row .btn-primary,
html body .grade-card.is-tailor h3,
html body .contact-intro h2,
html body .contact-details a {
  color: #FDFBF7 !important;
}

@media (max-width: 820px) {
  html body .studio .studio-cta,
  html body .projects .projects-cta {
    align-items: stretch;
    gap: .9rem;
  }
  html body .studio .studio-cta .text-link,
  html body .projects .projects-cta .text-link {
    align-self: center;
  }
}

/* ---------- 2. Layout polish ---------- */

#studio .split { grid-template-columns: 1fr minmax(470px, 1.16fr); align-items: center; }
.studio .split-media { transform: scale(1.16); transform-origin: center right; }
.studio .split-media .framed { border-width: 5px !important; }
.studio .split-media .framed img { aspect-ratio: 16/9; }

#projects { background: #1D234A !important; color: #FDFBF7 !important; }
#projects .section-head h2,
#projects .section-head .section-lede,
#projects .section-head .section-lede strong { color: #FDFBF7 !important; }

.grade-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 1.25rem !important; }
.grade-card { grid-column: auto; min-height: auto; }
.grade-card.is-tailor { background: #fff !important; color: #1D234A !important; padding: 0; overflow: hidden; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: stretch; margin-top: .5rem; }
.grade-card.is-tailor h3,
.grade-card.is-tailor .grade-focus { color: #1D234A !important; }
.grade-card.is-tailor .grade-media { aspect-ratio: auto; height: 100%; min-height: 220px; }
.grade-card.is-tailor .grade-body { padding: 1.9rem 2.1rem; justify-content: center; }
.grade-media { display: block; aspect-ratio: 16/9.5; overflow: hidden; }
.grade-media img { width: 100%; height: 100%; object-fit: cover; }
.grade-body { padding: 1.45rem; }
.grade-card:hover .grade-cta { color: #F5A623; }
/* Grade 6 is the live product: quiet gold emphasis */
html body .grade-card.is-available { border-color: rgba(245,166,35,.85) !important; box-shadow: 0 8px 24px rgba(245,166,35,.16) !important; }

#engine .container { max-width: 1180px; }
/* 2026-08-13 contrast patch: orange type fails AA on this light band; the shared
   .eyebrow rule now sets navy + an orange leading rule, so stop forcing orange. */
#engine .eyebrow { color: #1D234A !important; }
#engine h2 { color: #1D234A !important; }
#engine .section-lede,
#engine .section-lede strong { color: rgba(29,35,74,.7) !important; }
#engine .section-head { max-width: 900px; }

#contact .contact-intro h2 { color: #1D234A !important; }
#contact .contact-intro .section-lede { color: rgba(29,35,74,.7) !important; }
#contact .contact-details a { color: #1D234A !important; }
#contact .contact-details a:hover { color: #F5A623 !important; }
#contact .contact-form { border: 1px solid #E2E8F0 !important; box-shadow: 0 26px 70px rgba(29,35,74,.12) !important; }
#contact input, #contact select, #contact textarea { background: #fff !important; }

@media (max-width: 1050px) {
  .studio .split-media { transform: none; }
  .grade-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grade-card { grid-column: auto !important; }
  .grade-card.is-tailor { grid-column: 1 / -1 !important; }
}

@media (max-width: 760px) {
  .grade-grid { grid-template-columns: 1fr !important; }
  .grade-card.is-tailor { grid-template-columns: 1fr !important; }
  .grade-card.is-tailor .grade-media { aspect-ratio: 16/9.5 !important; height: auto !important; min-height: 0 !important; }
}

/* ---------- 3. Micro-polish ---------- */

html body .grade-card,
html body .grade-card.is-tailor { border: 1px solid rgba(253,251,247,.8) !important; }
html body .grade-card.is-tailor { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 14px 36px rgba(0,0,0,.16) !important; }
html body .grade-card.is-tailor .grade-media { border-radius: 0 !important; overflow: hidden !important; }
html body .grade-card.is-tailor .grade-media img { border-radius: 0 !important; }
html body .grade-card:hover,
html body .grade-card.is-tailor:hover,
html body .field-notes li:hover { border-color: #F5A623 !important; box-shadow: 0 10px 26px rgba(29,35,74,.14) !important; }
html body .split-media:hover .framed { border-color: #F5A623 !important; box-shadow: 0 10px 26px rgba(29,35,74,.12) !important; }
/* 2026-08-13 contrast patch: the intro sits on the light band, so its label follows
   the navy-plus-orange-rule treatment; the form's label sits on the navy panel and
   keeps gold, with the light-band rule suppressed. */
html body #contact .contact-intro .eyebrow { color: #1D234A !important; }
html body #contact .contact-form .eyebrow { color: #F5A623 !important; }
html body #contact .contact-form .eyebrow::before { display: none !important; }
html body #contact .contact-grid { grid-template-columns: minmax(0,1fr) minmax(360px,500px) !important; gap: clamp(3rem,6vw,6rem) !important; }
html body #contact .contact-form { max-width: 500px !important; padding: clamp(1.65rem,2.55vw,2.5rem) !important; background: #1D234A !important; border: 1px solid rgba(245,166,35,.4) !important; border-top: 3px solid #F5A623 !important; border-radius: 14px !important; box-shadow: 0 16px 44px rgba(29,35,74,.18) !important; }
html body #contact .contact-form h3 { color: #FDFBF7 !important; margin-bottom: .9rem !important; }
html body #contact .contact-form p:not(.eyebrow) { color: rgba(253,251,247,.82) !important; margin-bottom: 1.25rem !important; }
html body #contact .contact-form p:last-child { margin: 1rem 0 0 !important; }
html body #contact .contact-form label { color: #FDFBF7 !important; }
html body #contact input,
html body #contact select,
html body #contact textarea { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #1D234A !important; }
html body #contact input:focus,
html body #contact select:focus,
html body #contact textarea:focus { border-color: #F5A623 !important; box-shadow: 0 0 0 4px rgba(245,166,35,.22) !important; }
html body #contact .contact-form .btn-primary { background: #F5A623 !important; color: #1D234A !important; border-color: #F5A623 !important; }
html body #contact .contact-form .btn-primary:hover { background: #F5A623 !important; border-color: #F5A623 !important; color: #1D234A !important; }
html body #contact input,
html body #contact select { min-height: 52px !important; padding-top: .85rem !important; padding-bottom: .85rem !important; }
html body #contact textarea { min-height: 145px !important; }
html body .hero .hero-overlay { background: linear-gradient(90deg, rgba(253,251,247,.68) 0%, rgba(253,251,247,.48) 42%, rgba(253,251,247,.05) 100%) !important; }
html body .hero h1,
html body .hero .hero-sub,
html body .hero .hero-rhythm span { color: #1D234A !important; text-shadow: none !important; }
html body .hero .hero-rhythm i { background: #F5A623 !important; opacity: .7 !important; }
html body .hero .hero-badge { color: #1D234A !important; background: rgba(253,251,247,.62) !important; border-color: #F5A623 !important; }
html body .hero .btn-primary { background: #1D234A !important; color: #FDFBF7 !important; border-color: #1D234A !important; }
html body .hero .btn-ghost { color: #1D234A !important; border-color: rgba(29,35,74,.42) !important; background: rgba(253,251,247,.44) !important; }

@media (max-width: 1050px) {
  html body #contact .contact-grid { grid-template-columns: 1fr !important; }
  html body #contact .contact-form { max-width: none !important; }
}

/* Header + nav collapse at 1200px (see styles.css). Moved out of the 820px
   block below so tablet widths get the hamburger without inheriting the
   mobile typography scale. */
@media (max-width: 1200px) {
  html body .header-inner { min-height: 70px !important; padding-inline: 1rem !important; }
  html body .brand-mark { height: 52px !important; }
  html body .brand-word { display: none !important; }
  html body .nav-toggle { display: flex !important; min-width: 46px !important; min-height: 46px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(29,35,74,.14) !important; border-radius: 999px !important; background: rgba(253,251,247,.78) !important; }
  /* EN / 中文 were 18x21 hit areas on touch — under the 44px minimum, on the one
     control a Chinese visitor needs. Grow the tap area, not the type size. */
  html body .lang-switch { gap: 0 !important; }
  html body .lang-switch a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: 0 .25rem !important; }
  html body .nav-menu { left: .75rem !important; right: .75rem !important; top: calc(100% + .4rem) !important; max-height: calc(100svh - 92px) !important; overflow-y: auto !important; border-radius: 20px !important; padding: .65rem !important; gap: .25rem !important; }
  html body .nav-menu a { min-height: 48px !important; display: flex !important; align-items: center !important; padding: .82rem 1rem !important; border-radius: 14px !important; font-size: 1.02rem !important; }
  html body .nav-menu a:hover,
  html body .nav-menu a.active { background: transparent !important; color: #F5A623 !important; transform: none !important; }
  html body .nav-menu a[data-nav]::after { display: none !important; }
  /* Portal remains the Layered Acrylic Prism control in the drop-down; the blanket
     mobile hover rule above must not flatten it into a standard navigation row. */
  html body .nav-menu a.nav-portal { justify-content: center !important; margin-top: .5rem !important; margin-left: 0 !important; }
  html body .nav-menu a.nav-portal,
  html body .nav-menu a.nav-portal:hover {
    background: rgba(253,251,247,.94) linear-gradient(135deg, rgba(253,251,247,.96), rgba(245,166,35,.3)) !important;
    background-size: 140% 140% !important;
    border: 1px solid rgba(29,35,74,.46) !important;
    color: #1D234A !important;
  }
  html body .nav-menu a.nav-portal:hover { background-position: 100% 100% !important; }
  html body .nav-menu a.nav-cta { background: transparent !important; color: #1D234A !important; }
  html body .nav-menu a.nav-cta:hover { background: transparent !important; color: #F5A623 !important; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 78px !important; }
  html body { font-size: 1rem !important; line-height: 1.58 !important; }
  html body .container { padding-inline: 1.15rem !important; }
  html body .section { padding-block: clamp(3.2rem,11vw,4.75rem) !important; }
  html body h1 { font-size: clamp(2.2rem,9.2vw,3.4rem) !important; line-height: 1.05 !important; letter-spacing: -.02em !important; }
  html body h2 { font-size: clamp(2rem,8.4vw,2.85rem) !important; line-height: 1.06 !important; }
  html body h3 { font-size: clamp(1.18rem,5vw,1.45rem) !important; }
  html body .section-head { margin-bottom: 1.85rem !important; }
  html body .section-lede { font-size: 1.02rem !important; line-height: 1.58 !important; }

  html body .hero { min-height: calc(100svh - 70px) !important; padding-block: 7.25rem 3.3rem !important; align-items: flex-end !important; }
  html body .hero-img { object-position: 58% center !important; transform: none !important; animation: none !important; }
  html body .hero .hero-overlay { background: linear-gradient(180deg, rgba(253,251,247,.20) 0%, rgba(253,251,247,.55) 39%, rgba(253,251,247,.70) 100%) !important; }
  html body .hero-glow { display: none !important; }
  html body .hero-content { max-width: 100% !important; }
  html body .hero-badge { font-size: .67rem !important; letter-spacing: .08em !important; line-height: 1.35 !important; padding: .45rem .72rem !important; margin-bottom: 1.05rem !important; max-width: 100% !important; }
  html body .hero-sub { font-size: 1.05rem !important; line-height: 1.52 !important; margin-top: .85rem !important; max-width: 30rem !important; }
  html body .cta-row { margin-top: 1.45rem !important; gap: .75rem !important; flex-direction: column !important; align-items: stretch !important; }
  html body .btn { width: 100% !important; max-width: none !important; min-height: 50px !important; padding: .9rem 1.15rem !important; }
  html body .hero-rhythm { margin-top: 1.45rem !important; gap: .45rem .55rem !important; font-size: .98rem !important; }
  html body .hero-rhythm i { width: 1rem !important; }

  html body #studio .split { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
  html body .studio .split-media { transform: none !important; }
  html body .split-media .framed { border-width: 5px !important; border-radius: 18px !important; }
  html body figcaption { font-size: .82rem !important; line-height: 1.45 !important; }

  /* Shared with the Engine "Why it works" panel (was scoped alongside the old Framework block). */
  html body .why-quote { font-size: 1.15rem !important; }

  html body .grade-grid,
  html body .serve-grid,
  html body .field-notes { grid-template-columns: 1fr !important; gap: 1rem !important; }
  html body .grade-card,
  html body .grade-card:nth-child(4),
  html body .grade-card:nth-child(5) { grid-column: auto !important; }
  html body .grade-media,
  html body .serve-media { aspect-ratio: 16/8.6 !important; }
  html body .grade-body,
  html body .serve-body,
  html body .field-notes li { padding: 1.15rem !important; }
  html body .grade-card:hover,
  html body .serve-card:hover,
  html body .field-notes li:hover { transform: none !important; }

  html body #contact .contact-grid { gap: 1.8rem !important; }
  html body #contact .contact-intro h2 { font-size: clamp(2.05rem,9vw,2.85rem) !important; }
  html body #contact .contact-details { margin-top: 1.25rem !important; gap: .7rem !important; }
  html body #contact .contact-form { padding: 1.15rem !important; border-radius: 18px !important; box-shadow: 0 22px 58px rgba(0,0,0,.2) !important; }
  html body #contact input,
  html body #contact select,
  html body #contact textarea { font-size: 16px !important; }
  html body #contact textarea { min-height: 120px !important; }

  html body .footer-signature .footer-mark { width: 52px !important; }
  html body .footer-cols { grid-template-columns: 1fr !important; gap: 1.5rem !important; text-align: center !important; }
  html body .footer-bottom { margin-top: 1.8rem !important; }

  html body .lightbox { padding: 1rem !important; }
  html body .lightbox-figure { max-width: 94vw !important; }
  html body .lightbox-figure img { max-height: 72svh !important; border-radius: 14px !important; }
  html body .demo-dialog { max-width: 94vw !important; border-radius: 18px !important; }
  html body .intro-inner { width: 94vw !important; }
  html body .intro-logo { width: min(260px,62vw) !important; }
  html body .intro-video { border-radius: 18px !important; }
  html body .intro-skip { right: .65rem !important; bottom: .65rem !important; font-size: .85rem !important; }
}

@media (max-width: 430px) {
  html body .container { padding-inline: 1rem !important; }
  html body .hero { padding-block: 6.7rem 2.8rem !important; }
  html body h1 { font-size: clamp(2rem,9.4vw,2.7rem) !important; }
  html body h2 { font-size: clamp(1.9rem,8.8vw,2.55rem) !important; }
  html body .hero-badge { font-size: .62rem !important; }
  html body .hero-sub { font-size: 1rem !important; }
  html body .hero-rhythm { font-size: .9rem !important; }
  html body .grade-media,
  html body .serve-media { aspect-ratio: 16/9.5 !important; }
  html body .contact-details a { word-break: break-word !important; }
}

@media (max-width: 370px) {
  html body .container { padding-inline: .85rem !important; }
  html body .hero-badge { letter-spacing: .055em !important; }
  html body .hero-rhythm i { display: none !important; }
  html body .hero-rhythm { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  html body .nav-menu { left: .5rem !important; right: .5rem !important; }
}

/* ---------- 4. Final layout tweaks ---------- */

/* Full-size desktop header - starts where the hamburger stops (1200px). */
@media (min-width: 1201px) {
  html body .site-header .header-inner { min-height: 88px !important; }
  html body .site-header .brand-mark { height: 64px !important; width: auto !important; }
  html body .site-header .brand-word { font-size: clamp(1.2rem,1rem + .7vw,1.5rem) !important; }
}

html body .section-link-row { display: flex !important; flex-wrap: wrap !important; gap: .8rem !important; align-items: center !important; margin-top: clamp(1.6rem,3vw,2.5rem) !important; }
html body .section-link-row.centered { justify-content: center !important; }
html body .section-link-row .text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; margin-top: 0 !important; padding: .8rem 1.4rem !important; border-radius: 10px !important; font-weight: 600 !important; line-height: 1.1 !important; color: #FDFBF7 !important; background: transparent !important; border: 1.5px solid rgba(253,251,247,.55) !important; text-decoration: none !important; transition: transform .22s ease, background .22s ease, border-color .22s ease !important; }
html body .section-link-row .text-link:hover { transform: translateY(-2px) !important; background: rgba(253,251,247,.1) !important; border-color: #FDFBF7 !important; }
html body #projects .projects-link-row { justify-content: center !important; margin-top: 2.4rem !important; }

html body #projects .grade-card.is-tailor h3,
html body #projects .grade-card.is-tailor .grade-focus,
html body #projects .grade-card.is-tailor p { color: #1D234A !important; opacity: 1 !important; }
html body #projects .grade-card.is-tailor .text-link { color: #F5A623 !important; }

@media (max-width: 820px) {
  html body .section-link-row { margin-top: 1.4rem !important; }
  html body .section-link-row .text-link { width: 100% !important; min-height: 48px !important; padding: .85rem 1rem !important; text-align: center !important; }
}