/*
Theme Name: CESSON (Astra child)
Template: astra
Description: CESSON child theme for Astra. The whole CESSON look lives in this one file (no Customizer CSS). Nav and footer, meta descriptions, schema, GTM, performance and SEO/GEO are in functions.php. No plugins.
Version: 1.4.2
Author: CESSON
*/

/* =============================================================================
   HOW THIS FILE IS ORGANISED
   1. Tokens and base type        5. Page components (in page order)
   2. Layout helpers              6. Footer
   3. Site nav                    7. Blog and posts (Astra templates)
   4. Hero                        8. Astra overrides (the only !important block)
   Rule of thumb: add new styles to the section they belong to. Do not add
   !important outside section 8. If Astra wins a fight, add ONE line to 8.
   ============================================================================= */


/* 1. Tokens and base type ---------------------------------------------------- */
:root{
  --red:#a02426;--deep:#79222a;--bright:#c42c3b;--ink:#0a0a0a;--paper:#fffdfa;
  --grey:#4a4a4a;--line:#e3d9d3;--wash:#f6efe9;--tint:#fbe9e9;--pink:#f6dcdc;
  --serif:"Jost","Jost Fallback",sans-serif;
  --sans:"Inter","Inter Fallback",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.02;margin:0 0 .5em;letter-spacing:-.025em}
h1{font-size:clamp(2.8rem,6.4vw,5.6rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit}
.eyebrow{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.lede{font-size:1.25rem;color:var(--grey);max-width:56ch}
.loud{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.02em;color:var(--ink)}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;padding:16px 28px;border-radius:4px;font-size:1rem;transition:background .15s;max-width:100%;white-space:normal;text-align:center}
.btn:hover{background:var(--deep)}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.link:hover{color:var(--red)}
.mark{position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.16em;background:var(--red);opacity:.9;z-index:-1}
.num{font-family:var(--serif);color:var(--red);font-size:.95rem;font-weight:600;display:block;margin-bottom:8px}


/* 2. Layout helpers ------------------------------------------------------------ */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;min-width:0}
.narrow{max-width:760px}
section{padding:72px 0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.wash{background:var(--wash)}
.redsec{background:var(--tint);color:var(--ink)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:860px){
  .grid3,.grid2{grid-template-columns:1fr;gap:32px}
  section{padding:64px 0}
}


/* 3. Site nav (markup comes from functions.php: cesson_nav_html) --------------- */
nav.site{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:5}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;height:76px}
.logo img{height:64px;width:auto;display:block}
.menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center}
.menu>li{position:relative}
.menu a{text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap}
.menu a:hover{color:var(--red)}
.menu .btn{padding:11px 18px;font-size:.9rem}
.dd{position:absolute;top:34px;left:-24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.08);padding:22px 28px;display:none;width:640px;grid-template-columns:repeat(3,1fr);gap:28px}
.menu>li:hover .dd{display:grid}
.dd .eyebrow{margin-bottom:8px;font-size:.7rem}
.dd a{display:block;padding:5px 0;font-weight:500}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 14px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink)}
/* Dropdown opened by tap (cesson.js adds .dd-open on touch/narrow screens) */
nav.site .menu>li.dd-open>.dd{display:block;position:static;transform:none;box-shadow:none}
/* Narrow screens: burger + stacked menu */
@media(max-width:960px){
  nav.site .wrap{flex-wrap:wrap;height:auto;min-height:76px}
  .burger{display:block}
  .menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 22px}
  .menu.open{display:flex}
  .menu>li{border-top:1px solid var(--line)}
  .menu>li:last-child{border-top:0}
  .menu>li>a{display:block;padding:13px 0}
  .dd{position:static;display:block;width:auto;box-shadow:none;border:0;padding:0 0 14px 16px}
  .menu>li:hover .dd{display:block}
  .dd>div{margin-bottom:12px}
  .menu .btn{display:inline-block;margin:14px 0 0}
}
/* Phones: logo and Menu button on one line */
@media(max-width:600px){
  nav.site .wrap{padding-left:16px;padding-right:16px}
  nav.site .logo{height:60px}
  nav.site .logo img{height:44px}
  nav.site .burger{padding:8px 12px}
}


/* 4. Hero ---------------------------------------------------------------------- */
.hero{padding:96px 0 72px;background:var(--red);color:#fff}
.hero h1{max-width:18ch}
.hero .eyebrow{color:#fff;opacity:.9}
.hero .lede{color:var(--pink)}
.hero .btn{background:var(--ink)}
.hero .btn:hover{background:#000}
.hero .link{border-bottom-color:#fff;color:#fff}
.hero .cta{margin-top:36px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hero .cta small{display:block;color:#fff;font-size:.85rem;font-weight:400}
.hero .cta .link small{max-width:none}
.hero .notfor{border-left-color:#fff;color:#fff}
.hero .loud{color:#fff}
.hero .mark::after{background:#fff;opacity:.35}
.notfor{margin-top:40px;font-family:var(--serif);font-weight:600;font-size:1.1rem;border-left:3px solid var(--red);padding-left:16px;max-width:52ch}


/* 5. Page components ----------------------------------------------------------- */
/* Proof strip */
.strip{background:var(--ink);color:#fff;padding:30px 0;font-size:.9rem}
.strip .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.strip .loud{color:#fff}
.strip .names{font-family:var(--serif);font-size:1rem;color:var(--pink);display:flex;gap:28px;flex-wrap:wrap}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);padding:26px 26px 22px;border-radius:6px}
.card.red{border-top-color:var(--red);background:var(--tint)}
.card .price{font-family:var(--serif);font-size:2rem;font-weight:600;margin:6px 0 10px}
.card .price small{font-family:var(--sans);font-size:.9rem;font-weight:400;color:var(--grey)}
.card p{font-size:1rem;color:var(--grey)}

/* Program grid (homepage, pricing) */
.prog{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 48px}
.prog>div:not(.group){background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 24px}
.prog>div:empty{display:none}
.prog .group{grid-column:1/-1;margin-top:26px}
.prog .group:first-child,.prog .group+.group{margin-top:0}
.prog h3{font-size:1.25rem;margin-bottom:.35em}
.prog h3 a{text-decoration:none}
.prog h3 a:hover{color:var(--red)}
.prog p{font-size:.98rem;color:var(--grey);margin:0}
@media(max-width:860px){.prog{grid-template-columns:1fr}}

/* Promises */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.promise div{border-left:2px solid var(--red);padding-left:22px}
.promise h3{font-size:1.15rem}
.promise p{font-size:.98rem;color:var(--grey);margin:0}
.promise p.verbatim{color:var(--ink);font-weight:500}
.redsec .promise div{border-left-color:var(--red)}
@media(max-width:860px){.promise{grid-template-columns:1fr}}

/* Timeline (Why CESSON) */
.tl{list-style:none;margin:40px 0 0;padding:0;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 28px 34px}
.tl li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid #fff}
.tl b{font-family:var(--serif);font-size:1.15rem;display:block}
.tl span{color:var(--grey)}
.skip{margin-top:28px;padding:22px 26px;background:var(--wash);border-left:2px solid var(--ink);font-size:.98rem}

/* FAQ and talks accordion (cesson.js toggles aria-expanded and .a.open) */
.faq{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.faq li{border-bottom:1px solid var(--line)}
.faq button{width:100%;text-align:left;background:none;border:0;font:inherit;font-family:var(--serif);font-size:1.25rem;font-weight:600;padding:22px 48px 22px 0;cursor:pointer;position:relative;color:var(--ink)}
.faq button::after{content:"+";position:absolute;right:4px;top:18px;font-size:1.8rem;font-weight:400;color:var(--red);transition:transform .2s}
.faq button[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq button:hover{color:var(--red)}
.faq .a{display:none;padding:0 0 26px;color:var(--grey);max-width:64ch}
.faq .a.open{display:block;background:var(--tint);padding:18px 22px 22px;border-radius:6px;margin-bottom:18px;max-width:none}
.talks button .hook{display:block;font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--grey);margin-top:8px}
.talks .a p{max-width:64ch}
.talks .a p:last-child{margin-bottom:0}

/* Closing CTA band */
.band{background:var(--ink);color:#fff;padding:80px 0}
.band h2{color:#fff;max-width:22ch}
.band p{color:#cfcfcf}
.band .btn{background:var(--red)}
.band .btn:hover{background:var(--bright)}

/* Program pages */
.qa{background:var(--tint);border-left:3px solid var(--red);padding:32px 36px;margin:0 0 20px}
.qa h3{margin-bottom:.4em}
.qa p{margin:0;color:var(--ink)}
.lines{list-style:none;padding:0;margin:0;counter-reset:n}
.lines li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--line)}
.lines li:last-child{border-bottom:1px solid var(--line)}
.lines li::before{counter-increment:n;content:"0" counter(n);font-family:var(--serif);font-size:1.6rem;color:var(--red);font-weight:600;line-height:1}
.lines h3{margin-bottom:.3em;font-size:1.3rem}
.lines p{margin:0;color:var(--grey);font-size:1rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps h3{font-size:1.2rem}
.steps p{color:var(--grey);font-size:1rem;margin:0}
.terms-inline{font-family:var(--serif);font-size:1.5rem;font-weight:600;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.terms-inline small{display:block;font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--grey);margin-top:8px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* Pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.tiers.two{grid-template-columns:1fr 1fr}
.tier{display:flex;flex-direction:column;padding:40px 36px;border-right:1px solid var(--line)}
.tier:last-child{border-right:0}
.tier.feat{background:var(--tint)}
.tier .who{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--red)}
.tier h3{font-size:1.6rem;margin:10px 0 4px}
.tier .price{font-family:var(--serif);font-size:2.6rem;font-weight:700;line-height:1;margin:14px 0 4px}
.tier .price small{font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--grey)}
.tier .does{font-weight:600;margin:14px 0 22px}
.tier ul{list-style:none;padding:0;margin:0 0 26px}
.tier ul li{padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative;font-size:.98rem}
.tier ul li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--red)}
.tier .terms{font-family:var(--serif);font-size:2.6rem;font-weight:700;line-height:1.05;margin-top:auto}
.tier .terms small{display:block;font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--grey);margin-top:10px}
.tier .terms em{font-style:normal;color:var(--red)}
.note{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.note p{color:var(--grey)}
@media(max-width:860px){
  .tiers,.tiers.two{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--line)}
  .note{grid-template-columns:1fr;gap:32px}
}

/* AI Reality Check page */
.grades{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.grades li{border-top:1px solid var(--line);padding-top:18px}
.grades b{font-family:var(--serif);font-size:1.2rem;display:block;margin-bottom:6px}
.grades b i{font-style:normal;color:var(--red);margin-right:10px}
.grades p{margin:0;color:var(--grey);font-size:1rem}
.keep{list-style:none;padding:0;margin:28px 0 0}
.keep li{padding:12px 0 12px 24px;border-top:1px solid var(--line);position:relative}
.keep li:last-child{border-bottom:1px solid var(--line)}
.keep li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;background:var(--red)}
.calendly-inline-widget{margin-top:32px;border:1px solid var(--line);border-radius:6px;background:#fff}
@media(max-width:860px){.grades{grid-template-columns:1fr;gap:22px}}

/* Comparison table */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:40px}
table.compare{width:100%;border-collapse:collapse;font-size:.98rem;min-width:640px}
table.compare th,table.compare td{text-align:left;padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
table.compare th{font-family:var(--serif);font-size:1.05rem;font-weight:600}
table.compare thead th{border-top:0;padding-top:0}
table.compare th.dfy,table.compare td.dfy{background:var(--wash)}
table.compare td .yes{color:var(--red);font-weight:600}
table.compare td .no{color:var(--grey)}
.placeholder{border:2px dashed var(--red);background:var(--tint);padding:36px;text-align:center;font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--red);border-radius:6px}

/* Testimonials (Speaking page): grid and carousel (cesson.js drives prev/next) */
.testi{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px}
.testi img{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:12px;display:block}
.testi strong{display:block;font-family:var(--serif);font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--ink)}
.testi p{margin:0;color:var(--grey);font-size:.92rem}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.testi-carousel-wrap{position:relative;margin-top:40px}
.testi-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;padding:4px 4px 16px;-webkit-overflow-scrolling:touch}
.testi-carousel .testi{flex:0 0 320px;scroll-snap-align:start}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.1);font-size:1.3rem;color:var(--ink);z-index:2;padding:0}
.carousel-btn:hover{background:var(--wash)}
.carousel-btn.prev{left:-8px}
.carousel-btn.next{right:-8px}
@media(max-width:960px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.carousel-btn{display:none}.testi-carousel .testi{flex-basis:82vw}}
@media(max-width:640px){.testi-grid{grid-template-columns:1fr}}


/* 6. Footer (markup comes from functions.php: cesson_footer_html) -------------- */
footer{padding:48px 0;font-size:.9rem;color:var(--grey)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{text-decoration:none;margin-right:22px}
footer a:hover{color:var(--red)}


/* 7. Blog and posts (Astra's templates, restyled) ------------------------------ */
.blog .site-content,.archive .site-content,.single-post .site-content{padding-top:8px}
.blog .entry-title a,.archive .entry-title a{color:var(--ink);text-decoration:none}
.blog .entry-title a:hover,.archive .entry-title a:hover{color:var(--red)}
.blog .ast-article-post,.archive .ast-article-post{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}
.blog .ast-excerpt-container,.archive .ast-excerpt-container{font-family:var(--sans)}
.single-post .entry-content,.single-post .entry-header{max-width:72ch;margin-left:auto;margin-right:auto}
.single-post .entry-content p,.single-post .entry-content li{font-size:1.15rem;line-height:1.7}
.single-post .entry-content h2{font-size:1.9rem;margin-top:1.6em}
.single-post .entry-content img,.blog img,.archive img{max-width:100%;height:auto;border-radius:6px}
.migrated-featured{margin:0 0 32px}
.single-post .entry-content .migrated-featured img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* Byline: date only (the author span is hidden; the meta wrapper is zeroed so no stray separator shows) */
.single-post .entry-meta .posted-on a,.blog .entry-meta .posted-on a,.archive .entry-meta .posted-on a{color:var(--grey);text-decoration:none}
/* Closing CTA under every post (markup from functions.php) */
.cesson-post-cta{background:var(--ink);color:#fff;padding:56px 24px;margin:56px 0 0;text-align:center}
.cesson-post-cta h2{color:#fff;font-size:2rem;max-width:22ch;margin:0 auto 20px}
.cesson-post-cta .btn{background:var(--red);font-weight:700;border-radius:6px}
.cesson-post-cta .btn:hover{background:var(--deep)}


/* 8. Astra overrides ------------------------------------------------------------
   Astra's own stylesheet and its inline "dynamic CSS" are still loaded (they
   carry the page wrappers and the blog templates), and a few of their rules
   outrank ours. Everything that needs !important lives here and nowhere else. */
/* Locked headline leading: Astra's .entry-content :where(h1) sets 1.4; this outranks it without !important. Decided 23 Sep 2026. */
.entry-content h1,.entry-content h2,.entry-content h3{line-height:1.02}
/* Pages are full-bleed: sections run edge to edge and .wrap centres the content (Astra's boxed container was the "red box" look). */
.page .site-content .ast-container{max-width:none;padding:0}
.page .site-content #primary,.page #primary .site-main{margin:0}
.page .entry-content>*{max-width:none}
body,p,li,span,div{font-family:var(--sans) !important}
h1,h2,h3,.tier .price,.tier .terms,.terms-inline{font-family:var(--serif) !important}
.tier .price small,.tier .terms small,.terms-inline small{font-family:var(--sans) !important}
.entry-content h1,.entry-content h2,.entry-content h3,h1,h2,h3,.tier .price,.tier .terms{font-weight:700}
h1{font-size:clamp(2.8rem,6.4vw,5.6rem) !important}
h2{font-size:clamp(2rem,4vw,3.4rem) !important}
h3{font-size:1.35rem !important}
.single-post h1.entry-title,.blog h1,.archive h1{font-size:clamp(2rem,4.2vw,3.4rem) !important;max-width:24ch;line-height:1.08}
.blog .entry-title,.archive .entry-title{font-size:1.7rem !important}
a,.menu a,.link,.btn{text-decoration:none !important}
.menu a{white-space:nowrap !important}
.link{border-bottom:2px solid var(--red) !important;padding-bottom:2px !important}
.hero .link{border-bottom-color:#fff !important}
.hero h1,.hero h2,.hero h3{color:#fff !important}
.hero .cta small{color:#fff !important}
@media(min-width:961px){
  nav.site ul#menu.menu{display:flex !important}
  nav.site button.burger{display:none !important}
}
.single-post .entry-meta,.blog .entry-meta,.archive .entry-meta{font-size:0 !important;line-height:0}
.single-post .entry-meta .posted-on,.blog .entry-meta .posted-on,.archive .entry-meta .posted-on{font-size:.95rem !important;line-height:1.5}
.single-post .entry-meta .posted-by,.blog .entry-meta .posted-by,.archive .entry-meta .posted-by{display:none !important}