/* ==========================================================
   Performance Development — Visual Polish Layer
   File: performance-polish.css
   Purpose: Page-specific refinement layer for performance-development.html
   Load AFTER css/final_100k.css
   Author: Magnus Ågren site polish layer
   ========================================================== */

:root {
  --ma-pd-bg-deep: #0b0c0f;
  --ma-pd-bg-rail: #101116;
  --ma-pd-border-soft: rgba(255,255,255,.075);
  --ma-pd-glass: rgba(11,12,15,.78);
  --ma-pd-glass-strong: rgba(11,12,15,.88);
  --ma-pd-text-crisp: rgba(255,255,255,.86);
  --ma-pd-text-muted: rgba(255,255,255,.58);
  --ma-pd-shadow-header: 0 8px 28px rgba(0,0,0,.30);
}

/* ----------------------------------------------------------
   1. Kill dark-section visual seams / faint line breaks
   ---------------------------------------------------------- */
body.ma-site-body {
  background: var(--ma-pd-bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.ma-hero,
.ma-pd-hero,
.ma-section--deep,
.ma-section--dark,
.ma-section--pathways,
.ma-image-break {
  background-color: var(--ma-pd-bg-deep) !important;
}

.ma-section,
.ma-hero,
.ma-image-break {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Overlap by 1px so browser anti-aliasing cannot expose seams between sections. */
.ma-section + .ma-section,
.ma-section + .ma-image-break,
.ma-image-break + .ma-section {
  margin-top: -1px;
}

/* Keep the content rhythm intact despite the seam overlap. */
.ma-section {
  overflow: hidden;
}

/* Prevent pseudo elements or images from creating subtle background stripes. */
.ma-section::before,
.ma-section::after,
.ma-hero::before,
.ma-hero::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ----------------------------------------------------------
   2. Cleaner hero overlay — fewer competing gradient layers
   ---------------------------------------------------------- */
.ma-pd-hero .ma-hero__overlay,
.ma-hero .ma-hero__overlay {
  background:
    linear-gradient(90deg, rgba(6,7,9,.84) 0%, rgba(6,7,9,.66) 42%, rgba(6,7,9,.28) 100%),
    linear-gradient(180deg, rgba(6,7,9,.22) 0%, rgba(6,7,9,.10) 48%, rgba(6,7,9,.44) 100%) !important;
  opacity: 1 !important;
}

.ma-pd-hero .ma-hero__media,
.ma-hero .ma-hero__media {
  transform: translateZ(0) scale(1.001);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* ----------------------------------------------------------
   3. Sharper premium header / navigation
   ---------------------------------------------------------- */
.ma-header {
  box-shadow: var(--ma-pd-shadow-header);
  isolation: isolate;
}

.ma-topbar {
  background: rgba(7,8,10,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}

.ma-nav {
  background: var(--ma-pd-glass) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
}

.ma-header.is-scrolled .ma-nav,
.ma-nav.is-scrolled {
  background: var(--ma-pd-glass-strong) !important;
}

.ma-brand img {
  filter: contrast(1.12) brightness(1.06);
  image-rendering: auto;
  transform: translateZ(0);
}

.ma-menu a {
  color: var(--ma-pd-text-crisp) !important;
  opacity: .88;
  letter-spacing: .10em;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.ma-menu a:hover,
.ma-menu a:focus-visible {
  color: #fff !important;
  opacity: 1;
}

.ma-nav__actions .ma-btn,
.ma-btn--ghost {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset;
}

.ma-nav__actions .ma-btn:hover,
.ma-btn--ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   4. Card / dark-section surface consistency
   ---------------------------------------------------------- */
.ma-pd-card,
.ma-pd-lane,
.ma-pd-proof,
.ma-pd-focus,
.ma-pd-method,
.ma-lane,
.ma-cost-card,
.ma-plan-step {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ma-section--deep .ma-pd-card,
.ma-section--deep .ma-pd-lane,
.ma-section--deep .ma-pd-method,
.ma-section--dark .ma-pd-focus {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.022)) !important;
  border-color: var(--ma-pd-border-soft) !important;
}

.ma-section--deep .ma-pd-method-grid,
.ma-section--deep .ma-pd-grid-2,
.ma-section--deep .ma-pd-grid-3 {
  isolation: isolate;
}

/* ----------------------------------------------------------
   5. Typography crispness and visual hierarchy
   ---------------------------------------------------------- */
.ma-hero h1,
.ma-section h2,
.ma-copy h2,
.ma-center-intro h2 {
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}

.ma-section--deep p,
.ma-section--dark p,
.ma-pd-method p,
.ma-pd-card p,
.ma-pd-lane p {
  color: var(--ma-pd-text-muted);
}

.ma-section--deep .ma-section-lead,
.ma-section--dark .ma-section-lead,
.ma-hero .ma-lead {
  color: rgba(255,255,255,.74) !important;
}

.ma-hero__micro,
.ma-pd-badge,
.ma-pd-tag {
  letter-spacing: .16em;
}

/* ----------------------------------------------------------
   6. Quicknav polish — premium but not noisy
   ---------------------------------------------------------- */
.ma-pd-quicknav__inner {
  background: rgba(9,10,13,.82) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.ma-pd-quicknav a {
  color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.07) !important;
}

.ma-pd-quicknav a:hover,
.ma-pd-quicknav a:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ----------------------------------------------------------
   7. Mobile header and dark-section seam stability
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  .ma-nav {
    background: rgba(8,9,12,.92) !important;
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }

  .ma-menu-panel {
    background: rgba(8,9,12,.96) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    border-top: 1px solid rgba(255,255,255,.075) !important;
  }

  .ma-menu-panel__nav a {
    color: rgba(255,255,255,.86) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
  }
}

@media (max-width: 767px) {
  .ma-pd-hero .ma-hero__overlay,
  .ma-hero .ma-hero__overlay {
    background:
      linear-gradient(90deg, rgba(6,7,9,.88) 0%, rgba(6,7,9,.72) 54%, rgba(6,7,9,.42) 100%),
      linear-gradient(180deg, rgba(6,7,9,.12) 0%, rgba(6,7,9,.18) 54%, rgba(6,7,9,.52) 100%) !important;
  }

  .ma-section + .ma-section,
  .ma-section + .ma-image-break,
  .ma-image-break + .ma-section {
    margin-top: -2px;
  }

  .ma-menu a,
  .ma-menu-panel__nav a {
    letter-spacing: .08em;
  }

  .ma-hero__actions .ma-btn,
  .ma-nav__actions .ma-btn {
    width: 100%;
  }
}

/* ----------------------------------------------------------
   8. Reduced motion respect
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ma-section,
  .ma-hero,
  .ma-hero__media,
  .ma-pd-card,
  .ma-pd-lane,
  .ma-pd-method,
  .ma-btn {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}


/* FAQ section refinement for the performance page */
#faq .ma-faq { max-width: 900px; margin: 0 auto; }
#faq .ma-faq__question { letter-spacing: -.01em; }
#faq .ma-faq__answer p { max-width: 72ch; }

/* ==========================================================
   PERFORMANCE DEVELOPMENT — DEEP FIX v4
   Removes nav blur artifact, brightens hero, and locks contrast.
   ========================================================== */
body.ma-performance-page{background:#0b0c0f;}
body.ma-performance-page .ma-header{will-change:transform;transform:translate3d(0,0,0);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s ease;box-shadow:none!important;isolation:isolate;}
body.ma-performance-page .ma-header.is-performance-hidden{transform:translate3d(0,-116%,0)!important;opacity:0!important;pointer-events:none!important;}
body.ma-performance-page .ma-header.is-performance-hidden,body.ma-performance-page .ma-header.is-performance-hidden .ma-topbar,body.ma-performance-page .ma-header.is-performance-hidden .ma-nav,body.ma-performance-page .ma-header.is-performance-hidden .ma-menu-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important;background:transparent!important;filter:none!important;}
body.ma-performance-page .ma-nav.is-hidden{transform:translate3d(0,-140%,0)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .12s linear,visibility 0s linear .24s!important;}
body.ma-performance-page .ma-topbar,body.ma-performance-page .ma-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
body.ma-performance-page .ma-topbar{background:rgba(7,8,10,.84)!important;}
body.ma-performance-page .ma-nav{background:rgba(9,10,13,.82)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;box-shadow:0 10px 26px rgba(0,0,0,.18)!important;}
body.ma-performance-page .ma-header.is-solid .ma-nav{background:rgba(9,10,13,.90)!important;}
body.ma-performance-page .ma-pd-hero .ma-hero__media{filter:brightness(1.18) contrast(1.03) saturate(1.04)!important;opacity:1!important;transform:translateZ(0) scale(1.001)!important;will-change:auto!important;}
body.ma-performance-page .ma-pd-hero .ma-hero__overlay{background:linear-gradient(90deg,rgba(6,7,9,.58) 0%,rgba(6,7,9,.39) 42%,rgba(6,7,9,.14) 72%,rgba(6,7,9,.04) 100%),linear-gradient(180deg,rgba(6,7,9,.08) 0%,rgba(6,7,9,.04) 45%,rgba(6,7,9,.22) 100%)!important;opacity:1!important;}
body.ma-performance-page .ma-pd-hero::after{height:20%!important;background:linear-gradient(to top,rgba(9,9,12,.42) 0%,transparent 100%)!important;}
body.ma-performance-page .ma-pd-hero .ma-hero__copy{text-shadow:0 2px 18px rgba(0,0,0,.48);}
body.ma-performance-page .ma-pd-hero .ma-lead{color:rgba(255,255,255,.84)!important;}
body.ma-performance-page .ma-pd-hero .ma-hero__gm-voice,body.ma-performance-page .ma-pd-hero .ma-hero__micro,body.ma-performance-page .ma-pd-hero .ma-pd-badge{color:rgba(255,255,255,.66)!important;}
body.ma-performance-page .ma-pd-hero .ma-pd-badge{background:rgba(7,8,10,.32)!important;border-color:rgba(255,255,255,.16)!important;}
body.ma-performance-page .ma-section--ivory,body.ma-performance-page .ma-section--proof,body.ma-performance-page .ma-section--contact{color:var(--ma-ink)!important;}
body.ma-performance-page .ma-section--ivory h2,body.ma-performance-page .ma-section--ivory h3,body.ma-performance-page .ma-section--proof h2,body.ma-performance-page .ma-section--proof h3,body.ma-performance-page .ma-section--contact h2,body.ma-performance-page .ma-section--contact h3,body.ma-performance-page .ma-section--ivory .ma-impact,body.ma-performance-page .ma-section--proof .ma-impact{color:var(--ma-ink)!important;text-shadow:none!important;}
body.ma-performance-page .ma-section--ivory p,body.ma-performance-page .ma-section--proof p,body.ma-performance-page .ma-section--contact p,body.ma-performance-page .ma-section--ivory li,body.ma-performance-page .ma-section--proof li,body.ma-performance-page .ma-section--ivory .ma-pd-card p,body.ma-performance-page .ma-section--ivory .ma-pd-lane p,body.ma-performance-page .ma-section--ivory .ma-pd-proof p,body.ma-performance-page .ma-section--ivory .ma-pd-fit-card p,body.ma-performance-page .ma-section--ivory .ma-pd-route p,body.ma-performance-page .ma-section--ivory .ma-pd-output p,body.ma-performance-page .ma-section--proof .ma-pd-proof p,body.ma-performance-page .ma-section--proof .ma-pd-proof-quote{color:#2a2520!important;text-shadow:none!important;}
body.ma-performance-page .ma-section--ivory .ma-pd-list div,body.ma-performance-page .ma-section--ivory .ma-pd-list li,body.ma-performance-page .ma-section--proof .ma-pd-list div,body.ma-performance-page .ma-section--proof .ma-pd-list li{color:#2d2925!important;}
body.ma-performance-page .ma-section--ivory .ma-pd-tag,body.ma-performance-page .ma-section--proof .ma-pd-tag{color:rgba(18,19,21,.58)!important;background:rgba(18,19,21,.055)!important;}
body.ma-performance-page .ma-section--ivory .ma-btn--ghost,body.ma-performance-page .ma-section--proof .ma-btn--ghost,body.ma-performance-page .ma-section--contact .ma-btn--ghost{color:var(--ma-ink)!important;border-color:rgba(18,19,21,.18)!important;background:rgba(18,19,21,.035)!important;box-shadow:none!important;}
body.ma-performance-page .ma-section--ivory .ma-btn--ghost:hover,body.ma-performance-page .ma-section--proof .ma-btn--ghost:hover,body.ma-performance-page .ma-section--contact .ma-btn--ghost:hover{background:rgba(18,19,21,.075)!important;color:#000!important;}
body.ma-performance-page .ma-form-shell,body.ma-performance-page .ma-field-card,body.ma-performance-page .ma-contact-direct{color:var(--ma-ink)!important;}
body.ma-performance-page .ma-field-card span,body.ma-performance-page .ma-form-shell__head p,body.ma-performance-page .ma-form__results,body.ma-performance-page .ma-form__trust{color:var(--ma-ink-muted)!important;}
body.ma-performance-page .ma-field-card input,body.ma-performance-page .ma-field-card textarea{color:var(--ma-ink)!important;background:#fff!important;}
body.ma-performance-page .ma-section--deep p,body.ma-performance-page .ma-section--deep .ma-pd-method p,body.ma-performance-page .ma-section--deep .ma-pd-card p,body.ma-performance-page .ma-section--deep .ma-pd-lane p{color:rgba(255,255,255,.68)!important;}
body.ma-performance-page .ma-section--deep .ma-section-lead,body.ma-performance-page .ma-section--deep .ma-quote{color:rgba(255,255,255,.84)!important;}
@media(max-width:767px){body.ma-performance-page .ma-pd-hero .ma-hero__media{filter:brightness(1.22) contrast(1.02) saturate(1.03)!important;}body.ma-performance-page .ma-pd-hero .ma-hero__overlay{background:linear-gradient(90deg,rgba(6,7,9,.66) 0%,rgba(6,7,9,.48) 58%,rgba(6,7,9,.22) 100%),linear-gradient(180deg,rgba(6,7,9,.05) 0%,rgba(6,7,9,.08) 48%,rgba(6,7,9,.30) 100%)!important;}body.ma-performance-page .ma-header.is-performance-hidden{transform:translate3d(0,-125%,0)!important;}}