:root{
  /* Logo-matching color scheme */
  --logo-navy:#1E3A8A;     /* matches logo background */
  --logo-dark:#0F172A;     /* deeper navy for text */
  --logo-light:#3B82F6;    /* lighter blue complement */
  --logo-accent:#60A5FA;   /* bright blue accent */
  
  /* Complementary colors */
  --coral:#F97316;         /* orange complement to navy */
  --gold:#F59E0B;          /* warm gold accent */
  --mint:#10B981;          /* fresh mint green */
  --cream:#FEF3C7;         /* warm cream */
  
  /* Updated palette */
  --ink:var(--logo-dark);
  --ocean:var(--logo-navy);
  --reef:var(--mint);
  --aqua:var(--logo-accent);
  --sun:var(--gold);
  --bg:#F1F5F9;            /* subtle blue-gray background */
  --card:#FFFFFF;
  --accent-bg:#E2E8F0;     /* blue-gray accent */
  --muted:#64748B;
  --radius:16px;
  --shadow:0 6px 18px rgba(30,58,138,0.08);
  --gradient-primary: linear-gradient(135deg, var(--logo-navy) 0%, var(--logo-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--coral) 0%, var(--gold) 100%);
  --gradient-accent: linear-gradient(135deg, var(--mint) 0%, var(--aqua) 100%);
}
*{box-sizing:border-box}
html{scroll-padding-top:90px;scroll-behavior:smooth}
body{margin:0;padding:0;background:#ffd700;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:20px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,58,138,0.1);box-shadow:0 4px 20px rgba(30,58,138,.1);z-index:1000}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.logo{width:32px;height:32px;background:var(--logo-navy);border-radius:5px;padding:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.logo picture{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.brand-name{font-weight:800;letter-spacing:.2px;white-space:nowrap;font-size:18px;background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;gap:18px;align-items:center}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}
.nav a:hover{color:var(--ocean)}

/* Hero */
.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  padding:40px 20px;
  background:#ffd700;
}
.hero-container{
  display:flex;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  min-height:50vh;
  box-shadow:0 0 40px rgba(0,0,0,0.1);
  border-radius:20px;
  overflow:hidden;
}

/* Hero Logo Section (Left 30%) */
.hero-logo-section{
  flex: 0 0 30%;
  background:#132f64;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 15px;
  position:relative;
}
.hero-logo-section::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:2px;
  height:100%;
  background:linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.3) 80%, transparent 100%);
}
.hero-main-logo{
  max-width:400px;
  width:100%;
}
.hero-logo-image{
  width:100%;
  height:auto;
  background:transparent;
  border-radius:25px;
  padding:20px;
  transition:transform 0.3s ease, filter 0.3s ease;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,0.2));
}
.hero-logo-image:hover{
  transform:scale(1.05);
  filter:drop-shadow(0 12px 40px rgba(0,0,0,0.3));
}

/* Hero Content Section (Right 70%) */
.hero-content-section{
  flex: 0 0 70%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:30px 40px;
}
.hero-copy{
  text-align:left;
  max-width:600px;
}
.hero h1{
  font-family:Poppins,Inter,sans-serif;
  font-size:clamp(36px,5.5vw,64px);
  line-height:1.1;
  margin:0 0 24px;
  font-weight:900;
  color:var(--logo-navy);
  text-shadow:0 2px 8px rgba(30,58,138,0.1);
}
.accent{
  background:linear-gradient(135deg, var(--mint) 0%, var(--coral) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
.sub{
  font-size:22px;
  color:#1e3a8a;
  max-width:700px;
  margin:0 0 32px;
  line-height:1.5;
  font-weight:500;
  opacity:0.9;
}
.cta-row{display:flex;gap:18px;margin:32px 0;justify-content:flex-start;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 24px;border-radius:12px;font-weight:700;text-decoration:none;font-size:16px;transition:all 0.3s ease}
.btn-primary{
  background:linear-gradient(135deg, var(--ocean) 0%, var(--mint) 100%);
  color:#fff;
  box-shadow:0 8px 32px rgba(14,116,144,0.3);
  border:none;
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(14,116,144,0.4);
}
.btn-ghost{
  background:rgba(255,255,255,0.95);
  color:var(--logo-navy);
  border:2px solid var(--mint);
  backdrop-filter:blur(15px);
  font-weight:700;
}
.btn-ghost:hover{
  background:linear-gradient(135deg, var(--mint) 0%, var(--ocean) 100%);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(6,182,212,0.3);
}
.trust{
  display:flex;
  gap:28px;
  list-style:none;
  padding:0;
  margin:44px 0 0;
  justify-content:flex-start;
  flex-wrap:wrap;
  font-size:16px;
  font-weight:600;
}

.trust li {
  position: relative;
  padding-left: 28px;
  color:var(--logo-navy);
  opacity:0.85;
}

.trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color:var(--mint);
  font-weight: bold;
  font-size: 18px;
}
.hero-art img{width:100%;height:auto}
.hero-logo{
  max-width: 300px;
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, var(--logo-navy) 0%, var(--logo-light) 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 48px rgba(30,58,138,0.2);
}
.wave{position:absolute;left:0;bottom:-1px;width:100%;}

/* Sections */
.section{padding:64px 0;position:relative;background:#ffffff;margin:20px 0;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}

/* Ensure section anchors account for fixed header */
#programs::before,
#coaches::before,
#membership::before,
#design::before,
#contact::before {
  content: "";
  display: block;
  height: 90px;
  margin-top: -90px;
  visibility: hidden;
}
.section.alt{background:#f8fafc}
.section-title{font-family:Poppins,Inter,sans-serif;font-size:28px;margin:0 0 18px;background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:#ffffff;border:2px solid rgba(255,170,123,0.2);border-radius:var(--radius);padding:18px;box-shadow:0 8px 32px rgba(255,154,123,0.15);position:relative;backdrop-filter:blur(10px)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;border-radius:var(--radius);z-index:-1}
.card .icon{font-size:28px}
.tag{background:var(--gradient-secondary);color:#fff;padding:4px 12px;border-radius:999px;font-size:12px;margin-left:6px;font-weight:600;box-shadow:0 2px 8px rgba(255,107,157,0.3)}

/* Program Logos */
.program-logo {
  display: block;
  margin: 0 auto 20px;
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, var(--logo-navy) 0%, var(--logo-light) 100%);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(30,58,138,0.2);
}

.program-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* Ensure all logo images blend seamlessly */
img[src*="PF_"], 
img[src*="logo"], 
img[src*="Logo"] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.coach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:800px;margin:0 auto}
.coach{background:var(--card);border:1px solid #E5EEFF;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);text-align:left}
.coach img{width:180px;height:180px;margin:10px auto 20px;display:block;border-radius:50%;object-fit:cover;border:4px solid var(--logo-navy);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.coach h3{margin:6px 0;text-align:center}
.coach p{color:var(--muted)}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:8px}
.price-card{background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,243,0.9) 20%, rgba(255,240,230,0.85) 60%, rgba(255,255,255,0.9) 100%);border:1px solid rgba(255,170,123,0.3);border-radius:var(--radius);padding:20px;box-shadow:0 6px 24px rgba(255,154,123,0.12)}
.price{font-size:32px;margin:8px 0 12px}
.price span:first-child{font-weight:600}
.price-card ul{margin:0 0 12px 18px}
.notes{background:linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 100%);border:2px solid rgba(15,115,255,0.2);border-radius:var(--radius);padding:20px;margin-top:12px;backdrop-filter:blur(10px)}

.notes h4{margin:0 0 12px;color:var(--logo-navy);font-size:16px}
.notes p{margin:8px 0;line-height:1.5}

.billing-calculator{margin-top:20px;padding:16px;background:rgba(255,255,255,0.6);border-radius:12px;border:1px solid rgba(30,58,138,0.1)}

.calc-result{font-size:18px;font-weight:600;color:var(--logo-navy);background:rgba(16,185,129,0.1);padding:12px;border-radius:8px;border-left:4px solid var(--mint);margin-top:8px}

/* Payment Modal */
.modal {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 0;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: var(--gradient-primary);
  border-radius: 16px 16px 0 0;
  color: white;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
}

.close {
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.close:hover {
  opacity: 0.7;
}

.modal-body {
  padding: 24px;
}

/* Payment Breakdown */
.payment-breakdown {
  background: linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 100%);
  border: 2px solid rgba(30,58,138,0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.payment-breakdown h4 {
  margin: 0 0 16px;
  color: var(--logo-navy);
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(30,58,138,0.1);
}

.breakdown-item.future {
  border-bottom: none;
  color: var(--muted);
  font-style: italic;
}

.breakdown-note {
  background: rgba(16,185,129,0.1);
  color: var(--logo-navy);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 14px;
  border-left: 4px solid var(--mint);
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--logo-navy);
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--logo-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* Payment Methods */
.payment-methods {
  margin: 24px 0;
}

.payment-methods h4 {
  margin: 0 0 12px;
  color: var(--logo-navy);
}

.payment-option {
  display: flex;
  align-items: center;
  margin: 8px 0;
  cursor: pointer;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s;
}

.payment-option:hover {
  border-color: var(--logo-light);
  background: rgba(59,130,246,0.05);
}

.payment-option input[type="radio"] {
  margin-right: 12px;
}

.payment-section {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

#card-element {
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: white;
}

#card-errors {
  color: #dc2626;
  margin-top: 8px;
  font-size: 14px;
}

/* Mobile Modal Adjustments */
@media (max-width: 768px) {
  .modal-content {
    margin: 10% auto;
    width: 95%;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .breakdown-item {
    flex-direction: column;
    gap: 4px;
  }
}
.notes .tiny{font-size:12px;color:var(--muted)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:block;font-weight:600;margin:12px 0 6px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #D9E8FF;border-radius:12px;font:inherit}
.contact-form button{margin-top:8px}
.response-time{font-size:14px;color:var(--muted);text-align:left;margin-top:12px;font-style:italic}

/* Footer */
.site-footer{background:linear-gradient(135deg, #1e3a8a 0%, #1e40af 20%, #2563eb 60%, #1e3a8a 100%);color:#cbd5e1}
.footer-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.footer-links a{color:#cbd5e1;text-decoration:none;margin-left:12px}
.footer-links a:hover{color:#fff}

/* Designer Images */
.designer-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.designer-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.designer-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.designer-image:hover img {
  transform: scale(1.05);
}

.designer-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* Vector Icon Variants */
.icon-vector {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.icon-vector.large {
  width: 48px;
  height: 48px;
}

.icon-vector.xl {
  width: 96px;
  height: 96px;
}

/* Responsive Images */
.responsive-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Logo Showcase Grid */
.logo-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.logo-showcase-item {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(15,115,255,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.logo-showcase-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(30,58,138,0.02) 0%, rgba(226,232,240,0.1) 100%);
  z-index: -1;
}

.logo-showcase-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15,115,255,0.2);
  border-color: rgba(15,115,255,0.2);
}

.logo-showcase-item:hover::before {
  opacity: 0.1;
}

.logo-showcase-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-showcase-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15,115,255,0.12);
}

.logo-display {
  background: linear-gradient(135deg, var(--logo-navy) 0%, #1E40AF 50%, var(--logo-light) 100%);
  border: 2px solid rgba(30,58,138,0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  box-shadow: 0 8px 32px rgba(30,58,138,0.15);
}

.showcase-logo {
  max-width: 140px;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.logo-showcase-item h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.logo-showcase-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Image Grid for HD Versions */
.hd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.hd-grid .designer-image {
  aspect-ratio: 16/9;
}

.hd-grid .designer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive */
@media (max-width:992px){
  .hero-grid{padding:0 20px}
  .cards{grid-template-columns:1fr}
  .coach-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .coach img{width:150px;height:150px}
  .pricing{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .hd-grid{grid-template-columns:1fr}
  .designer-gallery{grid-template-columns:1fr}
  .logo-showcase-grid{grid-template-columns:repeat(2, 1fr)}
  .trust{gap:16px;font-size:15px}
  .program-logo{width:180px;height:180px}
}
@media (max-width:768px){
  .header-inner{padding:0 15px}
  .brand-name{font-size:16px;max-width:150px}
  .nav{gap:12px}
  .nav a{font-size:14px}
  .hero-content-section{padding:25px 20px}
  .hero-logo-section{padding:25px 10px}
  .hero-main-logo{max-width:300px}
}

@media (max-width:560px){
  .coach-grid{grid-template-columns:1fr;gap:25px}
  .coach img{width:160px;height:160px}
  .logo-showcase-grid{grid-template-columns:1fr}
  .trust{flex-direction:column;gap:12px;align-items:flex-start}
  .cta-row{flex-direction:column;align-items:flex-start;gap:12px}
  .hero{min-height:auto;padding:20px 15px}
  .hero-container{
    flex-direction:column;
    min-height:auto;
    border-radius:15px;
  }
  .hero-logo-section{
    flex:none;
    padding:25px 20px 15px;
  }
  .hero-logo-section::after{display:none}
  .hero-content-section{
    flex:none;
    padding:15px 20px 25px;
    justify-content:center;
  }
  .hero-copy{
    text-align:center;
  }
  .trust{
    align-items:center;
    justify-content:center;
  }
  .cta-row{
    align-items:center;
    justify-content:center;
  }
  .hero-main-logo{max-width:220px}
  .hero h1{font-size:clamp(28px,8vw,40px)}
  .sub{font-size:18px;padding:0 10px}
  .trust li{font-size:14px}
  .header-inner{height:56px}
  .brand-name{font-size:14px;max-width:120px}
  .nav{gap:10px}
  .nav a{font-size:13px}
  .program-logo{width:160px;height:160px;padding:10px}
  
  /* Adjust scroll padding for mobile */
  html{scroll-padding-top:80px}
  
  /* Adjust anchor offsets for mobile */
  #programs::before,
  #coaches::before,
  #membership::before,
  #design::before,
  #contact::before {
    height: 80px;
    margin-top: -80px;
  }
}