/*
 * KCall Modern — theme.css
 * Version: 1.6.0
 *
 * v1.6.0: brought back in line with the ORIGINAL kcalldesign.com layout —
 * centered 770px column, logo top-left with the lowercase nav row beneath,
 * 700px content frame with a 1px black rule, Arial 14px teal body text,
 * magenta links, and the original footer utility strip.
 * Palette is the exact hex set from the original common.css.
 */

/* ===============================================================
 * DESIGN TOKENS
 * ============================================================ */
:root {
  --kc-teal:      #007FAC;
  --kc-teal-dk:   #00658a;
  --kc-teal-xl:   #e8f5fb;
  --kc-magenta:   #FF008C;
  --kc-pink:      #FF5CB6;
  --kc-pink-xl:   #ffe9f4;
  --kc-orange:    #FFA100;
  --kc-orange-xl: #fff4de;
  --kc-purple:    #6707A5;
  --kc-violet:    #9E2785;
  --kc-green:     #00B760;
  --kc-green-xl:  #e4f7ec;
  --kc-lime-dk:   #3DBA2E;
  --kc-lime:      #B7FF00;

  /* Nav gif color (sampled from home.gif / about_kimberly.gif) + rollover */
  --kc-nav:       #5074C4;
  --kc-nav-hover: #BEC8FF;

  --kc-ink:       #007FAC;   /* body text is teal on the original */
  --kc-ink-soft:  #007FAC;
  --kc-bg:        #ffffff;
  --kc-paper:     #ffffff;
  --kc-soft:      #ffffff;
  --kc-rule:      #000000;
  --kc-rule-soft: #e6e6e6;
  --kc-mute:      #007FAC;

  --font-body:    Arial, Helvetica, sans-serif, Verdana, Geneva;
  --font-display: Arial, Helvetica, sans-serif, Verdana, Geneva;
  --font-script:  'Dancing Script', 'Brush Script MT', cursive;
  --font-sans-alt: Arial, Helvetica, sans-serif;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --s7: 6.5rem;

  --radius: 0;
  --radius-lg: 0;

  /* Original: 770px outer table, 700px bordered content frame, 680px image */
  --maxw:    770px;
  --framew:  700px;
  --readw:   680px;

  --banner-h: 42px;
}

/* ===============================================================
 * RESET & BASE
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--kc-ink);
  background: var(--kc-bg);
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--kc-magenta);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover, a:focus { color: var(--kc-pink); text-decoration: none; }

::selection { background: var(--kc-pink-xl); color: var(--kc-magenta); }

/* Centered 770px column — the original <table width=770> */
.kc-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 10px;
}

/* ===============================================================
 * PREVIEW BANNER
 * ============================================================ */
.kc-preview-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, var(--kc-teal) 0%, var(--kc-purple) 50%, var(--kc-magenta) 100%);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.kc-preview-banner strong { font-weight: 700; letter-spacing: 0.04em; }
.kc-preview-banner a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  margin-left: 8px;
}
.kc-preview-banner a:hover { color: #fff; border-bottom-color: #fff; }

body.kc-has-preview { padding-top: var(--banner-h); }

/* ===============================================================
 * SITE HEADER — logo top-left (40px inset), nav row beneath
 * ============================================================ */
.site-header {
  position: static;
  background: #fff;
  border: 0;
  padding-top: 4px;
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  margin: 0;
}
.site-brand {
  display: block;
  margin-left: 30px;   /* original: 40px spacer inside a 770 column with 10px page pad */
  line-height: 0;
}
.site-brand .kc-logo-wordmark { height: 48px; width: auto; display: block; }

/* Navigation — lowercase, spaced like the original gif strip */
.main-nav { width: 100%; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 2px 0 6px 27px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 640px;
}
.main-nav a {
  color: var(--kc-nav);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  border: 0;
  padding: 0;
  line-height: 1;
}
.main-nav a:hover,
.main-nav .current_page_item a,
.main-nav .current-menu-item a,
.main-nav .current_page_parent a,
.main-nav .current_page_ancestor a {
  color: var(--kc-nav-hover);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  color: var(--kc-nav);
  cursor: pointer;
  margin-left: 27px;
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .site-brand { margin-left: 0; }
  .site-brand .kc-logo-wordmark { height: 36px; }
  .main-nav { display: none; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 0; }
}

/* ===============================================================
 * CONTENT FRAME — the 700px table with the 1px #000 rule and
 * 10px inner padding that wraps every original page.
 * ============================================================ */
.kc-frame {
  width: var(--framew);
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--kc-rule);
  padding: 10px;
  background: #fff;
}

/* ===============================================================
 * FRONT-PAGE HERO — main_image.jpg inside the frame
 * ============================================================ */
.hero {
  position: relative;
  padding: 0;
  background: #fff;
  text-align: center;
}
.hero::before, .hero::after { display: none; }
.hero .kc-flash-hero { margin: 0; }
.hero-logo, .hero-sub, .hero-divider, .hero-image { display: none; }

/* ===============================================================
 * FRONT-PAGE SECTIONS (kept from the redesign, restyled to match)
 * ============================================================ */
.fp-section {
  padding: var(--s5) 0;
  position: relative;
  background: #fff;
}
.fp-section.alt,
.fp-section:nth-of-type(even) {
  background: #fff;
  border: 0;
}
.fp-section-inner {
  max-width: var(--framew);
  margin: 0 auto;
}
.fp-section-inner.content-narrow { max-width: var(--readw); }
.fp-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--kc-magenta);
  margin-bottom: var(--s1);
}
.fp-section-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 32px;         /* .BlueHeadline */
  color: var(--kc-teal);
  margin: 0 0 var(--s3);
  text-align: center;
  line-height: 1.15;
}
.fp-section-title::after { display: none; }
.fp-section-inner p.lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--kc-teal);
  text-align: center;
  margin-top: var(--s2);
}

/* ===============================================================
 * SERVICE CARDS
 * ============================================================ */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--kc-rule-soft);
  border-top: 3px solid var(--card-accent, var(--kc-teal));
  padding: var(--s3) var(--s2) var(--s2);
  text-align: left;
}
.service-card::before { display: none; }
.service-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-accent-soft, var(--kc-teal-xl));
  color: var(--card-accent, var(--kc-teal));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--s2);
}
.service-card h3 {
  font-family: var(--font-body);
  font-size: 20px;       /* .*SubHeader */
  font-weight: 400;
  color: var(--card-accent, var(--kc-teal));
  margin: 0 0 var(--s1);
  line-height: 1.2;
}
.service-card p {
  font-size: 13px;
  margin: 0 0 var(--s2);
  color: var(--kc-teal);
  line-height: 1.5;
}
.service-card a {
  font-size: 12px;
  color: var(--kc-magenta);
}
.service-card a:hover { color: var(--kc-pink); }

.service-cards .service-card:nth-child(1) { --card-accent: var(--kc-teal);    --card-accent-soft: var(--kc-teal-xl); }
.service-cards .service-card:nth-child(2) { --card-accent: var(--kc-lime-dk); --card-accent-soft: var(--kc-green-xl); }
.service-cards .service-card:nth-child(3) { --card-accent: var(--kc-magenta); --card-accent-soft: var(--kc-pink-xl); }
.service-cards .service-card:nth-child(4) { --card-accent: var(--kc-orange);  --card-accent-soft: var(--kc-orange-xl); }
.service-cards .service-card:nth-child(5) { --card-accent: var(--kc-purple);  --card-accent-soft: #f1e8f8; }
.service-cards .service-card:nth-child(6) { --card-accent: var(--kc-green);   --card-accent-soft: var(--kc-green-xl); }

/* ===============================================================
 * TESTIMONIAL
 * ============================================================ */
.testimonial-highlight {
  max-width: var(--readw);
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--s2);
}
.testimonial-highlight blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--kc-purple);
  margin: 0 0 var(--s2);
  padding: 0;
  border: 0;
}
.testimonial-highlight blockquote::before {
  content: '\201C';
  display: block;
  font-size: 48px;
  line-height: 0.5;
  color: var(--kc-orange);
  margin: 0 0 var(--s2);
}
.testimonial-attribution {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-teal);
  margin: 0;
}

/* ===============================================================
 * CTA BAND
 * ============================================================ */
.cta-band {
  text-align: center;
  padding: var(--s5) var(--s3);
  background: linear-gradient(135deg, var(--kc-teal) 0%, var(--kc-purple) 55%, var(--kc-magenta) 100%);
  color: #fff;
  max-width: var(--framew);
  margin: 0 auto var(--s4);
}
.cta-band::before { display: none; }
.cta-band h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 32px;
  color: #fff;
  margin: 0 0 var(--s1);
  line-height: 1.15;
}
.cta-band p {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  margin: 0 0 var(--s3);
}
.btn {
  display: inline-block;
  background: #fff;
  color: var(--kc-magenta);
  padding: 10px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
}
.btn:hover { color: var(--kc-purple); }

/* ===============================================================
 * INTERIOR CONTENT
 * ============================================================ */
.site-main { min-height: 40vh; padding-bottom: 5px; }
.content-wrap { margin: 0 auto; }
.entry-content {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--kc-teal);
  padding: 0 10px 10px;
}
.entry-content p { margin: 0 0 var(--s2); }
.entry-content h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 32px;
  color: var(--kc-teal);
  margin: var(--s3) 0 var(--s1);
  line-height: 1.2;
}
.entry-content h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--kc-teal);
  margin: var(--s3) 0 var(--s1);
}
.entry-content blockquote {
  border-left: 3px solid var(--kc-orange);
  margin: var(--s3) 0;
  padding: var(--s1) var(--s2);
  color: var(--kc-teal);
  font-size: 14px;
  font-style: italic;
}
.entry-content img {
  margin: 0 auto var(--s2);
  border-radius: 0;
  box-shadow: none;
}
.entry-content img.alignleft { float: left; margin: 0 var(--s3) var(--s2) 0; }
.entry-content img.alignright { float: right; margin: 0 0 var(--s2) var(--s3); }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption.alignleft { float: left; margin: 0 var(--s3) var(--s2) 0; }
.entry-content .wp-caption-text { font-size: 10px; color: var(--kc-teal); text-align: center; margin: 4px 0 0; }
.entry-content ul, .entry-content ol { padding-left: var(--s3); margin: 0 0 var(--s2); }
.entry-content li { margin-bottom: 4px; }
.entry-content strong { font-weight: 700; }

/* Legacy per-section accent classes (from the original common.css) */
.orangeheader, .OrangeHeadline   { color: var(--kc-orange); }
.purpleheader, .PurpleHeadline   { color: var(--kc-purple); }
.greenheader,  .GreenHeadline    { color: var(--kc-green);  }
.magentaheader,.MagentaHeadline  { color: var(--kc-magenta);}
.limeheader,   .LimeHeadline     { color: var(--kc-lime-dk);}
.blueheader,   .BlueHeadline     { color: var(--kc-teal);   }
.violetheader, .VioletHeadline   { color: var(--kc-violet); }
.OrangeSuperHeadline, .BlueSuperHeadline, .PurpleSuperHeadline,
.GreenSuperHeadline, .MagentaSuperHeadline, .LimeSuperHeadline { font-size: 45px; }
.OrangeHeadline, .BlueHeadline, .PurpleHeadline,
.GreenHeadline, .MagentaHeadline, .LimeHeadline { font-size: 32px; }
.OrangeSubHeader, .BlueSubHeader, .PurpleSubHeader,
.GreenSubHeader, .MagentaSubHeader { font-size: 20px; }
.OrangeSubHeader { color: var(--kc-orange); } .BlueSubHeader { color: var(--kc-teal); }
.PurpleSubHeader { color: var(--kc-purple); } .GreenSubHeader { color: var(--kc-green); }
.MagentaSubHeader { color: var(--kc-magenta); }
.smalltext { font-size: 10px; color: var(--kc-teal); }
.smallviolettext { font-size: 10px; color: var(--kc-violet); }
.smalllimetext { font-size: 10px; color: var(--kc-lime-dk); }

/* ===============================================================
 * DROP CAPS — the original used ~45px colored letter GIFs
 * ============================================================ */
.kc-dropcap {
  float: left;
  width: 3.2em;
  height: 3.2em;
  margin: 0.05em 0.4em 0 0;
  shape-outside: margin-box;
  user-select: none;
}
.kc-dropcap svg { width: 100%; height: 100%; display: block; overflow: visible; }

.entry-content img[src$="/a.gif"], .entry-content img[src$="/b.gif"],
.entry-content img[src$="/c.gif"], .entry-content img[src$="/d.gif"],
.entry-content img[src$="/e.gif"], .entry-content img[src$="/f.gif"],
.entry-content img[src$="/g.gif"], .entry-content img[src$="/h.gif"],
.entry-content img[src$="/i.gif"], .entry-content img[src$="/j.gif"],
.entry-content img[src$="/k.gif"], .entry-content img[src$="/l.gif"],
.entry-content img[src$="/m.gif"], .entry-content img[src$="/n.gif"],
.entry-content img[src$="/o.gif"], .entry-content img[src$="/p.gif"],
.entry-content img[src$="/q.gif"], .entry-content img[src$="/r.gif"],
.entry-content img[src$="/s.gif"], .entry-content img[src$="/t.gif"],
.entry-content img[src$="/u.gif"], .entry-content img[src$="/v.gif"],
.entry-content img[src$="/w.gif"], .entry-content img[src$="/x.gif"],
.entry-content img[src$="/y.gif"], .entry-content img[src$="/z.gif"] { display: none; }

/* ===============================================================
 * FLASH-HERO — HTML5 stand-in for the original SWF section heroes.
 * Flat (no rounding / shadow / scrim), 680px wide like the original,
 * with the title set the way the SWFs drew it: bold, widely
 * letter-spaced Arial in the section accent color, lower-center.
 * ============================================================ */
.kc-flash-hero {
  position: relative;
  width: 680px;
  max-width: 100%;
  margin: 0 auto var(--s2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  isolation: isolate;
  aspect-ratio: var(--kc-fh-ratio, 680/260);
}
.kc-flash-portrait {
  width: 251px;
  max-width: 100%;
  float: left;
  margin: 0 var(--s3) var(--s2) 0;
}
@media (max-width: 640px) {
  .kc-flash-portrait { float: none; margin: 0 auto var(--s3); }
}
.kc-flash-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  margin: 0;
}
.kc-flash-hero-scrim { display: none; }
/* The uploaded hero JPEGs already carry the section title and photo
   credit baked into the pixels (about KCDC, beauty, image, fashion,
   wellness, renew, gifts…). Overlaying text again doubled it, so the
   HTML overlay + credit are hidden and the original image speaks. */
.kc-flash-hero-stage, .kc-flash-hero-credit { display: none !important; }
.kc-flash-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: end;
  padding: 0 0 12% 0;
  text-align: center;
  pointer-events: none;
}
.kc-flash-title {
  grid-area: 1 / 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 3.2vw, 24px);
  line-height: 1.1;
  letter-spacing: 0.45em;
  margin-left: 0.45em;   /* balance trailing letter-spacing */
  color: var(--kc-fh-accent, var(--kc-magenta));
  text-shadow: 0 0 10px rgba(255,255,255,0.65);
  opacity: 0;
  transition: opacity .7s ease;
  max-width: 94%;
}
.kc-flash-title.is-visible { opacity: 1; }
/* The home hero's "renew" was set lighter, mid-frame */
.kc-flash-hero-tall .kc-flash-hero-stage { align-content: center; padding: 0; }
.kc-flash-hero-tall .kc-flash-title {
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 400;
  letter-spacing: 0.4em;
  margin-left: 0.4em;
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 12px rgba(0,60,120,0.5);
}
.kc-flash-hero-credit {
  position: absolute;
  bottom: 8px;
  right: 6px;
  z-index: 4;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Audio toggle — recovered Flash soundtrack, click-to-play */
.kc-audio-toggle {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 6;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  color: var(--kc-teal);
  font: 16px/26px Arial, Helvetica, sans-serif;
  text-align: center;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .2s ease, background .2s ease;
}
.kc-audio-toggle:hover, .kc-audio-toggle:focus { opacity: 1; background: #fff; outline: 0; }
.kc-audio-toggle.is-playing { color: var(--kc-magenta); opacity: 1; background: #fff; }
.kc-audio-toggle.is-playing .kc-audio-icon { animation: kc-audio-pulse 1.2s ease-in-out infinite; display: inline-block; }
@keyframes kc-audio-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .kc-audio-toggle.is-playing .kc-audio-icon { animation: none; } }
.kc-audio { display: none; }
.kc-flash-portrait .kc-audio-toggle { left: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 14px; line-height: 22px; }

/* ===============================================================
 * FLOWER BULLETS — inline SVG stand-ins for flower_bullet.gif (17px)
 * ============================================================ */
.kc-flower-bullet {
  display: inline-block !important;
  vertical-align: -3px;
  width: 17px;
  height: 17px;
  margin: 0 0.5em 0 0;
  flex-shrink: 0;
}
.entry-content h4 {
  display: flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  margin: 6px 0 6px 80px;   /* original bullet list is indented ~100px inside the frame */
  line-height: 1.3;
}
.entry-content h4 a { color: var(--kc-magenta); }
.entry-content h4 a:hover { color: var(--kc-pink); }

/* ===============================================================
 * SECTION SUBHEADERS — "Health…", "Fashion…" etc.
 * Original set these as plain bold text in the section color.
 * ============================================================ */
.kc-subhead {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  margin: var(--s3) 0 var(--s1);
  padding: 0;
  border: 0;
}
.kc-subhead::before { display: none; }
.kc-sub-teal    { color: var(--kc-teal);    }
.kc-sub-magenta { color: var(--kc-magenta); }
.kc-sub-orange  { color: var(--kc-orange);  }
.kc-sub-purple  { color: var(--kc-purple);  }
.kc-sub-green   { color: var(--kc-green);   }
.kc-sub-lime    { color: var(--kc-lime-dk); }
.kc-sub-violet  { color: var(--kc-violet);  }

/* ===============================================================
 * FOOTER — the original utility strip + © line
 * ============================================================ */
.site-footer {
  border: 0;
  background: #fff;
  padding: 6px 0 30px;
  text-align: center;
  color: var(--kc-teal);
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-utility {
  list-style: none;
  margin: 0;
  padding: 0 0 0 33px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
}
.footer-utility li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  text-align: center;
}
.footer-utility a {
  color: var(--kc-nav);
  font-size: 12px;
  line-height: 1.15;
  text-transform: lowercase;
  display: inline-block;
}
.footer-utility a:hover { color: var(--kc-nav-hover); }
.kc-footer-flower { width: 14px; height: 14px; margin: 0 2px 0 0; vertical-align: top; }
.kc-mail-icon { display: inline-block; margin-right: 3px; font-size: 14px; line-height: 1; }
.kc-fb {
  display: inline-block;
  width: 12px; height: 12px;
  margin-top: 2px;
  background: #3b5998;
  color: #fff;
  font: 700 10px/12px Arial, sans-serif;
  border-radius: 1px;
}
.footer-bottom {
  font-size: 10px;
  color: var(--kc-teal);
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.footer-brand, .footer-tagline, .footer-contact { display: none; }

@media (max-width: 640px) {
  .footer-utility { flex-wrap: wrap; justify-content: center; padding-left: 0; gap: 14px 18px; }
}

/* ===============================================================
 * UTILITIES
 * ============================================================ */
/* ===============================================================
 * v1.9.0 — ONE-PAGE LANDING (Kimberly, Oct 2026)
 * Logo left above the hero frame, menu spread evenly across the
 * full frame width, then a simple centered contact sheet.
 * ============================================================ */
.site-brand { margin-left: 25px; }           /* lines up with the frame's left edge */
.main-nav ul {
  max-width: var(--framew);
  margin: 0 auto;
  padding: 4px 0 8px;
  justify-content: space-between;
}
@media (max-width: 640px) {
  .main-nav ul { padding-left: 0; }
}

.kc-landing {
  max-width: var(--readw);
  margin: 0 auto;
  padding: 30px 10px 10px;
  text-align: center;
  color: var(--kc-teal);
}
.kc-landing-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--kc-teal);
  margin: 0 0 14px;
}
.kc-landing-lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 620px;
}
.kc-landing-cats {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--kc-purple);
}
.kc-landing-cats li { white-space: nowrap; }
.kc-ast { color: var(--kc-magenta); margin-right: 5px; }
@media (max-width: 560px) {
  .kc-landing-cats { flex-direction: column; align-items: center; gap: 6px; }
}

.kc-landing-contact { font-family: var(--font-script); }
.kc-landing-offer {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kc-magenta);
  margin: 0 0 18px;
}
.kc-landing-card {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--kc-teal);
  margin: 0 0 26px;
}
.kc-landing-card a { color: var(--kc-teal); }
.kc-landing-card a:hover { color: var(--kc-magenta); }
.kc-landing-note {
  font-size: 21px;
  font-weight: 500;
  color: var(--kc-violet);
  margin: 0 0 10px;
}
/* v1.9.0 marker */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px;
  overflow: hidden;
}