@charset "utf-8";
/* CSS Document */


/* ================================
   === BASE / RESET ===============
   ================================ */

* { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  line-height: 1.45;
}

a { 
	color: inherit;
	text-decoration: none;
}
.container {
	max-width: 1100px;
	margin: 0 auto; 
	padding: 0 16px; 
}


/* ================================
   === UTILITIES ==================
   ================================ */

.mt-10 {
	margin-top: 10px; 
}
.mt-8  {
	margin-top: 8px; 
}

/* Skip link */
.skip {
	position: absolute;
	left: -9999px; 
	top: auto; 
}
.skip:focus {
    left: 16px;
	top: 12px;
	background: #ffffff;
	color: #0a0a0a;
    padding: 8px 12px;
	border-radius: 8px;
	outline: 2px solid #0a0a0a;
}


/* ================================
   === HEADER =====================
   ================================ */

header {
    background: #0a0a0a;
    color: #ffffff;
    border-bottom: 3px solid #800020;
}
.head { 
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0; 
}
.brand { 
	display: flex;
	align-items: center; 
	gap: 10px;
	font-weight: 700;
	letter-spacing: .2px; 
}
.brand-badge {
    width: 34px;
	height: 34px;
	border-radius: 8px;
    background: #800020;
	border: 1px solid #5e0017;
}
nav {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px; }
nav a {
	padding: 8px 10px; 
	border-radius: 10px;
	color: #f1f1f1; 
}
nav a:hover { 
	background: rgba(255,255,255,.08);
}

.btn {
    display: inline-block; 
	padding: 10px 14px;
	border-radius: 10px;
    font-weight: 600; 
	border: 1px solid transparent;
}
.btn-primary {
	background: #800020;
	color: #ffffff;
	border-color: #5e0017; 
}
.btn-primary:hover {
	filter: brightness(0.95);
}
.btn-ghost {
	border-color: #444444;
	color: #f1f1f1; 
}
.btn-ghost:hover {
	background: #141414; 
}
.btn-ghost--alt-border { 
	border-color: #d8aab7; 
}


/* ================================
   === HERO SECTION ===============
   ================================ */

.hero {
  background: linear-gradient(180deg, #800020, #5e0017);
  color: #ffffff;
  padding: 56px 0 48px;
}
.wrap-hero {
  display: flex; 
  gap: 24px; 
  align-items: flex-start;
  flex-wrap: wrap;
}
.hero-col { 
	flex: 1 1 320px;
	min-width: 280px;
}
.hero-copy { 
	max-width: 640px; 
}

.kicker {
	font-size: 12px; 
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .8;
}
.hero h1 { 
	margin: .3em 0 .1em;
	font-size: 42px;
	line-height: 1.1; 
}
.hero p { 
	color: #f0e9ec; 
	max-width: 52ch;
	margin: 0 0 18px; }
.cta-row { 
	display: flex; 
	gap: 10px; 
	flex-wrap: wrap;
	margin-top: 6px;
}

/* Card in hero */
.card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 16px;
}

/* ================================
   === FORMS ======================
   ================================ */

.form-title {
	margin: 0 0 8px; 
	font-size: 18px;
	color: #ffffff;
}
.form label { 
	display: block; 
	font-size: 13px; 
	margin: 8px 0 4px;
	color: #ffffff;
}
.form input, .form select, .form textarea {
    width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1); color: #ffffff;
}
.form .row { 
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.form .row > div { 
	flex: 1 1 180px;
	min-width: 180px; 
}
.muted { 
	font-size: 12px;
	color: #e9dfe2;
	opacity: .85;
}
.form-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
}


/* ================================
   === SECTION FRAMEWORK ==========
   ================================ */

section {
	padding: 42px 0;
}
.section-title {
	margin: 0 0 18px ;
	font-size: 55px;
}
.section-sub { 
	color: black;
	margin: 0 0 10px;
	font-size: 18px;
}

/* === PROGRAMS (enhanced) ==================================== */
.programs-head { 
	text-align: center;
    background-color: #6F6D6D;
}
.programs {
	background-color: #6F6D6D;
}

.programs .chip {
	cursor: default;
}
.programs .chip-active {
	background: #800020;
	color: #ffffff;
	border-color: #5e0017;
}

/* card row */
.programs-row { 
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}
.program-card {
  width: 31%;              /* three-up desktop */
  margin: 10px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px){
	.program-card {
		width: 48%; 
	} 
}
@media (max-width: 600px){
	.program-card {
		width: 100%; 
	}
}

/* media area */
.program-media { 
	position: relative;
}

/* PROGRAMS ONLY */
.program-media .ph-img {
  width: 100%;
  height: 220px;
  background: #efefef;
  border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
}
.program-media .ph-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* RESULTS ONLY */
.ba .ph-img {
  width: 100%;
  height: 320px;          /* adjust to taste */
  background: #efefef;
  border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
}
.ba .ph-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* small “Most Popular” ribbon */
.ribbon {
  position: absolute;
  top: 12px;
  left: -6px;
  background: #800020;
  color: #ffffff;
  font-size: 12px; 
  font-weight: 700;
  padding: 6px 10px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border: 1px solid #5e0017;
}

/* body */
.program-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.program-title {
	margin: 0;
	font-size: 20px;
}
.program-copy {
	margin: 0; 
	color: #333333;
}
.program-points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.program-points li {
	padding-left: 18px; 
	position: relative;
}
.program-points li:before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #800020;
  font-weight: 700;
}

/* footer row in card */
.program-cta {
  margin-top: 6px;
  display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.program-price { 
	font-weight: 800;
	color: #1a1a1a;
}

/* hover */
.program-card:hover {
	box-shadow: 0 8px 18px rgba(0,0,0,.08);
	transform: translateY(-2px);
	transition: box-shadow .2s ease, transform .2s ease;
}
.program-card.featured {
	border-color: #d9b8c1; 
	box-shadow: 0 6px 16px rgba(128,0,32,.12);
}

/* comparison strip */
.programs-compare {
  margin-top: 14px;
  background: #fafafa; 
	border: 1px solid #eeeeee;
	border-radius: 12px;
  display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px;
}
.compare-col {
	flex: 1 1 240px; 
	min-width: 240px;
}
.compare-col h4 { 
	margin: 0 0 6px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #666666;
}
.compare-col p { 
	margin: 0; 
	color: #333333;
}
/* ================================
   === LAYOUT GRIDS (Flex) ========
   ================================ */

.grid-3, .grid-2 { 
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}
.grid-3 > * {
	width: 31%;
	margin: 10px;
}
.grid-2 > * { 
	width: 48%;
	margin: 10px;
}


/* ================================
   === CARDS / TILES ==============
   ================================ */

.tile {
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
}
.tile h3 {
	margin: .2em 0 .3em;
	font-size: 18px;
}
.chip {
    display: inline-block; 
	padding: 6px 10px;
	border-radius: 999px;
    border: 1px solid #dddddd;
	font-size: 12px; color: #444444;
}


/* ================================
   === LIGHT BANDS / BACKGROUNDS ==
   ================================ */

.band-light {
	background: #fafafa; 
}
.band-light--both {
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
}
.band-light--top  { 
	border-top: 1px solid #eeeeee;
}


/* ================================
   === PRICING ====================
   ================================ */

.section-title {
	font-size: 35px;
	font-weight: 800;
}
.pricing .tile {
	border-color: #eeeeee;
	background-color: #36454F;
}

.pricing h3 {
	color: white;
    font-size: 32px;
}
.price { 
	font-size: 28px; 
	font-weight: 800;
	color: black;
}
.fine  {
	font-size: 12px; 
	color: #FFFFFF;
}

.pricing ul{
	color: #FAF9F6;
}
/* ================================
   === Results =====================
   ================================ */
/* === RESULTS (enhanced) ===================================== */
.results-head {
	text-align: center;
	margin-bottom: 18px;
}
.results-filters {
	margin: 10px 0 2px; 
	display: flex; 
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.results-filters .chip {
	cursor: default; 
}
.chip-active { 
	background: #800020; 
	color: #ffffff;
	border-color: #5e0017;
}

/* gallery layout (flex) */
.results-grid {
	display: flex;
	flex-wrap: wrap;
	margin: -10px; 
}
.result-card { 
  width: 48%;               /* two-up on tablet/desktop */
  margin: 10px; 
  background: #ffffff; 
  border: 1px solid #eaeaea; 
  border-radius: 14px; 
  overflow: hidden; 
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
@media (max-width: 900px){ 
	.result-card {
		width: 48%;
	} 
}
@media (max-width: 600px){
	.result-card {
		width: 100%;
	}
}

.result-body { 
	padding: 16px;
}
.result-person { 
	display: flex;
	align-items: center;
	gap: 10px; 
	margin-bottom: 8px;
}
.avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #dedede;
	border: 1px solid #d6d6d6;
}
.stars { 
	color: #ffb400;
	font-size: 14px; 
	line-height: 1; 
}

/* quote & badges */
.result-quote, .quote {
	margin: 8px 0 12px;
	color: #333333;
}
.quote { 
	font-style: italic; 
}
.result-badges {
	list-style: none; 
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.badge {
	font-size: 12px;
	color: #444444;
	border: 1px solid #dddddd;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fafafa;
}

/* transformation (before/after split) */
.ba {
	display: flex;
}
.ba-col {
	flex: 1 1 50%; 
	position: relative;
}

.ba-label { 
    position: absolute; 
	left: 8px;
	bottom: 8px; 
    background: rgba(10,10,10,.8);
	color: #ffffff; 
    font-size: 12px;
	padding: 3px 8px;
	border-radius: 6px;
}
.ba-label--after {
	background: #800020;
}

/* stat variant */
.stat-head { 
  display: flex;
	align-items: center;
	justify-content: space-between; 
  padding: 14px 16px;
	background: #fafafa;
	border-bottom: 1px solid #eeeeee;
}
.stat-kicker { 
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #666666; 
}
.stat-value {
	font-size: 28px; 
	font-weight: 800;
	color: #1a1a1a; 
	line-height: 1; 
}
.stat-pill {
	font-size: 12px; 
	border: 1px solid #dddddd;
	padding: 6px 10px;
	border-radius: 999px;
	background: #ffffff;
	color: #444444;
}

/* results section footer */
.results-footer {
	text-align: center;
	margin-top: 12px; 
}

/* optional: subtle hover lift */
.result-card:hover {
	box-shadow: 0 8px 18px rgba(0,0,0,.08);
	transform: translateY(-2px);
	transition: box-shadow .2s ease, transform .2s ease;
}
/* ================================
   === FOOTER =====================
   ================================ */

footer {
  background: #0a0a0a; color: #dddddd;
  border-top: 3px solid #800020;
  padding: 28px 0;
}
.foot {
	display: flex; 
	flex-wrap: wrap;
	gap: 20px;
}
.foot > * { 
	flex: 1 1 240px;
}
.foot small {
	color: #aaaaaa; 
}


/* ================================
   === RESPONSIVE ================
   === (Grouped like your sample) =
   ================================ */

/* --- HERO: responsive type --- */
@media (max-width: 900px) {
  .hero h1 {
	  font-size: 34px; 
	}
}

/* --- GRIDS & LAYOUT --- */
@media (max-width: 900px) {
  .grid-3 > * { 
	  width: 48%;
	}
  .grid-2 > * { 
	  width: 48%;
	}
}
@media (max-width: 600px) {
  .grid-3 > *, .grid-2 > * { 
	  width: 100%; 
	}
}

/* --- HEADER tweaks --- */
@media (max-width: 600px) {
  nav { 
	  margin-left: 0;
	  width: 100%; 
	}
}

/* --- HERO columns --- */
@media (max-width: 900px) {
  .wrap-hero { /* already wraps; nothing else needed */ }
}