:root{
  --bg: #faf6f2;
  --bg-alt: #ffffff;

  --accent: #d3a77b;
  --accent-2: #c38a5a;
  --accent-soft: rgba(211,167,123,0.12);

  --text-main: #222222;
  --text-muted: #666666;

  --border-soft: #eee3d8;

  --shadow-soft: 0 18px 45px rgba(0,0,0,0.06);
  --shadow-tight: 0 10px 28px rgba(0,0,0,0.045);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --container: 1120px;

  --header-h: 68px;
  --strip-h: 44px;
}

/* ============= RESET ============= */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text-main);
  line-height: 1.6;
  background: radial-gradient(circle at top left, #fdf4ec 0, #faf6f2 38%, #f7f0ea 100%);
}

img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; }

/* Better anchor offsets with sticky header + strip */
section[id]{
  scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 18px);
}

/* ============= LAYOUT ============= */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section{
  padding: 84px 0;
}

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,246,242,0.9));
}

/* ============= TYPE ============= */
.eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 8px;
}

h1,h2,h3{
  font-family: "Playfair Display", serif;
  letter-spacing: 0.01em;
  margin: 0;
}

p{ margin: 0; }

.section-header{
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 18px;
}

.section-header h2{
  font-size: clamp(1.65rem, 2.2vw, 2.05rem);
  margin: 2px 0 10px;
}

.section-intro{
  color: var(--text-muted);
  max-width: 760px;
}

.section-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 92px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(211,167,123,0.95), rgba(211,167,123,0));
}

/* ============= TOP STRIP ============= */
.top-strip{
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(238,227,216,0.75);
}

.top-strip-inner{
  min-height: var(--strip-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
}

.top-strip-inner p{
  margin: 0;
  color: rgba(34,34,34,0.78);
  font-size: 0.92rem;
}

.top-strip-link{
  text-decoration:none;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(195,138,90,0.38);
  background: rgba(211,167,123,0.12);
  color: #3b2716;
}
.top-strip-link:hover{ background: rgba(211,167,123,0.18); }

/* ============= HEADER / NAV ============= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(250,246,242,0.88);
  border-bottom: 1px solid rgba(238,227,216,0.75);
}

.nav-container{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  min-width: 240px;
}

.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7e4cf, #d3a77b);
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #3e2a18;
  transition: transform 0.15s ease;
}
.brand:hover .brand-mark{ transform: translateY(-1px); }

.brand-text-wrap{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
}
.brand-text{ font-size: 1.18rem; }
.brand-tagline{
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.88;
}

.nav{ display:flex; align-items:center; gap: 12px; position: relative; }

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.nav-links a{
  text-decoration:none;
  font-size: 0.95rem;
  color: var(--text-main);
  position: relative;
  padding: 4px 0;
  opacity: 0.96;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background: var(--accent);
  transition: width 0.2s ease-out;
}
.nav-links a:hover::after{ width:100%; }

/* CTA contrast fix */
.nav-cta{
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(211,167,123,0.16);
  border: 1px solid rgba(195,138,90,0.42);
  color: #3b2716;
  font-weight: 700;
}
.nav-cta:hover{
  background: rgba(211,167,123,0.22);
}

/* Hamburger */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(238, 227, 216, 0.9);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--text-main);
  border-radius: 999px;
  opacity: 0.9;
}
.nav-toggle span + span{ margin-top: 5px; }

/* ============= HERO ============= */
.hero{
  padding: 54px 0 70px;
}

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start; /* IMPORTANT: keeps the card from causing weird vertical centering gaps */
}

.hero-text h1{
  font-size: clamp(2.15rem, 3.2vw, 3.05rem);
  line-height: 1.12;
  margin: 0 0 14px;
}

.hero-text h1 span{
  background: linear-gradient(120deg, #c9976a, #e3b88b);
  -webkit-background-clip:text;
  color: transparent;
}

.hero-subtitle{
  margin: 0 0 18px;
  color: var(--text-muted);
  max-width: 640px;
  font-size: 1.02rem;
}

/* HERO ACTIONS: desktop side-by-side, not full-width bars */
.hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}
.hero-actions .btn{
  flex: 0 1 auto;
  width: auto;
  min-width: 260px;
  max-width: 360px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.95rem;
  text-decoration:none;
  cursor:pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  user-select:none;
}

.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow: var(--shadow-soft);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.12);
}

.btn.ghost{
  background: rgba(255,255,255,0.82);
  color: #2a2a2a;
  border-color: rgba(211,167,123,0.5);
}
.btn.ghost:hover{ background: rgba(211,167,123,0.08); }

.btn-stacked{
  flex-direction:column;
  gap: 2px;
  padding: 12px 18px;
  line-height: 1.1;
  text-align:center;
}
.btn-title{ font-weight: 800; font-size: 0.95rem; }
.btn-subtitle{ font-size: 0.78rem; opacity: 0.92; }

/* Status */
.status-banner{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
}
.status-text{
  margin: 0;
  font-size: 0.92rem;
  color: rgba(34,34,34,0.9);
}

/* Tags */
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 14px;
}
.hero-tags span{
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.74);
  border: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: rgba(34,34,34,0.9);
}

/* Hero card */
.hero-card{
  background: rgba(255,255,255,0.93);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 18px;
  align-self: start; /* keeps it snug to the top */
}

.hero-avatar{
  display:flex;
  justify-content:center;
  margin: 24px auto 20px
}

.avatar-img{
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: var(--shadow-tight);
  background: #fff;
}
.avatar-frame {
  padding: 10px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(211,167,123,0.25),
    rgba(255,255,255,0.9)
  );
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  display: inline-block;
}
.photo-caption {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}
.avatar-img.square {
  border-radius: 18px;
}
.photo-panel {
  background: rgba(255,255,255,0.7);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
.hero-highlight{
  text-align:center;
  margin-bottom: 12px;
}
.highlight-label{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.highlight-main{
  margin: 0;
  font-size: 0.98rem;
}

/* Notice box */
.notice-box{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.notice-title{ margin: 0 0 6px 0; font-weight: 700; }
.notice-text{ margin: 0; opacity: 0.88; }

/* Clarity / Calm / Scale (clean spacing + separators) */
.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(250,245,239,0.92);
  border: 1px solid rgba(238,227,216,0.9);
}
.hero-stats > div{
  padding: 12px 14px;
  text-align: left;
}
.hero-stats > div:not(:last-child){
  border-right: 1px solid rgba(238,227,216,0.9);
}
.stat-number{
  margin: 0 0 3px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--accent-2);
}
.stat-label{
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ============= CARDS (generic) ============= */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.card{
  position: relative;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, rgba(211,167,123,0.9), rgba(211,167,123,0.15));
}
.card-tag{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.card h3{
  margin: 0 0 10px;
  font-size: 1.12rem;
}
.card p{ margin: 0 0 10px; color: rgba(34,34,34,0.92); }

.card-links{ margin-top: 6px; }
.text-link{
  font-size: 0.92rem;
  color: var(--accent-2);
  text-decoration:none;
}
.text-link:hover{ text-decoration: underline; }

/* Lists */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  color: var(--text-muted);
}
.checklist li{
  position:relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.96rem;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-size: 0.85rem;
  color: var(--accent-2);
}

/* Regular ULs (for About sections that use <ul>) */
.section ul:not(.checklist):not(.nav-links){
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(34,34,34,0.92);
}
.section ul:not(.checklist):not(.nav-links) li{
  margin: 8px 0;
}
.section ul:not(.checklist):not(.nav-links) li::marker{
  color: var(--accent-2);
}

/* ============= CONTACT / FOOTER ============= */
.contact-card{
  background: rgba(255,255,255,0.94);
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.contact-label{
  margin: 0 0 8px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-email a{
  font-size: 1.08rem;
  text-decoration:none;
  color: var(--text-main);
}
.contact-email a:hover{ color: var(--accent-2); }

.contact-note{
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.site-footer{
  padding: 26px 0 34px;
  border-top: 1px solid rgba(238,227,216,0.8);
  background: rgba(255,255,255,0.85);
}
.footer-inner{
  text-align:center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1100px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    display:none;
    position:absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(92vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(238, 227, 216, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    z-index: 60;
  }
  .nav-links.open{ display:flex; }

  .nav-links a{
    display:flex;
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    font-size: 0.98rem;
  }
  .nav-links a::after{ display:none; }
  .nav-links a:hover{ background: rgba(211, 167, 123, 0.10); }

  .nav-links .nav-cta{
    justify-content: center;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d3a77b, #c38a5a);
    border: 1px solid rgba(195, 138, 90, 0.35);
    color: #fff;
    font-weight: 800;
  }

  .nav-container{
    height: auto;
    padding: 12px 0;
  }

  .top-strip-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .hero{
    padding: 34px 0 54px;
  }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn{
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .hero-stats{
    grid-template-columns: 1fr;
  }
  .hero-stats > div:not(:last-child){
    border-right: none;
    border-bottom: 1px solid rgba(238,227,216,0.9);
  }
}

@media (max-width: 720px){
  .cards-grid{ grid-template-columns: 1fr; }
}
.trust-line{
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 520px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
.season-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 18px;
}

.season-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow-tight);
}

.season-card h3{
  margin:0 0 6px;
  font-size:1.05rem;
}

.season-match{
  margin-top:8px;
  font-weight:600;
  color:var(--accent-2);
}

@media(max-width:900px){
  .season-grid{ grid-template-columns:1fr; }
}
/* ============= PROFILE CARD (SERVICES PAGE) ============= */

.profile-card{
  background: rgba(255,255,255,0.96);
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 26px;
  text-align: center;
}

/* Photo */
.profile-photo{
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}

.profile-photo img{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--shadow-tight);
  background: #fff;
}

/* Name */
.profile-name{
  margin: 6px 0 2px;
  font-weight: 700;
  font-size: 1.05rem;
}

.profile-title{
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Expectation section */
.expect-label{
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.expect-text{
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: rgba(34,34,34,0.9);
}

/* Tags */
.expect-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px;
}

.expect-tags span{
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(211,167,123,0.12);
  border: 1px solid rgba(211,167,123,0.32);
  font-size: 0.78rem;
  font-weight: 600;
  color: #3b2716;
}

/* Mobile */
@media (max-width: 860px){
  .profile-card{
    margin-top: 24px;
  }
}
.pricing-card.featured{
  transform: translateY(-6px);
  border:2px solid var(--accent);
  box-shadow:0 28px 60px rgba(0,0,0,0.12);
  position:relative;
}

.pricing-card.featured::before{
  content:"Most Popular";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-size:0.7rem;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:0.08em;
}
.reassure-box{
  max-width:720px;
  margin:0 auto;
  background:#fff;
  border-radius:22px;
  padding:26px;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
}

.reassure-note{
  margin-top:12px;
  font-size:0.9rem;
  color:var(--text-muted);
}
.cta-box{
  text-align:center;
  max-width:620px;
  margin:0 auto;
  background:linear-gradient(180deg,#fff,#faf6f2);
  padding:36px 26px;
  border-radius:26px;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
}

.cta-sub{
  margin-top:10px;
  font-size:0.82rem;
  color:var(--text-muted);
}
/* =========================
   FINISHING: Reassurance + Final CTA sections
   Paste at the bottom of styles.css
   ========================= */

/* Give these sections a soft identity */
.reassurance,
.final-cta{
  position: relative;
  padding: 92px 0; /* a little more intentional breathing room */
}

@media (max-width: 900px){
  .reassurance,
  .final-cta{ padding: 68px 0; }
}

/* Subtle section glow + faint gradient band so cards don't float */
.reassurance::before,
.final-cta::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 22px;
  bottom: 22px;
  background:
    radial-gradient(circle at 18% 10%, rgba(211,167,123,0.14), transparent 55%),
    radial-gradient(circle at 82% 70%, rgba(211,167,123,0.10), transparent 55%);
  pointer-events:none;
  z-index: 0;
}

/* Ensure content sits above background */
.reassurance .container,
.final-cta .container{
  position: relative;
  z-index: 1;
}

/* ---------- Reassurance card: more "complete" ---------- */
.reassure-box{
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 30px 30px 26px;
  border: 1px solid rgba(238,227,216,0.95);
  box-shadow: 0 22px 60px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

/* Add a top accent strip for polish */
.reassure-box::before{
  content:"";
  position:absolute;
  /* since .reassure-box isn't positioned, set it */
}

.reassure-box{
  position: relative;
}

.reassure-box::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, rgba(211,167,123,0.95), rgba(211,167,123,0.10));
}

/* Header styling */
.reassure-box h3{
  margin: 6px 0 14px;
  font-size: 1.35rem;
  line-height: 1.2;
}

/* Small, classy sub-divider */
.reassure-box h3::after{
  content:"";
  display:block;
  width: 92px;
  height: 2px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(211,167,123,0.85), rgba(211,167,123,0));
}

/* Make checklist feel premium (not default bullets) */
.reassure-box .checklist{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

@media (max-width: 780px){
  .reassure-box .checklist{ grid-template-columns: 1fr; }
}

.reassure-box .checklist li{
  margin: 0;
  padding-left: 30px;
  font-size: 0.98rem;
  color: rgba(34,34,34,0.92);
}

.reassure-box .checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top: 0.05rem;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

/* Make the note read like a confident close */
.reassure-note{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(238,227,216,0.9);
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------- Final CTA: make it feel like the end of the story ---------- */
.cta-box{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,246,242,0.92));
  padding: 42px 34px 34px;
  border-radius: 28px;
  border: 1px solid rgba(238,227,216,0.95);
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}

/* Soft corner glow for "luxury" vibe */
.cta-box::after{
  content:"";
  position:absolute;
  inset: -60px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(211,167,123,0.18), transparent 65%);
  transform: rotate(12deg);
  pointer-events:none;
}

/* Optional: a tiny eyebrow label (if you want, see HTML tweak below) */
.cta-eyebrow{
  display:inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}

.cta-box h2{
  font-size: clamp(1.85rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.cta-box p{
  margin: 0 auto;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

/* CTA button spacing */
.cta-box .btn{
  margin-top: 18px;
  min-width: 260px;
}

/* Bottom microcopy */
.cta-sub{
  margin-top: 14px;
  font-size: 0.84rem;
  color: rgba(102,102,102,0.92);
}

/* Mobile tightening */
@media (max-width: 700px){
  .reassure-box{ padding: 26px 18px 20px; border-radius: 22px; }
  .cta-box{ padding: 34px 18px 26px; border-radius: 24px; }
  .cta-box .btn{ width: 100%; min-width: 0; }
}
/* ===== Reassurance + Final CTA (tuned to your HTML) ===== */

.reassurance,
.final-cta{
  position: relative;
}

.reassurance .container,
.final-cta .container{
  position: relative;
  z-index: 1;
}

/* Reassurance card */
.reassure-box{
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 30px 30px 26px;
  border: 1px solid rgba(238,227,216,0.95);
  box-shadow: 0 22px 60px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.reassure-box::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, rgba(211,167,123,0.95), rgba(211,167,123,0.10));
}

.reassure-box h3{
  margin: 6px 0 14px;
  font-size: 1.35rem;
  line-height: 1.2;
}

.reassure-box h3::after{
  content:"";
  display:block;
  width: 92px;
  height: 2px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(211,167,123,0.85), rgba(211,167,123,0));
}

/* Make THIS checklist look premium (only inside reassure box) */
.reassure-box .checklist{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

@media (max-width: 780px){
  .reassure-box .checklist{ grid-template-columns: 1fr; }
}

.reassure-box .checklist li{
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 0.98rem;
  color: rgba(34,34,34,0.92);
}

.reassure-box .checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top: 0.12rem;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

.reassure-note{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(238,227,216,0.9);
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Final CTA card */
.cta-box{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,246,242,0.92));
  padding: 42px 34px 34px;
  border-radius: 28px;
  border: 1px solid rgba(238,227,216,0.95);
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}

.cta-box::after{
  content:"";
  position:absolute;
  inset: -60px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(211,167,123,0.18), transparent 65%);
  transform: rotate(12deg);
  pointer-events:none;
}

.cta-eyebrow{
  display:inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}

.cta-box h2{
  font-size: clamp(1.85rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.cta-box p{
  margin: 0 auto;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.cta-box .btn{
  margin-top: 18px;
  min-width: 260px;
}

.cta-sub{
  margin-top: 14px;
  font-size: 0.84rem;
  color: rgba(102,102,102,0.92);
}

/* Mobile tightening */
@media (max-width: 700px){
  .reassure-box{ padding: 26px 18px 20px; border-radius: 22px; }
  .cta-box{ padding: 34px 18px 26px; border-radius: 24px; }
  .cta-box .btn{ width: 100%; min-width: 0; }
}
/* =========================================================
   FIX: #free (Free Kit) + #about (Meet Studio Enjoli)
   Drop-in styles that match your existing aesthetic
   ========================================================= */

/* Give these sections a consistent rhythm */
#free.section,
#about.section{
  padding-top: 84px;
  padding-bottom: 84px;
}

/* --- FREE KIT: make it feel like an offer block + form card --- */
#free .container{
  max-width: 980px; /* tighter = more “offer page” feeling */
}

#free h2,
#free h3{
  margin: 0 0 10px;
}

#free p{
  color: var(--text-muted);
}

/* Turn the Free Kit content into a “card” automatically */
#free{
  position: relative;
}

#free::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 42px;
  width: min(1120px, calc(100% - 40px));
  height: calc(100% - 84px);
  border-radius: 28px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(238,227,216,0.75);
  box-shadow: 0 22px 60px rgba(0,0,0,0.06);
  pointer-events:none;
}

#free .container{
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

/* Improve checklist spacing just in Free Kit */
#free .checklist{
  margin-top: 14px;
  margin-bottom: 18px;
  color: rgba(34,34,34,0.92);
}

/* Make the opt-in line look intentional */
#free form{
  margin-top: 12px;
}

/* If your form is simple inline inputs, this will style it */
#free input[type="text"],
#free input[type="email"]{
  width: 220px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(238,227,216,0.95);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
  outline: none;
}

#free input[type="text"]:focus,
#free input[type="email"]:focus{
  border-color: rgba(195,138,90,0.55);
  box-shadow: 0 16px 34px rgba(195,138,90,0.12);
}

/* Align label + fields nicely even if your HTML is basic */
#free label{
  font-size: 0.92rem;
  color: rgba(34,34,34,0.92);
  margin-right: 8px;
}

/* Make the submit button match your primary button style */
#free button,
#free input[type="submit"]{
  appearance: none;
  border: 1px solid rgba(195, 138, 90, 0.35);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}

#free button:hover,
#free input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.12);
}

/* Nicer “no spam” line */
#free .fine-print,
#free small{
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- ABOUT: convert the two lists into a clean 2-column grid --- */
#about .container{
  max-width: 980px;
}

#about h2{
  margin: 0 0 10px;
}

#about p{
  margin-top: 6px;
  color: var(--text-muted);
  max-width: 760px;
}

/* If your about section uses headings like “What we value” */
#about h3{
  margin-top: 26px;
  margin-bottom: 10px;
  font-size: 1.08rem;
}

/* Style About like a card, similar to other sections */
#about{
  position: relative;
}

#about::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 42px;
  width: min(1120px, calc(100% - 40px));
  height: calc(100% - 84px);
  border-radius: 28px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(238,227,216,0.70);
  box-shadow: 0 22px 60px rgba(0,0,0,0.05);
  pointer-events:none;
}

#about .container{
  position: relative;
  z-index: 1;
}

/* Turn the two ULs into “columns” when there are multiple lists */
#about ul{
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
}

#about ul li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  color: rgba(34,34,34,0.92);
}

#about ul li::before{
  content:"✓";
  position:absolute;
  left:0;
  top: 0.12rem;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

/* Create a 2-column layout for the two “blocks” of About content */
#about .about-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
}

/* If you don’t have .about-split in HTML, we still help:
   This targets consecutive h3 + ul pairs and lays them out. */
#about{
  --about-gap: 22px;
}

#about .container{
  display: block;
}

/* Mobile polish */
@media (max-width: 860px){
  #free::before,
  #about::before{
    top: 26px;
    height: calc(100% - 52px);
    border-radius: 24px;
  }

  #free input[type="text"],
  #free input[type="email"]{
    width: 100%;
  }

  /* If your form is inline, this forces it to stack cleanly */
  #free form{
    display: grid;
    gap: 10px;
    max-width: 520px;
  }

  #free button,
  #free input[type="submit"]{
    width: 100%;
  }
}
/* =========================================================
   Studio Enjoli — Clean styles.css (single, non-duplicated)
   Feminine + tech-forward + mobile optimized
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #faf6f2;
  --bg-alt: #ffffff;

  --accent: #d3a77b;
  --accent-2: #c38a5a;
  --accent-soft: rgba(211,167,123,0.12);

  --text-main: #222222;
  --text-muted: #666666;

  --border-soft: #eee3d8;

  --shadow-soft: 0 18px 45px rgba(0,0,0,0.06);
  --shadow-tight: 0 10px 28px rgba(0,0,0,0.045);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --container-width: 1120px;

  --header-h: 68px;
  --strip-h: 46px;

  --focus: rgba(195,138,90,0.35);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text-main);
  line-height: 1.6;
  background: radial-gradient(circle at top left, #fdf4ec 0, #faf6f2 38%, #f7f0ea 100%);
}

img{ max-width: 100%; display: block; height: auto; }

a{ color: inherit; }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Layout ---------- */
.container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section{
  padding: 84px 0;
  scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 18px);
}

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,246,242,0.9));
}

@media (max-width: 900px){
  .section{ padding: 64px 0; }
}

/* ---------- Typography ---------- */
.eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 8px;
}

h1,h2,h3{
  font-family: "Playfair Display", serif;
  letter-spacing: 0.01em;
  margin: 0;
}

p{ margin: 0; }

.section-header{
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 18px;
}

.section-header h2{
  font-size: clamp(1.65rem, 2.2vw, 2.05rem);
  margin: 2px 0 10px;
}

.section-intro{
  color: var(--text-muted);
  max-width: 760px;
}

.section-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 92px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(211,167,123,0.95), rgba(211,167,123,0));
}

/* ---------- Header (Top strip + Nav) ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(250,246,242,0.88);
  border-bottom: 1px solid rgba(238,227,216,0.75);
}

/* Top strip (inside header in your HTML) */
.top-strip{
  border-top: 1px solid rgba(238,227,216,0.6);
  background: rgba(255,255,255,0.58);
}

.top-strip-inner{
  min-height: var(--strip-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}

.top-strip-inner p{
  font-size: 0.92rem;
  color: rgba(34,34,34,0.90);
  margin: 0;
}

.top-strip-link{
  text-decoration:none;
  font-weight: 700;
  color: #3b2716;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(195,138,90,0.38);
  background: rgba(211,167,123,0.12);
}

.top-strip-link:hover{
  background: rgba(211,167,123,0.18);
}

/* Nav row */
.nav-container{
  min-height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  min-width: 240px;
}

.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7e4cf, #d3a77b);
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #3e2a18;
  transition: transform 0.15s ease;
}

.brand:hover .brand-mark{ transform: translateY(-1px); }

.brand-text-wrap{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
}

.brand-text{ font-size: 1.18rem; }
.brand-tagline{
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.88;
}

.nav{ display:flex; align-items:center; gap: 12px; position: relative; }

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.nav-links a{
  text-decoration:none;
  font-size: 0.95rem;
  color: var(--text-main);
  position: relative;
  padding: 6px 0;
  opacity: 0.98;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background: var(--accent);
  transition: width 0.2s ease-out;
}

.nav-links a:hover::after{ width:100%; }

/* Work With Us pill: readable + consistent */
.nav-cta{
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(211,167,123,0.16);
  border: 1px solid rgba(195,138,90,0.42);
  color: #3b2716;
  font-weight: 700;
}
.nav-cta:hover{ background: rgba(211,167,123,0.22); }

/* Mobile menu button */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(238, 227, 216, 0.9);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  line-height: 0;
}

.nav-toggle span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--text-main);
  border-radius: 999px;
  opacity: 0.9;
}
.nav-toggle span + span{ margin-top: 5px; }

/* Mobile dropdown */
@media (max-width: 860px){
  .brand{ min-width: 0; }
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }

  .nav-links{
    display:none;
    position:absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(92vw, 320px);

    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    padding: 12px;
    border-radius: 18px;

    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(238,227,216,0.9);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    z-index: 60;
  }

  .nav-links.open{
    display:flex;
    animation: navDrop 160ms ease-out;
    transform-origin: top right;
  }

  .nav-links a{
    display:flex;
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    font-size: 0.98rem;
  }

  .nav-links a::after{ display:none; }
  .nav-links a:hover{ background: rgba(211,167,123,0.10); }

  .nav-links .nav-cta{
    justify-content:center;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: 1px solid rgba(195,138,90,0.35);
    color: #fff;
    font-weight: 700;
  }
}

@keyframes navDrop{
  from{ opacity: 0; transform: translateY(-6px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.95rem;
  text-decoration:none;
  cursor:pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  user-select:none;
}

.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow: var(--shadow-soft);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.12);
}

.btn.ghost{
  background: rgba(255,255,255,0.86);
  color: #2a2a2a;
  border-color: rgba(211,167,123,0.55);
}
.btn.ghost:hover{ background: rgba(211,167,123,0.08); }

.btn-stacked{
  flex-direction:column;
  gap: 2px;
  padding: 12px 18px;
  line-height: 1.1;
  text-align:center;
}
.btn-title{ font-weight: 800; font-size: 0.95rem; }
.btn-subtitle{ font-size: 0.78rem; opacity: 0.92; }

/* ---------- Hero ---------- */
.hero{ padding: 52px 0 64px; }

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items:center;
}

.hero-text h1{
  font-size: clamp(2.2rem, 3.3vw, 3.05rem);
  line-height: 1.12;
  margin: 0 0 14px;
}

.hero-text h1 span{
  background: linear-gradient(120deg, #c9976a, #e3b88b);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero-subtitle{
  margin: 0 0 18px;
  color: var(--text-muted);
  max-width: 640px;
  font-size: 1.02rem;
}

/* keep hero CTAs side-by-side on desktop */
.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.hero-actions .btn{ flex: 0 0 auto; }

/* status */
.status-banner{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
}
.status-text{
  font-size: 0.92rem;
  color: rgba(34,34,34,0.90);
}

/* tags */
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 14px;
}
.hero-tags span{
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: rgba(34,34,34,0.92);
}

/* hero card */
.hero-card{
  background: rgba(255,255,255,0.93);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 18px;
}

.hero-avatar{
  display:flex;
  justify-content:center;
  margin-bottom: 16px;
}

.avatar-img{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.12),
    0 0 0 6px rgba(255,255,255,0.7);
}

.hero-highlight{
  text-align:center;
  margin-bottom: 12px;
}
.highlight-label{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.highlight-main{ font-size: 0.98rem; }

/* "Best for you if" box */
.notice-box{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.notice-title{ margin: 0 0 6px 0; font-weight: 800; }
.notice-text{ margin: 0; opacity: 0.88; color: var(--text-muted); }

/* Clarity / Calm / Scale: tighter, prettier, not “unfinished” */
.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(250,245,239,0.92);
  border: 1px solid rgba(238,227,216,0.9);
  overflow:hidden;
}

.hero-stats > div{
  padding: 12px 14px;
  text-align:left;
}

.hero-stats > div:not(:last-child){
  border-right: 1px solid rgba(238,227,216,0.9);
}

.stat-number{
  margin: 0 0 3px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--accent-2);
}

.stat-label{
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ---------- Card Grids (Services / Results / etc.) ---------- */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

@media (max-width: 1100px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.card{
  position: relative;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, rgba(211,167,123,0.9), rgba(211,167,123,0.15));
}

.card-tag{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.card h3{
  margin: 0 0 10px;
  font-size: 1.12rem;
}

.card p{ margin: 0 0 10px; color: rgba(34,34,34,0.92); }

.card-list{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.card-list li{
  position:relative;
  padding-left: 14px;
  margin-bottom: 6px;
}

.card-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color: var(--accent-2);
}

.card-links{ margin-top: 6px; }

.text-link{
  font-size: 0.92rem;
  color: var(--accent-2);
  text-decoration:none;
}
.text-link:hover{ text-decoration: underline; }

/* ---------- Process Section (brings back the “before” tiles) ---------- */
/* If your HTML uses .cards-grid with .card inside #process, this will already work.
   If your process items are plain headings, this block upgrades them too. */

#process .process-grid,
#process .steps-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

@media (max-width: 900px){
  #process .process-grid,
  #process .steps-grid{
    grid-template-columns: 1fr;
  }
}

/* Suggested structure:
   <div class="process-grid">
     <div class="step-card"><div class="step-top"><span class="step-pill">01</span><h3>Diagnose</h3></div>...</div>
   </div>
*/
.step-card{
  background: rgba(255,255,255,0.94);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
}

.step-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.step-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  background: rgba(211,167,123,0.14);
  border: 1px solid rgba(211,167,123,0.35);
  flex: 0 0 auto;
}

.step-card h3{
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.step-card p{
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Fallback: if process is currently plain “01 Diagnose” headings + paragraphs */
#process h3{
  margin-top: 16px;
}
#process h3:first-of-type{ margin-top: 0; }

/* ---------- About / Lists ---------- */
.about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  margin-top: 18px;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
}

.about-block{
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-tight);
}

.about-block h3{
  margin: 0 0 10px;
  font-size: 1.08rem;
}

/* checklist */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  color: var(--text-muted);
}

.checklist li{
  position:relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.96rem;
}

.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-size: 0.85rem;
  color: var(--accent-2);
}

/* general UL styling (keeps your About bullets nice) */
.section ul:not(.checklist):not(.nav-links){
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(34,34,34,0.92);
}
.section ul:not(.checklist):not(.nav-links) li{
  margin: 8px 0;
}
.section ul:not(.checklist):not(.nav-links) li::marker{
  color: var(--accent-2);
}

/* ---------- Free Kit / Opt-in Form (fix “unstyled” look) ---------- */
#free form,
.optin-form{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

label{
  font-weight: 700;
  font-size: 0.92rem;
}

input[type="text"],
input[type="email"]{
  appearance: none;
  width: 240px;
  max-width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(238,227,216,0.95);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
  font: inherit;
}

input::placeholder{ color: rgba(102,102,102,0.7); }

#free .btn,
.optin-form .btn{
  padding: 12px 18px;
}

/* Make #free look like a “block” instead of plain text */
#free .container{
  position: relative;
}
#free .optin-card,
#free .free-kit-card{
  margin-top: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
}

/* ---------- Reassurance + Final CTA (finish those “unfinished” sections) ---------- */
.reassure-box{
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 18px;
}

.reassure-box h3{
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.reassure-note{
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.final-cta{
  padding: 90px 0;
}

.cta-box{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-soft);
  border-radius: 26px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.08);
  padding: 34px 22px 26px;
  position: relative;
  overflow: hidden;
}

/* subtle glow stripe */
.cta-box::before{
  content:"";
  position:absolute;
  inset: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(211,167,123,0.85), rgba(211,167,123,0.08));
}

.cta-box h2{
  font-size: clamp(1.8rem, 2.3vw, 2.15rem);
  margin: 6px 0 10px;
}

.cta-box p{
  color: var(--text-muted);
  margin: 0 0 16px;
}

.cta-sub{
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- Contact ---------- */
.contact-card{
  background: rgba(255,255,255,0.94);
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.contact-label{
  margin: 0 0 8px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-email a{
  font-size: 1.08rem;
  text-decoration:none;
  color: var(--text-main);
}
.contact-email a:hover{ color: var(--accent-2); }

.contact-note{
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
.site-footer{
  padding: 26px 0 34px;
  border-top: 1px solid rgba(238,227,216,0.8);
  background: rgba(255,255,255,0.85);
}

.footer-inner{
  text-align:center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Mobile Layout Polish ---------- */
@media (max-width: 900px){
  .top-strip-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero-grid{ grid-template-columns: 1fr; gap: 30px; }
  .hero{ padding: 34px 0 54px; }

  /* Hero CTAs stack on mobile, but keep nice sizing */
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn{
    width: 100%;
  }

  /* Stats stack */
  .hero-stats{
    grid-template-columns: 1fr;
  }
  .hero-stats > div:not(:last-child){
    border-right: none;
    border-bottom: 1px solid rgba(238,227,216,0.9);
  }

  /* Forms stack nicely */
  #free form,
  .optin-form{
    flex-direction: column;
    align-items: stretch;
  }

  input[type="text"],
  input[type="email"]{
    width: 100%;
  }

  .final-cta{ padding: 70px 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
/* =========================
   PROCESS (uses .work-grid + .work-item)
   Polished card tiles + consistent spacing
   ========================= */

#process .section-inner{
  /* keeps the header + cards from feeling cramped */
  padding-top: 6px;
}

#process .work-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
  align-items: stretch;
}

#process .work-item{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(238,227,216,0.95);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* soft top accent line (matches your card style) */
#process .work-item::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, rgba(211,167,123,0.9), rgba(211,167,123,0.12));
}

/* hover: subtle lift (still “calm”) */
#process .work-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 55px rgba(0,0,0,0.08);
  border-color: rgba(211,167,123,0.35);
}

#process .work-item h4{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0 10px;
  font-size: 1rem;
  font-weight: 800;
}

/* make the badge a touch more “designed” */
#process .num-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  background: rgba(211,167,123,0.14);
  border: 1px solid rgba(211,167,123,0.35);
  flex-shrink:0;
}

#process .work-item p{
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Mobile: stack with comfortable spacing */
@media (max-width: 900px){
  #process .work-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #process .work-item{
    padding: 16px 16px 14px;
  }
}
/* =========================
   EDITORIAL MODULE (drop-in)
   ========================= */
.editorial-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
  overflow: hidden;
}

.editorial-media{
  text-align: center;
  padding: 6px 6px 14px;
}

/* Editorial “mat” behind the photo */
.editorial-frame{
  display: inline-block;
  padding: 10px;
  border-radius: 999px; /* keeps circle mat */
  background: linear-gradient(
    135deg,
    rgba(211,167,123,0.22),
    rgba(255,255,255,0.92)
  );
  box-shadow: 0 18px 44px rgba(0,0,0,0.09);
}

/* Bigger, nicer portrait */
.editorial-img{
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: var(--shadow-tight);
}

.editorial-caption{
  margin: 12px 0 0;
  line-height: 1.2;
}

.editorial-name{
  display:block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.editorial-role{
  display:block;
  margin-top: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.editorial-body{
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(238,227,216,0.9);
}

.editorial-eyebrow{
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.editorial-lede{
  margin: 0 0 12px;
  color: rgba(34,34,34,0.9);
  font-size: 0.98rem;
}

/* Pills (clean + even spacing) */
.editorial-pills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 14px;
}

.editorial-pills .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(211,167,123,0.35);
  background: rgba(211,167,123,0.08);
  font-size: 0.85rem;
  color: rgba(34,34,34,0.92);
}

/* Editorial stats row (fixes the “Clarity/Calm/Scale” spacing problem) */
.editorial-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(250,245,239,0.92);
  border: 1px solid rgba(238,227,216,0.9);
}

.editorial-stats .e-stat{
  padding: 12px 12px;
  text-align: left;
}

.editorial-stats .e-stat:not(:last-child){
  border-right: 1px solid rgba(238,227,216,0.9);
}

.e-stat-title{
  margin: 0 0 4px;
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent-2);
}

.e-stat-sub{
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Mobile */
@media (max-width: 900px){
  .editorial-card{ padding: 18px; }
  .editorial-img{
    width: 190px;
  }
  .editorial-stats{
    grid-template-columns: 1fr;
  }
  .editorial-stats .e-stat:not(:last-child){
    border-right: none;
    border-bottom: 1px solid rgba(238,227,216,0.9);
  }
  .editorial-stats .e-stat{
    text-align: left;
  }
}
/* =========================
   HERO CARD: editorial framing (safe + contained)
   ========================= */

/* Keep background blobs INSIDE the card */
.hero-card{
  position: relative;
  overflow: hidden;
}

/* Soft editorial blob behind the photo (subtle, not chaotic) */
.hero-card::before{
  content:"";
  position:absolute;
  right: -90px;
  top: -110px;
  width: 380px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(211,167,123,0.18), rgba(211,167,123,0.0) 70%);
  pointer-events:none;
}

/* Editorial avatar wrapper */
.hero-avatar--editorial{
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1; /* stays above blob */
}

.hero-avatar--editorial .hero-frame{
  display: inline-block;
  padding: 12px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(211,167,123,0.22),
    rgba(255,255,255,0.96)
  );
  box-shadow: 0 18px 44px rgba(0,0,0,0.09);
}

/* Force the image to actually render correctly */
.hero-avatar--editorial .avatar-img{
  display: block;
  width: clamp(170px, 18vw, 230px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: var(--shadow-tight);
}

/* Caption */
.hero-caption{
  margin: 12px 0 0;
  line-height: 1.2;
}

.hero-name{
  display:block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-role{
  display:block;
  margin-top: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mobile: slightly tighter */
@media (max-width: 820px){
  .hero-card::before{
    right: -140px;
    top: -140px;
    width: 340px;
    height: 260px;
  }
}
/* =========================
   GLOBAL: prevent "full-width" images in cards on mobile
   ========================= */
@media (max-width: 820px){
  .hero-card img,
  .editorial-card img,
  .editorial-img,
  .avatar-img{
    width: min(220px, 70vw) !important;
    height: auto !important;
    max-width: 100% !important;
    margin-inline: auto;
  }

  .hero-avatar,
  .editorial-media{
    display: flex;
    justify-content: center;
  }

  /* Prevent any wrapper from stretching */
  .editorial-frame{
    width: auto;
    max-width: 100%;
  }
}
/* =========================
   SERVICES PAGE: mobile optimization
   ========================= */
@media (max-width: 900px){

  /* Give the page more breathing room */
  .section{
    padding: 56px 0;
  }

  /* If your services page has a hero grid, force stacking */
  .hero-grid,
  .services-hero,
  .services-hero-grid,
  .pricing-hero-grid,
  .two-col{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  /* Headline sizing for services hero */
  .hero-text h1,
  .services-hero h1{
    font-size: clamp(2rem, 6.4vw, 2.6rem);
    line-height: 1.12;
  }

  /* Buttons become full width and readable */
  .hero-actions,
  .services-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions .btn,
  .services-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  /* Card spacing feels finished */
  .hero-card,
  .pricing-card,
  .services-card{
    padding: 18px !important;
    border-radius: 20px;
  }

  /* Pills wrap nicely without looking cramped */
  .editorial-pills,
  .hero-tags{
    gap: 8px !important;
  }
  .editorial-pills .pill,
  .hero-tags span{
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  /* Stats row stacks cleanly (if present on services too) */
  .hero-stats,
  .editorial-stats{
    grid-template-columns: 1fr !important;
  }
  .hero-stats > div:not(:last-child),
  .e-stat:not(:last-child){
    border-right: none !important;
    border-bottom: 1px solid rgba(238,227,216,0.9) !important;
  }
}
/* =========================
   SERVICES: grids become stacked cards
   ========================= */
@media (max-width: 900px){
  .cards-grid,
  .work-grid,
  .pricing-grid,
  .season-grid,
  .services-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card,
  .work-item{
    padding: 18px !important;
  }
}