/* =========================================================
   COSTA WOMEN — Business Growth Circle
   STYLE SHEET (CONSOLIDATED)
   ======================================================= */

/* ========== GLOBAL ========== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.container{max-width:1200px;margin:0 auto;padding:5px 20px}
.container > section{ margin: var(--vr) 0 !important; } /* shared section spacing */

a:focus-visible,button:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px;border-radius:6px}

/* ========== HEADER ========== */
.header{width:100%;max-width:1200px;margin:0 auto;height:180px;padding:3.75px 0;position:relative}
.logo{position:absolute;left:15px;top:12px;height:150px;width:200px}
.logo img{max-height:100%;max-width:100%;vertical-align:middle}
.social-bar{position:absolute;left:235px;top:50%;transform:translateY(-50%);height:64px;width:300px}
.social-bar img{max-height:100%;max-width:100%;border:0}
.nav-links{position:absolute;right:15px;top:50%;transform:translateY(-50%);display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end;max-width:400px}
.nav-links a{font-size:1.2em;white-space:nowrap;text-decoration:none}
.nav-menu{display:none;position:absolute;right:15px;top:100%;background:#fff;border:1px solid var(--primary-color);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:10}
.nav-menu a{display:block;padding:10px 16px;text-decoration:none}
.nav-menu.active{display:block}
.menu-toggle{display:none;font-size:1.2em;background:none;border:1px solid transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);padding:6px 10px;border-radius:8px}

@media (max-width:768px){
  .header{height:auto;padding:15px 0}
  .logo{position:static;margin:0 auto 20px;display:block}
  .social-bar{position:static;margin:0 auto 20px;transform:none}
  .nav-links{display:none}
  .menu-toggle{display:block}
  .nav-menu{right:15px;top:50px;width:220px}
}

/* ========== HERO ========== */
.hero{text-align:center;border:22px solid var(--light-orange);background-color:var(--primary-color);color:#fff;margin:0 auto;max-width:1200px;border-radius:var(--radius-outer);overflow:hidden;padding-bottom:10px}
.hero h1{font-size:2.8em;font-weight:900;margin:0 0 var(--hero-gap) !important}
.hero .subtitle{margin:0 0 var(--hero-gap) !important}
.hero .subtitle h2{font-size:1.8em;font-weight:800;margin:0;line-height:1.15}
.video-container{max-width:800px;margin:0 auto var(--hero-gap) !important;padding:0;text-align:center;position:relative}
.video-player{width:100%;height:0;padding-top:56.25%;margin:0;position:relative}
.video-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.hero .description{font-size:1.25em;margin:var(--hero-gap) auto var(--hero-gap) !important;max-width:800px;line-height:1.45}
.hero-button{display:inline-block;background-color:var(--secondary-color);color:var(--text-color);padding:8px 15px;border:none;font-weight:700;text-decoration:none;transition:background-color .3s ease;border-radius:var(--radius-outer);margin:0 0 var(--hero-gap) !important}
.hero-button:hover{background-color:var(--hover-color)}

@media (max-width:768px){
  .hero{border-width:15px;padding:0}
  .hero h1{font-size:2.2em}
  .hero .subtitle h2{font-size:1.5em}
  .hero .description{font-size:1.05em}
  .video-player{padding-top:75%}
  .hero-button{padding:6px 12px;font-size:.95em}
}

/* ========== PURPOSE / LETTER ========== */
.purpose{background-color:#fff;padding:20px 20px 6px;margin-top:0}

.letter-box{
  position:relative;max-width:1200px;margin:0 auto var(--vr) !important;padding:48px;
  /* CHANGED: was a gradient — now the site Cream */
  background:var(--secondary-color); /* #EBD9C8 */
  /* If you prefer a hard value instead of the variable, use: background:#EBD9C8; */
  border:0;border-radius:var(--radius-outer);box-shadow:0 6px 20px rgba(0,0,0,.12);
  font-family:var(--font-stack);font-style:normal;font-size:1.30em;color:#333;line-height:1.75;text-align:left;overflow:hidden
}
.letter-box::before{
  content:"";position:absolute;inset:12px;border-radius:calc(var(--radius-outer) - 4px);
  box-shadow:0 0 0 2px var(--primary-color) inset,0 0 0 6px #fff inset,0 10px 25px rgba(0,0,0,.08);
  pointer-events:none;z-index:0
}
.letter-box .letter-inner{position:relative;z-index:1;display:grid;grid-template-columns:20% 1fr;gap:18px;align-items:stretch}
.letter-box .letter-portrait{height:100%}
.letter-box .letter-portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:var(--radius-inner)}
.letter-box .letter-content p{margin:0 0 .7em !important}
.letter-box em{display:block;text-align:left;margin-top:8px;font-family:'Great Vibes',cursive,serif;font-style:italic;font-size:2em !important}

@media (max-width:800px){
  .letter-box .letter-inner{grid-template-columns:1fr;align-items:flex-start}
  .letter-box .letter-portrait{height:auto;max-width:260px}
  .letter-box .letter-portrait img{height:auto;object-fit:contain}
}

.purpose h2{font-size:2.2em;text-align:center;margin:0 0 var(--vr)}
.purpose h3{font-size:1.8em;color:var(--accent-color);text-align:center;margin:0 0 var(--vr)}
.purpose-text{text-align:center;padding:var(--vr) 20px 0 !important;background-color:#fff}
.purpose-text h2{font-size:2em;margin-bottom:10px}
.purpose-text p{font-size:1.05em;color:#666;margin-bottom:8px}
.purpose-text .purpose-highlight{font-size:1.22em;font-weight:800;color:#333;line-height:1.65;max-width:950px;margin:0 auto}


/* ========== THRIVE (STACKED CARDS) ========== */
.thrive-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--vr) !important;margin-bottom:var(--vr-split-top) !important
}
@media (max-width:800px){ .thrive-grid{grid-template-columns:1fr} }

/* Scaled card; rounded; soft shadow */
.thrive-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(var(--thrive-inner-gap) * var(--thrive-scale));
  background:#FF914D;color:#1f1f1f;border:none;
  border-radius:calc(var(--radius-outer) * var(--thrive-scale));
  padding:calc(16px * var(--thrive-scale));
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Larger headline/body driven by --thrive-text-scale */
.thrive-card h4{
  margin:0;
  font-size:calc(1.5em * var(--thrive-text-scale));
  line-height:1.2;
}
.thrive-card .copy p{
  margin:0;
  font-size:calc(1.08em * var(--thrive-text-scale));
  line-height:1.5;
}

/* Image */
.thrive-card .thumb{
  width:100%;max-width:calc(460px * var(--thrive-scale));
  border-radius:calc((var(--radius-inner)) * var(--thrive-scale));
  overflow:hidden;background:#ebd9c8;margin:0 auto
}
.thrive-card .thumb img{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit}

/* Alternate card colours by position (2 and 3 in cream) */
.thrive-grid > article:nth-child(2),
.thrive-grid > article:nth-child(3){
  background:#EBD9C8;color:#444
}

/* ========== MEMBERS (SLIDER) ========== */
.members{background-color:#fff;padding:var(--vr-split-bottom) 20px var(--vr-split-bottom) !important;margin-top:0}
.members-header{display:flex;justify-content:center;align-items:center;margin-bottom:var(--vr)}
.members-header h2{font-size:2.2em;margin:0;text-align:center}

.members-slider{position:relative;overflow:hidden;max-width:1200px;margin:0 auto}
.members-slider .slides{display:flex;transition:transform .6s ease;will-change:transform}
.members-slider .slide{min-width:100%;flex:0 0 100%}

.members-item{display:grid;grid-template-columns:30% 70%;align-items:center;gap:12px;padding:10px;border-radius:var(--radius-outer)}
.members-item.orange{background-color:#FF914D;color:#1f1f1f}
.members-item.cream{background-color:#ebd9c8;color:#444}
.members-photoCol{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.members-photoCol img{width:100%;max-width:180px;height:auto;border-radius:50%;display:block}
.members-textCol p{font-size:1.05em;line-height:1.5;margin:0;text-align:left}
.members-textCol blockquote{margin:0;padding:0 15px}
.members-signoff{margin-top:8px;font-weight:800;padding-left:15px}
.members-item .members-photoCol{grid-column:1;grid-row:1}
.members-item .members-textCol{grid-column:2;grid-row:1}
.members-item.alt{grid-template-columns:70% 30%}
.members-item.alt .members-photoCol{grid-column:2;grid-row:1}
.members-item.alt .members-textCol{grid-column:1;grid-row:1}

@media (max-width:800px){
  .members-item{grid-template-columns:1fr}
  .members-item.alt .members-photoCol{display:none}
  .members-textCol p{text-align:justify}
}

.slider-controls{position:absolute;inset:auto 0 8px 0;display:flex;justify-content:space-between;align-items:center;padding:0 6px;pointer-events:none}
.slider-btn{pointer-events:auto;border:none;border-radius:999px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:1.6rem;line-height:1;color:#333;cursor:pointer}
.slider-btn:focus-visible{outline:3px solid var(--accent-color)}
@media (prefers-reduced-motion:reduce){ .members-slider .slides{transition:none} }
.members-button{text-align:center;margin-top:var(--vr)}
.members-join{display:inline-block;background-color:#FF914D;color:#1f1f1f;padding:10px 20px;border:none;font-weight:800;text-decoration:none;border-radius:var(--radius-outer);transition:background-color .3s ease}
.members-join:hover{background-color:#e6823d;color:#111}

/* ========== EXPERIENCE ========== */
.experience{background-color:#fff;padding:20px;margin-top:0}
.experience-header{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:var(--vr)}
.experience-header h2{font-size:2.2em;margin:0 0 10px 0;text-align:center}
.experience-header h3{font-size:1.35em;color:#FF914D;margin:0;text-align:center;width:100%}
.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--vr);margin-bottom:var(--vr)}
.experience-item{padding:15px;border-radius:var(--radius-outer);display:flex;flex-direction:column;justify-content:space-between}
.experience-item.orange{background-color:#FF914D;color:#1f1f1f}
.experience-item.cream{background-color:#ebd9c8;color:#444}
.experience-item h4{font-size:1.4em;margin-bottom:8px;text-align:center}
.experience-item p{font-size:1.05em;line-height:1.5;margin:4px 0}
.experience-item p strong{display:inline;margin-right:4px}
@media (max-width:1024px){.experience-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.experience-grid{grid-template-columns:1fr}}
.experience-button{text-align:center;margin-top:10px}
.experience-join{display:inline-block;background-color:#FF914D;color:#1f1f1f;padding:10px 20px;border:none;font-weight:800;text-decoration:none;border-radius:var(--radius-outer);transition:background-color .3s ease}
.experience-join:hover{background-color:#e6823d;color:#111}

/* ========== SUCCESS PACK ========== */
.success-pack,
.success-pack h2,
.success-pack > p,
.success-pack p:last-of-type{ text-align:center }

.success-pack ul{list-style:none;padding-left:0}
.success-pack li{
  position:relative;display:block;width:50%;
  margin:var(--vr) auto;padding:18px 20px;
  background:#EBD9C8;border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-outer);overflow:hidden;color:#1f1f1f;line-height:1.5
}
.success-pack li strong{display:block;font-size:1.15em;font-weight:900;margin-bottom:4px}
@media (max-width:1200px){ .success-pack li{width:60%} }
@media (max-width:1000px){ .success-pack li{width:70%} }
@media (max-width:700px){  .success-pack li{width:90%} }
@media (max-width:520px){  .success-pack li{width:100%} }

/* Alternate specific items to orange */
.success-pack li:nth-child(1),
.success-pack li:nth-child(3),
.success-pack li:nth-child(5){
  background:#FF914D !important;color:#1f1f1f;border-color:rgba(0,0,0,.06)
}

/* Headings / copy sizes in Success Pack */
.success-pack h2{font-size:2.2em !important;font-weight:900 !important}
.success-pack > p:first-of-type{font-size:1.35em !important;font-weight:800 !important}
.success-pack p:last-of-type{font-size:1.35em !important;font-weight:900 !important}

/* Tight Success Pack → FAQ gap (variable) */
.success-pack p:last-of-type{margin-bottom:0 !important}
.container > .success-pack{margin-bottom:0 !important}
.container > .faq{margin-top:var(--success-to-faq-gap) !important}

/* ========== FAQ (2×4 grid) ========== */
.faq{padding:40px 0}
.faq h2{font-size:2.8em !important;text-align:center;margin:20px 0 !important}
.faq-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--vr) !important;max-width:1200px;margin:0 auto;align-items:start;
  padding:0 var(--faq-gutter) !important
}
.faq-item{
  margin:0;background:var(--secondary-color);
  border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-outer);padding:12px;overflow:hidden
}
.faq h3{margin:0}
.faq-q{
  all:unset;display:block;width:100%;text-align:center;cursor:pointer;
  font-weight:900;color:#1f1f1f;background:var(--primary-color);
  padding:12px 16px;border-radius:var(--radius-outer);box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:background-color .2s ease,box-shadow .15s ease,transform .15s ease;
  box-sizing:border-box
}
.faq-q:hover,.faq-q:focus-visible{
  background:#FFAE79;box-shadow:0 4px 10px rgba(0,0,0,.18);transform:translateY(-1px);
  outline:3px solid transparent
}
.faq-a{margin-top:8px;color:#333;font-weight:800;font-size:1.08em}
@media (max-width:700px){ .faq-grid{grid-template-columns:1fr} }

/* ========== FINAL CTA / FOOTER / SKIP LINK ========== */
.final-cta{background-color:var(--primary-color);color:var(--bg-color);padding:40px 20px;text-align:center;border-radius:var(--radius-outer);max-width:1200px;margin:20px auto}
.cta-button{display:inline-block;background-color:var(--secondary-color);color:var(--text-color);padding:12px 20px;border-radius:var(--radius-outer);font-weight:800;text-decoration:none}
.cta-button:hover{background-color:var(--hover-color)}

.site-footer{max-width:1200px;margin:18px auto 28px;padding:10px 20px;text-align:center;color:#666;font-size:.95em}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;background:#000;color:#fff;padding:8px 10px;border-radius:8px;z-index:1000}

/* =========================================================
   VARIABLES (TUNE HERE)
   ======================================================= */
:root{
  /* Global vertical rhythm */
  --vr: 22px;

  /* Split margins/padding for boundaries where both sides contribute */
  --vr-split-top: 12px;
  --vr-split-bottom: calc(var(--vr) - var(--vr-split-top));

  /* Corner radii */
  --radius-outer: 18px;   /* cards / buttons / hero / faq */
  --radius-inner: 12px;   /* inner media like images */

  /* Hero spacing */
  --hero-gap: 24px;

  /* Thrive sizing */
  --thrive-scale: .8;        /* 1 = original size; .8 ≈ 20% smaller overall */
  --thrive-inner-gap: 16px;  /* gap between headline, image, text */
  --thrive-text-scale: 1.2;  /* bump headline/body text size in Thrive cards */

  /* FAQ gutters so cream border is even on both sides */
  --faq-gutter: 12px;

  /* Success Pack → FAQ visible gap */
  --success-to-faq-gap: -10px;
}