header p {
	font-size: 20px;
	line-height: 2em;
}

.bg-about {
	background-image: url('../../../img/bg-about.jpeg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 675px;
}

.about-intro {
	background-image: url('../../../img/bg-about-intro.jpeg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 400px;
}

.intro-alt {
	background-image: url('../../../img/bg-tech-alt-intro.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 500px;
}

/* ================================
   MATRIX MODE: kill background images
================================ */

body.matrix-mode .about-intro,
body.matrix-mode .bg-about {
  background-image: none !important;
  background-color: #000 !important;
}

/* In Matrix Mode, remove the entire "intro-alt" hero image section (no gap left) */
body.matrix-mode .intro-alt {
  display: none !important;
}

.card-body-height {
	position: relative;
	top: -100px;
}

/* ================================
   MATRIX MODE: ABOUT PAGE LAYOUT FIX
   (longer bios + preserve box layout)
================================ */

body.matrix-mode .card-body-height {
  top: 0 !important;              /* stop the vertical shift that was tuned for short bios */
  padding-top: 20px;
  padding-bottom: 20px;
}

body.matrix-mode h2.card-title {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Keep the bio scrollable so contact/social stays visible */
body.matrix-mode .card-text {
  display: flex;
  flex-direction: column;
}

body.matrix-mode .card-text .bio {
  max-height: 260px;
  overflow: auto;
  padding-right: 8px;
  margin-bottom: 12px !important;
}

body.matrix-mode .card-text .col {
  margin-top: 0;
}


/* Desktop-only: keep H2 where it is, but push the body text back into the bordered box */
@media (min-width: 992px) {
  .card-body-height .card-text {
    margin-top: 25px;
  }
  
  .card-body-height h2.card-title {
    margin-top: 225px;
  }
  
  .profile-jj {
		background-image: url('../../../img/img-profile-jj.png');
		background-position: center center;
		background-size: contain !important;
		background-repeat: no-repeat;
		min-height: 635px;
	}

	.profile-adam {
		background-image: url('../../../img/img-profile-adam.png');
		background-position: center center;
		background-size: contain !important;
		background-repeat: no-repeat;
		min-height: 635px;
	}

	.profile-mike {
		background-image: url('../../../img/img-profile-mike.png');
		background-position: center center;
		background-size: contain !important;
		background-repeat: no-repeat;
		min-height: 635px;
	}
  
  /* Matrix Mode: -normal profile images */
	body.matrix-mode .profile-jj { background-image: url('../../../img/img-matrix-profile-jj.webp') !important; }
	body.matrix-mode .profile-adam { background-image: url('../../../img/img-matrix-profile-adam.webp') !important; }
	body.matrix-mode .profile-mike { background-image: url('../../../img/img-matrix-profile-mike.webp') !important; }
}

.profile-jj {
	background-image: url('../../../img/img-profile-jj.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 513px;
}

.profile-adam {
	background-image: url('../../../img/img-profile-adam.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 513px;
}

.profile-mike {
	background-image: url('../../../img/img-profile-mike.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 513px;
}

@media (max-width: 375px) {
	.about-intro {
		min-height: 400px;
	}

	.about-intro .col-sm-8 {
		width: 79.9%;
	}

	.intro-alt {
		min-height: 482px;
	}

	.card-body-height {
		position: relative;
		top: -52px;
	}

	h2.card-title {
		font-size: 1.1rem;
	}

	.profile-jj {
		background-image: url('../../../img/img-profile-jj-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 635px;
	}

	.profile-adam {
		background-image: url('../../../img/img-profile-adam-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 635px;
	}

	.profile-mike {
		background-image: url('../../../img/img-profile-mike-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 635px;
	}

	.col-sm-7.offset-sm-5 {
		padding: 30px;
	}

	.card-body-height p,
	.card-body-height ul {
		font-size: 13px;
	}

	.card-text {
		margin-right: 15px;
	}

	.social {
		height: 30px;
		width: 30px;
	}
	
	/* Matrix Mode: -xxs profile images */
	body.matrix-mode .profile-jj { background-image: url('../../../img/img-matrix-profile-jj-xxs.webp') !important; }
	body.matrix-mode .profile-adam { background-image: url('../../../img/img-matrix-profile-adam-xxs.webp') !important; }
	body.matrix-mode .profile-mike { background-image: url('../../../img/img-matrix-profile-mike-xxs.webp') !important; }

}


@media (min-width: 376px) and (max-width: 575.98px) {
	.about-intro {
		min-height: 400px;
	}

	.about-intro .col-sm-8 {
		width: 79.9%;
	}

	.intro-alt {
		min-height: 620px;
	}

	.card-body-height {
		position: relative;
		top: -52px;
	}

	h2.card-title {
		font-size: 1.3rem;
	}

	.profile-jj {
		background-image: url('../../../img/img-profile-jj-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 662px;
	}

	.profile-adam {
		background-image: url('../../../img/img-profile-adam-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 662px;
	}

	.profile-mike {
		background-image: url('../../../img/img-profile-mike-xxs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 662px;
	}

	.col-sm-7.offset-sm-5 {
		padding: 37px;
	}

	.card-body-height p,
	.card-body-height ul {
		font-size: 15px;
	}

	.card-text {
		margin-right: 15px;
	}

	.social {
		height: 30px;
		width: 30px;
	}
	/* Matrix Mode: -xxs profile images */
	body.matrix-mode .profile-jj { background-image: url('../../../img/img-matrix-profile-jj-xxs.webp') !important; }
	body.matrix-mode .profile-adam { background-image: url('../../../img/img-matrix-profile-adam-xxs.webp') !important; }
	body.matrix-mode .profile-mike { background-image: url('../../../img/img-matrix-profile-mike-xxs.webp') !important; }
	body.matrix-mode .card-body-height{
		top: -52px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	  }

	  /* allow box to extend farther down */
	  body.matrix-mode .card-text{
		max-height: 45vh;   /* was 340 */
		overflow:auto;
	  }

	  body.matrix-mode .card-text .bio{
		max-height: 45vh;   /* was 220 */
		overflow:auto;
	  }
	  
	  /* Dyslexia + Matrix: drop bio boxes so text isn't jammed at the top */
		body.matrix-mode.dyslexie-font .card-body-height{
		  top: 48px !important;      /* net +100px from -52px */
		  padding-top: 20px !important;
		}

}

@media (min-width: 576px) and (max-width: 767.98px) {
	.about-intro {
		min-height: 470px;
	}

	.intro-alt {
		min-height: 786px;
	}

	.card-body-height {
		position: relative;
		top: -5px;
	}

	h2.card-title {
		font-size: 1.2rem;
	}

	.profile-jj {
		background-image: url('../../../img/img-profile-jj-xs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 420px;
	}

	.profile-adam {
		background-image: url('../../../img/img-profile-adam-xs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 420px;
	}

	.profile-mike {
		background-image: url('../../../img/img-profile-mike-xs.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 420px;
	}

	.card-body-height p,
	.card-body-height ul {
		font-size: 13px;
	}

	.card-text {
		margin-right: 15px;
	}

	.social {
		height: 30px;
		width: 30px;
	}

	h2 {
		font-size: 20px;
	}

	p {
		margin-bottom: 0 !important;
	}
	
	  /* Matrix Mode: -xs profile images */
  body.matrix-mode .profile-jj { background-image: url('../../../img/img-matrix-profile-jj-xs.webp') !important; }
  body.matrix-mode .profile-adam { background-image: url('../../../img/img-matrix-profile-adam-xs.webp') !important; }
  body.matrix-mode .profile-mike { background-image: url('../../../img/img-matrix-profile-mike-xs.webp') !important; }

}

@media (min-width: 768px) and (max-width: 991.98px) {
	.about-intro {
		min-height: 470px;
	}

	.intro-alt {
		min-height: 786px;
	}

	.card-body-height {
		position: relative;
		top: 10px;
	}

	h2.card-title {
		font-size: 1.2rem;
	}

	.profile-jj {
		background-image: url('../../../img/img-profile-jj-sm.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 330px;
	}

	.profile-adam {
		background-image: url('../../../img/img-profile-adam-sm.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 330px;
	}

	.profile-mike {
		background-image: url('../../../img/img-profile-mike-sm.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 330px;
	}

	.card-body-height p,
	.card-body-height ul {
		font-size: 13px;
	}

	.card-text {
		margin-right: 15px;
	}

	.social {
		height: 30px;
		width: 30px;
	}

	h2 {
		font-size: 20px;
	}

	p {
		margin-bottom: 0 !important;
	}
	  /* Matrix Mode: -sm profile images */
  body.matrix-mode .profile-jj { background-image: url('../../../img/img-matrix-profile-jj-sm.webp') !important; }
  body.matrix-mode .profile-adam { background-image: url('../../../img/img-matrix-profile-adam-sm.webp') !important; }
  body.matrix-mode .profile-mike { background-image: url('../../../img/img-matrix-profile-mike-sm.webp') !important; }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.about-intro {
		min-height: 470px;
	}

	.card-body-height {
		position: relative;
		top: 60px;
	}

	h2.card-title {
		font-size: 1.5rem;
		margin-top: 225px;
	}
	
	.card-text {
		margin-top: 25px;
	}

	.profile-jj,
	.profile-adam,
	.profile-mike {
		min-height: 375px;
	}

	.card-body-height p,
	.card-body-height ul {
		font-size: 15px;
	}

	h2 {
		font-size: 20px;
	}

	p {
		margin-bottom: 0 !important;
	}
}

@media (min-width: 1200px) and (max-width: 1300px) {
	.about-intro {
		min-height: 630px;
	}

	.card-body-height {
		position: relative;
		top: 80px;
	}

	h2.card-title {
		font-size: 1.6rem;
		margin-top: 225px;
	}
	
	.card-text {
		margin-top: 25px;
	}

	.profile-jj,
	.profile-adam,
	.profile-mike
	 {
		min-height: 446px;
	}
}



/* ================================
   About Us ONLY: NES Controller Pad (footer, above icons)
================================ */

/* =========================================================
   MATRIX MODE PROFILE TUNING (PROD)
   Only touches the About Us profile cards.
   ========================================================= */

/* Helper: default for matrix-mode bio scroll box */
body.matrix-mode .profile-jj .card-text .bio,
body.matrix-mode .profile-adam .card-text .bio,
body.matrix-mode .profile-mike .card-text .bio{
  max-height: 260px; /* baseline */
}

/* 1) Matrix ON, Dyslexia OFF — 2nd biggest (1200–1300): scroll boxes -8px */
@media (min-width: 1200px) and (max-width: 1300px){
  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-text .bio{
    max-height: 252px !important;
  }
}

/* 2) Matrix ON, Dyslexia OFF — 3rd biggest (992–1199): down 7px + scroll -8px */
@media (min-width: 992px) and (max-width: 1199.98px){
  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-body-height{
    transform: translateY(7px) !important;
  }

  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-text .bio{
    max-height: 252px !important;
  }
}

/* 3) Matrix ON, Dyslexia OFF — 4th biggest (768–991): down 5px + scroll 35% shorter */
@media (min-width: 768px) and (max-width: 991.98px){
  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-body-height{
    transform: translateY(5px) !important;
  }

  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-text .bio{
    max-height: 169px !important; /* 260px * 0.65 */
  }
}

/* 4) Matrix ON, Dyslexia OFF — 5th biggest (576–767): JJ/Adam +100px, Mike +30px, scroll 25% shorter */
@media (min-width: 576px) and (max-width: 767.98px){
  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-body-height{
    transform: translateY(100px) !important;
  }

  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-body-height{
    transform: translateY(30px) !important;
  }

  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-text .bio,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-text .bio{
    max-height: 195px !important; /* 260px * 0.75 */
  }
}

/* 5) Matrix ON, Dyslexia OFF — 2nd smallest (376–575): intentionally no changes */

/* 6) Matrix ON, Dyslexia OFF — smallest (<=375): down 25px */
@media (max-width: 375px){
  body.matrix-mode:not(.dyslexie-font) .profile-jj .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-adam .card-body-height,
  body.matrix-mode:not(.dyslexie-font) .profile-mike .card-body-height{
    transform: translateY(25px) !important;
  }
}

/* 7) Matrix ON, Dyslexia ON — 2nd largest (1200–1300): up 10px */
@media (min-width: 1200px) and (max-width: 1300px){
  body.matrix-mode.dyslexie-font .profile-jj .card-body-height,
  body.matrix-mode.dyslexie-font .profile-adam .card-body-height,
  body.matrix-mode.dyslexie-font .profile-mike .card-body-height{
    transform: translateY(-10px) !important;
  }
}

/* 8) Matrix ON, Dyslexia ON — 3rd largest (992–1199): up 15px + scroll 30% shorter */
@media (min-width: 992px) and (max-width: 1199.98px){
  body.matrix-mode.dyslexie-font .profile-jj .card-body-height,
  body.matrix-mode.dyslexie-font .profile-adam .card-body-height,
  body.matrix-mode.dyslexie-font .profile-mike .card-body-height{
    transform: translateY(-15px) !important;
  }

  body.matrix-mode.dyslexie-font .profile-jj .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-adam .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-mike .card-text .bio{
    max-height: 182px !important; /* 260px * 0.70 */
  }
}

/* 9) Matrix ON, Dyslexia ON — 4th largest (768–991): scroll 25% shorter */
@media (min-width: 768px) and (max-width: 991.98px){
  body.matrix-mode.dyslexie-font .profile-jj .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-adam .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-mike .card-text .bio{
    max-height: 195px !important; /* 260px * 0.75 */
  }
}

/* 10) Matrix ON, Dyslexia ON — 5th largest (576–767): scroll 50% shorter, Adam up 8px, Mike down 14px */
@media (min-width: 576px) and (max-width: 767.98px){
  body.matrix-mode.dyslexie-font .profile-jj .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-adam .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-mike .card-text .bio{
    max-height: 130px !important; /* 260px * 0.50 */
  }

  body.matrix-mode.dyslexie-font .profile-adam .card-body-height{
    transform: translateY(-8px) !important;
  }

  body.matrix-mode.dyslexie-font .profile-mike .card-body-height{
    transform: translateY(14px) !important;
  }
}

/* 11) Matrix ON, Dyslexia ON — 6th largest (376–575): scroll 25% shorter (based on 45vh), Mike down 12px */
@media (min-width: 376px) and (max-width: 575.98px){
  body.matrix-mode.dyslexie-font .profile-jj .card-text,
  body.matrix-mode.dyslexie-font .profile-adam .card-text,
  body.matrix-mode.dyslexie-font .profile-mike .card-text,
  body.matrix-mode.dyslexie-font .profile-jj .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-adam .card-text .bio,
  body.matrix-mode.dyslexie-font .profile-mike .card-text .bio{
    max-height: 34vh !important; /* 45vh * 0.75 */
  }

  body.matrix-mode.dyslexie-font .profile-mike .card-body-height{
    transform: translateY(12px) !important;
  }
}

/* 12) Matrix ON, Dyslexia ON — 7th largest (2nd smallest): JJ + Adam up 7px */
@media (min-width: 321px) and (max-width: 375px){
  body.matrix-mode.dyslexie-font .profile-jj .card-body-height,
  body.matrix-mode.dyslexie-font .profile-adam .card-body-height{
    transform: translateY(-7px) !important;
  }
}

/* 13) Matrix ON, Dyslexia ON — 8th largest (smallest): JJ up 10px, Adam up 7px */
@media (max-width: 320px){
  body.matrix-mode.dyslexie-font .profile-jj .card-body-height{
    transform: translateY(-10px) !important;
  }
  body.matrix-mode.dyslexie-font .profile-adam .card-body-height{
    transform: translateY(-7px) !important;
  }
}


/* Base controller (About Us footer only) */
.footer-nes-wrap{
  display:flex;
  justify-content:center;   /* center controller within its column */
  align-items:center;
  width:100%;
  padding-top: 0;
  margin-bottom: 14px;      /* space between controller and social icons */
  /* IMPORTANT: give the wrapper a real height so flex-centering math
     matches the scaled visual size (transforms don't affect layout). */
  overflow: visible;
}

footer .nes-pad{
  display:flex;
  opacity: 0.18;                 /* subtle until hover */
  width: 420px;
  padding: 10px 12px;
  margin: 0 auto 60px !important;
  border-radius: 12px;
  background: #d8d8d8;
  border: 2px solid #bdbdbd;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.75),
    inset 0 -2px 0 rgba(0,0,0,0.12);

  transform: scale(0.5);
  transform-origin: center;
}

footer .nes-pad:hover,
footer .nes-pad:focus-within{
  opacity: 0.95;
}

/* NESSM wrapper: center NES + social icons as one unit */
footer .nessm{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* centers the whole unit within the column */
/*  width: 100%;
  height: 100%; */
  padding-bottom: 65px;
}

footer .nes-face{

  display:grid;
  grid-template-columns: 160px 1fr 190px;
  align-items:center;
  gap: 14px;
}

/* ---- D-PAD ---- */
footer .nes-dpad{
  width: 124px;
  height: 124px;
  position: relative;
  margin-left: 6px;
}

footer .nes-dpad-btn{
  position:absolute;
  border:2px solid #1f1f1f;
  background:#3b3b3b;
  border-radius:10px;
  -webkit-tap-highlight-color: transparent;
}

footer .nes-dpad-btn.up{ top:0; left:42px; width:40px; height:52px; }
footer .nes-dpad-btn.down{ bottom:0; left:42px; width:40px; height:52px; }
footer .nes-dpad-btn.left{ left:0; top:42px; width:52px; height:40px; }
footer .nes-dpad-btn.right{ right:0; top:42px; width:52px; height:40px; }
footer .nes-dpad-btn.mid{ left:42px; top:42px; width:40px; height:40px; background:#2f2f2f; }

footer .nes-dpad-btn:active{ transform: translateY(1px); filter: brightness(0.95); }

/* ---- SELECT / START ---- */
footer .nes-zone-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

footer .nes-mid-top,
footer .nes-mid-bottom{
  width: 92%;
  height: 22px;
  border-radius: 12px;
  background: #9a9a9a;
  opacity: 0.75;
}

footer .nes-selectstart-labels{
  width: 92%;
  display:flex;
  justify-content:space-between;
  font-weight:900;
  letter-spacing:1.5px;
  font-size:16px;
  color:#b0172a;
}

footer .nes-pill-panel{
  width: 92%;
  height: 64px;
  border-radius: 14px;
  background: #ececec;
  border: 2px solid rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding: 10px 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6);
}

footer .nes-pill{
  width: 92px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #141414;
  background: #1e1e1e;
  -webkit-tap-highlight-color: transparent;
}
footer .nes-pill:active{ transform: translateY(1px); filter: brightness(0.95); }

/* ---- A / B ---- */
footer .nes-zone-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  padding-right: 6px;
}

footer .nes-ab-panel{
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
}

footer .nes-ab-buttons{
  display:flex;
  gap: 18px;
}

footer .nes-ab-btn{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid #2a2a2a;
  background: #ff0000;
  -webkit-tap-highlight-color: transparent;
}
footer .nes-ab-btn:active{ transform: translateY(1px); filter: brightness(0.95); }

footer .nes-ab-labels{
  width: 162px;
  display:flex;
  justify-content:space-between;
  font-size:22px;
  font-weight:1000;
  letter-spacing:2px;
  color:#b0172a;
}



/* ================================
   MATRIX MODE: MOBILE PORTRAIT
   Keep the bio box higher so the bottom of the profile image stays visible
================================ */

/* iPhone-ish / small portrait */
/* MATRIX MODE MOBILE PORTRAIT IMAGE VISIBILITY FIX */
@media (max-width: 575.98px){
  body.matrix-mode .card-body-height{
    top: -52px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* allow slightly taller bio box than before */
  body.matrix-mode .card-text{
    max-height: 340px;
    overflow:auto;
  }

  body.matrix-mode .card-text .bio{
    max-height: 220px;
    overflow:auto;
  }
}

/* =========================================================
   NES Controller FINAL OVERRIDES (wins against older rules)
   Goal:
   - A/B stay INSIDE the controller border
   - controller is 25% smaller
   - controller sits ABOVE the social icons (not to the right)
========================================================= */

footer .nes-pad{
  width: 540px !important;        
  padding: 8px 10px !important;
  margin: 0 auto 10px !important;  /* centered above icons */
  display: inline-flex !important;
  position: static !important;
  transform: scale(0.5) !important;
  transform-origin: bottom center !important;
  opacity: 0.18;
}

footer .nes-face{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 120px 1fr 165px !important; /* give A/B enough room */
  gap: 10px !important;
  align-items: center !important;
}

/* A/B must fit inside right grid column */
footer .nes-zone-right{
  padding-right: 0 !important;
  align-items: flex-end !important;
}

footer .nes-ab-buttons{
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

footer .nes-ab-btn{
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
}

footer .nes-ab-labels{
  width: 120px !important;
}

/* Matrix Mode: NO outlines / link rings on NES controller buttons */
/* =========================================================
   MATRIX MODE: Keep NES controller looking NES (no green)
========================================================= */

/* Kill any matrix outlines/rings/borders on controller buttons */
body.matrix-mode footer .nes-pad button,
body.matrix-mode footer .nes-pad button:focus,
body.matrix-mode footer .nes-pad button:focus-visible,
body.matrix-mode footer .nes-pad button:active{
  outline: none !important;
  box-shadow: none !important;
  border-color: #2a2a2a !important;      /* force NES border */
}

/* If matrix mode adds underlines or “link” styling */
body.matrix-mode footer .nes-pad *{
  text-decoration: none !important;
}

/* Force SELECT/START labels + B/A labels to stay NES red */
body.matrix-mode footer .nes-pad .nes-selectstart-labels,
body.matrix-mode footer .nes-pad .nes-ab-labels{
  color: #b0172a !important;
}

/* Force the dark buttons to stay dark (matrix sometimes turns them green) */
body.matrix-mode footer .nes-pad .nes-pill{
  background: #1e1e1e !important;
  border-color: #141414 !important;
}

/* Force D-pad to stay dark gray (not matrix green) */
body.matrix-mode footer .nes-pad .nes-dpad-btn{
  background: #3b3b3b !important;
  border-color: #1f1f1f !important;
}
body.matrix-mode footer .nes-pad .nes-dpad-btn.mid{
  background: #2f2f2f !important;
}

/* Force A/B buttons to stay NES red */
body.matrix-mode footer .nes-pad .nes-ab-btn{
  background: #ff0000 !important;
  border-color: #2a2a2a !important;
}

/* Sometimes matrix mode adds a glow/outline via filter */
body.matrix-mode footer .nes-pad,
body.matrix-mode footer .nes-pad *{
  filter: none !important;
}

/* =========================================================
   MATRIX MODE: Fix remaining green on NES controller center + labels
========================================================= */

/* Center panel (the light rectangle behind Select/Start) */
body.matrix-mode footer .nes-pad .nes-pill-panel{
  border-color: rgba(0,0,0,0.25) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6) !important;
  outline: none !important;
}

/* Select/Start buttons themselves */
body.matrix-mode footer .nes-pad .nes-pill{
  background: #1e1e1e !important;
  border-color: #141414 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Force the Select/Start label text to NES red */
body.matrix-mode footer .nes-pad .nes-selectstart-labels,
body.matrix-mode footer .nes-pad .nes-selectstart-labels span{
  color: #b0172a !important;
}

/* Force the B/A label text to NES red */
body.matrix-mode footer .nes-pad .nes-ab-labels,
body.matrix-mode footer .nes-pad .nes-ab-labels span{
  color: #b0172a !important;
}

/* If Matrix Mode adds a green border via pseudo-elements */
body.matrix-mode footer .nes-pad .nes-pill-panel::before,
body.matrix-mode footer .nes-pad .nes-pill-panel::after,
body.matrix-mode footer .nes-pad button::before,
body.matrix-mode footer .nes-pad button::after{
  content: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}


/* Mobile: center the NES controller above the social icons */
@media (max-width: 768px){
  .footer-nes-wrap{
    justify-content: center !important;
  }

  footer .nes-pad{
    margin-left: auto !important;
    margin-right: auto !important;
    transform-origin: bottom center !important;
  }
}

/* =========================================================
   Dyslexia mode: JJ + Adam text starts too high — nudge down
   (Mike is already perfect; don't touch him)
========================================================= */

body.dyslexie-font .profile-jj .card-body-height,
body.dyslexie-font .profile-adam .card-body-height{
  top: -70px !important;   /* was -100px globally */
}

/* ================================
   About intro overlay text on hero image
================================ */

/* Make the hero a positioning context */
.intro-alt{
  position: relative;
}

/* Overlay text */
.about-intro-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* force narrower width so text wraps into 3–4 lines */
  width: min(845px, 92%);

  padding: 20px 24px;

  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);

  font-family: inherit;
  font-size: 20px;
  line-height: 1.55;
  text-align: center;
  color: #111;

  z-index: 2;
}
@media (max-width: 576px){
  .about-intro-overlay{
    width: 90%;
    font-size: 16px;
    padding: 16px 18px;
  }
}

/* =========================================================
   Matrix-themed confirm overlay (Blue Pill "Are you sure?")
========================================================= */
.matrix-confirm-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: rgba(0,0,0,0.85);
}

body.matrix-mode .matrix-confirm-overlay{
  display: flex;
}
.matrix-cursor{
  animation: blink 1s infinite;
}

@keyframes blink{
  0%,50%,100%{ opacity:1; }
  25%,75%{ opacity:0; }
}

.matrix-confirm-box{
  width: min(520px, 92vw);
  padding: 18px 18px 14px;
  border: 1px solid rgba(0, 255, 140, 0.55);
  background: rgba(0,0,0,0.92);
  box-shadow: 0 0 28px rgba(0, 255, 140, 0.18);
  border-radius: 12px;
}

.matrix-confirm-title{
  font-family: "Roboto Mono", monospace;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: #00ff7a;
}

.matrix-confirm-text{
  font-family: "Roboto Mono", monospace;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(220,255,235,0.9);
  margin-bottom: 14px;
}

/* buttons */
.matrix-confirm-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.matrix-confirm-btn{
  font-family: "Roboto Mono", monospace;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 255, 140, 0.55);
  background: rgba(0,0,0,0.65);
  color: #00ff7a;
  cursor: pointer;
  text-decoration: none !important;
  outline: none !important;
}

.matrix-confirm-btn:hover{
  box-shadow: 0 0 14px rgba(0,255,140,0.25);
}

/* Dyslexia should override font everywhere except matrix UI */
body.dyslexie-font .matrix-confirm-title,
body.dyslexie-font .matrix-confirm-text,
body.dyslexie-font .matrix-confirm-btn{
  font-family: "Roboto Mono", monospace !important;
}



/* Slightly smaller on phones */
@media (max-width: 576px){
  .about-intro-overlay{
    bottom: 16px;
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* Matrix mode: keep it readable */
body.matrix-mode .about-intro-overlay{
  background: rgba(0,0,0,0.85);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

/* =========================================================
   ABOUT-US: PROFILE TITLE/TEXT POSITION MATRIX
   Source-of-truth tuning for 4 mode combos (matrix x dyslexia)
   Uses per-profile CSS variables so rules never contradict.
   ========================================================= */

.profile-jj{ --title-shift: 0px; --text-shift: 0px; }
.profile-adam{ --title-shift: 0px; --text-shift: 0px; }
.profile-mike{ --title-shift: 0px; --text-shift: 0px; }

/* Apply shifts (do NOT touch container positioning; only internal content) */
.profile-jj h2.card-title,
.profile-adam h2.card-title,
.profile-mike h2.card-title{
  transform: translateY(var(--title-shift)) !important;
}

.profile-jj .card-text,
.profile-adam .card-text,
.profile-mike .card-text{
  transform: translateY(var(--text-shift)) !important;
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 1400px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj{
	  --title-shift: 10px;
	  --text-shift: 10px;
  }
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam{
	--title-shift: 5px;
    --text-shift: 5px;
  }
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 3px;
    --text-shift: 3px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 1301px)  and (max-width: 1399.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam{
	--title-shift: 25px;
    --text-shift: 23px;
  }
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 23px;
    --text-shift: 21px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 1200px) and (max-width: 1300.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: -142px;
    --text-shift: -142px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 992px) and (max-width: 1199.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: -133px;
    --text-shift: -133px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 768px) and (max-width: 991.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 0px;
    --text-shift: 25px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 576px) and (max-width: 767.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 0px;
    --text-shift: 25px;
  }
}

/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 513px) and (max-width: 575.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 85px;
    --text-shift: 110px;
  }
}
/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 376px) and (max-width: 512.98px){
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj{
	 --title-shift: 35px;
    --text-shift: 45px;
  }
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 55px;
    --text-shift: 70px;
  }
}
/* VERIFIED 20260216 Fits in the box fine */
@media (max-width: 375px){1399
  body:not(.matrix-mode):not(.dyslexie-font) .profile-jj,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-adam,
  body:not(.matrix-mode):not(.dyslexie-font) .profile-mike{
    --title-shift: 105px;
    --text-shift: 130px;
  }
}

/* ---------- MATRIX OFF, DYSLEXIA ON ---------- */
/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 1400px){
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	  --title-shift: 10px;
	  --text-shift: 10px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	--title-shift: 0px;
    --text-shift: 0px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 20px;
    --text-shift: 20px;
  }
}
/* VERIFIED 20260216 Does NOT FIT in the box, font size needs lowering not margin changes */
@media (min-width: 1301px)  and (max-width: 1399.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	 --title-shift: 35px;
    --text-shift: 33px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	--title-shift: 25px;
    --text-shift: 45px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 28px;
    --text-shift: 26px;
  }
}
/* VERIFIED 20260216 JJ text does NOT FIT in the box, font size needs lowering not margin changes */
@media (min-width: 1200px) and (max-width: 1300.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	  --title-shift: 40px;
	  --text-shift: 40px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	 --title-shift: -0px;
    --text-shift: -0px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: -142px;
    --text-shift: -142px;
  }
}
/* VERIFIED 20260216 Does NOT FIT in the box, font size needs lowering not margin changes */
@media (min-width: 992px) and (max-width: 1199.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	  --title-shift: 70px
	  --text-shift: 100px
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	  --title-shift: 25px
	  --text-shift: 45px
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: -110px;
    --text-shift: -95px;
  }
}
/* VERIFIED 20260216 Fits in the box fine-ish */
@media (min-width: 768px) and (max-width: 991.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj,
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	  --title-shift: 70px;
    --text-shift: 80px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 0px;
    --text-shift: 25px;
  }
}
/* VERIFIED 20260216 Fits in the box fine-ish */
@media (min-width: 576px) and (max-width: 767.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj,
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	  --title-shift: 60px;
	  --text-shift: 78px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 0px;
    --text-shift: 25px;
  }
}
/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 513px) and (max-width: 575.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj,
  body:not(.matrix-mode).dyslexie-font .profile-adam,
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 85px;
    --text-shift: 110px;
  }
}
/* VERIFIED 20260216 Fits in the box fine */
@media (min-width: 376px) and (max-width: 512.98px){
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	 --title-shift: 35px;
    --text-shift: 45px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam,
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 55px;
    --text-shift: 70px;
  }
}

@media (max-width: 375px){1399
  body:not(.matrix-mode).dyslexie-font .profile-jj{
	  --title-shift: 105px;
    --text-shift: 130px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-adam{
	  --title-shift: 25px;
    --text-shift: 50px;
  }
  body:not(.matrix-mode).dyslexie-font .profile-mike{
    --title-shift: 40px;
    --text-shift: 65px;
  }
}
@media (min-width: 1200px) and (max-width: 1300px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam,
  body.matrix-mode.dyslexie-font .profile-mike{
    --title-shift: 40px;
    --text-shift: 40px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam,
  body.matrix-mode.dyslexie-font .profile-mike{
    --title-shift: 40px;
    --text-shift: 40px;
  }
}

/* Size 4 (768–991): intentionally untouched (looks great) */

/* Size 6 (376–575): everything up 50px */
@media (min-width: 376px) and (max-width: 575.98px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam,
  body.matrix-mode.dyslexie-font .profile-mike{
    --title-shift: -50px;
    --text-shift: -50px;
  }
}

/* Size 7 (<=375): all titles/text down 10px */
@media (max-width: 375px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam,
  body.matrix-mode.dyslexie-font .profile-mike{
    --title-shift: 10px;
    --text-shift: 10px;
  }
}

/* ---------- MATRIX ON, DYSLEXIA ON ---------- */
/* All sizes except smallest three (>=768): ALL down 60px */
@media (min-width: 768px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam,
  body.matrix-mode.dyslexie-font .profile-mike{
    --title-shift: 60px;
    --text-shift: 60px;
  }
}

/* Smallest three sizes (<=767): JJ + Adam down 15px; Mike unchanged */
@media (max-width: 767.98px){
  body.matrix-mode.dyslexie-font .profile-jj,
  body.matrix-mode.dyslexie-font .profile-adam{
    --title-shift: 15px;
    --text-shift: 15px;
  }
}