/* Joyroot Coaching — production stylesheet
   Real Teehand + Montserrat (self-hosted WOFF2)
   Responsive: mobile / tablet / desktop
*/

@font-face { font-family:'Teehand';    src:url('assets/fonts/Teehand-Regular.woff2') format('woff2');    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Italic.woff2') format('woff2');  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --navy:#253468; --pink:#EB3591; --orange:#F38027; --burgundy:#951E5E;
  --blue:#4660AA; --teal:#73CCDB; --peach:#FAA966;
  --white:#FFFFFF; --cream-light:#fffaf5; --cream-warm:#fdf7f1; --cream-band:#f9f1e8;
  --border-cream:#e4d5c3; --navy-muted:#4d5a82;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-weight:400; color:var(--navy); line-height:1.5; background:var(--white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }

/* Teehand is uppercase-only display font.
   Every Teehand-styled element gets text-transform:uppercase. */
h1, h2, h3 {
  font-family:'Teehand','Fraunces',Georgia,serif;
  font-weight:400; line-height:1.15; color:var(--navy);
  letter-spacing:0.005em; text-transform:uppercase;
}
h1 { font-size:48px; line-height:1.1; }
h2 { font-size:32px; margin-bottom:16px; }
h3 { font-size:22px; }
p { line-height:1.7; }

.eyebrow {
  font-size:11px; letter-spacing:2px; color:var(--orange);
  text-transform:uppercase; font-weight:600; margin-bottom:14px; display:block;
}
.italic-sub { font-family:'Montserrat',serif; font-style:italic; font-size:18px; color:var(--navy-muted); }
.audience-tag {
  display:inline-block; font-size:10px; letter-spacing:2px; color:var(--navy);
  text-transform:uppercase; font-weight:600; opacity:0.7;
  background:rgba(37,52,104,0.06); padding:6px 12px; border-radius:999px; margin:8px 0 16px;
}
.body-sm { font-size:14px; line-height:1.7; color:var(--navy); opacity:0.9; }
.body-md { font-size:15px; line-height:1.75; color:var(--navy); opacity:0.92; }

/* ===== Buttons — semi-bold text ===== */
.cta {
  display:inline-block; background:var(--pink); color:white;
  padding:14px 24px; border-radius:999px; font-size:14px; font-weight:600;
  text-decoration:none; transition:background 0.15s ease; letter-spacing:0.2px;
}
.cta:hover { background:#d92a83; }
.cta-outline {
  display:inline-block; background:transparent; color:var(--navy);
  padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600;
  border:1.5px solid var(--navy); text-decoration:none; letter-spacing:0.2px;
}
.link-arrow { font-size:14px; font-weight:600; color:var(--pink); text-decoration:none; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }

/* ===== NAV — 85px logo, dropdown, mobile hamburger ===== */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid #f5e6ec; background:white;
  position:relative;
}
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo img { height:85px; width:auto; }
.nav-items { display:flex; gap:28px; font-size:14px; font-weight:500; align-items:center; margin-left:auto; margin-right:24px; }
.nav-item { position:relative; }
.nav-item > a { color:var(--navy); text-decoration:none; padding:8px 0; display:inline-block; }
.nav-item > a.active { color:var(--pink); border-bottom:2px solid var(--pink); }
.dropdown-caret { font-size:9px; margin-left:4px; opacity:0.6; }

/* Desktop dropdown — hover OR click toggles */
.dropdown-menu {
  display:none; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  background:white; border:1px solid var(--border-cream); border-radius:10px;
  padding:8px 0; margin-top:6px; min-width:140px; box-shadow:0 8px 24px rgba(0,0,0,0.08);
  z-index:100;
}
/* Invisible hover bridge so hover-out doesn't close menu when moving diagonally */
.nav-item.has-dropdown::after {
  content:''; position:absolute; top:100%; left:-8px; right:-8px; height:14px;
  display:none;
}
.nav-item.has-dropdown:hover::after,
.nav-item.has-dropdown.open::after { display:block; }
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.open .dropdown-menu { display:block; }
.dropdown-menu a {
  display:block; padding:9px 22px; color:var(--navy); text-decoration:none;
  font-size:13px; font-weight:500; transition:background 0.12s;
}
.dropdown-menu a:hover { background:var(--cream-warm); color:var(--pink); }

.nav-cta {
  background:var(--pink); color:white; padding:13px 24px; border-radius:999px;
  font-size:15px; font-weight:600; text-decoration:none; letter-spacing:0.2px;
  white-space:nowrap;
}

/* Hamburger — hidden on desktop */
.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; padding:0; align-items:center; justify-content:center;
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:var(--navy);
  border-radius:2px; position:relative; transition:all 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content:''; position:absolute; left:0; width:24px; height:2px;
  background:var(--navy); border-radius:2px; transition:all 0.2s;
}
.nav-toggle span::before { top:-8px; }
.nav-toggle span::after  { top:8px; }
.nav.open .nav-toggle span { background:transparent; }
.nav.open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.nav.open .nav-toggle span::after  { top:0; transform:rotate(-45deg); }

.crumb { padding:12px 40px 0; font-size:12px; color:var(--navy); opacity:0.7; }
.crumb a { color:var(--navy); text-decoration:underline; text-decoration-thickness:0.5px; text-underline-offset:3px; }

/* ===== Sections ===== */
.section { padding:72px 48px; }
.section-narrow { max-width:640px; margin:0 auto; }
.text-center { text-align:center; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-2-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

/* ===== Hero patterns ===== */
.hero-centered { text-align:center; padding:64px 48px 80px; }
.hero-centered .flower-mark { max-width:200px; margin:0 auto 24px; }
.hero-centered .flower-mark.soil-hero { max-width:280px; }
.hero-centered h1 { max-width:800px; margin:0 auto 16px; }
.hero-centered .lead { font-size:16px; max-width:500px; margin:0 auto 32px; opacity:0.88; }

/* ===== Journey Option cards ===== */
.jo-card { background:white; border:1px solid var(--border-cream); border-radius:14px; padding:28px; text-align:left; }
.jo-card .accent { width:40px; height:4px; border-radius:2px; margin-bottom:20px; }
.jo-card h3 { font-family:'Teehand',serif; font-size:32px; margin-bottom:6px; color:var(--navy); text-transform:uppercase; letter-spacing:0.005em; }
.jo-card .fn-desc { font-size:12px; letter-spacing:1.5px; color:var(--orange); text-transform:uppercase; font-weight:600; margin-bottom:18px; }
.jo-card p { font-size:13px; line-height:1.7; opacity:0.88; margin-bottom:18px; }

/* ===== Journey stages with icons illustration =====
   Desktop: list on LEFT, image on RIGHT (HTML order: list first, image second)
   Mobile: image FIRST (reordered via CSS), list below; image goes full-width */
.journey-with-image { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start; }
.journey-with-image .journey-image { display:flex; justify-content:center; align-items:flex-start; }
.journey-with-image .journey-image img { max-width:100%; max-height:520px; width:auto; }
.journey-with-image .journey-list { text-align:left; }

/* ===== CTA band ===== */
.cta-band { background:var(--navy); padding:64px 48px; text-align:center; color:white; }
.cta-band h2 { color:white; margin-bottom:12px; }
.cta-band p { font-size:15px; opacity:0.85; max-width:460px; margin:0 auto 28px; }

/* ===== Footer ===== */
.footer { background:var(--cream-band); padding:56px 48px 24px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:32px; align-items:start; }
.footer .brand { display:flex; align-items:center; gap:10px; }
.footer .brand img { height:105px; width:auto; }
.footer .tagline { font-size:12px; line-height:1.6; opacity:0.75; margin-top:14px; }
.footer-heading { font-size:11px; letter-spacing:1.5px; color:var(--orange); text-transform:uppercase; font-weight:600; margin-bottom:12px; }
.footer-list { font-size:13px; line-height:2; }
.footer-list a { color:var(--navy); text-decoration:none; }
.footer .newsletter-input { display:flex; background:white; border:1px solid var(--border-cream); border-radius:999px; padding:4px 4px 4px 14px; align-items:center; margin:12px 0 14px; }
.footer .newsletter-input .placeholder { flex:1; font-size:12px; color:var(--navy); opacity:0.5; }
.footer .newsletter-input .sub-btn { background:var(--pink); color:white; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:600; }
.footer .social { display:flex; gap:14px; }
.footer .social i, .footer .social span { color:var(--navy); }
.footer-bottom { border-top:1px solid var(--border-cream); margin-top:40px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--navy); opacity:0.65; }

/* ===== Framework stage rows ===== */
.stage-row { display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:flex-start; margin-bottom:18px; }
.stage-num { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; }
.stage-title { font-family:'Teehand',serif; font-size:22px; margin-bottom:2px; color:var(--navy); text-transform:uppercase; letter-spacing:0.005em; }
.stage-desc { font-size:14px; line-height:1.6; opacity:0.88; }

/* ===== What's included cards ===== */
.incl-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.incl-card { background:white; border:1px solid var(--border-cream); border-radius:12px; padding:22px; display:flex; gap:14px; align-items:flex-start; }
.incl-card .check { font-size:22px; margin-top:2px; flex-shrink:0; font-weight:bold; }
.incl-card h4 { font-size:15px; font-weight:600; margin-bottom:4px; color:var(--navy); font-family:'Montserrat',sans-serif; }
.incl-card p { font-size:12px; line-height:1.6; opacity:0.78; }

/* ===== Portrait blocks ===== */
.portrait-block { background:#FBEAF0; border-radius:14px; overflow:hidden; }
.portrait-block img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

/* ===== Contact form ===== */
.form-field { margin-bottom:18px; }
.form-field label { display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:var(--navy); opacity:0.7; margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea {
  width:100%; padding:12px 14px; border:1px solid var(--border-cream); border-radius:8px;
  font-size:14px; font-family:'Montserrat',sans-serif; color:var(--navy); background:white;
}
.form-field textarea { min-height:130px; resize:vertical; }

/* ===== Testimonials page — masonry columns, brand-color rotation ===== */
.testimonials-grid { columns:2; column-gap:24px; max-width:1080px; margin:0 auto; }
.testimonial-card {
  break-inside:avoid; margin-bottom:24px;
  border:1px solid var(--border-cream); border-radius:14px; padding:32px;
  background:white;
}
.testimonial-card .quote-mark {
  font-family:'Teehand',serif; font-size:56px; line-height:0.4;
  color:var(--pink); opacity:0.7; margin-bottom:12px;
}
.testimonial-card .quote {
  font-family:'Montserrat',serif; font-style:italic; font-size:15px;
  line-height:1.65; color:var(--navy); margin-bottom:18px;
}
.testimonial-card .attribution {
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600; color:var(--navy); opacity:0.75; line-height:1.6;
}
/* Cycle through brand-color tints — 6 variants, then repeat.
   The full brand color goes on the quote-mark; the card gets a soft tint of the same hue. */
.testimonial-card:nth-child(6n+1) { background:#fdf1f5; border-color:#f5cfdd; }
.testimonial-card:nth-child(6n+1) .quote-mark { color:var(--pink); }
.testimonial-card:nth-child(6n+2) { background:#fef2e6; border-color:#f5d3b8; }
.testimonial-card:nth-child(6n+2) .quote-mark { color:var(--orange); }
.testimonial-card:nth-child(6n+3) { background:#e8f4f8; border-color:#b8dde7; }
.testimonial-card:nth-child(6n+3) .quote-mark { color:#3a9db0; }
.testimonial-card:nth-child(6n+4) { background:#fef5eb; border-color:#f2d9b8; }
.testimonial-card:nth-child(6n+4) .quote-mark { color:var(--peach); }
.testimonial-card:nth-child(6n+5) { background:#eef1f9; border-color:#c4cee6; }
.testimonial-card:nth-child(6n+5) .quote-mark { color:var(--blue); }
.testimonial-card:nth-child(6n+6) { background:#f4e8ee; border-color:#dcc4d1; }
.testimonial-card:nth-child(6n+6) .quote-mark { color:var(--burgundy); }

/* ===== Contact grid — desktop: form left, expect right; mobile: expect first ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-start; }
@media (max-width:1023px) {
  .contact-grid { grid-template-columns:1fr; gap:32px; }
  .contact-grid > :first-child { order:2; }
  .contact-grid > :last-child { order:1; }
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 1023px) {
  .nav { padding:14px 24px; }
  .nav-logo img { height:64px; }
  .nav-items { gap:20px; font-size:13px; }
  .nav-cta { padding:11px 18px; font-size:13px; }
  h1 { font-size:40px; }
  h2 { font-size:28px; }
  .section { padding:56px 32px; }
  .hero-centered { padding:48px 32px 60px; }
  .grid-2, .grid-2-hero { grid-template-columns:1fr; gap:32px; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .journey-with-image { grid-template-columns:1fr; gap:24px; }
  .journey-with-image .journey-image { order:-1; }
  .journey-with-image .journey-image img { max-height:none; max-width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer .brand img { height:80px; }
  .cta-band { padding:48px 32px; }
}

@media (max-width: 767px) {
  .nav { padding:12px 18px; flex-wrap:wrap; }
  .nav-logo img { height:52px; }
  .nav-toggle { display:flex; order:3; }
  .nav-items {
    display:none; order:4; width:100%; flex-direction:column;
    gap:2px; align-items:stretch; margin:12px 0 0; padding-top:12px;
    border-top:1px solid #f5e6ec;
  }
  .nav.open .nav-items { display:flex; }
  .nav-item { width:100%; }
  .nav-item > a { display:block; padding:12px 8px; font-size:15px; }
  .nav-item > a.active { border-bottom:none; background:var(--cream-warm); border-radius:6px; }
  .dropdown-caret { display:none; }
  .dropdown-menu {
    display:block; position:static; transform:none;
    box-shadow:none; border:none; padding:0 0 8px 20px;
    background:transparent; min-width:0;
  }
  .dropdown-menu a { padding:8px 8px; font-size:13px; opacity:0.85; }
  .nav-cta { order:2; padding:10px 18px; font-size:13px; margin-right:8px; }

  h1 { font-size:32px; line-height:1.1; }
  h2 { font-size:24px; margin-bottom:12px; }
  h3 { font-size:18px; }
  .section { padding:44px 20px; }
  .hero-centered { padding:36px 20px 48px; }
  .hero-centered .flower-mark { max-width:150px; }
  .hero-centered .flower-mark.soil-hero { max-width:200px; }
  .hero-centered .lead { font-size:15px; }
  .crumb { padding:10px 20px 0; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2, .grid-2-hero { gap:24px; }
  .journey-with-image .journey-image img { max-height:none; max-width:100%; }
  .incl-grid { grid-template-columns:1fr; }
  .footer { padding:40px 20px 20px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer .brand img { height:64px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .cta-band { padding:40px 20px; }
  .cta, .cta-outline { padding:12px 20px; font-size:13px; }
  .testimonials-grid { columns:1; }
  .stage-row { grid-template-columns:44px 1fr; gap:14px; }
  .stage-num { width:36px; height:36px; font-size:13px; }
  .stage-title { font-size:19px; }
}

@media print {
  body { background:white; }
  .nav-toggle { display:none !important; }
  .nav-items { display:flex !important; }
}