:root{
  --cream:#FAF3E8;
  --cream-lt:#F7EFE4;
  --green:#164436; /* prestige green */
  --green-dk:#0F3B34;
  --gold:#CBA86C;
  --text:#1E1E1E;
  --muted:#6E6A5E;
  --maxw:1400px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
/* divider */





/* Elegant section divider */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.3rem auto;
  color: var(--green); /* your existing green */
  max-width: 240px;   /* keep it compact and centered */
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--green);
}

.divider:not(:empty)::before {
  margin-right: 1em;
}

.divider:not(:empty)::after {
  margin-left: 1em;
}

/* Symbol in the middle */
.divider span {
  font-family: 'Playfair Display', serif; /* keeps it prestigious */
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--green);
}

/* it is to protect german buttons to appear*/
.divider-btn span { color: inherit; }



/* middle button */
.divider-btn {
  background: var(--green);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 6px 18px;
  border-radius: 3px;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  transition: all 0.25s ease;
}

.divider-btn:hover {
  transform:translateY(-3px)
}



/* ....*/





/*=========*/

/* --- Typography rendering polish --- */
html {
  text-rendering: optimizeLegibility;     /* better kerning/ligatures */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

/* Base size/leading tuned for readability (desktop) */
@media (min-width: 900px) {
  body { font-size: 18px; line-height: 1.7; }
}

/* Comfortable reading width for long paragraphs */
.measure { max-width: 72ch; }

/* Lead paragraph for section intros */
.lead {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.75;
  color: var(--text);
}

/* Eyebrow (small, uppercase kicker above headings) */
.eyebrow {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Subheads to break walls of text */
.subhead {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 22px 0 6px;
}

/* Specs line (small caps-like utility) */
.specs-line {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;              /* ✅ center on desktop */
  margin: 0 auto 0px;              /* ✅ tighten spacing above */
}
@media (max-width: 768px) {
  .specs-line {
    margin-top: -20px;       /* remove gap above */
    margin-bottom: 20px;       /* remove gap above */
  }
}


/* Soft highlight (“Dues”, “Limited spots”) */
.note {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: #F8F6F2;
  border: 1px solid #E7E2D7;
  color: var(--text);
}

/* Icon bullets without loading images */
.icon-list { list-style: none; padding-left: 0; }
.icon-list li {
  position: relative;
  padding-left: 34px;
  margin: 12px 0;
}
.icon-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px #E9F0EC; /* subtle halo */
}

/* Slightly larger section headings for hierarchy */
h2 { font-size: clamp(28px, 3.2vw, 36px); }



/*======*/

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
}

/* side background pillars for wide screens */
.page-bg::before,
.page-bg::after{
  content:'';
  position:fixed;
  top:0; bottom:0;
  width:clamp(16px, 6vw, 56px);
  background:var(--green-dk);
  z-index:0;
}
/*.page-bg::before{left:0}
.page-bg::after{right:0}*/

/* AFTER: always render the side pillars */
body::before,
body::after {
  content:'';
  position:fixed;
  top:0; bottom:0;
  width:clamp(16px, 6vw, 56px);
  background:var(--green-dk);
  z-index:0;
}
body::before{ left:0; }
body::after { right:0; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* HEADER */
.site-header{
  background:transparent;
  position:sticky;
  top:0; z-index:10;
  backdrop-filter:saturate(1.1) blur(6px);
}
/*@media (max-width: 768px){.site-header{display: none;}}*/
@media (max-width: 768px){
  .cta-desktop { display: none; }   /* hide big CTA */
  .site-header { display: block; }  /* keep header */
}

.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:14px 24px;
}
.brand{
  font-family:'Playfair Display', serif;
  font-weight:700; letter-spacing:.3px;
  color:var(--green);
  text-decoration:none;
  font-size:1.25rem;
}
.nav{display:none; gap:20px; margin-left:auto}
.nav a{
  color:var(--green); text-decoration:none; font-weight:500;
}
.btn{
  display:inline-block; border:none; cursor:pointer;
  padding:14px 22px; border-radius:999px; font-weight:600;
  text-decoration:none; transition:transform .05s ease, box-shadow .2s ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green); color:#fff}
.cta-desktop{display:none}

.hamburger{margin-left:auto; background:transparent; border:none; cursor:pointer}
.hamburger span{display:block; width:26px; height:2px; background:var(--green); margin:5px 0}

/* HERO */
.hero{padding:12px 0 24px}
.hero-grid{
  display:grid; gap:0;
  grid-template-columns: 1fr;
}
/* remove only the background lines that were here before */
.hero-image{
  /* background-image: url('../assets/images/hero-800x300.webp');
     background-size: cover;
     background-position: center; */
  position: relative;
  min-height: 150px;
  overflow: hidden;
}



.hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.hero-overlay{
  position:absolute; left:24px; bottom:6px;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero-title{
  font-family:'Playfair Display', serif;
  font-weight:700; font-size: clamp(28px, 4.2vw, 48px); margin:0 0 6px 0;
}
.hero-sub{margin:0 0 12px 0; font-size:  clamp(16px, 2.8vw, 22px); font-weight: 500;}
.btn-hero{background:var(--green)}

/* profile on right */
.hero-profile{
  background:var(--cream-lt);
  padding:12px; display:flex; align-items:center; gap:12px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.profile-photo{
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:var(--shadow); display:block; 
}


.hero-profile{ justify-content:center; }

.profile-text h3{
  font-family:'Playfair Display', serif; margin:0 0 4px 0;
}
.muted{color:var(--muted)}

/* SECTIONS */
.section{padding:48px 0}
.cream{background:var(--cream)}
.cream-lt{background:var(--cream-lt)}
.two-col{
  display:grid; gap:32px;
  grid-template-columns: 1fr;
}
h2{
  font-family:'Playfair Display', serif; font-size:clamp(26px, 3vw, 32px); margin:0 0 12px
}
h3.track{font-family:'Playfair Display', serif; margin:18px 0 6px}
.bullet-list{padding-left:20px}
.bullet-list li{margin:6px 0}

.map-box img{
  width:100%; max-width:520px; border-radius:var(--radius); box-shadow:var(--shadow);
}

/* FORM */
.form-wrap{display:grid; gap:24px}
.trial-form{background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow)}
.form-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
.field{display:flex; flex-direction:column; gap:6px}
.field-full{grid-column:1/-1}
label{font-weight:600}
input, select, textarea{
  padding:12px 14px; border:1px solid #E2DED6; border-radius:10px;
  background:#FBF7F0; font:inherit;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); background:#fff}
.hp{display:none} /* honeypot hidden */

/* FIX: prevent form overflow on narrow phones */
.trial-form,
.form-grid,
input, select, textarea,
iframe {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* defensive for odd webviews */
}


/* FOOTER */
.site-footer{padding:28px 0; background:var(--cream)}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer-cta{color:var(--green); text-decoration:none; font-weight:600}

/* DESKTOP */
@media(min-width: 900px){
/* adding bigger picture on desktop */
  .profile-photo{width:200px; height:200px; margin: 0 auto;   /* centers inside its flex column */}
  .hero-image{ min-height: 180px; }
  .nav{display:flex}
  .cta-desktop{display:inline-block}
  .hamburger{display:none}
  .hero-grid{
    grid-template-columns: 9fr 5fr;
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow);
  }
  .hero-profile{border-radius:0}
  .two-col{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns: repeat(2, 1fr)}
}




/* new styles adjust for the profile */

/* Profile layout: mobile = name/affil next to photo; desktop = under photo */
.profile-media{
  display:flex;
  align-items:center;
  gap:14px;
}
.profile-name{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:1.05rem;
}
.profile-affil{ margin-top:2px; }

@media (min-width:900px){
  .profile-media{
    flex-direction:column;       /* stack under the photo on desktop */
    align-items:center;
    text-align:center;
  }
}


section#how-it-works ul li {
  margin-bottom: 0.8em;
  line-height: 1.6;
}



/* Improve mobile text padding */
@media (max-width: 768px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}



/* Footer legal links */
.footer-links a {
  color: var(--text);        /* match normal text color */
  text-decoration: none;     /* remove default underline */
  margin: 0 0.3rem;
}

.footer-links a:hover {
  color: var(--green);       /* subtle green on hover */
  text-decoration: underline; /* elegant underline only on hover */
}







/* Q&A teaser under hero – minimal styles */
.promo-qa{ padding:24px 0; }                      /* tighter than default section */
.promo-qa .q{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(22px, 3.8vw, 32px);
  color:var(--text);                               /* black text */
  margin:0 0 6px;
  text-align: center;
}
.promo-qa .tagline{
  font-weight:700;
  color:var(--green);                              /* colored slogan */
  margin:0 0 10px;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 24px);
}
.promo-qa .copy{
  font-size:0.80rem;                               /* small explanatory text */
  margin:0;
  text-align: center;
}












.why { padding: clamp(32px, 6vw, 72px) 0; }
.why h2 { margin-bottom: 1.25rem; }
.qa-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.qa h3 { font-size: clamp(18px, 2.4vw, 22px); margin: .25rem 0; }
.qa p, .qa li { font-size: clamp(15px, 2vw, 18px); line-height: 1.6; }
.bullets { padding-left: 1.1rem; margin: .5rem 0 0; }
@media (min-width: 680px) {
  .qa-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .qa-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.cta-inline { margin-top: 1rem; }




/* for methodology*/
/* ===========================
   METHODOLOGY (v2)
   =========================== */

/* Vars */
.methodology.v2 { --marker-size: 36px; --rail: 2px; }

/* MOBILE (vertical rail) — unchanged */
.methodology.v2 .steps{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 12px;
}
.methodology.v2 .steps::before{
  content:"";
  position:absolute;
  left: calc(10px + var(--marker-size) / 2);
  top: 8px; bottom: 8px;
  width: var(--rail);
  background: var(--green); opacity:.22;
}
.methodology.v2 .step{ position: relative; padding-left: calc(36px + 26px); }
.methodology.v2 .marker{
  position:absolute; left: 10px; top: 0;
  width: var(--marker-size); height: var(--marker-size);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-weight:700;
  color: var(--green);
  background:#fff;
  border:2px solid var(--green);
  box-shadow: var(--shadow);
  z-index:1;
}

/* DESKTOP (horizontal rail on top; circles BELOW the line) */
/* DESKTOP — top rail; circles just under it (no overlap with text) */
@media (min-width: 900px){
  .methodology.v2{
    --marker-size: 44px;
    --rail: 2px;
    --gap: 8px;                  /* distance from rail to circle */
  }

  .methodology.v2 .steps{
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    /* reserve space: rail + gap + full circle height */
    padding-top: calc(var(--rail) + var(--gap) + var(--marker-size));
  }

  /* the rail */
  .methodology.v2 .steps::before{
    content:"";
    position:absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 12%);     /* 6% gutters */
    height: var(--rail);
    background: var(--green);
    opacity: .35;
    z-index: 0;
  }

  .methodology.v2 .step{
    text-align:center;
    padding-left:0;
    position:relative;
  }

  /* key trick: lift circle into the reserved top space */
  .methodology.v2 .marker{
    left: 50%;
    top: calc(-1 * var(--marker-size));  /* aligns to rail+gap */
    transform: translateX(-50%);
    width: var(--marker-size);
    height: var(--marker-size);
    background:#fff;
    border:2px solid var(--green);
    box-shadow: var(--shadow);
    z-index: 1;
  }
}


/* --- Language switch (put at VERY end of CSS) --- */
.lang-en { display: none; }
.lang-de { display: inline; }

body.is-en .lang-de { display: none; }
body.is-en .lang-en { display: inline; }