/* ============================================================
   GEORGE & GROWTH — Design System
   Signature motif: the "ascent line" — a stepped line breaking
   through a dashed ceiling. Used in logo, section dividers,
   quiz progress and hover states. It is the visual argument of
   the whole site: you are not stuck, there is a next step up.
   ============================================================ */

:root{
  --navy:      #162443;
  --navy-2:    #223259;
  --navy-tint: #E8EAF1;
  --bg:        #F3F1EA;
  --white:     #FFFFFF;
  --moss:      #52713F;
  --moss-dark: #3B5A2C;
  --moss-tint: #E7EEE1;
  --amber:     #F4A261;
  --amber-dark:#DE8A45;
  --ink:       #20242B;
  --ink-soft:  #52586A;
  --line:      #DCD8CD;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-sm:   8px;

  --container: 1140px;
  --section-pad: 112px;
  --section-pad-m: 64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 4.4vw, 3.6rem); font-weight:700; }
h2{ font-size:clamp(1.9rem, 3vw, 2.5rem); font-weight:700; }
h3{ font-size:1.3rem; font-weight:700; }
p{ margin:0 0 1em; color:var(--ink-soft); }
p.lead{ font-size:1.15rem; color:var(--ink); }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.section{ padding:var(--section-pad) 0; }
.section--tight{ padding:64px 0; }
.section--bg{ background:var(--bg); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h2, .section--navy h3{ color:#fff; }
.section--navy p{ color:#C7CDDE; }
@media (max-width:820px){
  .section{ padding:var(--section-pad-m) 0; }
}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--moss);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  padding:14px 30px;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--amber); color:var(--navy); }
.btn-primary:hover{ background:var(--amber-dark); }
.btn-secondary{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-secondary:hover{ background:var(--navy); color:#fff; }
.btn-on-navy{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-on-navy:hover{ background:#fff; color:var(--navy); }
.btn-ghost{ background:none; color:var(--moss); padding:8px 0; border-radius:0; font-weight:600; }
.btn-ghost::after{ content:"→"; margin-left:6px; transition:margin .15s ease; }
.btn-ghost:hover::after{ margin-left:10px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:82px;
}
.logo{ display:flex; align-items:center; gap:11px; }
.logo img{ width:38px; height:38px; }
.logo-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--navy);
}
.logo-text em{ font-style:normal; color:var(--amber); }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:.95rem; font-weight:500; color:var(--navy);
  position:relative; padding:4px 0;
}
.nav a.active, .nav a:hover{ color:var(--moss); }
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--amber);
}
.header-actions{ display:flex; align-items:center; gap:18px; }

.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:var(--radius-pill);
  overflow:hidden; font-family:var(--font-mono); font-size:.78rem;
}
.lang-toggle button{
  border:none; background:transparent; padding:7px 12px; cursor:pointer; color:var(--ink-soft); font-family:inherit;
}
.lang-toggle button.active{ background:var(--navy); color:#fff; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }

@media (max-width:900px){
  .nav{
    position:fixed; inset:82px 0 0 0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:32px 28px; gap:22px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:1.15rem; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:64px 0 var(--section-pad); position:relative; overflow:hidden; }
.hero .container{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero-copy h1{ margin-bottom:20px; }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media .photo-frame{
  border-radius:var(--radius-card); overflow:hidden; background:var(--navy-tint);
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
}
.hero-media .ascent-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:14px 18px;
  box-shadow:0 14px 30px rgba(22,36,67,.12); display:flex; align-items:center; gap:12px;
}
@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
}

/* ---------- Ascent divider (signature element) ---------- */
.ascent-divider{ display:flex; justify-content:center; padding:6px 0 0; }
.ascent-divider svg{ width:120px; height:34px; }

/* ---------- Stat bar ---------- */
.stat-bar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-bar div{ padding:26px 14px; text-align:center; border-left:1px solid var(--line); }
.stat-bar div:first-child{ border-left:none; }
.stat-num{ font-family:var(--font-mono); font-size:1.7rem; font-weight:600; color:var(--navy); display:block; }
.stat-label{ font-size:.8rem; color:var(--ink-soft); margin-top:4px; }
@media (max-width:820px){
  .stat-bar{ grid-template-columns:repeat(2,1fr); }
  .stat-bar div:nth-child(3){ border-left:none; }
}

/* ---------- Cards / grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card);
  padding:32px; display:flex; flex-direction:column; height:100%;
}
.card-icon{
  width:44px; height:44px; border-radius:10px; background:var(--moss-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}

/* Program / pricing cards */
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card);
  padding:36px 30px; display:flex; flex-direction:column; position:relative;
}
.plan--featured{ border-color:var(--moss); box-shadow:0 18px 40px rgba(82,113,63,.14); }
.plan-badge{
  position:absolute; top:-13px; left:30px; background:var(--moss); color:#fff;
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  padding:5px 12px; border-radius:var(--radius-pill);
}
.plan-format{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:8px; }
.plan-price{ display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; }
.plan-price .amount{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--navy); }
.plan-price .period{ font-size:.85rem; color:var(--ink-soft); }
.plan-note{ font-size:.82rem; color:var(--ink-soft); margin-bottom:22px; }
.plan-features{ margin:6px 0 26px; flex-grow:1; }
.plan-features li{
  display:flex; gap:10px; padding:9px 0; border-top:1px dashed var(--line); font-size:.94rem;
}
.plan-features li:first-child{ border-top:none; }
.plan-features li::before{ content:"✓"; color:var(--moss); font-weight:700; }
.plan-ctas{ display:flex; flex-direction:column; gap:10px; }
.plan-badge--ghost{ background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
.plan-subnote{
  font-size:.78rem; color:var(--ink-soft); text-align:center; margin-top:2px; line-height:1.5;
}
.plan-subnote a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.plan-toggle{
  display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:3px; gap:2px; margin-top:16px; align-self:flex-start;
}
.plan-toggle button{
  border:none; background:none; font-family:var(--font-mono); font-size:.76rem;
  padding:6px 14px; border-radius:var(--radius-pill); cursor:pointer; color:var(--ink-soft);
}
.plan-toggle button.active{ background:var(--navy); color:#fff; }

/* ---------- Testimonial carousel ---------- */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; scrollbar-width:thin;
}
.t-card{
  min-width:340px; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-card); padding:28px;
}
.t-card .quote{ font-size:.98rem; color:var(--ink); margin-bottom:18px; }
.t-meta{ display:flex; align-items:center; gap:12px; }
.t-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--navy-tint); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
}
.t-name{ font-weight:600; color:var(--navy); font-size:.92rem; }
.t-role{ font-size:.8rem; color:var(--ink-soft); }
.carousel-nav{ display:flex; gap:10px; margin-top:16px; }
.carousel-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer;
}

/* ---------- Story ---------- */
.story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .story{ grid-template-columns:1fr; } }

/* ---------- Blog / learning materials ---------- */
.post-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
  display:flex; flex-direction:column;
}
.post-thumb{ aspect-ratio:16/10; background:var(--navy-tint); }
.post-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.post-tag{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--moss); }
.post-meta{ font-size:.8rem; color:var(--ink-soft); margin-top:auto; }
article.post{ max-width:720px; margin:0 auto; }
article.post .post-hero{ aspect-ratio:16/8; background:var(--navy-tint); border-radius:var(--radius-card); margin-bottom:32px; }
article.post h2{ margin-top:1.4em; }
article.post p, article.post li{ color:var(--ink); font-size:1.05rem; }
article.post blockquote{
  border-left:3px solid var(--amber); margin:28px 0; padding:4px 0 4px 20px; font-style:italic; color:var(--navy);
}

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; text-align:left; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.96rem; background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{ border-color:var(--moss); outline:none; }
.field-hint{ font-size:.78rem; color:var(--ink-soft); margin-top:5px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:14px; }

/* ---------- Quiz ---------- */
.quiz-shell{
  max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-card); padding:44px; box-shadow:0 22px 50px rgba(22,36,67,.08);
}
.quiz-progress{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.quiz-progress-track{ flex-grow:1; height:6px; background:var(--bg); border-radius:6px; overflow:hidden; }
.quiz-progress-fill{ height:100%; background:var(--moss); width:0%; transition:width .3s ease; }
.quiz-progress-label{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); white-space:nowrap; }
.quiz-options{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.quiz-option{
  text-align:left; padding:16px 18px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.quiz-option:hover{ border-color:var(--moss); background:var(--moss-tint); }
.quiz-nav{ display:flex; justify-content:space-between; margin-top:28px; }
.quiz-result-badge{
  display:inline-block; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; background:var(--moss-tint); color:var(--moss-dark); padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:16px;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:#C7CDDE; padding:64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-grid h4{ color:#fff; font-size:.9rem; margin-bottom:16px; }
.footer-grid a, .footer-grid p{ color:#AEB6CC; font-size:.9rem; }
.footer-grid li{ margin-bottom:10px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px; display:flex;
  justify-content:space-between; font-size:.8rem; color:#8993AE; flex-wrap:wrap; gap:10px;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Placeholder photo ---------- */
.placeholder-content{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--navy); opacity:.38; font-family:var(--font-mono); font-size:.76rem;
  text-transform:uppercase; letter-spacing:.1em; text-align:center; padding:20px;
}
.placeholder-content svg{ width:64px; height:64px; }

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item:first-child{ border-top:none; }
.faq-item h3{ font-size:1.05rem; margin-bottom:8px; }

/* ---------- Header CTA ---------- */
.header-cta{ padding:10px 22px; font-size:.88rem; }
@media (max-width:760px){ .header-cta{ display:none; } }

/* ---------- Form success ---------- */
.form-success{
  display:none; background:var(--moss-tint); color:var(--moss-dark); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:.9rem; margin-top:16px;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-60{ max-width:640px; }
.mt-40{ margin-top:40px; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; }
.tag-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.tag{
  font-family:var(--font-mono); font-size:.75rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 12px; color:var(--ink-soft);
}
[data-i18n], [data-i18n-html]{ }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }