/* Karen Ortner — site styles. One stylesheet for every page.
   Page-specific overrides are scoped with the body class (t-home, t-post, t-blog, ...). */

:root {
  --teal: #5BA4B5;
  --teal-deep: #3D8A9C;
  --teal-dark: #2E7384;
  --teal-light: #8DC5D2;
  --teal-lighter: #B5DBE3;
  --teal-pale: #D9EEF2;
  --teal-bg: #EDF6F8;
  --teal-wash: #F5FAFB;
  --white: #FFFFFF;
  --charcoal: #2D3E42;
  --text: #2A3538;
  --text-s: #3E5358;
  --text-l: #6B8389;
  --border: rgba(91,164,181,0.15);
  --fd: 'Playfair Display',Georgia,serif;
  --fb: 'Lato','Helvetica Neue',sans-serif;
  --amber-bg: #FFF8F0;
  --amber-border: #E8C88A;
  --amber-text: #7A5D2E;
  --purple-hint: #8B6FA0;
  --logo-purple: #602F66;
  --deep-teal: #2A6878;      /* Karen's darker Instagram teal: dark bands (quotes, free guide) */
  --deep-teal-2: #22586A;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: var(--fb); color: var(--text); background: var(--teal-wash); line-height: 1.75; font-size: 17px; font-weight: 400; -webkit-font-smoothing: antialiased }
nav { position: fixed; top: 0; width: 100%; z-index: 1000; background: #ffffff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: box-shadow 0.4s }
nav.scrolled { box-shadow: 0 2px 24px rgba(45,62,66,0.06) }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center }
.nav-logo { display: flex; align-items: center; text-decoration: none }
.nav-logo img { height: 50px }
.nav-links { display: flex; gap: 32px; list-style: none }
.nav-links a { font-size: .88rem; font-weight: 400; color: var(--text-s); text-decoration: none; letter-spacing: .08em; text-transform: uppercase; transition: color .3s; position: relative }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--teal); transition: width .3s }
.nav-links a:hover, .nav-links a.active { color: var(--teal-deep) }
.nav-links a:hover::after, .nav-links a.active::after { width: 100% }
.nav-dropdown { position: relative }
.nav-dropdown>a { display: flex; align-items: center; gap: 4px }
.nav-dropdown>a svg.dd-arrow { width: 10px; height: 10px; transition: transform .3s; flex-shrink: 0 }
.nav-dropdown:hover>a svg.dd-arrow { transform: rotate(180deg) }
.nav-dropdown .dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.1); padding: 12px 0; opacity: 0; visibility: hidden; transition: all .3s; margin-top: 15px; z-index: 100 }
.nav-dropdown:hover .dd-menu { opacity: 1; visibility: visible; margin-top: 8px }
.nav-dropdown .dd-menu a { display: block; padding: 10px 24px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-s); text-decoration: none; transition: all .2s; white-space: nowrap }
.nav-dropdown .dd-menu a::after { display: none }
.nav-dropdown .dd-menu a:hover { color: var(--teal-deep); background: var(--teal-wash,rgba(91,164,181,.06)) }
.nav-social { display: flex; gap: 14px }
.nav-social a { color: var(--logo-purple); transition: color .3s; display: flex; align-items: center }
.nav-social a:hover { color: var(--teal-deep) }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--charcoal) }
.article-header { padding: 130px 40px 0; background: var(--white) }
.article-header-inner { max-width: 760px; margin: 0 auto; text-align: center }
.article-meta { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap }
.article-cat { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--white); background: var(--teal-deep); padding: 5px 16px; border-radius: 50px }
.article-date { font-size: .85rem; color: var(--text-l) }
.article-header h1 { font-family: var(--fd); font-size: 2.6rem; font-weight: 400; color: var(--charcoal); line-height: 1.3; margin-bottom: 16px }
.article-header h1 em { font-style: italic; color: var(--logo-purple) }
.article-excerpt { font-size: 1.1rem; color: var(--text-s); line-height: 1.8; max-width: 620px; margin: 0 auto 36px }
.article-hero { max-width: 760px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 44px rgba(45,62,66,.08) }
.article-hero img { width: 100%; height: auto; display: block }
.article-body { padding: 56px 40px 80px; background: var(--white) }
.article-content { max-width: 680px; margin: 0 auto }
.article-content p { font-size: 1.05rem; color: var(--text-s); line-height: 1.95; margin-bottom: 24px }
.article-content h2 { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--charcoal); margin: 40px 0 16px; line-height: 1.35 }
.article-content h2 em { font-style: italic; color: var(--logo-purple) }
.article-content h3 { font-family: var(--fd); font-size: 1.25rem; font-weight: 500; color: var(--charcoal); margin: 32px 0 12px }
.article-content strong { font-weight: 700; color: var(--text) }
.article-content em { font-style: italic }
.article-content blockquote { margin: 32px 0; padding: 24px 32px; border-left: 3px solid var(--teal); background: var(--teal-bg); border-radius: 0 16px 16px 0; font-family: var(--fd); font-size: 1.15rem; font-style: italic; color: var(--teal-dark); line-height: 1.7 }
.article-content ul, .article-content ol { margin: 0 0 24px 24px; color: var(--text-s); list-style: none }
.article-content li { margin-bottom: 10px; font-size: 1.02rem; line-height: 1.8 }
.article-content a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; transition: color .3s }
.article-content a:hover { color: var(--teal-dark) }
.article-content hr { border: none; height: 1px; background: var(--border); margin: 40px 0 }
.article-author { display: flex; align-items: center; gap: 16px; max-width: 680px; margin: 0 auto 10px; padding: 0 0 20px }
.article-author-info { display: flex; flex-direction: column; gap: 4px }
.article-author-name { font-size: .92rem; color: var(--text); font-weight: 600; font-family: var(--fb) }
.article-author-name span { font-weight: 400; color: var(--text-l) }
.article-author-socials { display: flex; align-items: center; gap: 4px }
.article-author-socials span { font-size: .78rem; color: var(--text-l); font-weight: 600; letter-spacing: .04em }
.article-author-socials a { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-bg); display: flex; align-items: center; justify-content: center; color: var(--teal-deep); text-decoration: none; transition: all .3s }
.article-author-socials a:hover { background: var(--teal-deep); color: #fff }
.article-author-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal-bg) }
.existing-comments { max-width: 680px; margin: 24px auto 0 }
.existing-comments h4 { font-family: var(--fd); font-size: 1.15rem; font-weight: 400; color: var(--charcoal); margin-bottom: 20px }
.existing-comments h4 span { color: var(--text-l); font-size: .9rem }
.comment-thread { background: var(--teal-bg); border-radius: 14px; margin-bottom: 16px; overflow: hidden }
.comment-entry { padding: 20px 24px }
.comment-reply { padding: 16px 24px 16px 36px; background: rgba(93,164,181,.08); border-top: 1px solid rgba(93,164,181,.12) }
.comment-is-author { border-left: 3px solid var(--teal) }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap }
.comment-name { font-weight: 700; font-size: .9rem; color: var(--charcoal) }
.comment-name.is-author { color: var(--teal-deep) }
.comment-name.is-author::after { content: "Author"; font-size: .65rem; font-weight: 600; background: var(--teal-deep); color: #fff; padding: 2px 8px; border-radius: 50px; margin-left: 8px; vertical-align: middle }
.comment-time { font-size: .78rem; color: var(--text-l) }
.comment-text { font-size: .92rem; color: var(--text-s); line-height: 1.75 }
.comment-text p { margin-bottom: 8px }
.comment-text p:last-child { margin-bottom: 0 }
.comment-reply-btn { display: inline-block; margin-top: 10px; padding: 4px 14px; background: var(--teal-deep); color: #fff; font-size: .75rem; font-weight: 600; border-radius: 5px; cursor: default; letter-spacing: .02em }
.comment-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover }
.comment-section { max-width: 680px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid var(--border) }
.comment-section h3 { font-family: var(--fd); font-size: 1.4rem; font-weight: 400; color: var(--charcoal); margin-bottom: 8px }
.comment-section p { font-size: .9rem; color: var(--text-l); margin-bottom: 24px; line-height: 1.6 }
.comment-form { display: flex; flex-direction: column; gap: 16px }
.comment-form input, .comment-form textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--fb); font-size: .95rem; color: var(--text); background: var(--white); transition: border-color .3s; box-sizing: border-box }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--teal) }
.comment-form textarea { min-height: 120px; resize: vertical }
.comment-form button { align-self: flex-start; padding: 14px 36px; border: none; border-radius: 50px; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .92rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background .3s }
.comment-form button:hover { background: var(--teal-dark) }
.suggest-section { max-width: 680px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid var(--border) }
.suggest-section h3 { font-family: var(--fd); font-size: 1.4rem; font-weight: 400; color: var(--charcoal); margin-bottom: 8px }
.suggest-section h3 svg { display: inline-block; vertical-align: -3px; margin-right: 8px; color: var(--teal-deep) }
.suggest-section p { font-size: .9rem; color: var(--text-l); margin-bottom: 24px; line-height: 1.6 }
.suggest-form { display: flex; flex-direction: column; gap: 16px }
.suggest-form input, .suggest-form textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--fb); font-size: .95rem; color: var(--text); background: var(--white); transition: border-color .3s; box-sizing: border-box }
.suggest-form input:focus, .suggest-form textarea:focus { outline: none; border-color: var(--teal) }
.suggest-form textarea { min-height: 100px; resize: vertical }
.suggest-form button { align-self: flex-start; padding: 14px 36px; border: none; border-radius: 50px; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .92rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background .3s }
.suggest-form button:hover { background: var(--teal-dark) }
.suggest-success { display: none; padding: 20px; background: var(--teal-bg,#F0F7F9); border-radius: 12px; text-align: center }
.suggest-success p { color: var(--teal-deep); font-weight: 600; margin: 0 }
.comment-success { display: none; padding: 20px; background: var(--teal-bg); border-radius: 12px; color: var(--teal-dark); font-size: .95rem; text-align: center }
.article-footer { max-width: 680px; margin: 0 auto; padding-top: 40px; border-top: 1px solid var(--border) }
.article-share { display: flex; align-items: center; gap: 16px; margin-bottom: 32px }
.article-share span { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-l) }
.share-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-bg); display: flex; align-items: center; justify-content: center; color: var(--teal-deep); text-decoration: none; transition: all .3s }
.share-btn:hover { background: var(--teal-deep); color: #fff }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: var(--teal-deep); text-decoration: none; transition: color .3s }
.back-link:hover { color: var(--teal-dark) }
.related { padding: 80px 40px; background: var(--teal-bg) }
.related-inner { max-width: 1060px; margin: 0 auto }
.related h2 { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--charcoal); text-align: center; margin-bottom: 8px }
.related h2 em { font-style: italic; color: var(--logo-purple) }
.related .hline { width: 36px; height: 1.5px; background: var(--teal); margin: 0 auto 40px }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px }
.related-card { border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 4px 18px rgba(45,62,66,.04); transition: transform .4s,box-shadow .4s }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(45,62,66,.07) }
.related-card a { text-decoration: none; color: inherit; display: block }
.related-card-img { aspect-ratio: 16/10; overflow: hidden }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.related-card:hover img { transform: scale(1.04) }
.related-card-body { padding: 20px }
.related-card-body h3 { font-family: var(--fd); font-size: 1.05rem; font-weight: 500; color: var(--charcoal); line-height: 1.4; margin-bottom: 8px; transition: color .3s }
.related-card:hover h3 { color: var(--teal-deep) }
.related-card-body .read-more { font-size: .82rem; font-weight: 700; color: var(--teal-deep) }
.guide-cta { padding: 44px 40px; background: linear-gradient(160deg,var(--deep-teal) 0%,var(--deep-teal-2) 100%); position: relative; overflow: hidden }
.guide-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%,rgba(91,164,181,.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(61,138,156,.06) 0%,transparent 60%); pointer-events: none }
.guide-inner { max-width: 860px; margin: 0 auto; text-align: center; position: relative; z-index: 1 }
.guide-cta .lbl { font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #CDE8EE; margin-bottom: 10px }
.guide-cta h2 { font-family: var(--fd); font-size: 1.7rem; font-weight: 400; color: #fff; line-height: 1.35; margin-bottom: 24px }
.guide-cta h2 em { font-style: italic; color: #CDE8EE }
.guide-cta .sub { font-size: 1.05rem; color: rgba(255,255,255,.85); margin-bottom: 36px; line-height: 1.7 }
.priv { font-size: .78rem; color: rgba(139,160,165,.65); margin-top: 14px }
footer { background: var(--charcoal); padding: 52px 40px 36px; border-top: 1px solid rgba(255,255,255,.05) }
.ft-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px }
.ft-brand p { font-size: .92rem; color: #8FA8AD; line-height: 1.7; max-width: 300px; margin-top: 12px }
.ft-brand .ft-logo-img { height: 40px; margin-bottom: 4px }
.ft-links h4 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 18px }
.ft-links ul { list-style: none }
.ft-links li { margin-bottom: 10px }
.ft-links a { font-size: .92rem; color: #8FA8AD; text-decoration: none; transition: color .3s }
.ft-links a:hover { color: #fff }
.ft-social { display: flex; gap: 12px; margin-top: 20px }
.ft-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; transition: all .3s; color: var(--text-l) }
.ft-social a:hover { background: var(--teal-deep); color: #fff }
.ft-btm { max-width: 1140px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center }
.ft-btm p { font-size: .8rem; color: rgba(139,160,165,.6) }
.ft-btm-links { display: flex; gap: 20px }
.ft-btm-links a { font-size: .8rem; color: rgba(139,160,165,.6); text-decoration: none; transition: color .3s }
.ft-btm-links a:hover { color: var(--text-l) }
.fi { opacity: 0; transform: translateY(22px); transition: opacity .7s,transform .7s }
.fi.vis { opacity: 1; transform: translateY(0) }
.ko-form { display: flex; gap: 12px; max-width: 680px; margin: 0 auto; align-items: stretch }
.ko-form input[type="text"], .ko-form input[type="email"] { flex: 1; padding: 15px 24px; border-radius: 50px; font-family: var(--fb); font-size: .95rem; outline: none; transition: all .3s; box-sizing: border-box }
.ko-form button { flex: 1; padding: 15px 24px; border-radius: 50px; border: none; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .3s; white-space: nowrap; letter-spacing: .02em }
.ko-form button:hover { background: var(--teal); transform: translateY(-1px) }
.guide-cta .ko-form input[type="text"], .guide-cta .ko-form input[type="email"] { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.95); color: var(--text) }
.guide-cta .ko-form input::placeholder { color: #8FA8AD }
.guide-cta .ko-form input:focus { border-color: var(--teal); background: #fff }
.guide-cta .ko-form button { background: #F5FAFB; color: var(--deep-teal) }
.guide-cta .ko-form button:hover { background: #fff; color: var(--deep-teal-2) }
.newsletter .ko-form input[type="text"], .newsletter .ko-form input[type="email"], .final-cta .ko-form input[type="text"], .final-cta .ko-form input[type="email"] { border: 1px solid rgba(45,62,66,.15); background: #fff; color: var(--text) }
.newsletter .ko-form input::placeholder, .final-cta .ko-form input::placeholder { color: #9BB5BA }
.newsletter .ko-form input:focus, .final-cta .ko-form input:focus { border-color: var(--teal) }
.cw { margin: 0 auto 40px; max-width: 680px; padding: 20px 28px; border-radius: 14px; background: #FFF8F0; border: 1px solid #F0DCC8; font-size: .92rem; color: #8B6E4E; line-height: 1.7 }
.cw strong { color: #7A5C3A; display: block; margin-bottom: 6px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase }
.content-warning { max-width: 680px; margin: 0 auto 32px; padding: 20px 28px; background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 14px; font-size: .95rem; color: var(--amber-text); line-height: 1.7 }
.content-warning strong { font-weight: 700 }
.page-header { padding: 140px 40px 60px; background: linear-gradient(170deg,var(--teal-wash) 0%,var(--teal-bg) 50%,var(--teal-pale) 100%); text-align: center; position: relative; overflow: hidden }
.page-header::before { content: ''; position: absolute; top: -20%; right: -10%; width: 50%; height: 120%; background: radial-gradient(ellipse,rgba(91,164,181,.1) 0%,transparent 65%); pointer-events: none }
.page-header h1 { font-family: var(--fd); font-size: 3rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px; position: relative; z-index: 1 }
.page-header h1 em { font-style: italic; color: var(--logo-purple) }
.page-header .subtitle { font-size: 1.1rem; color: var(--text-s); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; line-height: 1.8 }
.page-header .hline { width: 40px; height: 2px; background: var(--teal); margin: 20px auto 0 }
.legal-section { padding: 70px 40px 90px; background: var(--white) }
.legal-inner { max-width: 800px; margin: 0 auto }
.legal-inner h2 { font-family: var(--fd); font-size: 1.4rem; color: var(--charcoal); margin-top: 36px; margin-bottom: 12px }
.legal-inner p { font-size: 1rem; color: var(--text-s); line-height: 1.85; margin-bottom: 16px }
.about-main { padding: 80px 40px; background: var(--white) }
.about-main-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start }
.about-img-col { position: sticky; top: 120px }
.about-img-frame { border-radius: 24px; overflow: hidden; box-shadow: 0 16px 50px rgba(45,62,66,.1) }
.about-img-frame img { width: 100%; height: auto; display: block }
.about-img-acc { width: 140px; height: 140px; border-radius: 24px; background: var(--teal-bg); position: absolute; bottom: -14px; right: -14px; z-index: -1 }
.about-text h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--charcoal); margin-bottom: 24px }
.about-text h2 em { font-style: italic; color: var(--logo-purple) }
.about-text p { font-size: 1.05rem; color: var(--text-s); line-height: 1.9; margin-bottom: 20px }
.about-text p strong { font-weight: 700; color: var(--text) }
.about-quote { padding: 70px 40px; background: linear-gradient(160deg,var(--deep-teal) 0%,var(--deep-teal-2) 100%); text-align: center; position: relative; overflow: hidden }
.about-quote::before { content: '\201C'; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-family: var(--fd); font-size: 14rem; color: rgba(91,164,181,.08); line-height: 1; pointer-events: none }
.about-quote blockquote { max-width: 700px; margin: 0 auto; font-family: var(--fd); font-size: 1.6rem; font-weight: 400; font-style: italic; color: var(--teal-pale); line-height: 1.65; position: relative; z-index: 1 }
.about-quote .qdiv { width: 36px; height: 1.5px; background: var(--teal); margin: 20px auto; opacity: .5 }
.about-quote cite { font-family: var(--fb); font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #CDE8EE }
.about-story { padding: 80px 40px; background: var(--teal-bg) }
.about-story-inner { max-width: 760px; margin: 0 auto }
.about-story h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--charcoal); margin-bottom: 24px; text-align: center }
.about-story h2 em { font-style: italic; color: var(--logo-purple) }
.about-story .hline { width: 36px; height: 1.5px; background: var(--teal); margin: 0 auto 32px }
.about-story p { font-size: 1.05rem; color: var(--text-s); line-height: 1.9; margin-bottom: 20px }
.about-quals { padding: 80px 40px; background: var(--white) }
.about-quals-inner { max-width: 900px; margin: 0 auto; text-align: center }
.about-quals h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px }
.about-quals h2 em { font-style: italic; color: var(--logo-purple) }
.about-quals .hline { width: 36px; height: 1.5px; background: var(--teal); margin: 0 auto 40px }
.qual-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px }
.qual-card { background: var(--teal-bg); border-radius: 18px; padding: 32px 24px; transition: all .3s }
.qual-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(45,62,66,.06) }
.qual-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--teal-deep) }
.qual-card h3 { font-family: var(--fd); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); margin-bottom: 8px }
.qual-card p { font-size: .95rem; color: var(--text-s); line-height: 1.7 }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px) }
  to { opacity: 1; transform: translateY(0) }
}
.blog-banner-label { font-family: var(--fb); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px; position: relative; z-index: 1 }
.blog-banner-img { max-width: 700px; margin: 30px auto 0; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(45,62,66,.1); position: relative; z-index: 1 }
.blog-banner-img img { width: 100%; height: auto; display: block }
.featured { padding: 70px 40px 0; background: var(--white) }
.featured-inner { max-width: 1060px; margin: 0 auto }
.featured-card { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: 24px; overflow: hidden; background: var(--teal-bg); box-shadow: 0 12px 48px rgba(45,62,66,.07); transition: transform .4s,box-shadow .4s }
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 18px 56px rgba(45,62,66,.1) }
.featured-card a { text-decoration: none; color: inherit; display: contents }
.featured-img { position: relative; overflow: hidden }
.featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s }
.featured-card:hover .featured-img img { transform: scale(1.03) }
.featured-badge { position: absolute; top: 20px; left: 20px; background: var(--teal-deep); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 16px; border-radius: 50px }
.featured-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center }
.featured-body .blog-date { font-size: .82rem; color: var(--text-l); letter-spacing: .06em; margin-bottom: 14px; display: block }
.featured-body h2 { font-family: var(--fd); font-size: 1.85rem; font-weight: 400; color: var(--charcoal); line-height: 1.35; margin-bottom: 16px }
.featured-body h2 em { font-style: italic; color: var(--logo-purple) }
.featured-body p { font-size: 1.05rem; color: var(--text-s); line-height: 1.8; margin-bottom: 24px }
.featured-body .read-more { font-size: .88rem; font-weight: 700; color: var(--teal-deep); letter-spacing: .04em; transition: color .3s }
.featured-card:hover .read-more { color: var(--teal-dark) }
.blog-grid-section { padding: 70px 40px 90px; background: var(--white) }
.blog-grid-header { max-width: 1060px; margin: 0 auto 40px; display: flex; justify-content: space-between; align-items: center }
.blog-grid-header h2 { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--charcoal) }
.blog-grid-header h2 em { font-style: italic; color: var(--logo-purple) }
.filter-tags { display: flex; gap: 8px; flex-wrap: wrap }
.filter-tag { padding: 7px 18px; border-radius: 50px; border: 1px solid var(--border); background: transparent; font-family: var(--fb); font-size: .82rem; color: var(--text-s); cursor: pointer; transition: all .3s }
.filter-tag:hover, .filter-tag.active { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep) }
.blog-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px }
.blog-card { border-radius: 20px; overflow: hidden; background: var(--teal-wash); box-shadow: 0 4px 20px rgba(45,62,66,.04); transition: transform .4s,box-shadow .4s }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 44px rgba(45,62,66,.08) }
.blog-card-link { text-decoration: none; color: inherit; display: block }
.blog-card-img { position: relative; overflow: hidden; aspect-ratio: 16/10 }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.blog-card:hover .blog-card-img img { transform: scale(1.05) }
.blog-cat { position: absolute; top: 14px; left: 14px; background: rgba(45,62,66,.7); backdrop-filter: blur(8px); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px }
.blog-card-body { padding: 24px 24px 28px }
.blog-date { font-size: .78rem; color: var(--text-l); letter-spacing: .04em; display: block; margin-bottom: 10px }
.blog-card-body h3 { font-family: var(--fd); font-size: 1.18rem; font-weight: 500; color: var(--charcoal); line-height: 1.4; margin-bottom: 12px; transition: color .3s }
.blog-card:hover h3 { color: var(--teal-deep) }
.blog-card-body p { font-size: .95rem; color: var(--text-s); line-height: 1.7; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.blog-card-body .read-more { font-size: .84rem; font-weight: 700; color: var(--teal-deep); letter-spacing: .02em; transition: color .3s }
.blog-card:hover .read-more { color: var(--teal-dark) }
.pagination { max-width: 1060px; margin: 50px auto 0; display: flex; justify-content: center; align-items: center; gap: 8px }
.page-num { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fb); font-size: .92rem; font-weight: 400; color: var(--text-s); text-decoration: none; border: 1px solid var(--border); transition: all .3s; cursor: pointer }
.page-num:hover { border-color: var(--teal); color: var(--teal-deep); background: var(--teal-bg) }
.page-num.active { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); font-weight: 700 }
.page-next { font-family: var(--fb); font-size: .88rem; font-weight: 700; color: var(--teal-deep); text-decoration: none; padding: 10px 20px; border-radius: 50px; border: 1px solid var(--teal-deep); margin-left: 8px; transition: all .3s }
.page-next:hover { background: var(--teal-deep); color: #fff }
.newsletter { padding: 80px 40px; background: var(--teal-bg); text-align: center }
.newsletter-inner { max-width: 600px; margin: 0 auto }
.newsletter .lbl { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px }
.newsletter h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 10px }
.newsletter h2 em { font-style: italic; color: var(--logo-purple) }
.newsletter p { font-size: 1.02rem; color: var(--text-s); margin-bottom: 30px; line-height: 1.7 }
.nl-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto }
.nl-form input { flex: 1; padding: 14px 22px; border-radius: 50px; border: 1px solid var(--border); background: var(--white); font-family: var(--fb); font-size: .95rem; color: var(--text); outline: none; transition: border-color .3s }
.nl-form input:focus { border-color: var(--teal) }
.nl-form button { padding: 14px 28px; border-radius: 50px; border: none; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .3s; white-space: nowrap }
.nl-form button:hover { background: var(--teal); transform: translateY(-1px) }
.faq-section { padding: 70px 40px 90px; background: var(--white) }
.faq-section-inner { max-width: 800px; margin: 0 auto }
.faq-category { margin-bottom: 56px }
.faq-category:last-child { margin-bottom: 0 }
.faq-cat-title { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--charcoal); margin-bottom: 8px }
.faq-cat-title em { font-style: italic; color: var(--logo-purple) }
.faq-cat-line { width: 36px; height: 1.5px; background: var(--teal); margin-bottom: 24px }
.faq-item { border-bottom: 1px solid var(--border); overflow: hidden }
.faq-item:first-of-type { border-top: 1px solid var(--border) }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--fb); font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.5; transition: color .3s }
.faq-q:hover { color: var(--teal-deep) }
.faq-icon { flex-shrink: 0; color: var(--teal); transition: transform .35s,opacity .35s }
.faq-item.open .faq-icon { transform: rotate(45deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease,padding .35s ease }
.faq-item.open .faq-a { max-height: 2000px; padding: 0 4px 24px }
.faq-a p { font-size: 1rem; color: var(--text-s); line-height: 1.85 }
.faq-a em { font-style: italic; color: var(--text-l); font-size: .92rem }
.faq-cta { padding: 80px 40px; background: var(--teal-bg); text-align: center }
.faq-cta-inner { max-width: 600px; margin: 0 auto }
.faq-cta .lbl { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px }
.faq-cta h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 14px }
.faq-cta h2 em { font-style: italic; color: var(--logo-purple) }
.faq-cta p { font-size: 1.02rem; color: var(--text-s); margin-bottom: 28px; line-height: 1.7 }
.faq-cta a.btn { display: inline-block; padding: 15px 36px; border-radius: 50px; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .92rem; font-weight: 700; text-decoration: none; transition: all .3s }
.faq-cta a.btn:hover { background: var(--teal); transform: translateY(-2px) }
.contact-section { padding: 80px 40px 100px; background: var(--white) }
.contact-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start }
.contact-info h2 { font-family: var(--fd); font-size: 1.8rem; font-weight: 400; color: var(--charcoal); line-height: 1.35; margin-bottom: 18px }
.contact-info h2 em { font-style: italic; color: var(--logo-purple) }
.contact-info > p { font-size: 1.02rem; color: var(--text-s); line-height: 1.85; margin-bottom: 36px }
.contact-method { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px }
.contact-method-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal-deep) }
.contact-method-text h3 { font-family: var(--fb); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-l); margin-bottom: 4px }
.contact-method-text p { font-size: 1rem; color: var(--text-s) }
.contact-method-text a { color: var(--teal-deep); text-decoration: none; transition: color .3s }
.contact-method-text a:hover { color: var(--teal-dark) }
.contact-social { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border) }
.contact-social h3 { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-l); margin-bottom: 16px }
.contact-social-links { display: flex; gap: 12px }
.contact-social-links a { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-bg); display: flex; align-items: center; justify-content: center; color: var(--teal-deep); transition: all .3s; text-decoration: none }
.contact-social-links a:hover { background: var(--teal-deep); color: #fff; transform: translateY(-2px) }
.contact-form-card { background: var(--teal-wash); border-radius: 24px; padding: 44px 40px; box-shadow: 0 8px 36px rgba(45,62,66,.05) }
.contact-form-card h3 { font-family: var(--fd); font-size: 1.35rem; font-weight: 400; color: var(--charcoal); margin-bottom: 6px }
.contact-form-card .form-sub { font-size: .92rem; color: var(--text-l); margin-bottom: 28px }
.form-group { margin-bottom: 20px }
.form-group label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--text-s); margin-bottom: 8px }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--white); font-family: var(--fb); font-size: .95rem; color: var(--text); outline: none; transition: border-color .3s,box-shadow .3s }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(91,164,181,.1) }
.form-group textarea { min-height: 140px; resize: vertical; line-height: 1.7 }
.form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B8389' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-submit { width: 100%; padding: 16px; border-radius: 50px; border: none; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .95rem; font-weight: 700; cursor: pointer; transition: all .3s; margin-top: 8px }
.form-submit:hover { background: var(--teal); transform: translateY(-2px) }
.form-note { font-size: .78rem; color: var(--text-l); text-align: center; margin-top: 14px }
.hero { padding: 0 40px; position: relative; overflow: hidden; background: linear-gradient(170deg,var(--teal-wash) 0%,var(--teal-bg) 30%,var(--teal-pale) 70%,var(--teal-lighter) 100%) }
.hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 120%; background: radial-gradient(ellipse,rgba(91,164,181,.12) 0%,transparent 65%); pointer-events: none }
.hero-inner { max-width: 1140px; margin: 0 auto; padding: 100px 40px 50px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; position: relative; z-index: 1 }
.hero-content { animation: fadeUp .9s ease .2s both }
.hero-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 20px; display: flex; align-items: center; gap: 10px }
.hero h1 { font-family: var(--fd); font-size: 3.2rem; font-weight: 400; line-height: 1.2; color: var(--charcoal); margin-bottom: 24px }
.hero h1 em { font-style: italic; color: var(--logo-purple) }
.hero-text { font-size: 1.12rem; color: var(--text-s); line-height: 1.85; margin-bottom: 36px; max-width: 480px }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--teal-deep); color: #fff; padding: 15px 34px; border-radius: 50px; text-decoration: none; font-family: var(--fb); font-size: .88rem; font-weight: 700; letter-spacing: .04em; border: none; cursor: pointer; transition: all .35s; box-shadow: 0 4px 18px rgba(61,138,156,.3) }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(46,115,132,.3) }
.btn-primary svg { transition: transform .3s }
.btn-primary:hover svg { transform: translateX(3px) }
.hero-img-wrap { position: relative; animation: fadeUp .9s ease .45s both }
.hero-img-frame { border-radius: 1000px 1000px 16px 16px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 24px 60px rgba(45,62,66,.12); background: #EAE0D2 }
.hero-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30% }
.qbanner { background: linear-gradient(160deg,var(--deep-teal) 0%,var(--deep-teal-2) 100%); padding: 56px 40px; text-align: center; position: relative; overflow: hidden }
.qbanner::before { content: '\201C'; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-family: var(--fd); font-size: 14rem; color: rgba(91,164,181,.08); line-height: 1; pointer-events: none }
.qbanner blockquote { max-width: 760px; margin: 0 auto; font-family: var(--fd); font-size: 1.6rem; font-weight: 400; font-style: italic; color: var(--teal-pale); line-height: 1.65; position: relative; z-index: 1 }
.qdiv { width: 36px; height: 1.5px; background: var(--teal); margin: 20px auto; opacity: .5 }
.qbanner cite { font-family: var(--fb); font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #CDE8EE }
.story { padding: 110px 40px; background: var(--white) }
.story-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center }
.story-img-wrap { position: relative }
.story-img-frame { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 50px rgba(45,62,66,.08); background: var(--teal-pale) }
.story-img-frame img { width: 100%; height: auto; display: block }
.story-img-acc { position: absolute; bottom: -16px; right: -16px; width: 180px; height: 180px; border-radius: 24px; background: var(--teal-bg); z-index: -1 }
.story h2 { font-family: var(--fd); font-size: 2.4rem; font-weight: 400; line-height: 1.25; margin-bottom: 28px; color: var(--charcoal) }
.story h2 em { font-style: italic; color: var(--logo-purple) }
.story p { font-size: 1.05rem; color: var(--text-s); line-height: 1.9; margin-bottom: 18px }
.quals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }
.qual { font: inherit; font-size: .85rem; background: var(--teal-bg); padding: 8px 18px; border-radius: 50px; border: 1px solid transparent; color: var(--teal-dark); cursor: pointer; transition: background .25s, border-color .25s, color .25s }
.qual:hover { border-color: var(--teal-light) }
.qual[aria-expanded="true"] { background: var(--teal-deep); color: #fff }
.qual:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px }
.qual-panel { margin-top: 16px; padding: 20px 24px; background: var(--teal-wash); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: 0 14px 14px 0 }
.qual-panel h3 { font-family: var(--fd); font-size: 1.15rem; font-weight: 400; color: var(--charcoal); margin-bottom: 6px }
.qual-panel p { font-size: .98rem; color: var(--text-s); line-height: 1.75; margin: 0 }
.resonance { padding: 110px 40px; background: linear-gradient(180deg,var(--teal-bg) 0%,var(--teal-pale) 100%) }
.resonance-inner { max-width: 800px; margin: 0 auto; text-align: center }
.resonance h2 { font-family: var(--fd); font-size: 2.4rem; font-weight: 400; line-height: 1.3; margin-bottom: 44px; color: var(--charcoal) }
.resonance h2 em { font-style: italic; color: var(--logo-purple) }
.res-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-bottom: 48px }
.res-card { background: rgba(255,255,255,.82); border: 1px solid rgba(91,164,181,.12); border-radius: 18px; padding: 28px; transition: all .35s }
.res-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(45,62,66,.06) }
.res-card { border-top: 3px solid var(--teal-light) }
.res-card p { font-family: var(--fb); font-size: 1.05rem; color: var(--charcoal); line-height: 1.8 }
.res-imagine { font-family: var(--fb); font-size: 1.25rem; font-weight: 400; color: var(--charcoal); line-height: 1.75; max-width: 620px; margin: 0 auto }
.testimonials { padding: 90px 40px; background: var(--white) }
.testimonials-inner { max-width: 1100px; margin: 0 auto }
.testimonials .sec-hdr { text-align: center; margin-bottom: 50px }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px }
.testi-card { background: var(--teal-bg,#F0F7F9); border-radius: 20px; padding: 40px 36px; position: relative }
.testi-card:nth-of-type(1) { background: #EDF6F8 }
.testi-card:nth-of-type(2) { background: #F2EEF6 }
.testi-card:nth-of-type(3) { background: #F8F3EA }
.testi-card:nth-of-type(4) { background: #EEF4EC }
.testi-card:nth-of-type(5) { background: #F8EEEE }
.testi-card:nth-of-type(6) { background: #EAF1F8 }
.karen-quote { grid-column: 1 / -1; text-align: center; padding: 18px 20px 26px; margin: 0 auto; max-width: 780px }
.karen-quote blockquote { font-family: var(--fd); font-size: 1.55rem; font-style: italic; color: var(--deep-teal); line-height: 1.6 }
.karen-quote blockquote::before { content: ''; display: block; width: 36px; height: 1.5px; background: var(--teal); margin: 0 auto 20px }
.karen-quote figcaption { margin-top: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-l) }
.testi-card .testi-mark { font-family: var(--fd); font-size: 3.5rem; color: var(--teal-lighter); line-height: 1; margin-bottom: 8px }
.testi-card blockquote { font-family: var(--fd); font-size: 1.05rem; font-weight: 400; font-style: italic; color: var(--charcoal); line-height: 1.75; margin-bottom: 20px }
.testi-card .tdiv { width: 28px; height: 1.5px; background: var(--teal-light); margin-bottom: 12px }
.testi-card cite { font-family: var(--fb); font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-l) }
.blog-sec { padding: 100px 40px; background: var(--teal-bg) }
.blog-sec-inner { max-width: 1140px; margin: 0 auto }
.sec-hdr { text-align: center; margin-bottom: 52px }
.sec-hdr h2 { font-family: var(--fd); font-size: 2.2rem; font-weight: 400; color: var(--charcoal) }
.sec-hdr h2 em { font-style: italic; color: var(--logo-purple) }
.sec-hdr .hline { width: 36px; height: 1.5px; background: var(--teal); margin: 16px auto 0 }
.sec-hdr p { font-size: 1.05rem; color: var(--text-s); margin-top: 12px }
.t-home .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px }
.bcard { background: #fff; border-radius: 18px; overflow: hidden; transition: all .35s; text-decoration: none; color: inherit; border: 1px solid var(--border) }
.bcard:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(45,62,66,.08) }
.bcard-img { aspect-ratio: 16/10; overflow: hidden; background: var(--teal-pale) }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.bcard:hover .bcard-img img { transform: scale(1.04) }
.bcard-body { padding: 24px }
.bcard-tag { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px }
.bcard h3 { font-family: var(--fd); font-size: 1.2rem; font-weight: 500; line-height: 1.4; color: var(--charcoal) }
.blog-more { text-align: center; margin-top: 40px }
.about-btm { padding: 100px 40px; background: var(--white) }
.about-btm-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center }
.about-btm-img { border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(45,62,66,.08) }
.about-btm-img img { width: 100%; height: auto; display: block }
.about-btm-content h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--charcoal); margin-bottom: 20px }
.about-btm-content h2 em { font-style: italic; color: var(--logo-purple) }
.about-btm-content p { font-size: 1.05rem; color: var(--text-s); line-height: 1.85; margin-bottom: 16px }
.final-cta { padding: 90px 40px; background: linear-gradient(160deg,var(--teal-bg) 0%,var(--teal-pale) 100%); text-align: center }
.final-inner { max-width: 580px; margin: 0 auto }
.final-cta h2 { font-family: var(--fd); font-size: 2.2rem; font-weight: 400; line-height: 1.3; color: var(--charcoal); margin-bottom: 18px }
.final-cta h2 em { font-style: italic; color: var(--logo-purple) }
.final-cta p { font-size: 1.05rem; color: var(--text-s); margin-bottom: 32px; line-height: 1.75 }
.ty-hero { padding: 160px 40px 80px; background: linear-gradient(160deg,var(--charcoal) 0%,#1a2e33 60%,var(--teal-dark) 100%); text-align: center; position: relative; overflow: hidden }
.ty-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%,rgba(91,164,181,.15) 0%,transparent 65%); pointer-events: none }
.ty-hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1 }
.ty-check { width: 80px; height: 80px; border-radius: 50%; background: rgba(91,164,181,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; animation: pulseIn .8s ease }
.ty-check svg { width: 40px; height: 40px; stroke: var(--teal-light); stroke-width: 2.5; fill: none }
.ty-hero h1 { font-family: var(--fd); font-size: 2.8rem; font-weight: 400; color: var(--teal-pale); line-height: 1.25; margin-bottom: 16px }
.ty-hero h1 em { font-style: italic; color: var(--teal-light) }
.ty-hero .ty-sub { font-size: 1.15rem; color: #9BB5BA; line-height: 1.8; max-width: 560px; margin: 0 auto 32px }
.ty-hero .ty-name { font-family: var(--fd); font-size: 1.5rem; font-style: italic; color: var(--teal-lighter); margin-bottom: 8px }
.ty-inbox-hint { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 50px; padding: 12px 28px; font-size: .92rem; color: var(--teal-pale); margin-top: 8px }
.ty-inbox-hint svg { width: 20px; height: 20px; stroke: var(--teal-light); fill: none; stroke-width: 1.5 }
@keyframes pulseIn {
  0% { transform: scale(0); opacity: 0 }
  50% { transform: scale(1.15) }
  100% { transform: scale(1); opacity: 1 }
}
.ty-about { padding: 80px 40px; background: var(--white) }
.ty-about-inner { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center }
.ty-about-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--teal-bg); box-shadow: 0 8px 32px rgba(45,62,66,.1) }
.ty-about-text h2 { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px }
.ty-about-text h2 em { font-style: italic; color: var(--logo-purple) }
.ty-about-text p { font-size: 1rem; color: var(--text-s); line-height: 1.85; margin-bottom: 14px }
.ty-about-text .btn { display: inline-block; padding: 12px 28px; background: var(--teal-deep); color: #fff; font-family: var(--fb); font-size: .88rem; font-weight: 700; border-radius: 50px; text-decoration: none; transition: all .3s; margin-top: 8px }
.ty-about-text .btn:hover { background: var(--teal); transform: translateY(-2px) }
.ty-steps { padding: 80px 40px; background: var(--teal-bg) }
.ty-steps-inner { max-width: 900px; margin: 0 auto; text-align: center }
.ty-steps h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px }
.ty-steps h2 em { font-style: italic; color: var(--logo-purple) }
.ty-steps > p { font-size: 1.02rem; color: var(--text-s); margin-bottom: 48px }
.ty-step-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: left }
.ty-step-card { background: var(--white); border-radius: 16px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(45,62,66,.04) }
.ty-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-deep); color: #fff; font-family: var(--fd); font-size: 1.1rem; font-weight: 600; margin-bottom: 16px }
.ty-step-card h3 { font-family: var(--fd); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); margin-bottom: 8px }
.ty-step-card p { font-size: .92rem; color: var(--text-s); line-height: 1.75 }
.ty-blog { padding: 80px 40px; background: var(--white) }
.ty-blog-inner { max-width: 900px; margin: 0 auto; text-align: center }
.ty-blog h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 36px }
.ty-blog h2 em { font-style: italic; color: var(--logo-purple) }
.ty-blog-links { display: flex; flex-direction: column; gap: 16px; max-width: 600px; margin: 0 auto 36px; text-align: left }
.ty-blog-link { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: var(--teal-wash); border-radius: 12px; text-decoration: none; transition: all .3s; border: 1px solid transparent }
.ty-blog-link:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(91,164,181,.1) }
.ty-blog-link svg { width: 24px; height: 24px; stroke: var(--teal-deep); fill: none; stroke-width: 1.5; flex-shrink: 0 }
.ty-blog-link span { font-size: .95rem; font-weight: 600; color: var(--charcoal) }
.ty-blog .btn-outline { display: inline-block; padding: 12px 28px; border: 2px solid var(--teal-deep); color: var(--teal-deep); font-family: var(--fb); font-size: .88rem; font-weight: 700; border-radius: 50px; text-decoration: none; transition: all .3s }
.ty-blog .btn-outline:hover { background: var(--teal-deep); color: #fff; transform: translateY(-2px) }
.ty-social { padding: 60px 40px; background: var(--charcoal); text-align: center }
.ty-social h2 { font-family: var(--fd); font-size: 1.8rem; font-weight: 400; color: var(--teal-pale); margin-bottom: 10px }
.ty-social h2 em { font-style: italic; color: var(--teal-light) }
.ty-social p { font-size: 1rem; color: #9BB5BA; margin-bottom: 28px }
.ty-social-links { display: flex; gap: 16px; justify-content: center }
.ty-social-links a { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: all .3s; color: var(--teal-light) }
.ty-social-links a:hover { background: var(--teal-deep); color: #fff; transform: translateY(-3px) }
.ty-social-links a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5 }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px) }
  to { opacity: 1; transform: translateY(0) }
}
.t-program .coming-soon { padding: 10px 40px 50px; background: var(--teal-bg); text-align: center }
.t-program .coming-soon-inner { max-width: 700px; margin: 0 auto }
/* "Coming soon" is a gentle italic label, not a pill, so it never looks like a button */
.t-program .cs-label { display: block; font-family: var(--fd); font-style: italic; font-size: 1.6rem; font-weight: 400; color: var(--logo-purple); margin-bottom: 14px }
.t-program .coming-soon h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px }
.t-program .coming-soon h2 em { font-style: italic; color: var(--logo-purple) }
.t-program .coming-soon p { font-size: 1.05rem; color: var(--text-s); line-height: 1.8; max-width: 420px; margin: 0 auto }
.t-program .cs-form { margin-top: 28px }
.t-program .cs-form .ko-form input[type="text"], .t-program .cs-form .ko-form input[type="email"] { border: 1px solid rgba(45,62,66,.15); background: #fff; color: var(--text) }
.t-program .cs-form .ko-form input::placeholder { color: #9BB5BA }
.t-program .cs-form .ko-form input:focus { border-color: var(--teal) }
.t-program .cs-form .form-success { max-width: none; margin-top: 8px; color: var(--teal-deep); text-align: center }
.t-program .prog-about { padding: 80px 40px; background: var(--white) }
.t-program .prog-about-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start }
.t-program .prog-img-col { position: sticky; top: 120px }
.t-program .prog-img-frame { border-radius: 24px; overflow: hidden; box-shadow: 0 16px 50px rgba(45,62,66,.1) }
.t-program .prog-img-frame img { width: 100%; height: auto; display: block }
.t-program .prog-text h2 { font-family: var(--fd); font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--charcoal); margin-bottom: 24px }
.t-program .prog-text h2 em { font-style: italic; color: var(--logo-purple) }
.t-program .prog-text p { font-size: 1.05rem; color: var(--text-s); line-height: 1.9; margin-bottom: 20px }
.t-program .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important }

/* ---------- program pages ---------- */
.t-program .page-header { padding: 120px 40px 0; background: var(--teal-bg) }
.t-program .page-header::before { display: none }
.t-program .page-header .hline { margin: 16px auto 0 }
.t-program .guide-cta p { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px }

/* Karen's quote laid over her photo (homepage story section) */
.story .story-quote { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 28px 26px; background: linear-gradient(180deg,transparent 0%,rgba(34,88,106,.88) 70%); color: #fff; font-family: var(--fd); font-style: italic; font-size: 1.35rem; line-height: 1.45; text-align: center }

/* ---------- Thrivers Community page ---------- */
.thrivers-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px; position: relative; z-index: 1 }
.t-thrivers .page-header { padding-top: 112px }
.t-thrivers .prog-text h3 { font-family: var(--fd); font-size: 1.3rem; font-weight: 400; color: var(--charcoal); margin: 32px 0 14px }
.thrivers-list { list-style: none; margin: 0 0 24px; padding: 0 }
.thrivers-list li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--border); font-size: 1.02rem; color: var(--text-s); line-height: 1.6 }
.thrivers-list li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: rotate(-45deg) }
.t-thrivers .prog-text .thrivers-note { font-size: .95rem; font-style: italic; color: var(--text-l) }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr }
  .ft-inner { grid-template-columns: 1fr; gap: 32px }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: 20px 40px; gap: 16px; border-bottom: 1px solid var(--border) }
  .nav-links.open { display: flex }
  .nav-dropdown .dd-menu { position: static; transform: none; box-shadow: none; border-radius: 0; padding: 0 0 0 20px; opacity: 1; visibility: visible; margin-top: 0; display: none }
  .nav-dropdown.dd-open .dd-menu { display: block }
  .nav-dropdown>a svg.dd-arrow { transition: transform .3s }
  .nav-dropdown.dd-open>a svg.dd-arrow { transform: rotate(180deg) }
  .hamburger { display: flex }
  .ft-btm { flex-direction: column; gap: 10px; text-align: center }
  .ko-form { flex-direction: column }
  .ko-form button { width: 100% }
  .about-main-inner { grid-template-columns: 1fr; gap: 40px }
  .about-img-col { position: static; max-width: 400px; margin: 0 auto }
  .qual-grid { grid-template-columns: 1fr }
  .featured-card { grid-template-columns: 1fr }
  .featured-img { max-height: 300px }
  .featured-body { padding: 32px 28px }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 24px }
  .blog-grid-header { flex-direction: column; gap: 16px; align-items: flex-start }
  .contact-inner { grid-template-columns: 1fr; gap: 48px }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 110px }
  .hero h1 { font-size: 2.4rem }
  .hero-img-wrap { max-width: 360px; margin: 0 auto }
  .story-inner { grid-template-columns: 1fr; gap: 40px }
  .story-img-wrap { max-width: 360px; margin: 0 auto }
  .res-cards { grid-template-columns: 1fr }
  .t-home .blog-grid { grid-template-columns: 1fr }
  .testi-grid { grid-template-columns: 1fr }
  .about-btm-inner { grid-template-columns: 1fr; gap: 40px }
  .about-btm-img { max-width: 360px; margin: 0 auto }
  .ty-about-inner { grid-template-columns: 1fr; text-align: center }
  .ty-about-img { margin: 0 auto }
  .ty-step-cards { grid-template-columns: 1fr }
  .t-program .prog-about-inner { grid-template-columns: 1fr }
  .t-program .prog-img-col { position: static; max-width: 400px; margin: 0 auto }
}

@media (max-width: 600px) {
  .article-header h1 { font-size: 1.9rem }
  .article-header, .article-body, .related, .guide-cta { padding-left: 20px; padding-right: 20px }
  .article-content blockquote { padding: 18px 20px }
  .page-header h1 { font-size: 2.2rem }
  .page-header, .legal-section, .guide-cta { padding-left: 20px; padding-right: 20px }
  .about-text h2, .about-story h2, .about-quals h2, .guide-cta h2 { font-size: 1.8rem }
  .page-header, .about-main, .about-story, .about-quals, .guide-cta { padding-left: 20px; padding-right: 20px }
  .featured-body h2 { font-size: 1.5rem }
  .blog-grid { grid-template-columns: 1fr }
  .page-header, .featured, .blog-grid-section, .newsletter, .guide-cta { padding-left: 20px; padding-right: 20px }
  .page-header, .faq-section, .faq-cta, .guide-cta { padding-left: 20px; padding-right: 20px }
  .faq-q { font-size: .98rem }
  .form-row { grid-template-columns: 1fr }
  .contact-form-card { padding: 32px 24px }
  .page-header, .contact-section, .guide-cta { padding-left: 20px; padding-right: 20px }
  .hero h1 { font-size: 2rem }
  .story h2, .resonance h2, .sec-hdr h2, .guide-cta h2, .final-cta h2, .about-btm-content h2 { font-size: 1.8rem }
  .hero-inner, .story, .resonance, .guide-cta, .testimonials, .blog-sec, .about-btm, .final-cta { padding-left: 20px; padding-right: 20px }
  .ty-hero h1 { font-size: 2rem }
  .ty-hero, .ty-about, .ty-steps, .ty-blog, .ty-social { padding-left: 20px; padding-right: 20px }
  .t-program .coming-soon h2 { font-size: 1.8rem }
  .t-program .prog-text h2, .t-program .guide-cta h2 { font-size: 1.8rem }
  .t-program .page-header, .t-program .coming-soon, .t-program .prog-about, .t-program .qbanner, .t-program .guide-cta { padding-left: 20px; padding-right: 20px }
}


/* ---------- forms & helpers ---------- */
[hidden] { display: none !important }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-error { margin-top: 12px; font-size: .9rem; color: #B4534A; text-align: center; width: 100% }
.guide-cta .form-error, .newsletter .form-error { color: #F2B8B0 }
.form-success { font-size: 1rem; line-height: 1.7 }
.guide-cta .form-success, .newsletter .form-success { color: var(--teal-pale); text-align: center; margin-top: 8px }
.pagination button { font: inherit; border: 0; background: none; cursor: pointer }
.skip-link { position: absolute; left: -9999px }
.skip-link:focus { left: 16px; top: 16px; z-index: 2000; background: #fff; padding: 8px 14px; border-radius: 8px }

/* ---------- blog post media (photos & videos inside Karen's posts) ---------- */
.article-content img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 8px auto 24px }
.article-content img.align-right { float: right; max-width: 42%; margin: 6px 0 16px 28px }
.article-content img.align-left { float: left; max-width: 42%; margin: 6px 28px 16px 0 }
.article-content h2, .article-content h3, .article-content hr, .article-content .video-embed { clear: both }
.article-content::after { content: ''; display: block; clear: both }
.article-content ul { list-style: disc; padding-left: 4px }
.article-content ol { list-style: decimal; padding-left: 4px }
.video-embed { position: relative; margin: 8px 0 32px; border-radius: 16px; overflow: hidden; background: var(--charcoal); aspect-ratio: 16 / 9 }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-embed.video-file { aspect-ratio: 9 / 16; max-width: 360px; margin-left: auto; margin-right: auto }
@media (max-width: 600px) {
  .article-content img.align-right, .article-content img.align-left { float: none; max-width: 100%; margin: 8px auto 24px }
}

/* ---------- thank-you download button ---------- */
.ty-download { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 16px 32px; border-radius: 50px; background: var(--teal-deep); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 8px 24px rgba(61,138,156,.25); transition: background .3s, transform .3s }
.ty-download:hover { background: var(--teal-dark); transform: translateY(-2px) }
.ty-download svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.legal-inner a { color: var(--teal-deep); text-underline-offset: 3px }
.legal-inner .legal-closing { text-align: center; margin-top: 32px }

@media (max-width: 600px) {
  .story .story-quote { font-size: 1rem; padding: 44px 18px 14px }
}

/* ==========================================================================
   Calm & clean pass — Karen's design values (Oct 2026, see DESIGN-BRIEF.md)
   Invite, don't chase: nothing moves, slides or jumps. Clean lines, flat warm
   backgrounds, no decorative blobs. Purple (from the logo) is the small accent.
   ========================================================================== */
:root { --cream: #FAF7F2; --cream-2: #F3EEE6 }

/* no motion: content is simply there */
.fi, .fi.vis { opacity: 1; transform: none; transition: none }
.hero-content, .hero-img-wrap { animation: none }
.ty-check, .ty-hero * { animation: none !important }
a:hover, button:hover, [class*="card"]:hover, .btn-primary:hover, .ty-blog-link:hover { transform: none !important }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important } }

/* no decorative blobs, glows or offset squares */
.hero::before, .page-header::before, .guide-cta::before, .ty-hero::before { display: none }
.story-img-acc, .about-img-acc { display: none }

/* flat, warm backgrounds instead of gradients */
.hero { background: var(--cream) }
.page-header, .t-program .page-header { background: var(--cream) }
.t-program .coming-soon { background: var(--cream) }
.resonance { background: var(--teal-bg) }
.final-cta { background: var(--cream) }
.guide-cta, .about-quote, .qbanner { background: var(--deep-teal) }

/* softer, quieter shadows */
.hero-img-frame { box-shadow: 0 10px 30px rgba(45,62,66,.08) }

/* purple as the small "pop" accent */
.hero-label, .thrivers-kicker { color: var(--logo-purple) }
.hline, .sec-hdr .hline { background: var(--logo-purple); opacity: .55 }
.testi-card .testi-mark { color: var(--purple-hint); opacity: .5 }

/* Kris Carr-style buttons: they change colour on hover (no movement) */
.btn-primary:hover, .faq-cta a.btn:hover, .ty-about-text .btn:hover, .ty-download:hover,
.ko-form button:hover, .nl-form button:hover, .form-submit:hover, .comment-form button:hover, .suggest-form button:hover {
  background: var(--logo-purple); box-shadow: 0 4px 18px rgba(96,47,102,.25)
}

/* slim free-guide band (Nov 2026): thinner, like the original site */
@media (max-width: 600px) {
  .guide-cta { padding-top: 36px; padding-bottom: 36px }
  .guide-cta h2 { font-size: 1.4rem; margin-bottom: 20px }
}

/* testimonials slider (Nov 2026): never moves on its own; cards slide over only when visitors swipe or use the arrows */
.testi-track { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; outline: none }
.testi-track::-webkit-scrollbar { display: none }
.testi-track:focus-visible { box-shadow: 0 0 0 3px var(--teal-light); border-radius: 20px }
.testi-track .testi-card { flex: 0 0 calc(50% - 16px); scroll-snap-align: start }
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px }
.testi-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--teal-light); background: #fff; color: var(--deep-teal); font-size: 1.1rem; cursor: pointer }
.testi-btn:hover { background: var(--teal-bg, #F0F7F9) }
.testi-btn:disabled { opacity: .35; cursor: default; background: #fff }
.testi-count { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-l); min-width: 90px; text-align: center }
@media (max-width: 900px) {
  .testi-track .testi-card { flex-basis: 88% }
}