:root{--desktop-viewport:1200px;}

/* MontNova Local Site - Modern, trusted, monochrome with subtle accent */
:root{
  --bg:#ffffff;
  --fg:#0b0f14;
  --muted:#5b6675;
  --soft:#eef1f4;
  --soft2:#f7f8fa;
  --line:#e2e6eb;
  --shadow: 0 18px 45px rgba(0,0,0,.08);
  --shadow2: 0 10px 28px rgba(0,0,0,.06);
  --radius: 18px;
  --radius2: 26px;
  --accent: #f08a2b; /* orange */
  --accent2: #1f5fbf; /* blue */
  --mono: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{
  min-width: var(--desktop-viewport);
  height:100%}
body{
  margin:0;
  font-family: var(--mono);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  min-width: var(--desktop-viewport);
  overflow-x: auto;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
small{color:var(--muted)}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: var(--soft);
  border: 1px solid var(--line);
  border-bottom-color: #d7dde4;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.topbar{
  position: fixed;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform 220ms ease, opacity 220ms ease;
  will-change: transform, opacity;
}

/* Header auto-hide behavior (shown at section starts) */
.topbar.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.topbar.force-show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Mobile menu toggle (hamburger) */
.navToggle{
  display:none;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
  cursor: pointer;
}
.navToggle:focus-visible{ outline: 2px solid rgba(240,138,43,.6); outline-offset: 2px; }
.navToggleIcon{
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
  display:block;
}
.navToggleIcon::before,
.navToggleIcon::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
}
.navToggleIcon::before{ top: -6px; }
.navToggleIcon::after{ top: 6px; }

.topbar.menu-open .navToggleIcon{ background: transparent; }
.topbar.menu-open .navToggleIcon::before{ top: 0; transform: rotate(45deg); }
.topbar.menu-open .navToggleIcon::after{ top: 0; transform: rotate(-45deg); }

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 180px;
}
\.brand .tag{
  display:none;
  font-size: 12px;
  color: var(--muted);
}
@media (min-width: 860px){
  .brand .tag{display:block}
}

.navlinks{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
}
.navlinks a{
  font-size: 13.5px;
  color: var(--muted);
  padding: 7px 9px;
  border-radius: 10px;
}
.navlinks a.active{
  color: var(--fg);
  background: var(--soft2);
  border: 1px solid var(--line);
  box-shadow: inset 0 -2px 0 rgba(240,138,43,.35);
}
.navlinks a:hover{
  color: var(--fg);
  background: var(--soft2);
}

.cta{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 190px;
  justify-content: flex-end;
}

/* Mobile header: collapsible, section-friendly navigation */
@media (max-width: 860px){
  /*
    Mobile readability pass:
    - Remove forced desktop min-width so layout can truly respond
    - Slightly bump type + tap targets so the page doesn’t feel “tiny”
  */
  html, body{ min-width: 0; width: 100%; }
  body{ overflow-x: hidden; font-size: 17px; }

  /* Slightly larger lead text + CTAs for thumb readability */
  .lede{ font-size: 18px; }
  .button{ font-size: 16px; padding: 12px 16px; }

  .container{ width: min(1120px, calc(100% - 28px)); }

  .nav{ flex-wrap: wrap; }
  .brand{ min-width: auto; }
  .brand img{ height: 28px; width:auto; }

  .navToggle{ display:inline-flex; }

  /* default: keep header compact */
  .navlinks,
  .cta{ display:none; width:100%; }

  /* open state: drop nav + cta below the top row */
  .topbar.menu-open .navlinks{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .topbar.menu-open .navlinks a{
    font-size: 16px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
  }
  .topbar.menu-open .navlinks a.active{
    border-color: var(--line);
  }

  .topbar.menu-open .cta{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0 14px;
  }
  .topbar.menu-open .cta .button{ width:100%; }
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.40);
  border-color: rgba(233,238,245,.85);
  background: linear-gradient(135deg, var(--fg) 0%, #111827 60%, rgba(31,95,191,.22) 100%);
  color: white;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: var(--shadow2);
}
.button.secondary{
  background: white;
  color: var(--fg);
  box-shadow:none;
}
.button:hover{transform: translateY(-1px)}
.button:active{transform: translateY(0px)}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--muted);
  font-size: 12px;
}

.hero{
  padding: 34px 0 16px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 920px){
  .heroGrid{grid-template-columns: 1fr; }
}

.card{
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card.pad{padding: 22px}
.card.soft{
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}

h1{
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 12px;
}
h2{
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
h3{
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
p{margin: 0 0 12px; color: var(--fg)}
.lede{
  font-size: 16px;
  color: var(--muted);
  max-width: 64ch;
}

.divider{
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 920px){
  .grid3{grid-template-columns: 1fr}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 920px){
  .grid2{grid-template-columns: 1fr}
}

.outcomeStatement{
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
}
.outcomeStatement .kicker{ margin-bottom: 10px; }
.outcomeStatement h3{ margin: 0 0 10px; font-size: 34px; line-height: 1.12; }
@media (max-width: 720px){
  .outcomeStatement h3{ font-size: 28px; }
}
}

.pillars{
  padding: 22px 0;
}
.pillar{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
}
.pillar .kicker{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pillar .title{
  font-weight: 650;
  margin-bottom: 6px;
}
.pillar ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}
.pillar li{margin: 6px 0}

.steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1020px){
  .steps{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 560px){
  .steps{grid-template-columns: 1fr;}
}
.step{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
}
.step .num{
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: var(--soft2);
  border: 1px solid var(--line);
  font-weight: 700;
}
.step .label{margin-top: 10px; font-weight: 650}
.step .desc{margin-top: 6px; color: var(--muted); font-size: 14px}

.footer{
  padding: 28px 0 44px;
  color: var(--muted);
  font-size: 14px;
}
.footerGrid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
@media (max-width: 720px){
  .footerGrid{grid-template-columns: 1fr}
}

#sceneWrap{
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: radial-gradient(1200px 420px at 40% 20%, #ffffff 0%, #f2f4f7 62%, #ecf0f4 100%);
}
#scene{
  width: 100%;
  height: 100%;
  display:block;
}
.sceneHud{
  position:absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.sceneHud .left, .sceneHud .right{
  display:flex;
  gap: 10px;
  align-items:center;
}
.sceneHud .chip{
  pointer-events: auto;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(226,230,235,.9);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  display:inline-flex;
  gap: 8px;
  align-items:center;
}
.sceneHud button.chip{
  cursor:pointer;
}
.sceneHud button.chip:hover{
  color: var(--fg);
  border-color: rgba(0,0,0,.12);
}
.dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)) , var(--accent);
  box-shadow: 0 0 0 3px rgba(240,138,43,.14);
}

.section{
  padding: 22px 0;
}

.callout{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--soft2);
}
.callout .icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: white;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
}

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){ .form{grid-template-columns: 1fr} }
.field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
label{font-size: 13px; color: var(--muted)}
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  font: inherit;
}
textarea{min-height: 130px; resize: vertical}
.notice{
  font-size: 13px;
  color: var(--muted);
}
.toast{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,230,235,.9);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  color: var(--fg);
  z-index: 80;
  display:none;
}
.toast.show{display:block}


.accentLine{height:2px; width:100%; background: linear-gradient(90deg, rgba(240,138,43,.65), rgba(31,95,191,.65)); border-radius:999px;}


/* === Tag / badge removal (scaled-back version) === */
.badge,
.chip,
.sceneHud,
.dot {
  display: none !important;
}


/* === Primary CTA: brand orange gradient === */
.button{
  background: linear-gradient(135deg, #f08a2b 0%, #ff9f4d 45%, #f08a2b 100%);
  color: #ffffff;
  border: none;
}
.button.secondary{
  background: #ffffff;
  color: var(--fg);
  border: 1px solid var(--line);
}
.button:hover{
  box-shadow: 0 14px 32px rgba(240,138,43,.35);
}


/* === Flip cards for engagement flow === */
.steps{
  perspective: 1200px;
}
.step.flip{
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
}
.step.flip:focus{
  outline: none;
}
.flipInner{
  position: relative;
  width: 100%;
  /* Horizontal flip cards: consistent height */
  height: 200px;
  min-height: 200px;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
}
.step.flip:hover .flipInner,
.step.flip:focus-within .flipInner{
  transform: rotateY(180deg);
}
.step.flip.flipped .flipInner{
  transform: rotateY(180deg);
}

.flipFace{
  position: absolute;
  inset: 0;
  padding: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.flipFront{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}
.flipBack{
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
}
.flipHint{
  margin-top: auto;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.flipHint .bar{
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240,138,43,.55), rgba(31,95,191,.45));
}
.step.flip .num{
  margin: 14px;
}
.step.flip .num{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
}
/* Front: reserve space for the number badge. Back: no gap. */
.step.flip .flipFront .label{ margin-top: 50px; }
.step.flip .flipBack .label{ margin-top: 0; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .flipInner{ transition: none; }
  .step.flip:hover .flipInner,
  .step.flip:focus-within .flipInner,
  .step.flip.flipped .flipInner{
    transform: none;
  }
  .flipBack{ display:none; }
}



/* =========================
   One-page sections + motion
   ========================= */

html{ scroll-behavior:smooth; }

.pageSection{
  position: relative;
  padding: 70px 0;
  isolation: isolate;
  perspective: 1200px;
  /* Parallax vars (set by JS) */
  --pY: 0px;
  --pRX: 0deg;
  --pRY: 0deg;
}

/* Full-bleed alternating tints */
.pageSection::before{
  content:"";
  position:absolute;
  inset:0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index:-1;
  background: transparent;
}

.pageSection:nth-of-type(odd)::before{
  background: transparent;
}

.pageSection:nth-of-type(even)::before{
  background: rgba(31,95,191,0.04); /* subtle blue tint */
}

/* Anchor offset for sticky header */
.pageSection{
  scroll-margin-top: 110px;
}

/* Section reveal */
.pageSection.reveal{
  opacity: 0.001;
  transform: translate3d(0, 26px, 0) rotateX(5deg) rotateY(0deg);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 480ms ease;
  will-change: transform, opacity;
}

.pageSection.in-view{
  opacity: 1;
  transform:
    translate3d(0, calc(var(--pY) * -1), 0)
    rotateX(var(--pRX))
    rotateY(var(--pRY));
}

/* Staggered items */
.reveal-item{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 360ms ease;
  will-change: transform, opacity;
}

.in-view .reveal-item{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .pageSection.reveal,
  .reveal-item{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Intro: "What we get called for" */
.calledFor{ margin-top: 18px; }
.calledFor h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.calledFor p{ margin: 0 0 10px; color: var(--muted); }
.calledGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.calledCard{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 12px 12px 10px;
}
.calledTitle{ font-weight: 750; font-size: 14px; margin-bottom: 4px; }
.calledDesc{ color: var(--muted); font-size: 13px; line-height: 1.35; }
.pillLink{ display:inline-flex; margin-top: 10px; font-weight: 650; text-decoration:none; color: var(--brand); }
@media (max-width: 900px){
  .calledGrid{ grid-template-columns: 1fr; }
}






/* Logo sizing (match early v1) */
.brand img{
  height: 34px;
  width: auto;
}




/* Header: always visible, but softly fades (opacity) when scrolling */
.site-header{
  position: fixed;
  top: 0;
  z-index: 1000;
  transform: none !important;
  opacity: 1 !important;
  transition: opacity 180ms ease, background-color 180ms ease, backdrop-filter 180ms ease;
}

.site-header.is-faded{
  opacity: 0.86 !important;
}

/* On hover (or focus within), restore full opacity */
.site-header:hover,
.site-header:focus-within{
  opacity: 1 !important;
}

/* ===== Header always visible (fixed), only fades via opacity ===== */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 180ms ease, background-color 180ms ease, backdrop-filter 180ms ease !important;
}

/* Legacy hide class: overridden so header never leaves the viewport */
.topbar.is-hidden{
  transform: none !important;
  opacity: 0.86 !important; /* treat as "faded" instead of hidden */
  pointer-events: auto !important;
}

.topbar.is-faded{
  opacity: 0.86 !important;
}

.topbar:hover,
.topbar:focus-within{
  opacity: 1 !important;
}

/* Make room for the fixed header so content isn't covered */
:root{ --topbar-h: 72px; }
body{ padding-top: var(--topbar-h); }



.lensesRow:hover .lensInner{ filter: none; }
}



/* ===== Lenses View (lens panels + flip details) ===== */
.lensesView .sectionHead{ margin-bottom: 18px; }

/* Row: overlapping panels like "lenses" */
.lensesRow{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 10px 0 6px;
  overflow: visible;
}

/* Each panel */
.lensCard{
  --lens-bg: rgba(255,255,255,.55);
  --lens-tint: rgba(241, 248, 255, .62);
  width: 220px;
  max-width: 240px;
  margin-left: -28px; /* overlap */
  perspective: 1400px;
  border-radius: 18px;
  outline: none;
  position: relative;
  z-index: 1;
}
.lensCard:first-child{ margin-left: 0; }

/* Slight angle by default to feel 3D */
.lensCard{
  transform: perspective(1400px) rotateY(-18deg) rotateX(2deg);
  transform-origin: center;
  transition: transform 260ms ease, z-index 0ms linear 0ms;
}

/* Bring forward on hover/focus */
.lensCard:hover,
.lensCard:focus-visible{
  z-index: 10;
  transform: perspective(1400px) rotateY(-6deg) rotateX(1deg) translateY(-8px) scale(1.03);
}

/* Inner flip */
.lensInner{
  position: relative;
  height: 240px;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
}
.lensFace{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  background: var(--lens-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(16,24,40,.08);
  display: flex;
  flex-direction: column;
}
.lensFront{ backface-visibility: hidden; }
.lensBack{
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: var(--lens-tint);
}

/* Flip on hover/focus + touch toggle */
.lensCard:hover .lensInner,
.lensCard:focus-visible .lensInner,
.lensCard.is-flipped .lensInner{
  transform: rotateY(180deg);
}

/* Front content: short label + icon, with title/notice */
.lensKicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.lensTitle{
  font-size: 18px;
  font-weight: 760;
  line-height: 1.15;
  margin-bottom: 8px;
}
.lensIcon{
  margin-top: 6px;
  width: 56px;
  height: 56px;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.lensIcon svg{ width: 56px; height: 56px; }
.lensNotice{
  margin-top: auto;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  opacity: .95;
  line-height: 1.35;
}

/* Back content */
.lensBack .lensTitle{ margin-bottom: 8px; }
.lensBackP{
  margin: 0 0 10px;
  color: var(--text);
  opacity: .95;
  line-height: 1.45;
}
.lensList{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  opacity: .92;
  line-height: 1.45;
}
.lensList li{ margin: 6px 0; }

/* Whole set feels interactive */
.lensesRow:hover .lensCard{ opacity: .92; }
.lensesRow:hover .lensCard:hover{ opacity: 1; }

/* Color panels (match concept) */
.lensCard[data-lens="1"]{ --lens-bg: rgba(16, 60, 110, .62); --lens-tint: rgba(255,255,255,.78); }
.lensCard[data-lens="2"]{ --lens-bg: rgba(120, 135, 150, .55); --lens-tint: rgba(255,255,255,.78); }
.lensCard[data-lens="3"]{ --lens-bg: rgba(245, 146, 36, .62); --lens-tint: rgba(255,255,255,.80); }
.lensCard[data-lens="4"]{ --lens-bg: rgba(90, 120, 72, .60); --lens-tint: rgba(255,255,255,.80); }
.lensCard[data-lens="5"]{ --lens-bg: rgba(16, 60, 110, .62); --lens-tint: rgba(255,255,255,.78); }

/* Consistent angled orientation like the reference image */
.lensCard{
  transform: perspective(1400px) rotateY(-18deg) rotateX(2deg) rotateZ(-1deg);
}
.lensCard:hover,
.lensCard:focus-visible{
  transform: perspective(1400px) rotateY(-6deg) rotateX(1deg) translateY(-8px) scale(1.03);
}
.lensCard:nth-child(1){ z-index: 2; }
.lensCard:nth-child(2){ z-index: 3; }
.lensCard:nth-child(3){ z-index: 4; }
.lensCard:nth-child(4){ z-index: 3; }
.lensCard:nth-child(5){ z-index: 2; }

.lensCard:nth-child(2){ transform: perspective(1400px) rotateY(-19deg) rotateX(2deg) rotateZ(-.5deg); z-index: 3; }
.lensCard:nth-child(3){ transform: perspective(1400px) rotateY(-16deg) rotateX(2deg); z-index: 4; }
.lensCard:nth-child(4){ transform: perspective(1400px) rotateY(-19deg) rotateX(2deg) rotateZ(.5deg); z-index: 3; }
.lensCard:nth-child(5){ transform: perspective(1400px) rotateY(-22deg) rotateX(2deg) rotateZ(1deg); z-index: 2; }

/* Responsive: reduce overlap and stack */
@media (max-width: 1100px){
  .lensCard{ width: 200px; margin-left: -18px; }
}
@media (max-width: 980px){
  .lensesRow{ flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .lensCard{ margin-left: 0; transform: none; width: calc(50% - 6px); }
  .lensCard:nth-child(n){ transform: none; }
  .lensInner{ height: 240px; }
}
@media (max-width: 620px){
  .lensCard{ width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .lensCard, .lensInner{ transition: none; }
}


/* ===== Lenses orientation override (right-leaning, sharper angle) ===== */
.lensesView .lensesRow .lensCard{
  transform: perspective(1400px) rotateY(26deg) rotateX(3deg) rotateZ(1deg) !important;
}
.lensesView .lensesRow .lensCard:hover,
.lensesView .lensesRow .lensCard:focus-visible{
  transform: perspective(1400px) rotateY(10deg) rotateX(2deg) rotateZ(.5deg) translateY(-10px) scale(1.04) !important;
}
/* Keep flip working */
.lensesView .lensesRow .lensCard:hover .lensInner,
.lensesView .lensesRow .lensCard:focus-visible .lensInner,
.lensesView .lensesRow .lensCard.is-flipped .lensInner{
  transform: rotateY(180deg) !important;
}
/* Layering like the reference */
.lensesView .lensesRow .lensCard:nth-child(1){ z-index: 2; }
.lensesView .lensesRow .lensCard:nth-child(2){ z-index: 3; }
.lensesView .lensesRow .lensCard:nth-child(3){ z-index: 4; }
.lensesView .lensesRow .lensCard:nth-child(4){ z-index: 3; }
.lensesView .lensesRow .lensCard:nth-child(5){ z-index: 2; }

.lensesView .lensesRow .lensCard:nth-child(2){ z-index: 3; }
.lensesView .lensesRow .lensCard:nth-child(3){ z-index: 4; }
.lensesView .lensesRow .lensCard:nth-child(4){ z-index: 3; }
.lensesView .lensesRow .lensCard:nth-child(5){ z-index: 2; }



/* Lenses: back face list-only layout */
.lensesView .lensBack{
  justify-content: center;
}
.lensesView .lensBack .lensList{
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.4;
}


/* Lenses: keep colour consistent when flipped */
.lensesView .lensBack{
  background: var(--lens-bg) !important;
}


/* Focus Areas: force 50/50 panels (stack only on small screens) */
#focus-areas .grid2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 720px){
  #focus-areas .grid2{ grid-template-columns: 1fr !important; }
}


/* Focus Areas: force true 50/50 layout */
.focusGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 820px){
  .focusGrid{
    grid-template-columns: 1fr;
  }
}


/* Engagement outcome line styling */
.outcomeWide{
  width: 100%;
}
.outcomeHeadline{
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 10px;
  font-weight: 780;
}
.outcomeHeadline .outcomeEm{
  font-weight: 820;
}
.outcomeLine{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 980px){
  .outcomeLine{
    white-space: normal;
  }
}


/* Mobile section control (indicator + chips) */

.mobileSectionControl{ display:none; }
@media (max-width: 860px){
  .mobileSectionControl{
    display:block;
    position: fixed;
    top: var(--topbar-h, 56px);
    left: 0;
    right: 0;
    transform: translateZ(0);
    will-change: transform;
    z-index: 998;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  body.mn-has-msc main.container{ padding-top: var(--msc-h, 0px); }

  .mscInner{
    padding: 10px 14px 12px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .mscIndicator{
    display:flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.2;
    opacity: 0.95;
    margin-bottom: 10px;
  }
  .mscPrefix{ opacity: 0.75; }
  .mscLabel{ font-weight: 600; }


  .mscProgress{
    margin: 2px 0 10px;
  }
  .mscProgressTrack{
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(10, 15, 20, 0.10);
    border: 1px solid rgba(10, 15, 20, 0.12);
    overflow: hidden;
  }
  .mscProgressTicks{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    mix-blend-mode: overlay;
  }
  .mscProgressTick{
    position:absolute;
    top:50%;
    width:2px;
    height:6px;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.38);
    opacity: 0.55;
    box-shadow: 0 0 10px rgba(0,194,255,0.10);
  }
  .mscProgressTick.edge{
    height:8px;
    opacity: 0.65;
  }

  /* The "techy" fill: brand-gradient + soft glow */
  .mscProgressFill{
    z-index:1;
    height: 100%;
    width: calc(var(--msc-progress, 0) * 100%);
    background: linear-gradient(90deg, #1f5fbf 0%, #00c2ff 35%, #f08a2b 100%);
    box-shadow: 0 0 18px rgba(31,95,191,0.35), 0 0 26px rgba(240,138,43,0.22);
    border-radius: 999px;
    position: relative;
  }
  /* subtle animated scanline shimmer */
  .mscProgressFill::after{
    content:"";
    position:absolute;
    inset: -40% 0 -40% 0;
    width: 40%;
    transform: translateX(-130%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 100%);
    filter: blur(0.3px);
    animation: mscScan 2.2s linear infinite;
    opacity: 0.8;
  }
  .mscProgressDot{
    z-index:3;
    z-index:3;
    position:absolute;
    top: 50%;
    left: calc(var(--msc-progress, 0) * 100%);
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid rgba(31,95,191,0.9);
    box-shadow: 0 0 0 4px rgba(31,95,191,0.12), 0 0 20px rgba(240,138,43,0.25);
    animation: mscPulse 1.6s ease-in-out infinite;
  }
  @keyframes mscScan{
    0%{ transform: translateX(-130%) skewX(-12deg); }
    100%{ transform: translateX(330%) skewX(-12deg); }
  }
  @keyframes mscPulse{
    0%,100%{ box-shadow: 0 0 0 4px rgba(31,95,191,0.12), 0 0 20px rgba(240,138,43,0.25); }
    50%{ box-shadow: 0 0 0 7px rgba(31,95,191,0.16), 0 0 26px rgba(240,138,43,0.33); }
  }


  /* Respect reduced motion preference */
  .mscReduceMotion .mscProgressFill::after{ animation: none; opacity: 0.25; }
  .mscReduceMotion .mscProgressDot{
    z-index:3; animation: none; }

  .mscChips{
    display:flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .mscChips::-webkit-scrollbar{ display:none; }

  .mscChip{
    flex: 0 0 auto;
    display:inline-flex;
    align-items:center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.85);
    text-decoration:none;
    font-size: 13px;
    white-space: nowrap;
  }
  .mscChip.active{
    border-color: rgba(0,0,0,0.22);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-0.5px);
  }

  /* When the mobile menu is open, keep the section control tidy */
  .topbar.menu-open + .mobileSectionControl .mscChips{ display:none; }
}


.section-eyebrow {
  width: 48px;
  height: 2px;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-orange));
  opacity: 0.35;
  border-radius: 2px;
}
.key-focus-header {
  margin-bottom: 1.25rem;
}
.keyFocusHeader{
  margin-bottom:1.25rem;
}


#focus-areas .section-title{
  font-size: 26px;
  line-height: 1.2;
  font-weight: 780;
  margin:0;
}