/* ========================================================================== KJ GUIDE SYSTEM One stylesheet for guide.kelsiejimenez.com. Matches the client hub at clients.kelsiejimenez.com: warm white ground, Playfair display headings, Times New Roman body, Lato for labels, sage as accent only. Loaded LAST in so it wins over each page's legacy inline styles. ========================================================================== */ :root{ --bg:#FDFCFA; --bg-warm:#F8F5EE; --sand:#F2E8D5; --cream:#F2E8D5; --ink:#1C1C1C; --ink-soft:#6E6E68; --forest:#2B3D30; --forest-2:#344A39; --sage:#99A189; --line:#E8E6DF; --alarm:#c76666; --alarm-ink:#7a2020; --alarm-bg:#fef7f5; --display:"Playfair Display",Georgia,serif; --body:"Times New Roman",Times,serif; --util:"Lato",system-ui,sans-serif; --maxw:1140px; --readw:62ch; /* legacy token names still referenced by old inline CSS */ --dark:#1C1C1C; --green:#2B3D30; --green-mid:#344A39; --mist:#6E6E68; --taupe:#99A189; --warm:#F8F5EE; --linen:#E8E6DF; --mid:#1C1C1C; --light:#6E6E68; --white:#ffffff; } /* ---------- ground ------------------------------------------------------ */ html{scroll-behavior:smooth;scroll-padding-top:80px;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.14rem; line-height:1.78; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6{ font-family:var(--display); font-weight:500; font-style:normal; line-height:1.16; margin:0; color:var(--ink); } p{margin:0 0 1.15em;} a{color:var(--forest);text-underline-offset:3px;} strong{font-weight:700;color:var(--ink);} /* Playfair italic capitals render badly (the J reads as a 7). Every italic display accent uses Times New Roman instead. */ h1 em,h2 em,h3 em,h4 em,h5 em,h6 em, .section-title em,.hero-title em,.hero h1 em, .pull,.letter-quote,.kelsie-note-text,.outcome-title em{ font-family:var(--body); font-style:italic; font-weight:400; color:inherit; } .kj-wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;} .kj-read{max-width:var(--readw);} /* ---------- top bar ----------------------------------------------------- */ .kj-topbar{ border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:60; } .kj-topbar .kj-wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:16px; } .kj-topbar .kj-brand{ font-family:var(--display); font-size:1.02rem; font-weight:500; color:var(--ink); text-decoration:none; line-height:1.2; } .kj-topbar .kj-brand span{ display:block; font-family:var(--util); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; font-weight:700; } .kj-topbar nav a{ margin-left:22px; font-family:var(--util); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); text-decoration:none; white-space:nowrap; } .kj-topbar nav a:hover,.kj-topbar nav a.on{color:var(--forest);} @media (max-width:640px){ .kj-topbar .kj-wrap{padding-left:20px;padding-right:20px;} .kj-topbar nav a{margin-left:13px;font-size:.66rem;letter-spacing:.08em;} .kj-topbar .kj-brand{font-size:.92rem;} } @media (max-width:560px){ .kj-topbar .kj-brand span{display:none;} .kj-topbar nav a{margin-left:11px;font-size:.62rem;} } /* retire the legacy dark strip and the floating glass pill */ .top-bar,.nav-wrap,.kj-legacy-nav{display:none !important;} /* ---------- hero -------------------------------------------------------- */ .hero,.geo-hero,.zone-hero{ position:relative !important; height:auto !important; min-height:44vh !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-end !important; text-align:left !important; overflow:hidden; padding:0 !important; background-color:var(--forest-2) !important; background-position:center 62% !important; background-size:cover !important; background-repeat:no-repeat !important; } .hero::before,.geo-hero::before,.zone-hero::before{ content:'' !important; position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; border-radius:0 !important; background:linear-gradient(180deg, rgba(18,22,18,.14) 0%, rgba(18,22,18,.06) 40%, rgba(18,22,18,.46) 70%, rgba(18,22,18,.76) 100%) !important; pointer-events:none; } .hero::after{content:none !important;} .hero-overlay,.geo-hero-overlay{background:transparent !important;position:absolute !important;inset:0 !important;z-index:1 !important;} /* some heroes use a background-image, others an child */ .hero > img,.geo-hero > img,.zone-hero > img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 62% !important; z-index:0 !important; margin:0 !important; max-width:none !important; padding:0 !important; } .hero > *:not(img),.geo-hero > *:not(img),.zone-hero > *:not(img), .hero-body,.hero-inner{ position:relative !important; inset:auto !important; transform:none !important; z-index:2; } /* the content column inside the hero */ .hero > *:not(img):not(.hero-overlay), .geo-hero > *:not(img):not(.geo-hero-overlay), .zone-hero > *:not(img){ max-width:var(--maxw); margin-left:auto; margin-right:auto; width:100%; padding-left:30px; padding-right:30px; text-align:left !important; } /* children of an inner hero wrapper inherit the gutter from their parent */ .hero-body > *,.hero > div > *{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; max-width:none; text-align:left !important; } .hero-body > p[style]{margin-top:10px !important;} .hero > div{background:none !important;border:none !important;} .hero-label,.hero-eyebrow,.hero .kicker{ font-family:var(--util) !important; font-size:11.5px !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:700 !important; color:#fff !important; opacity:.92; text-shadow:0 1px 10px rgba(0,0,0,.55); margin:0 auto 14px !important; padding-top:60px; display:block; } .hero h1,.hero-title,.hero h2{ font-family:var(--display) !important; font-weight:500 !important; font-style:normal !important; font-size:clamp(1.9rem,4.4vw,3rem) !important; line-height:1.1 !important; color:#fff !important; text-shadow:0 2px 24px rgba(0,0,0,.5); margin:0 auto !important; } .hero h1 em,.hero-title em{color:#fff !important;} .hero-sub,.hero > p:not(.kicker):not(.hero-eyebrow):not(.hero-label){ position:static !important; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:none !important; font-family:var(--util) !important; font-size:.95rem !important; font-weight:400 !important; line-height:1.7 !important; color:rgba(255,255,255,.92) !important; text-shadow:0 1px 12px rgba(0,0,0,.45); margin:16px auto 0 !important; padding-bottom:0 !important; max-width:var(--maxw) !important; } .hero-sub::before{content:none !important;} /* the caption strip under some heroes becomes a quiet line in the hero */ .hero-bar{ background:none !important; border:none !important; padding-top:14px !important; padding-bottom:0 !important; } .hero-bar p{ font-family:var(--util) !important; font-size:.95rem !important; font-weight:400 !important; line-height:1.7 !important; color:rgba(255,255,255,.92) !important; text-shadow:0 1px 12px rgba(0,0,0,.45); margin:0 !important; max-width:70ch; } /* stat rows read as small caps facts, not badges */ .hero-stats{ display:flex !important; flex-wrap:wrap; gap:34px !important; background:none !important; border:none !important; border-top:1px solid rgba(255,255,255,.22) !important; margin-top:26px !important; padding-top:20px !important; } .hero-stats .stat{background:none !important;border:none !important;padding:0 !important;} .stat-num{ font-family:var(--display) !important; font-weight:500 !important; font-size:1.4rem !important; color:#fff !important; line-height:1.2 !important; margin:0 0 3px !important; } .stat-label{ font-family:var(--util) !important; font-size:.64rem !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important; color:rgba(255,255,255,.78) !important; } @media (max-width:640px){.hero-stats{gap:20px !important;}} /* the agent badge lives in the footer now, not over the photograph */ .hero-agent,.agent-circle,.agent-text{display:none !important;} .hero,.geo-hero,.zone-hero{padding-bottom:44px !important;} @media (max-width:640px){ .hero-label,.hero-eyebrow,.hero h1,.hero-title,.hero-sub{padding-left:20px;padding-right:20px;} .hero-label,.hero-eyebrow{padding-top:44px;} } /* ---------- reading column --------------------------------------------- */ .main,.wrap,.container,.content{ max-width:var(--maxw) !important; margin:0 auto !important; padding:64px 30px 72px !important; } .main > *{max-width:var(--readw);} .main > .kelsie-note,.main > .checklist-wrap{max-width:var(--readw);} @media (max-width:640px){ .main,.wrap,.container,.content{padding-left:20px !important;padding-right:20px !important;} } .section{margin-bottom:60px;} .section-eyebrow,.label,.checklist-group-label,.deadline-label{ font-family:var(--util) !important; text-transform:uppercase !important; letter-spacing:.18em !important; font-size:.7rem !important; font-weight:700 !important; color:var(--ink-soft) !important; margin:0 0 18px !important; display:block; } .section-title{ font-family:var(--display) !important; font-weight:500 !important; font-size:clamp(1.9rem,3.4vw,2.6rem) !important; line-height:1.16 !important; color:var(--ink) !important; margin:0 0 14px !important; } .section-title em{color:var(--ink) !important;} .section-body,.lede{ font-family:var(--body) !important; font-size:1.14rem !important; font-weight:400 !important; line-height:1.78 !important; color:var(--ink) !important; margin:0 0 1.15em !important; } .section-body strong{color:var(--ink) !important;font-weight:700 !important;} .divider{width:100%;height:1px;background:var(--line);margin:34px 0;} /* ---------- intro letter -> pull quote ---------------------------------- */ .intro-letter{ background:var(--bg-warm) !important; border:none !important; border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; padding:52px max(30px,calc((100% - var(--maxw))/2 + 30px)) !important; margin:0 !important; } .letter-quote{ font-family:var(--body) !important; font-style:italic !important; font-weight:400 !important; font-size:clamp(1.35rem,2.5vw,1.75rem) !important; line-height:1.42 !important; color:var(--forest) !important; max-width:44ch; margin:0 0 16px !important; } .letter-sig{ font-family:var(--util) !important; font-size:.78rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:700 !important; color:var(--ink-soft) !important; max-width:44ch; margin:0 !important; } /* ---------- numbered steps ---------------------------------------------- */ .steps{ counter-reset:kjstep; display:block !important; border:none !important; background:none !important; margin:24px 0 !important; } .steps .step{ counter-increment:kjstep; display:block !important; background:none !important; border:none !important; border-top:1px solid var(--line) !important; padding:30px 0 4px !important; } .steps .step:hover{background:none !important;} .step-num{ width:auto !important; height:auto !important; border-radius:0 !important; background:none !important; display:block !important; font-family:var(--util) !important; font-size:0 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--sage) !important; font-weight:700 !important; margin:0 0 6px !important; } .step-num::before{ content:"Step " counter(kjstep,decimal-leading-zero); font-size:.72rem !important; } .step-num.final{background:none !important;color:var(--forest) !important;} .step-body > strong{ display:block; font-family:var(--display) !important; font-size:1.32rem !important; font-weight:500 !important; color:var(--ink) !important; line-height:1.22; margin-bottom:8px !important; } .step-body p{ font-family:var(--body) !important; font-size:1.05rem !important; font-weight:400 !important; line-height:1.68 !important; color:var(--ink) !important; } /* emphasis inside a step paragraph stays inline, it is not a heading */ .step-body p strong,.step-body li strong{ display:inline !important; font-family:inherit !important; font-size:inherit !important; font-weight:700 !important; color:var(--ink) !important; margin:0 !important; } .step-badge{ display:inline-block; background:none !important; border:none !important; border-bottom:1.5px solid var(--forest) !important; border-radius:0 !important; padding:6px 0 4px !important; font-family:var(--util) !important; font-size:.7rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:700 !important; color:var(--forest) !important; margin-top:10px !important; } /* ---------- two-up outcome cards ---------------------------------------- */ .outcome-grid{ display:grid !important; grid-template-columns:1fr 1fr; gap:34px !important; margin:24px 0 34px !important; } @media (max-width:720px){.outcome-grid{grid-template-columns:1fr;gap:24px !important;}} .outcome-card{ background:none !important; border:none !important; border-top:2px solid var(--forest) !important; border-radius:0 !important; box-shadow:none !important; padding:22px 0 0 !important; } .outcome-card:hover{border-color:var(--forest) !important;box-shadow:none !important;} .outcome-icon{display:none !important;} .outcome-title{ font-family:var(--display) !important; font-size:1.32rem !important; font-weight:500 !important; color:var(--ink) !important; line-height:1.22; margin:0 0 10px !important; } .outcome-body{ font-family:var(--body) !important; font-size:1.02rem !important; font-weight:400 !important; line-height:1.66 !important; color:var(--ink) !important; } /* ---------- do-not list -------------------------------------------------- */ .donot-list{display:block !important;margin:22px 0 !important;} .donot-item{ display:block !important; background:none !important; border:none !important; border-left:2px solid var(--alarm) !important; padding:6px 0 6px 22px !important; margin-bottom:14px; } .donot-icon{display:none !important;} .donot-text{ font-family:var(--util) !important; font-size:.94rem !important; font-weight:400 !important; line-height:1.6 !important; color:var(--ink-soft) !important; } .donot-text strong{font-weight:700 !important;color:var(--ink) !important;} /* ---------- deadline box and alerts ------------------------------------- */ .deadline-box{ background:none !important; border:none !important; border-left:2px solid var(--sage) !important; border-radius:0 !important; padding:6px 0 6px 30px !important; margin:22px 0 !important; } .deadline-title{ font-family:var(--display) !important; font-size:1.42rem !important; font-weight:500 !important; color:var(--ink) !important; line-height:1.22; margin:0 0 12px !important; } .deadline-body{ font-family:var(--util) !important; font-size:.94rem !important; font-weight:400 !important; line-height:1.6 !important; color:var(--ink-soft) !important; } .deadline-body strong{color:var(--ink) !important;font-weight:700 !important;} .alert{ border-radius:0 !important; padding:8px 0 8px 22px !important; margin:18px 0 !important; font-family:var(--util) !important; font-size:.94rem !important; font-weight:400 !important; line-height:1.6 !important; } .alert-warm,.alert-sage{ background:none !important; border-left:2px solid var(--sage) !important; color:var(--ink-soft) !important; } .alert-red{ background:var(--alarm-bg) !important; border-left:2px solid var(--alarm) !important; color:var(--alarm-ink) !important; padding-right:16px !important; } .alert strong{color:inherit !important;font-weight:700 !important;} .alert-warm strong,.alert-sage strong{color:var(--ink) !important;} /* ---------- the note from Kelsie ---------------------------------------- */ .kelsie-note{ background:var(--bg-warm) !important; padding:52px 30px !important; margin:56px 0 !important; border-left:2px solid var(--sage) !important; } .kelsie-note::before{content:none !important;} .kelsie-note-text{ font-family:var(--body) !important; font-style:italic !important; font-weight:400 !important; font-size:clamp(1.3rem,2.4vw,1.65rem) !important; line-height:1.44 !important; color:var(--forest) !important; max-width:44ch; margin:0 0 18px !important; } .kelsie-note-sig{ font-family:var(--util) !important; font-size:.78rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:700 !important; color:var(--ink-soft) !important; } /* ---------- checklist ---------------------------------------------------- */ .checklist-wrap{ background:var(--bg-warm) !important; border:1px solid var(--line) !important; border-radius:10px; padding:40px 34px !important; margin-top:56px !important; } .checklist-heading{ font-family:var(--display) !important; font-size:clamp(1.6rem,2.8vw,2rem) !important; font-weight:500 !important; color:var(--ink) !important; line-height:1.18; margin:0 0 6px !important; } .checklist-sub{ font-family:var(--util) !important; font-size:.9rem !important; font-weight:400 !important; color:var(--ink-soft) !important; margin:0 0 26px !important; } .progress-wrap{ background:none !important; border:none !important; border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; padding:14px 0 !important; margin-bottom:30px !important; gap:16px; } .progress-label{ font-family:var(--util) !important; font-size:.7rem !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important; color:var(--ink-soft) !important; } .progress-bar{background:var(--line) !important;height:3px !important;} .progress-fill{background:var(--sage) !important;} .progress-pct{ font-family:var(--util) !important; font-size:.8rem !important; font-weight:700 !important; color:var(--forest) !important; } .checklist-group{margin-bottom:26px;} .checklist-group-label{color:var(--sage) !important;letter-spacing:.22em !important;font-size:.72rem !important;margin-bottom:10px !important;} .check-item{border-bottom:1px solid var(--line) !important;padding:13px 0 !important;gap:14px;} .check-item:last-child{border-bottom:none !important;} .check-box{ border:1.5px solid var(--sage) !important; border-radius:3px; background:#fff !important; color:transparent !important; } .check-item.done .check-box{background:var(--sage) !important;border-color:var(--sage) !important;color:#fff !important;} .check-text{ font-family:var(--util) !important; font-size:.98rem !important; font-weight:400 !important; line-height:1.55 !important; color:var(--ink) !important; } .check-item.done .check-text{color:var(--ink-soft) !important;text-decoration:line-through;} .check-note{ font-family:var(--util) !important; font-size:.82rem !important; color:var(--ink-soft) !important; margin-top:3px !important; } /* ---------- text-me call to action -------------------------------------- */ .kj-cta{ background:var(--bg-warm); border-top:1px solid var(--line); padding:56px max(30px,calc((100% - var(--maxw))/2 + 30px)); text-align:left; } .kj-cta a{ display:inline-block; background:var(--forest) !important; color:var(--bg) !important; font-family:var(--util) !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:.02em !important; border-radius:6px !important; padding:15px 30px !important; text-decoration:none; transition:background .18s ease; } .kj-cta a:hover{background:var(--forest-2) !important;} .kj-cta a small{ display:block; font-family:var(--util); font-size:.7rem !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:rgba(253,252,250,.7) !important; margin-bottom:3px !important; font-weight:700 !important; } /* ---------- cross-links and footer -------------------------------------- */ .guide-network-nav{ background:var(--bg) !important; border-top:1px solid var(--line) !important; padding:56px max(30px,calc((100% - var(--maxw))/2 + 30px)) !important; } .guide-network-nav ul{max-width:var(--readw);} .guide-network-nav > div{max-width:var(--readw) !important;margin:0 !important;} .guide-network-nav h2{ font-family:var(--display) !important; font-weight:500 !important; font-size:1.5rem !important; color:var(--ink) !important; margin:0 0 16px !important; } .guide-network-nav li{border-top:1px solid var(--line) !important;padding:9px 0 !important;} .guide-network-nav a{ font-family:var(--body) !important; font-size:1.05rem !important; color:var(--forest) !important; text-decoration:none; } .guide-network-nav a:hover{text-decoration:underline;} footer{ background:var(--bg-warm) !important; border-top:1px solid var(--line) !important; padding:44px max(30px,calc((100% - var(--maxw))/2 + 30px)) 40px !important; display:block !important; font-family:var(--util) !important; font-size:.94rem !important; color:var(--ink-soft) !important; text-align:left !important; } .kj-footer-inner{ max-width:var(--maxw); margin:0; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; } @media (max-width:720px){.kj-footer-inner{grid-template-columns:1fr;gap:24px;}} .footer-brand,.kj-fname{ font-family:var(--body) !important; font-size:1.1rem !important; letter-spacing:0 !important; color:var(--ink) !important; font-weight:400 !important; } .footer-brand span,.kj-fname span{ font-family:var(--util) !important; display:block; font-size:.7rem !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--ink-soft) !important; margin-top:4px !important; font-weight:700 !important; } .footer-right{ text-align:left !important; font-size:.94rem !important; letter-spacing:0 !important; line-height:1.8 !important; color:var(--ink-soft) !important; } footer a{color:var(--forest) !important;text-decoration:none;} footer a:hover{text-decoration:underline;} .kj-disclaimer{font-size:.78rem;line-height:1.6;color:#8B8B84;} /* ========================================================================== LEGACY VOCABULARY Older pages on this site name the same ideas differently. These map the old class names onto the same system so every page reads as one site. ========================================================================== */ /* reading columns and left alignment */ .wrap,.section > .wrap,.resources-inner,.ed-row,.section-head{ text-align:left !important; } .wrap > *,.section-head > *{ max-width:var(--readw); margin-left:0 !important; margin-right:0 !important; text-align:left !important; } /* eyebrows */ .eyebrow,.kicker,.ed-kicker,.section-eyebrow,.q-eyebrow,.checklist-group-label{ font-family:var(--util) !important; text-transform:uppercase !important; letter-spacing:.18em !important; font-size:.7rem !important; font-weight:700 !important; color:var(--ink-soft) !important; margin:0 0 16px !important; display:block; } /* section headings */ .h-sec,.ed-head,.section-head h2,.wrap h2,.section > h2{ font-family:var(--display) !important; font-weight:500 !important; font-style:normal !important; font-size:clamp(1.9rem,3.4vw,2.6rem) !important; line-height:1.16 !important; color:var(--ink) !important; margin:0 0 14px !important; } .wrap h3,.band h3,.block h3{ font-family:var(--display) !important; font-weight:500 !important; font-size:clamp(1.45rem,2.6vw,1.85rem) !important; line-height:1.22 !important; color:var(--ink) !important; margin:0 0 12px !important; } /* body copy */ .lead,.sub,.p-sec,.ed-body,.wrap p,.block p,.band p{ font-family:var(--body) !important; font-size:1.14rem !important; font-weight:400 !important; line-height:1.78 !important; color:var(--ink) !important; text-align:left !important; } .lead{font-size:1.27rem !important;line-height:1.66 !important;} .wrap li,.block li{ font-family:var(--body) !important; font-size:1.05rem !important; line-height:1.62 !important; color:var(--ink) !important; } /* section blocks sit on a hairline rule, the way hub stages do */ .block,.band{ background:var(--bg-warm) !important; border:none !important; border-left:2px solid var(--sage) !important; border-radius:0 !important; padding:30px 28px !important; margin:34px 0 !important; color:var(--ink) !important; text-align:left !important; max-width:var(--readw) !important; } .block *,.band *{color:var(--ink) !important;text-align:left !important;} .block a,.band a{color:var(--forest) !important;} .band a.pill,.band .cta a{color:var(--bg) !important;} /* ---------- dark panels become warm cream ------------------------------- */ .video-shell,.video-soon,.ready,.number,.todo,.phasenav, .col.buydown,.decoder-inner,.stat-tile,.capture,.result, .explore-cta,.form-section,.xm-cta,.hero-copy-col,.step-section.green, .next-phase,.footer-note,.planner-cta,.cta-section,.truth-box,.tip-box, .info-card,.callout-tile,.ed-tip,.alert-important{ background:var(--bg-warm) !important; border:1px solid var(--line) !important; border-radius:10px; color:var(--ink) !important; box-shadow:none !important; } /* doubled class names raise specificity above the legacy rules that set cream text inside these panels */ .video-shell.video-shell *,.video-soon.video-soon *,.ready.ready *, .number.number *,.todo.todo *,.phasenav.phasenav *, .col.buydown.buydown *,.decoder-inner.decoder-inner *,.stat-tile.stat-tile *, .capture.capture *,.result.result *,.form-section.form-section *, .xm-cta.xm-cta *,.hero-copy-col.hero-copy-col *,.step-section.green.green *, .next-phase.next-phase *,.footer-note.footer-note *,.planner-cta.planner-cta *, .cta-section.cta-section *,.truth-box.truth-box *,.tip-box.tip-box *, .info-card.info-card *,.callout-tile.callout-tile *,.ed-tip.ed-tip *, .alert-important.alert-important *{ color:var(--ink) !important; text-shadow:none !important; border-color:var(--line) !important; } .video-soon .play{border-color:var(--sage) !important;} .video-soon .play::before{border-left-color:var(--sage) !important;} .phasenav{border-radius:0;border-left:none !important;border-right:none !important;} .phase-strip{background:var(--bg-warm) !important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .phase-nav{background:none !important;} .phase-btn{color:var(--ink-soft) !important;} .phase-btn.active{background:var(--forest) !important;color:var(--bg) !important;} .phase-btn.active span{color:var(--bg) !important;} .phasenav a,.todo a,.next-phase a,.cta-section a,.planner-cta a,.xm-cta a, .form-section a,.step-section.green a{color:var(--forest) !important;} .step .sn{background:none !important;color:var(--sage) !important;} /* the split review hero keeps its grid: photo one side, copy the other */ .hero:has(.hero-photo-col){ display:grid !important; grid-template-columns:1fr 1fr; min-height:70vh !important; background:var(--bg) !important; padding:0 !important; } .hero:has(.hero-photo-col)::before{content:none !important;} .hero:has(.hero-photo-col) > *{ max-width:none !important; padding-left:0 !important; padding-right:0 !important; margin:0 !important; } .hero:has(.hero-photo-col) .hero-copy-col{ background:var(--bg-warm) !important; border-left:1px solid var(--line); padding:80px 64px !important; } .hero:has(.hero-photo-col) .hero-title, .hero:has(.hero-photo-col) .hero-title span, .hero:has(.hero-photo-col) .hero-eyebrow, .hero:has(.hero-photo-col) .hero-sub, .hero:has(.hero-photo-col) .hero-step-label{ color:var(--ink) !important; text-shadow:none !important; } .hero:has(.hero-photo-col) .hero-eyebrow{color:var(--ink-soft) !important;padding-top:0 !important;} .hero:has(.hero-photo-col) .hero-sub{color:var(--ink-soft) !important;} .hero:has(.hero-photo-col) .hero-step-num{background:var(--sage) !important;color:#fff !important;} @media (max-width:760px){ .hero:has(.hero-photo-col){grid-template-columns:1fr;} .hero:has(.hero-photo-col) .hero-copy-col{padding:52px 28px !important;} } /* heroes with no photograph sit on the ground colour, not a dark slab */ .hero.kj-hero-plain{ background-color:var(--bg-warm) !important; background-image:none !important; min-height:auto !important; padding-top:72px !important; padding-bottom:56px !important; border-bottom:1px solid var(--line); } .hero.kj-hero-plain::before{background:none !important;} .hero.kj-hero-plain,.hero.kj-hero-plain *{ color:var(--ink) !important; text-shadow:none !important; } .hero.kj-hero-plain > p:not(.kicker):not(.hero-eyebrow):not(.hero-label), .hero.kj-hero-plain .hero-sub{color:var(--ink-soft) !important;text-shadow:none !important;} .hero.kj-hero-plain a{color:var(--forest) !important;} .hero.kj-hero-plain .kicker,.hero.kj-hero-plain .hero-eyebrow, .hero.kj-hero-plain .hero-label{color:var(--ink-soft) !important;opacity:1;} .hero.kj-hero-plain .hero-stats{border-top-color:var(--line) !important;} .hero.kj-hero-plain .stat-num{color:var(--ink) !important;} .hero.kj-hero-plain .stat-label{color:var(--ink-soft) !important;} /* ---------- buttons ------------------------------------------------------ */ .cta a,.cta-btn,.btn-green,.btn-submit,.btn-continue,.btn-guide, .section-link-btn,.vidbtn,.qback,.ncback,.handoff a.go,.btn-zillow, .dpbtn.active,.mode-btn.active,.cbtn,.planner-btn,.band a.pill{ background:var(--forest) !important; color:var(--bg) !important; font-family:var(--util) !important; font-size:.94rem !important; font-weight:700 !important; letter-spacing:.02em !important; text-transform:none !important; border:none !important; border-radius:6px !important; padding:13px 24px !important; text-decoration:none !important; display:inline-block; } .cta a:hover,.cta-btn:hover,.btn-green:hover,.btn-submit:hover, .btn-continue:hover,.btn-guide:hover,.section-link-btn:hover{ background:var(--forest-2) !important; } a.kj-skip{position:absolute;left:-9999px;} a.kj-skip:focus{left:16px;top:16px;position:fixed;background:var(--bg);color:var(--forest);padding:10px 16px;border-radius:4px;z-index:80;border:1px solid var(--line);} /* booking link in top nav (Calendly) */ .kj-topbar nav a.kj-book{color:var(--forest);} .kj-topbar nav a.kj-book:hover{color:var(--ink);} @media (max-width:640px){ .kj-topbar nav a{margin-left:10px;letter-spacing:.05em;} } @media (max-width:560px){ .kj-topbar nav a{margin-left:8px;font-size:.58rem;letter-spacing:.03em;} } @media (max-width:430px){ .kj-book-rest{display:none;} } /* ========================================================================== LEFT-ALIGN + CHIP CLEANUP Legacy inline styles still centered section headings and rendered the phase nav as rounded pills. The editorial system is left-aligned, and uses letterspaced caps links with a hairline underline, never pills. ========================================================================== */ /* headings and their eyebrows align left like clients.kelsiejimenez.com */ .h-sec,.ed-head,.section-head h2,.wrap h2,.section > h2{text-align:left !important;} .eyebrow,.kicker,.ed-kicker,.section-eyebrow,.q-eyebrow{text-align:left !important;} .p-sec,.lead,.sub,.ed-body{margin-left:0 !important;margin-right:0 !important;text-align:left !important;} /* centered hero copy is the one exception — it stays centered over the photo */ .hero .kicker,.hero-label,.hero-eyebrow{text-align:left !important;} /* phase nav: hairline strip of caps links, no pills */ .phasenav{background:var(--bg) !important;border:none !important; border-bottom:1px solid var(--line) !important;border-radius:0 !important;} .phasenav-inner{padding:18px 30px !important;gap:0 30px !important;max-width:1140px !important;} .phasenav a{border-radius:0 !important;border:none !important;background:none !important; padding:6px 0 5px !important;margin:0 !important; font-family:var(--util) !important;font-size:.78rem !important;letter-spacing:.14em !important; text-transform:uppercase !important;font-weight:700 !important; color:var(--forest) !important;border-bottom:1.5px solid var(--forest) !important;} .phasenav a:hover{color:var(--forest-2) !important;border-bottom-color:var(--forest-2) !important;} .phasenav a .n{color:var(--sage) !important;margin-right:7px !important;} /* amber alerts were the last tinted block — sage rule, no fill */ .alert-amber{background:none !important;border-left:2px solid var(--sage) !important; color:var(--ink-soft) !important;border-radius:0 !important;} .alert-amber strong{color:var(--ink) !important;}