/* ============================================================
   KEENLY.ORG — WORDPRESS / BEAVER BUILDER BRIDGE
   ------------------------------------------------------------
   This file sits ON TOP of keenly-blog.css. It does NOT
   redefine your design — it maps Beaver Builder's and
   WordPress's own output markup onto your existing skin
   classes and tokens, so the two systems match.

   Load order in the child theme:
     1. keenly-blog.css      (your canonical skin — unchanged)
     2. keenly-wp-bridge.css (this file)

   All tokens (--k-teal etc.) come from keenly-blog.css, so
   nothing here needs hard-coded colours except where noted.

   ⚠ SELECTORS MARKED [VERIFY] depend on your Beaver Builder
   version. After your first build, right-click a post card /
   button in the browser, "Inspect", and confirm the class
   names match. If they differ, swap the selector — the
   property block stays the same.
   ============================================================ */


/* ── A. POST CONTENT MODULE → PROSE ──────────────────────────────────────────
   You will add the class  k-post-body  to the Themer "Post Content"
   module (Advanced ▸ Class). Your existing .k-post-body rules then
   style everything inside automatically. These few lines just make
   sure the Beaver wrapper doesn't fight the max-width / spacing. */

.fl-module.k-post-body .fl-module-content,
.fl-module-content .k-post-body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Gutenberg blocks keep their native tags (h2, p, blockquote…), so your
   .k-post-body descendant rules already catch them. These two just tidy
   the wp-block wrappers that add stray margins. */
.k-post-body .wp-block-quote { margin: 2em 0; }
.k-post-body figure.wp-block-image { margin: 2em 0; }


/* ── B. POSTS MODULE → POST CARDS (Custom Post Layout) ───────────────────────
   Because Beaver Themer is installed, the Posts module can output your own
   card markup via Layout ▸ Post Layout ▸ Custom. The Custom Post Layout uses
   the .k-post-card markup (see the build sheet), which is already styled by
   keenly-blog.css — so there are NO [VERIFY] selectors to chase here.

   Module settings: Layout = Columns, 3 columns, Equalize heights = Yes,
   Post spacing ≈ 30px. BB builds the column grid; the card styles itself.

   Module settings: Layout = Columns (set your columns, spacing, and equal
   heights in the module). This file no longer forces the grid — Beaver
   controls the layout, so your in-builder settings win. */

/* The post-excerpt connection wraps text in a <p>; keep the card excerpt a
   <div> in the custom layout, and let any inner <p> inherit its styling. */
.k-post-card__excerpt p {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Safety only (no layout impact): keep a very long title word from
   overflowing its column. */
.k-post-card__title { overflow-wrap: break-word; }

/* ── C. BEAVER BUILDER BUTTON MODULE → .kb BUTTONS ───────────────────────────
   BB wraps buttons in  .fl-button-wrap a.fl-button  with high specificity,
   so adding your .kb class to the module alone won't win. Instead:

     1. Add class  kb-skin  PLUS a colour class (kb-teal / kb-lime /
        kb-ink / kb-red / kb-ghost / kb-ghost-teal / kb-ghost-lime)
        to the Button module (Advanced ▸ Class).
     2. These rules then override BB's defaults.

   The !important flags are deliberate — they're the cheapest way to
   beat Beaver's inline/scoped button styles from a skin layer. */

.fl-module.kb-skin a.fl-button,
.fl-module.kb-skin a.fl-button:visited {
  font-family: var(--k-font-sans) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}
.fl-module.kb-skin a.fl-button:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.fl-module.kb-skin.kb-teal       a.fl-button { background: var(--k-teal) !important;  color: var(--k-white) !important; }
.fl-module.kb-skin.kb-lime       a.fl-button { background: var(--k-lime) !important;  color: var(--k-ink) !important; }
.fl-module.kb-skin.kb-ink        a.fl-button { background: var(--k-ink) !important;   color: var(--k-white) !important; }
.fl-module.kb-skin.kb-red        a.fl-button { background: var(--k-red) !important;   color: var(--k-white) !important; }

.fl-module.kb-skin.kb-ghost      a.fl-button { background: transparent !important; color: var(--k-white) !important; border: 1px solid rgba(255,255,255,0.5) !important; }
.fl-module.kb-skin.kb-ghost-teal a.fl-button { background: transparent !important; color: var(--k-teal) !important;  border: 1px solid var(--k-teal) !important; }
.fl-module.kb-skin.kb-ghost-lime a.fl-button { background: transparent !important; color: var(--k-lime) !important;  border: 1px solid var(--k-lime) !important; }


/* ── D. THEMER HEADER / FOOTER HELPERS ───────────────────────────────────────
   If you build the Themer header/footer with rows you flag .k-dark, the
   dark-mode block in keenly-blog.css will style descendants. This just
   makes nav links inside a dark header inherit the right colours. */

.k-dark .fl-page-header a,
.k-dark .fl-row-content a {
  color: rgba(255,255,255,0.85);
}
.k-dark .fl-page-header a:hover,
.k-dark .fl-row-content a:hover {
  color: var(--k-teal-light);
}


/* ── E. GRAVITY FORMS (sidebar newsletter / contact) ─────────────────────────
   Optional. Lightly skins Gravity Forms to match. Scope by adding the
   wrapper class  k-gform  to the form's CSS Class Name field
   (form settings ▸ Form Layout ▸ CSS Class Name). */

.k-gform .gform_title {
  font-family: var(--k-font-serif);
  font-weight: 900;
  color: var(--k-ink);
  letter-spacing: -0.02em;
}
.k-gform .gfield_label {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}
.k-gform input[type="text"],
.k-gform input[type="email"],
.k-gform textarea {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 0;
  padding: 14px 16px;
}
.k-gform input[type="text"]:focus,
.k-gform input[type="email"]:focus,
.k-gform textarea:focus {
  border-color: var(--k-teal);
  outline: none;
}
.k-gform .gform_button {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--k-teal);
  color: var(--k-white);
  border: none;
  border-radius: 0;
  padding: 16px 36px;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.k-gform .gform_button:hover { filter: brightness(1.08); }


/* ── F. THEMER HEADER ────────────────────────────────────────────────────────
   Add class  k-header  to the header ROW (Advanced ▸ Class) for the light
   header, OR add  k-dark  instead for a dark header over the post hero
   (dark link colours are already handled in Section D).

   Add class  k-nav  to the Beaver Builder Menu module.
   Add class  k-logo  to a text logo (skip if you use an image logo). */

.k-header {
  background: var(--k-white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Text logo (optional) */
.k-logo,
.k-logo a {
  font-family: var(--k-font-serif);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--k-ink);
  text-decoration: none;
}

/* Primary navigation — applies whether BB outputs .fl-menu or a bare menu */
.k-nav a,
.k-nav .menu-item a,
.k-nav .fl-menu .menu-item > a {            /* [VERIFY] */
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-ink);
  text-decoration: none;
  transition: color var(--k-transition);
}
.k-nav .menu-item a:hover,
.k-nav .current-menu-item > a,
.k-nav .current_page_item > a {
  color: var(--k-teal);
}

/* In a dark header, flip nav text light (k-dark on the row) */
.k-dark .k-nav a,
.k-dark .k-nav .menu-item a { color: rgba(255,255,255,0.85); }
.k-dark .k-nav .menu-item a:hover,
.k-dark .k-nav .current-menu-item > a { color: var(--k-lime); }


/* ── G. THEMER FOOTER ────────────────────────────────────────────────────────
   Add class  k-footer  to the main footer ROW. It is self-contained — dark
   background, light text, branded links — so you don't also need k-dark.
   Add  k-footer__bottom  to a second, slimmer row for the copyright bar.
   Add  k-footer__heading  to each column Heading module (eyebrow style). */

.k-footer {
  background: var(--k-ink);
  color: rgba(255,255,255,0.6);
}
.k-footer,
.k-footer .fl-rich-text,
.k-footer p {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  line-height: 1.75;
}

.k-footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--k-transition);
}
.k-footer a:hover { color: var(--k-teal-light); }

/* Column heading = eyebrow */
.k-footer__heading,
.k-footer__heading .fl-heading-text {       /* [VERIFY] */
  font-family: var(--k-font-sans) !important;
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal) !important;
  margin-bottom: 18px;
}

/* Footer menu as a stacked link list */
.k-footer .menu,
.k-footer .fl-menu .menu {                  /* [VERIFY] */
  list-style: none;
  margin: 0;
  padding: 0;
}
.k-footer .menu-item { margin-bottom: 10px; }
.k-footer .menu-item a {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Brand wordmark inside the footer */
.k-footer .k-logo,
.k-footer .k-logo a { color: var(--k-white); }

/* Bottom copyright bar */
.k-footer__bottom {
  background: var(--k-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
}
.k-footer__bottom,
.k-footer__bottom p {
  font-family: var(--k-font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.k-footer__bottom a { color: rgba(255,255,255,0.4); }
.k-footer__bottom a:hover { color: var(--k-teal-light); }

@media (max-width: 600px) {
  .k-nav .menu { text-align: center; }
}


/* ── H. POST HERO REFINEMENTS ────────────────────────────────────────────────
   Pairs with the updated hero HTML: eyebrow + meta wrapped in
   .k-post-hero__topline, and the subtitle as a <div> (not a <p>). */

/* (3) Eyebrow: thin teal outline box, teal text, no leading line. */
.k-post-hero__eyebrow {
  display: inline-flex;
  color: var(--k-teal);
  border: 1px solid var(--k-teal);
  padding: 7px 14px;
  gap: 0;
  margin-bottom: 0;
}
.k-post-hero__eyebrow::before { display: none; }

/* (4) Category + author/date/read-time on ONE line at the top of the hero. */
.k-post-hero__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}
.k-post-hero__meta { margin-bottom: 0; }

/* (5) The post-excerpt connection wraps its text in a <p>. With the subtitle
   now a <div>, that inner <p> is valid markup; make it inherit the subtitle's
   italic Merriweather styling instead of falling back to default text. */
.k-post-hero__subtitle p {
  font: inherit;
  color: inherit;
  margin: 0;
  max-width: none;
}


/* ── I. HERO TITLE — GRADIENT LAST LINE ──────────────────────────────────────
   The footer script (functions.php) wraps the title's last visual line in
   <span class="k-grad">. This paints that span teal → lime. */
.k-post-hero__title .k-grad {
  background: linear-gradient(100deg, var(--k-teal), var(--k-lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ── J. SIMPLE HEADER (logo + button) ────────────────────────────────────────
   Light header → row class k-header ; dark header → row class k-dark.
   These cover the two pieces that differ between them. */

/* Text logo turns white on a dark header */
.k-dark .k-logo,
.k-dark .k-logo a { color: var(--k-white); }

/* Optional trimmer CTA for the header: add  kb-compact  alongside
   kb-skin + a colour class, e.g.  kb-skin kb-compact kb-teal  */
.fl-module.kb-skin.kb-compact a.fl-button {
  padding: 13px 28px !important;
  font-size: 11px !important;
}


/* ── K. LAYOUT HELPERS (for page sections in HTML modules) ───────────────────
   Tailwind layout classes (grid, grid-cols-*, flex, gap-*) have NO css in
   WordPress, so multi-column sections pasted into an HTML module collapse to
   one column. Wrap your columns in these real-CSS-grid helpers instead.
   They auto-collapse on smaller screens.

   Usage:
     <div class="k-cols k-cols-3">
       <div>…column 1…</div>
       <div>…column 2…</div>
       <div>…column 3…</div>
     </div>
   Adjust the gap with an inline style if needed, e.g. style="gap:24px". */

.k-cols   { display: grid; gap: 40px; align-items: start; }
.k-cols-2 { grid-template-columns: repeat(2, 1fr); }
.k-cols-3 { grid-template-columns: repeat(3, 1fr); }
.k-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* A simple flex row for inline items (logos, badges, buttons) */
.k-flex { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

@media (max-width: 900px) {
  .k-cols-3, .k-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .k-cols-2, .k-cols-3, .k-cols-4 { grid-template-columns: 1fr; }
}


/* ── L. SPLIT SECTION (two equal halves, stack on mobile) ────────────────────
   For full-bleed two-up sections (e.g. image mosaic + testimonial). Two equal
   columns with a tall min-height on desktop; single column on phones with the
   min-height dropped so a stacked half doesn't leave an empty band.
   Use on the OUTER wrapper only — nested grids keep their own styles. */
.k-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
@media (max-width: 768px) {
  .k-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}


/* ── M. SERVICE ROW (number · tag · title · action) ──────────────────────────
   Desktop: 4-column table-style row. Mobile: number + tag on a top line,
   title/description below, action link beneath — instead of cramming 4
   columns into ~360px (which overflows the right edge).

   You only need to ADD  k-service-row  to each row's class. You do NOT need
   to remove the inline grid styles — the mobile rules below use !important
   so they override the inline 48px/110px/1fr/auto grid on phones, while the
   inline values still drive the desktop layout. */
.k-service-row {
  display: grid;
  grid-template-columns: 48px 110px 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 768px) {
  .k-service-row {
    grid-template-columns: auto 1fr !important;
    gap: 8px 16px !important;
    align-items: center !important;
  }
  .k-service-row > * { min-width: 0; }
  /* title/description block spans full width on its own line */
  .k-service-row > div { grid-column: 1 / -1 !important; }
  /* action link ("Learn →") full width, left-aligned, below */
  .k-service-row > span:last-child {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-top: 4px;
  }
}


/* ── N. FOOTER GRID (pasted HTML-section footer) ─────────────────────────────
   For a footer pasted as a whole section. Keeps the uneven desktop columns,
   then collapses: 4 → 2 on tablet, 2 → 1 on phones.
   Replace the inline grid wrapper with  class="k-footer-grid".  */
.k-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .k-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .k-footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Bottom bar: row on desktop, stacks + centers on phones.
   Replace the inline flex wrapper with  class="k-footer-bar".  */
.k-footer-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
@media (max-width: 600px) {
  .k-footer-bar {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ── O. STEP CARDS (divider between columns, clean when stacked) ─────────────
   For columns separated by a left divider (e.g. the Discover/Define/
   Communicate steps). The divider + indent show ONLY when all columns are
   truly side by side (≥900px). As soon as the grid wraps or stacks, they're
   removed so cards align flush-left.

   Put  class="ku dN vis k-step"  on EACH step card and remove the inline
   border-left / padding-left from all of them (including the "none" ones). */
.k-step {
  border-left: none !important;
  padding-left: 0 !important;
}
@media (min-width: 901px) {
  .k-step {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-left: 48px !important;
  }
  .k-cols > .k-step:first-child {
    border-left: none !important;
    padding-left: 0 !important;
  }
}


/* ── P. UNEVEN TWO-COLUMN (1fr / 2fr) ────────────────────────────────────────
   For a narrow-heading + wide-text split. Keeps the 1:2 proportion on
   desktop/tablet, stacks to one column on phones.
   Replace the inline grid wrapper with  class="k-cols-1-2".  */
.k-cols-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 768px) {
  .k-cols-1-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ── Q. EQUAL-HEIGHT CARDS ───────────────────────────────────────────────────
   .k-cols defaults to align-items:start (good for heading+text rows). For a
   row of cards that should all match the tallest one, add  k-cols-stretch
   alongside k-cols, e.g.  class="k-cols k-cols-4 k-cols-stretch". */
.k-cols-stretch { align-items: stretch; }


/* ── R. SIDEBAR COLUMN (fixed photo/logo column + content) ───────────────────
   For rows with a fixed narrow left column (team portrait, partner logo)
   beside a wider content column. ~240px sidebar on desktop, stacks on mobile.
   Replace the inline grid wrapper with  class="k-cols-side"  (keep padding /
   margin / border inline). Works for the 260px and 200px originals alike. */
.k-cols-side {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 768px) {
  .k-cols-side {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ── S. FULL-SCREEN MENU OVERLAY ─────────────────────────────────────────────
   Menu links are lime, teal on hover. Social icons fade to lime on hover. */
.k-menu-overlay .k-menu-link {
  color: #8ec13f;
  transition: color 0.2s ease;
}
.k-menu-overlay .k-menu-link:hover {
  color: #1b8b99;
}
.k-menu-overlay .k-menu-social a {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s ease;
}
.k-menu-overlay .k-menu-social a:hover {
  color: #8ec13f;
}


/* ── T. MENU OVERLAY — EDITORIAL ─────────────────────────────────────────────
   Two-column overlay: numbered nav links (gradient sweep on hover) on the
   left, brand voice + contact + socials on the right, with a giant faded
   watermark behind it all. Pairs with the .k-menu-open script (entrance +
   gradient handled there). */

.k-menu-overlay { background: #0b0d0e; }

/* Giant faded watermark word */
.k-menu-watermark {
  position: absolute;
  bottom: -8%;
  right: -2%;
  font-family: 'Merriweather', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(200px, 34vw, 560px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(27, 139, 153, 0.04);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* Layout: links left, editorial column right */
.k-menu-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 860px) {
  .k-menu-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .k-menu-aside { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; }
}

/* A numbered nav row */
.k-menu-item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  text-decoration: none;
  padding: 6px 0;
  /* entrance start state */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.k-menu-overlay.k-open .k-menu-item {
  opacity: 1;
  transform: none;
}
.k-menu-num {
  font-family: 'Merriweather', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 16px);
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  width: 2ch;
  transition: color 0.25s ease;
}
.k-menu-word {
  font-family: 'Merriweather', serif;
  font-weight: 900;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #fff;
  background-image: linear-gradient(90deg, #1b8b99 0%, #8ec13f 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 0.35s ease, color 0.05s ease 0.05s;
}
.k-menu-item:hover .k-menu-word {
  color: transparent;
  background-size: 100% 100%;
}
.k-menu-item:hover .k-menu-num { color: #8ec13f; }

/* Editorial aside */
.k-menu-aside-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8ec13f;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.k-menu-aside-eyebrow span { display: block; width: 32px; height: 1px; background: rgba(255,255,255,0.3); }
.k-menu-aside p {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0 0 28px;
}
.k-menu-aside-email {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  background: linear-gradient(90deg, #1b8b99 0%, #8ec13f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── U. HERO FOOTER ROW (subtitle + buttons) ─────────────────────────────────
   The bottom row of the home hero: tagline left, buttons right on desktop;
   stacks to one column on mobile. KEEP the inline flex styles on the element
   (so desktop works even if this file is cached/stale); this rule only
   overrides on mobile, hence !important. */
.k-hero-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
@media (max-width: 768px) {
  .k-hero-foot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
}


/* ── V. NAV BAR — MOBILE ─────────────────────────────────────────────────────
   On phones: hide the "Let's Talk" button and push the hamburger to the right.
   Desktop is unchanged. Add  k-nav-cta  to the Let's Talk link and
   k-nav-actions  to the wrapper that holds the hamburger + button. */
@media (max-width: 768px) {
  .k-nav-cta { display: none !important; }
  .k-nav-actions { width: 100%; justify-content: flex-end; }
}


/* ── W. PROCESS TITLE (large multi-line headline) ────────────────────────────
   Big headlines with a high clamp floor (e.g. 48px) can overflow a phone and
   get clipped by a section's overflow:hidden. Add  k-process-title  to the
   <h2>; this caps the size on phones so long words fit. Desktop keeps the
   inline clamp. !important so it beats the inline font-size on mobile. */
@media (max-width: 600px) {
  .k-process-title {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1 !important;
    margin-bottom: 56px !important;
  }
}


/* ── X. BUTTON HOVER TEXT COLOR ──────────────────────────────────────────────
   The parent theme's generic a:hover sets a blue link color that out-specifies
   the .kb color classes on hover, making text unreadable on colored buttons.
   Re-assert each variant's correct text color on hover. !important so it beats
   the theme's a:hover regardless of its specificity. Colors match the tokens
   in keenly-blog.css (teal/ink/red/white = white text; lime/white = ink). */
.kb-teal:hover,
.kb-ink:hover,
.kb-red:hover,
.kb-ghost:hover       { color: #fff !important; }
.kb-lime:hover,
.kb-white:hover       { color: #0e1012 !important; }
.kb-ghost-teal:hover  { color: #1b8b99 !important; }
.kb-ghost-lime:hover  { color: #8ec13f !important; }


/* ── Y. INLINE NEWSLETTER GRAVITY FORM ───────────────────────────────────────
   k-gform k-gform-inline : email field + gradient uppercase Subscribe fused
   on one line; stacks on mobile. Set Email label Hidden, placeholder set. */
.k-gform-inline form { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.k-gform-inline .gform-body,
.k-gform-inline .gform_body { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
.k-gform-inline .gform_fields { display: block !important; grid-template-columns: none !important; grid-gap: 0 !important; }
.k-gform-inline .gfield { margin: 0 !important; padding: 0 !important; }
.k-gform-inline .gfield_label { display: none !important; }
.k-gform-inline .ginput_container { margin: 0 !important; }
.k-gform-inline input[type="email"] {
  width: 100% !important; box-sizing: border-box !important; height: 100% !important;
  padding: 18px 24px !important; font-family: 'Raleway', sans-serif !important; font-size: 15px !important;
  background: #fff !important; border: 1px solid rgba(27,139,153,0.2) !important; border-right: none !important;
  border-radius: 0 !important; color: #0e1012 !important; outline: none !important;
}
.k-gform-inline input[type="email"]:focus { border-color: rgba(27,139,153,0.5) !important; border-right: none !important; }
.k-gform-inline .gform_footer { flex: 0 0 auto !important; display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; }
.k-gform-inline .gform_button {
  flex-shrink: 0; padding: 18px 32px !important; font-family: 'Raleway', sans-serif !important;
  font-weight: 800 !important; font-size: 11px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important; color: #fff !important;
  background: linear-gradient(90deg, #1b8b99 0%, #8ec13f 100%) !important;
  border: none !important; border-radius: 0 !important; cursor: pointer; white-space: nowrap; transition: filter 0.2s ease;
}
.k-gform-inline .gform_button:hover { filter: brightness(1.08); color: #fff !important; }
@media (max-width: 600px) {
  .k-gform-inline form { flex-direction: column !important; }
  .k-gform-inline input[type="email"] { border-right: 1px solid rgba(27,139,153,0.2) !important; height: auto !important; }
  .k-gform-inline .gform_footer { margin-top: 12px !important; }
  .k-gform-inline .gform_button { width: 100% !important; }
}


/* ── Z. UNDERLINE CONTACT GRAVITY FORM ───────────────────────────────────────
   k-gform k-gform-underline : transparent fields w/ bottom border, small
   uppercase labels, full-width gradient submit. */
.k-gform-underline .gform_fields { display: block !important; grid-template-columns: none !important; }
.k-gform-underline .gfield { margin: 0 0 20px !important; padding: 0 !important; }
.k-gform-underline .gfield_label {
  display: block !important; font-family: 'Raleway', sans-serif !important; font-weight: 800 !important;
  font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: rgba(0,0,0,0.35) !important; margin: 0 0 4px !important;
}
.k-gform-underline input[type="text"],
.k-gform-underline input[type="email"],
.k-gform-underline input[type="tel"],
.k-gform-underline textarea,
.k-gform-underline select {
  width: 100% !important; box-sizing: border-box !important; padding: 16px 0 !important;
  font-family: 'Raleway', sans-serif !important; font-size: 17px !important; background: transparent !important;
  border: none !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; border-radius: 0 !important;
  color: #0e1012 !important; outline: none !important; transition: border-color 0.2s ease !important;
}
.k-gform-underline textarea { min-height: 120px !important; resize: vertical !important; }
.k-gform-underline input:focus,
.k-gform-underline textarea:focus,
.k-gform-underline select:focus { border-bottom-color: #1b8b99 !important; }
.k-gform-underline .ginput_container { margin: 0 !important; }
.k-gform-underline .gform_footer { margin: 24px 0 0 !important; padding: 0 !important; }
.k-gform-underline .gform_button {
  width: 100% !important; padding: 20px !important; font-family: 'Raleway', sans-serif !important;
  font-weight: 800 !important; font-size: 11px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important; background: linear-gradient(90deg, #1b8b99 0%, #8ec13f 100%) !important;
  color: #fff !important; border: none !important; border-radius: 0 !important; cursor: pointer; transition: filter 0.2s ease;
}
.k-gform-underline .gform_button:hover { filter: brightness(1.08); color: #fff !important; }


/* ── AA. LOGO MARQUEE (km-track) ─────────────────────────────────────────────
   Infinite side-scroll. Logo list must be DUPLICATED for a seamless -50% loop. */
.km-track { display: flex; width: max-content; animation: km-scroll 45s linear infinite; }
.km-track:hover { animation-play-state: paused; }
@keyframes km-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .km-track { animation: none; } }


/* ── AC. KILL THEME'S HOVER UNDERLINE SITEWIDE ───────────────────────────────
   Remove the theme's blue hover underline everywhere EXCEPT prose links inside
   article bodies (.k-post-body), which keep a teal underline. */
a:hover { text-decoration: none !important; }
.k-post-body a { text-decoration: underline !important; text-decoration-color: rgba(27,139,153,0.35) !important; }
.k-post-body a:hover { text-decoration: underline !important; text-decoration-color: #1b8b99 !important; }


/* ── AD. COMPACT INLINE NEWSLETTER (hero panel) ──────────────────────────────
   Smaller variant of k-gform-inline for tight spots. Add THREE classes:
   k-gform k-gform-inline k-gform-sm . */
.k-gform-sm input[type="email"] { padding: 12px 16px !important; font-size: 13px !important; }
.k-gform-sm .gform_button { padding: 12px 18px !important; font-size: 9px !important; letter-spacing: 0.14em !important; }
@media (max-width: 600px) { .k-gform-sm input[type="email"] { height: auto !important; } }


/* ── AE. CONTENT + NARROW SIDE PANEL ─────────────────────────────────────────
   Wide content column + narrow ~300px panel (blog hero). class="k-cols-panel". */
.k-cols-panel { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: end; }
@media (max-width: 860px) { .k-cols-panel { grid-template-columns: 1fr; gap: 40px; align-items: start; } }


/* ── AF. FOOTER SOCIAL ICONS ─────────────────────────────────────────────────
   Larger, brighter SVG social icons; lime on hover. Wrap links in
   class="k-footer-social" ; icons use fill/stroke currentColor. */
.k-footer-social { display: flex; gap: 22px; align-items: center; margin-top: 28px; }
.k-footer-social a { color: rgba(255,255,255,0.55); display: inline-flex; transition: color 0.2s ease; }
.k-footer-social a:hover { color: #8ec13f; }


/* ── AG. FOCUS OUTLINE (no flash on mouse click, keep for keyboard) ──────────
   Remove the outline on mouse focus, keep a teal ring on keyboard focus. */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible { outline: 2px solid #1b8b99; outline-offset: 2px; border-radius: 2px; }