@font-face{font-family:'Zodiak';src:url('https://thekaymedia.com/wp-content/uploads/tkm-v2/fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('https://thekaymedia.com/wp-content/uploads/tkm-v2/fonts/gs-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('https://thekaymedia.com/wp-content/uploads/tkm-v2/fonts/gs-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('https://thekaymedia.com/wp-content/uploads/tkm-v2/fonts/gs-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
    --ground:#FFFFFF;      /* pure white — brightest per feedback */
    --panel:var(--s-warm);  /* legacy alias -> warm surface */
    --paper:var(--s-soft);  /* legacy alias -> soft surface */
    --ink:#1A1712; --graphite:#564F41; --line:#E3DCCE;
    /* SURFACE SYSTEM — exactly three */
    --s-base:#FFFFFF;      /* default sections */
    --s-soft:#FAF9F6;      /* subtle bands: statbar, proof, footer */
    --s-warm:#F8F2E5;      /* the two 'moments': how, close */
    --bronze:#9A7B4F; --bronze-ink:#7E6440;
    --gold:#BE8A2E;        /* strong CTA fill — saturated on-brand gold */
    --gold-text:#FBF6EA;
    --serif:'Zodiak',Georgia,serif; --sans:'General Sans',system-ui,sans-serif;
  }
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}
/* ---------- nav: minimal, airy ---------- */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--ground);border-bottom:1px solid rgba(90,75,55,.16)}
/* the hero already pads 76px/118px to clear the 62px bar, so fixed needs no compensation */
  .nav.scrolled{box-shadow:0 1px 12px -6px rgba(60,45,20,.28)}
.burger{display:none;width:42px;height:42px;margin-left:-9px;border:0;background:none;cursor:pointer;
    flex-direction:column;justify-content:center;gap:5px;padding:0 9px}
.burger span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .26s,opacity .2s}
.burger span:nth-child(1){width:20px}
.burger span:nth-child(2){width:14px}
.burger span:nth-child(3){width:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:20px}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:20px}
.b-short{display:none}
.c-short{display:none}
.mnav{position:fixed;inset:var(--navh) 0 0;z-index:55;background:rgba(26,23,18,.28);backdrop-filter:blur(2px);
    opacity:0;transition:opacity .24s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav.open{opacity:1}
.mnav-panel{background:var(--s-base,#fff);border-bottom:1px solid #ECE6DA;padding:22px clamp(24px,6vw,32px) 30px;
    transform:translateY(-10px);transition:transform .26s}
.mnav.open .mnav-panel{transform:translateY(0)}
.mnav-eye{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-ink);
    margin:20px 0 10px;padding-top:14px;border-top:1px solid #ECE6DA}
.mnav-eye:first-child{margin-top:4px;padding-top:0;border-top:0}
.mnav-panel a{display:block;font-size:16px;line-height:1.35;color:var(--ink);padding:9px 0;text-decoration:none}
.mnav-panel a:active{color:var(--gold)}
.mnav-cta{margin-top:22px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:#231802!important;background:linear-gradient(135deg,#FBDA76,#EFC751);
    border-radius:100px;padding:15px 20px!important}
.mnav-tel{text-align:center;color:var(--graphite)!important;font-size:14px}
@media(prefers-reduced-motion:reduce){
.mnav,.mnav-panel,.burger span{transition:none}
}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:62px}
.nav-l{justify-self:start;display:flex;align-items:center;gap:32px}
.nav-l a.link,.nav-r a.link{font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite);transition:color .2s}
.nav-l a.link:hover,.nav-r a.link:hover{color:var(--ink)}
.brand{justify-self:center;font-family:var(--sans);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:15px;white-space:nowrap}
.nav-r{justify-self:end;display:flex;align-items:center;gap:32px}
.nav-cta{position:relative;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#231802;border:1px solid rgba(255,250,235,.55);border-radius:100px;padding:9px 20px;
    background:linear-gradient(135deg,#FBDA76,#EFC751);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(90,60,10,.12),0 5px 14px -8px rgba(175,132,28,.34);transition:transform .2s,filter .2s}
.nav-cta::before{display:none}
.nav-cta .lbl{position:relative;z-index:2}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
@media (max-width:940px){
/* Absolutely-centred wordmark: a 3-column grid ties the side columns to each
       other's width, which squeezed the CTA onto two lines. Centring the brand on
       the bar itself keeps it optically centred whatever the sides do. */
    .nav-in{position:relative;display:flex;justify-content:space-between;align-items:center;height:56px}
.nav-l{display:none}
.nav-r .link{display:none}
.burger{display:flex;width:34px;height:34px;margin-left:-8px;padding:0 7px;gap:4.5px}
.burger span:nth-child(1),.burger span:nth-child(3){width:18px}
.burger span:nth-child(2){width:12px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);width:18px}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);width:18px}
/* .nav-in .brand, not .brand: a later touch-target rule sets .brand{position:relative}
and would otherwise win on source order and un-centre the wordmark. */
    .nav-in .brand{position:absolute;left:50%;transform:translateX(-50%);justify-self:auto;
      font-size:11.5px;letter-spacing:.18em;white-space:nowrap}
.b-short{display:none}
/* full wordmark fits once the CTA is shortened */
    .nav-cta{font-size:9.5px;letter-spacing:.1em;padding:8px 13px;white-space:nowrap}
.c-full{display:none}
.c-short{display:inline}
}
@media (max-width:520px){
.nav-in{height:76px}
}
/* ===================== LANDING-PAGE SECTIONS ===================== */
  .lp-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}
/* ---- site footer ---- */
  .ftr{background:var(--s-soft);border-top:1px solid #ECE6DA;padding:clamp(46px,5.5vw,64px) 0;position:relative;z-index:3;
    --gold:#83651D;--serif:'Zodiak',Georgia,serif}
.ftr-top{display:grid;grid-template-columns:1.35fr .85fr 1.05fr .95fr;gap:clamp(22px,3vw,44px);padding-bottom:clamp(30px,3.4vw,42px);border-bottom:1px solid #ECE6DA}
.ftr-word{font-family:var(--sans);font-weight:600;font-size:15px;color:#1A1712;letter-spacing:.2em;text-transform:uppercase}
.ftr-bot a{color:#6E6556;text-decoration:none}
.ftr-bot a:hover{color:var(--gold)}
.ftr-brand p{font-size:13px;line-height:1.6;color:#564F41;margin:12px 0 0;max-width:40ch}
.ftr-nav{display:flex;flex-direction:column;gap:11px;align-content:start}
.ftr-h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-ink);margin:0 0 3px}
.ftr-nap{margin-top:20px}
.ftr-nav a{font-size:13px;color:#3D3122;text-decoration:none;width:fit-content}
.ftr-nav a:hover{color:var(--gold)}
.ftr-nap{display:flex;flex-direction:column;gap:11px;font-size:13px}
.ftr-nap span{color:#564F41}
.ftr-nap a{color:#1A1712;text-decoration:none;font-weight:600;width:fit-content}
.ftr-nap a:hover{color:var(--gold)}
.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;font-size:12px;color:#6E6556}
@media(max-width:1040px) and (min-width:761px){
.ftr-top{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:760px){
.ftr-top{grid-template-columns:1fr;gap:26px}
.ftr-bot{flex-direction:column;gap:8px}
}
/* scoped — never applied outside the chrome */
.nav *,.mnav *,.ftr *{box-sizing:border-box}
.nav a,.mnav a,.ftr a{text-decoration:none;color:inherit}
.ftr p,.ftr span,.ftr div{margin:0}
.mnav-panel a,.ftr-nav a{display:block}
/* the footer inner wrap must stay centered. The extracted .lp-wrap{margin:0 auto} is
   out-specified on inner pages, so the whole footer sat pinned to the left (subtle at
   ~1480px, a 600px right-gap at 1920). Force the auto margins back (2026-08-06). */
footer.ftr .lp-wrap{max-width:1320px!important;margin-left:auto!important;margin-right:auto!important}
/* the theme's own header is replaced by ours */
.elementor-location-header{display:none!important}
/* the homepage hero pads itself to clear the fixed bar; inner pages do not, so they
   need the offset. Safe to set body here because this file loads ONLY on inner pages. */
body{padding-top:62px}
@media(max-width:940px){body{padding-top:56px}}
/* at <=520 the bar grows to 76px (see .nav-in), so the offset must grow with it,
   or the first line of content hides under the fixed nav (mobile, 2026-07-30) */
@media(max-width:520px){body{padding-top:80px}}

/* ---- accessibility corrections for legacy page content (Lighthouse 2026-07-27) ----
   All measured failures, all in page content rather than the chrome. Scoped so they
   cannot touch the nav/footer.
   !important is required: these blocks ship their own inline <style> in the page body,
   which loads after this stylesheet and would otherwise win.
   NOTE (2026-08-06): the old .rev-calculator .calc-right overrides forced DARK text on what
   is actually a DARK panel (the earlier assumption that it rendered on cream was wrong), so
   they are removed. The Ad Revenue Calculator was rewritten with correct, self-scoped
   contrast (cream labels + bright-gold values on #211D18); it no longer needs any override. */
.tkm-services-eyebrow{color:#6F6862!important}                      /* was 3.69:1 at 12px */
.elementor p a:not(.elementor-button){color:#8A6B2E!important}      /* gold links were 2.15:1 */
/* NOTE: the Promo Profit calculator (.tkm-calc .tkm-right) renders on a DARK panel with white
   labels + gold values, which is correct. An automated contrast pass misread its background as
   cream and a "fix" here made the labels dark-on-dark; reverted after a screenshot caught it.
   Leave that panel's own colours alone. */
/* plain in-content links (no class) rendered at the pale brand gold #C9AA6F (2.22); the CTA
   buttons carry a class so :not([class]) leaves them alone. */
.page-content a:not([class]), .tkm-wrap a:not([class]){color:#8A6B2E!important}

/* Same failure as the calculator panel, but on every inner page (found 2026-07-31).
   .page-header h1.entry-title inherits white from a theme rule intended for a dark
   title banner that this template never renders, so the page title was white-on-white:
   a 49px heading occupying ~59px of real layout that no visitor could read, and text
   hidden that way is also the pattern search engines treat as deceptive. Made visible
   in the site ink and sized to sit above the hero rather than compete with it. */
/* The WordPress page title (h1.entry-title) sits above each page's own hero/masthead. Sized
   up to a serif hero it DUPLICATED that hero (word-for-word on the guide), so it now renders
   as a small uppercase kicker above the hero: still the visible, crawlable h1 with its text
   unchanged, but no longer a second competing headline. Exception: the pillar guide's content
   masthead repeats the title exactly, so there the header is removed visually (kept in the DOM
   for SEO, verified present) and the designed masthead is the sole title. Fixed 2026-08-04
   after the 08-04 restyle made the duplication glaring. */
.page-header{padding:34px 0 2px!important}
.page-header .entry-title,.page-header h1{
  font-family:var(--sans)!important;font-weight:600!important;font-size:13px!important;line-height:1.3!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:#7E6440!important;margin:0!important}
body.page-id-6027 .page-header{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* The author-credibility block that opens every money page, and the geo table on the
   Toronto page, ship their own rules in the page body but a theme rule was winning on
   background/border/padding, so both rendered as unstyled plain text (found 2026-07-31:
   .tkm-cred computed to a transparent background with 0 padding on all 9 pages that use
   it). Restated here with !important, which fixes every page at once and avoids
   republishing nine posts, three of which currently hold page-one positions. */
.tkm-cred{background:#FAF7EF!important;border:1px solid #EBE3D2!important;border-radius:12px!important;padding:18px 22px!important;margin:0 0 26px!important}
.tkm-cred p{margin:0 0 9px!important;font-size:16px!important;line-height:1.6!important;color:#2b2b2b!important}
.tkm-cred p:last-child{margin-bottom:0!important}
.tkm-cred-lead{font-size:16.5px!important;color:#1A1712!important}
.tkm-geo{width:100%!important;border-collapse:collapse!important;margin:18px 0 24px!important;font-size:15px!important}
.tkm-geo th{text-align:left!important;background:#F2EEE6!important;color:#3a3430!important;font-size:13px!important;letter-spacing:.04em!important;text-transform:uppercase!important;padding:10px 12px!important;border-bottom:1px solid #DAD5CA!important}
.tkm-geo td{padding:11px 12px!important;border-bottom:1px solid #EBE3D2!important;vertical-align:top!important;line-height:1.55!important;color:#3a3430!important}
.tkm-geo td:first-child{font-weight:600!important;white-space:nowrap!important}

/* ===================== CONTENT TYPOGRAPHY — V2 match (2026-08-04) =====================
   Brings the body of every authored content page up to the homepage's look: Zodiak serif
   headings, General Sans body, warm ink. Scoped to the two content wrappers only:
     .page-content  -> the money pages + the pillar guide
     .tkm-wrap      -> the blog posts
   Neither wrapper exists on the Elementor-built marketing pages (about-us, contact,
   clinic-owners, solo-injector, case-studies, cert-marketing), so those are untouched.
   Uses the DIRECT-CHILD combinator on purpose: only the bare content flow (section
   headings, paragraphs, lists) is restyled. Every tkm-* component (hero band, cards,
   author box, dark CTA, geo tables) is a nested div and keeps its own styling exactly.
   !important because Elementor's kit ships generic h2/p rules at equal specificity that
   would otherwise win on source order. Pure CSS: no page content is edited. */
.page-content > h2, .tkm-wrap > h2{
  font-family:var(--serif)!important;font-weight:400!important;color:#1A1712!important;
  font-size:clamp(27px,3.2vw,38px)!important;line-height:1.12!important;letter-spacing:-.014em!important;
  margin:40px 0 14px!important}
.page-content > h3, .tkm-wrap > h3{
  font-family:var(--serif)!important;font-weight:400!important;color:#1A1712!important;
  font-size:22px!important;line-height:1.22!important;letter-spacing:-.008em!important;margin:26px 0 8px!important}
.page-content > p, .tkm-wrap > p,
.page-content > ul > li, .page-content > ol > li,
.tkm-wrap > ul > li, .tkm-wrap > ol > li{
  font-family:var(--sans)!important;font-size:17px!important;line-height:1.72!important;color:#2b2b2b!important}
.page-content > p{margin:0 0 16px!important}
.page-content > ul, .page-content > ol, .tkm-wrap > ul, .tkm-wrap > ol{margin:0 0 18px 20px!important}
.page-content > ul > li, .page-content > ol > li,
.tkm-wrap > ul > li, .tkm-wrap > ol > li{margin:0 0 7px!important;padding-left:2px}
/* strong stays bold in the same warm ink; content links keep the gold from the a11y rule above */
.page-content > p strong, .tkm-wrap > p strong,
.page-content > ul strong, .tkm-wrap > ul strong{color:#1A1712!important;font-weight:600!important}
/* the two showpiece component headings — the hero-band feature line and the dark CTA
   headline — go serif too, so they read as the homepage's serif centrepieces rather than
   bold sans. These are the only tkm-component internals we touch, and only the font. */
.tkm-hero h2{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.018em!important;line-height:1.06!important}
.tkm-final h2{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.014em!important}

/* ============ ELEMENTOR + COMPONENT TYPE LAYER — V2 match (2026-08-04) ============
   The Elementor-built pages (case-studies, about-us, clinic-owners, solo-injector,
   cert-marketing, the case-study stories, the funnel pages) and the older blog posts all
   render their headings through the SAME shared Elementor widgets, so one rule set brings the
   whole site to the homepage's type system. FONT ONLY, never colour: white-on-photo hero
   titles stay white and just become serif; nothing moves because each widget keeps its own
   size. Buttons and the homepage are deliberately left alone. See design/SITE-RESTYLE-PLAN.md. */
.elementor-heading-title,
.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-widget-theme-post-title .elementor-heading-title,
h1.elementor-heading-title, h2.elementor-heading-title, h3.elementor-heading-title{
  font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.012em!important}
/* body copy in Elementor text widgets and blog post bodies -> General Sans */
.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li,
.elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li{
  font-family:var(--sans)!important}
/* the ~10 older blog posts: their in-body headings go serif to match the authored articles.
   FONT ONLY — no colour is forced, because these posts have dark-background sections with
   intentionally white text; forcing dark ink there made it invisible (caught 2026-08-04). */
.elementor-widget-theme-post-content h2, .elementor-widget-theme-post-content h3,
.single-post .entry-content h2, .single-post .entry-content h3{
  font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.012em!important}
/* custom tkm components that repeat across the Elementor pages -> serif titles for consistency */
.tkm-feature-card__title, .tkm-services-header .elementor-heading-title,
.tkm-duo-text .elementor-heading-title, .tkm-duo-card h3, .tkm-services-title{
  font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.01em!important}
/* the funnel / landing pages (patient-growth-system, youre-in) use their own hero component in
   Poppins; bring its headings to the serif system too. */
.tkm-hero-wrap h1, .tkm-hero-wrap h2, .tkm-copy h1, .tkm-copy h2{
  font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.016em!important}