/* ==========================================================================
   TUSKR MEDIA — GLOBAL STYLESHEET
   Enqueued by the child theme on every page.
   Build marker: tk-build-2026-10-30-system-port

   What this is
   - Tokens (color, type, spacing, radius) as CSS custom properties on :root.
   - A small set of `tk-` patterns for new work: wrap, section, eyebrow,
     headings, buttons, hairline lists, stats, screenshot frames, grids.
   - Header and footer styling for the Theme Builder templates.

   What this is not
   - It does not restyle existing page HTML. Existing pages keep their own
     prefixes (tm-, tkr-, tkr-svc2-, tuskr-, wd-) until they are opened for
     other work, at which point their hard-coded values get replaced with
     the variables below and their duplicate patterns get swapped for tk-.

   Rules for new work
   1. Headlines are Manrope 600 with tight tracking, no accent-colored word.
      Body and UI text stay Inter.
   2. Eyebrow only where a section needs a label a reader would use to find
      their place. Not above every heading.
   3. Radius: 2px on small things, 4px on blocks. The dark inset block gets 4.
   4. One dark section per page, and it is the closing CTA.
   5. Where there is no image, use a number or a line of type. No icon-in-a-
      circle filler.
   6. The phone number is always a tel: link (tk-btn--call). Anything
      tappable is at least 44px tall on phones.
   Source of truth for these patterns: the Tuskr design system
   (sdharvison/tuskr-design-system, project/components/bundle.css).
   ========================================================================== */

:root {
  /* ---- neutrals (warm paper, from Module 00 / Longboard) ---- */
  --tk-paper:   #FFFFFF;   /* white sections */
  --tk-sand:    #FBF9F4;   /* default page background */
  --tk-band:    #F5F2EA;   /* alternate band */
  --tk-wash:    #EFE9DB;   /* eyebrow highlight bar */
  --tk-ink:     #1C1C1A;   /* text, dark blocks */
  --tk-ink-2:   #2A2A27;   /* surfaces inside dark blocks */
  --tk-muted:   #6B6862;   /* body copy */
  --tk-muted-d: #A9A69C;   /* body copy on dark */
  --tk-line:    #E4E0D6;   /* hairlines */
  --tk-line-d:  #3A3A35;   /* hairlines on dark */

  /* ---- accent (single green site-wide; #1e5e14 is retired) ---- */
  --tk-accent:     #1e6e14;
  --tk-accent-ink: #FFFFFF;
  --tk-accent-lt:  #7FBF6E; /* accent on dark backgrounds */
  --tk-accent-dk:  #175c10; /* hover */
  --tk-accent-ring: rgba(30, 110, 20, .15); /* live dot halo */
  --tk-tusk:       #46a02f; /* logo tusk green: on ink only, with ink text (5.1:1) */
  --tk-booked:     #E8F0E4; /* booked cell, selection, pale green fills */

  /* ---- type ---- */
  --tk-font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; /* loaded by functions.php */
  --tk-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --tk-h1: clamp(38px, 4.8vw, 58px);
  --tk-h2: clamp(28px, 3.2vw, 40px);
  --tk-h3: 22px;
  --tk-lede: 19px;
  --tk-body: 17px;
  --tk-small: 15px;
  --tk-micro: 13px;

  /* ---- layout ---- */
  --tk-wrap: 1240px;       /* body content */
  --tk-wrap-wide: 1360px;  /* header and footer */
  --tk-gutter: 24px;
  --tk-section: 112px;
  --tk-section-md: 88px;
  --tk-section-sm: 64px;

  /* ---- shape ---- */
  --tk-radius-sm: 2px;
  --tk-radius: 4px;
}

/* ==========================================================================
   BASE — scoped to .tk so Elementor chrome is untouched
   ========================================================================== */

.tk {
  font-family: var(--tk-font-body);
  color: var(--tk-ink);
  background: var(--tk-sand);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; }
.tk img { max-width: 100%; display: block; }
.tk a { color: inherit; text-decoration: none; }
.tk a:focus-visible, .tk button:focus-visible, .tk summary:focus-visible {
  outline: 2px solid var(--tk-accent);
  outline-offset: 3px;
}
/* On ink the green ring is 2.7:1; the light green is 7:1. */
.tk-cta-band a:focus-visible, .tk-cta-band button:focus-visible,
.tk-section--dark a:focus-visible, .tk-section--dark button:focus-visible,
.tk-footer a:focus-visible, .tk-footer button:focus-visible,
.tk-demo-hero a:focus-visible, .tk-demo-hero button:focus-visible {
  outline: 2px solid var(--tk-accent-lt);
  outline-offset: 3px;
}
.tk ::selection { background: var(--tk-booked); color: var(--tk-ink); }
.tk-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tk p { margin: 0; font-size: var(--tk-body); color: var(--tk-muted); }
.tk ul, .tk ol { margin: 0; padding: 0; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.tk-wrap {
  max-width: var(--tk-wrap);
  margin: 0 auto;
  padding: 0 var(--tk-gutter);
}
.tk-wrap--narrow { max-width: 820px; }
.tk-wrap--wide   { max-width: var(--tk-wrap-wide); }

.tk-section { padding: var(--tk-section) 0; }
.tk-section--md { padding: var(--tk-section-md) 0; }
.tk-section--sm { padding: var(--tk-section-sm) 0; }
.tk-section--paper { background: var(--tk-paper); }
.tk-section--band  { background: var(--tk-band); }

/* Dark section renders as an inset block, not a full-bleed band. */
.tk-section--dark { background: transparent; padding: 56px 0; }
.tk-section--dark > .tk-wrap {
  background: var(--tk-ink);
  color: var(--tk-paper);
  border-radius: var(--tk-radius);
  padding: 80px 64px;
}
.tk-section--dark p { color: var(--tk-muted-d); }
.tk-section--dark .tk-eyebrow { background: transparent; color: var(--tk-accent-lt); padding: 0; }
.tk-section--dark .tk-rules li { border-color: var(--tk-line-d); color: var(--tk-paper); }

/* ==========================================================================
   TYPE
   ========================================================================== */

.tk-eyebrow {
  display: inline-block;
  font-family: var(--tk-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tk-ink);
  background: var(--tk-wash);
  padding: 6px 12px;
  border-radius: var(--tk-radius-sm);
  margin: 0 0 20px;
}

.tk h1, .tk h2, .tk h3,
.tk-h1, .tk-h2, .tk-h3 {
  margin: 0;
  font-family: var(--tk-font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  color: inherit;
}
.tk h1, .tk-h1 { font-size: var(--tk-h1); max-width: 18ch; }
.tk h2, .tk-h2 { font-size: var(--tk-h2); max-width: 22ch; }
.tk h3, .tk-h3 { font-size: var(--tk-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tk h1 em, .tk h2 em, .tk-h1 em, .tk-h2 em { font-style: normal; font-weight: 400; color: inherit; }

.tk p.tk-lede {
  font-size: var(--tk-lede);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: 22px;
}
.tk-head { margin-bottom: 56px; }
.tk-head p { max-width: 60ch; margin-top: 18px; }
.tk-small { font-size: var(--tk-small); }
.tk-micro { font-size: var(--tk-micro); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--tk-radius-sm);
  font-family: var(--tk-font-body);
  font-size: var(--tk-small);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Pressed: a 1px push on everything tappable. */
.tk-btn:active, .tk-agent__chips button:active, .tk-agent__form button:active { transform: translateY(1px); }
.tk-btn--primary {
  background-color: var(--tk-accent) !important;
  color: var(--tk-accent-ink) !important; /* beats Elementor link color */
  border: 1.5px solid var(--tk-accent);
}
.tk-btn--primary:hover {
  background-color: var(--tk-ink) !important;
  border-color: var(--tk-ink);
  color: var(--tk-paper) !important;
}
.tk-btn--ghost {
  background-color: transparent !important;
  color: var(--tk-ink) !important;
  border: 1.5px solid var(--tk-line);
}
.tk-btn--ghost:hover { border-color: var(--tk-ink); }
.tk-section--dark .tk-btn--ghost { color: var(--tk-paper) !important; border-color: var(--tk-line-d); }
.tk-section--dark .tk-btn--ghost:hover { border-color: var(--tk-paper); }
.tk-btn:hover { transform: none !important; }
/* Call: the ghost style on a tel: link. "Call (909) 234-7147". */
.tk-btn--call {
  background-color: transparent !important;
  color: var(--tk-ink) !important;
  border: 1.5px solid var(--tk-line);
  font-variant-numeric: tabular-nums;
}
.tk-btn--call:hover { border-color: var(--tk-ink); }
.tk-section--dark .tk-btn--call { color: var(--tk-paper) !important; border-color: var(--tk-line-d); }
.tk-section--dark .tk-btn--call:hover { border-color: var(--tk-paper); }
.tk-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ==========================================================================
   PATTERNS
   ========================================================================== */

/* Hairline list — the Sharp replacement for card grids. */
.tk-rules { list-style: none; }
.tk-rules li {
  font-size: 16px;
  color: var(--tk-ink);
  padding: 16px 0;
  border-bottom: 1px solid var(--tk-line);
}
.tk-rules li:first-child { border-top: 1px solid var(--tk-line); }
.tk-rules li small {
  display: block;
  font-size: var(--tk-micro);
  color: var(--tk-muted);
  margin-top: 4px;
  line-height: 1.5;
}
/* Double-class selector so a page-level `.tk-x .tk-rules li { padding: N 0 }`
   shorthand can't zero the left gutter and put the mark on top of the text. */
.tk-rules.tk-rules--check li { padding-left: 26px !important; position: relative; }
.tk-rules.tk-rules--check li::before {
  content: "✓";
  position: absolute; left: 0; top: 16px;
  color: var(--tk-accent);
  font-weight: 700;
}

/* Stat — a number doing the work an image would. */
.tk-stat { border-top: 1px solid var(--tk-line); padding-top: 18px; }
.tk-stat b {
  display: block;
  font-family: var(--tk-font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--tk-ink);
}
.tk-stat span {
  display: block;
  margin-top: 8px;
  font-size: var(--tk-small);
  color: var(--tk-muted);
}
.tk-section--dark .tk-stat { border-color: var(--tk-line-d); }
.tk-section--dark .tk-stat b { color: var(--tk-paper); }

/* Screenshot frame — for system shots and site shots. */
.tk-shot {
  background: var(--tk-band);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.tk-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tk-shot--auto { aspect-ratio: auto; }

/* Card — used sparingly; the hairline list is the default. */
.tk-card {
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  padding: 32px;
}
.tk-card h3 { margin-bottom: 10px; }
.tk-card p { font-size: var(--tk-small); line-height: 1.6; }

/* Tag — status and category labels on work. */
.tk-tag {
  display: inline-block;
  font-size: 11px; /* nothing in the system is smaller */
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--tk-radius-sm);
  background: var(--tk-wash);
  color: var(--tk-ink);
}
.tk-tag--outline { background: transparent; border: 1px solid var(--tk-line); color: var(--tk-muted); }

/* FAQ — native details/summary. */
.tk-faq { max-width: 800px; }
.tk-faq details { border-top: 1px solid var(--tk-line); padding: 22px 0; }
.tk-faq details:last-child { border-bottom: 1px solid var(--tk-line); }
.tk-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 600;
}
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary::after { content: "+"; font-weight: 400; color: var(--tk-muted); font-size: 22px; line-height: 1; }
.tk-faq details[open] summary::after { content: "–"; }
.tk-faq details p { margin-top: 14px; font-size: 16px; max-width: 66ch; line-height: 1.6; }

/* Grids — collapse on their own. */
.tk-grid { display: grid !important; gap: 24px; } /* !important beats the V4 Flexbox display */
.tk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-grid--split { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }

/* Closing CTA — the one dark section per page. */
.tk-cta > .tk-wrap { text-align: center; }
.tk-cta h2 { margin: 0 auto; }
.tk-cta p { margin: 20px auto 0; max-width: 54ch; }
.tk-cta .tk-btn-row { justify-content: center; }

/* ==========================================================================
   MOTION + RESPONSIVE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tk *, .tk *::before, .tk *::after { transition: none !important; scroll-behavior: auto !important; }
  .tk-btn:active, .tk-agent__chips button:active, .tk-agent__form button:active { transform: none; }
}

@media (max-width: 1024px) {
  .tk-section { padding: var(--tk-section-md) 0; }
  .tk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-grid--split { grid-template-columns: 1fr; gap: 44px; }
  .tk-section--dark > .tk-wrap { padding: 64px 44px; }
}

@media (max-width: 640px) {
  .tk-section, .tk-section--md { padding: var(--tk-section-sm) 0; }
  .tk-section--dark { padding: 28px 0; }
  .tk-section--dark > .tk-wrap { padding: 48px 26px; margin: 0 14px; }
  .tk-grid--2, .tk-grid--3, .tk-grid--4 { grid-template-columns: 1fr; }
  .tk-btn { width: 100%; }
  .tk-card { padding: 24px; }
}

/* ==========================================================================
   MIGRATION SHIM — Web Design page
   Lets the Web Design page drop the variable block from Module 00 with zero
   visual change. Delete this block once the page is rebuilt on tk- patterns.
   ========================================================================== */

.tkr-wd {
  --paper: var(--tk-paper);
  --sand: var(--tk-sand);
  --band: var(--tk-band);
  --wash: var(--tk-wash);
  --ink: var(--tk-ink);
  --ink-2: var(--tk-ink-2);
  --muted: var(--tk-muted);
  --muted-d: var(--tk-muted-d);
  --line: var(--tk-line);
  --line-d: var(--tk-line-d);
  --accent: var(--tk-accent);
  --accent-ink: var(--tk-accent-ink);
  --accent-lt: var(--tk-accent-lt);
  --brass: #B08D2E;
  --amber: #c8941a;
  --charcoal: #2c2c2c;
}

/* ==========================================================================
   HEADER — Elementor V4 Flexbox + Nav Menu widget
   Scoped to .elementor-location-header (Elementor's own wrapper) so no class
   is needed on the outer Flexbox. Button widget still needs class tk-header__cta.
   ========================================================================== */

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tk-paper);
  border-bottom: 1px solid var(--tk-line);
}

/* Nav links */
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  font-family: var(--tk-font-body);
  font-size: var(--tk-small);
  font-weight: 500;
  color: var(--tk-muted);
  padding: 10px 14px;
  transition: color .15s ease;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--tk-ink);
}
.elementor-location-header .elementor-nav-menu--main .elementor-item .sub-arrow { margin-left: 4px; opacity: .6; }

/* Desktop dropdown */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  box-shadow: 0 16px 40px -24px rgba(28, 28, 26, .35);
  padding: 6px 0;
  min-width: 220px;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
  font-size: var(--tk-small);
  font-weight: 500;
  color: var(--tk-muted);
  padding: 11px 18px;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: var(--tk-ink);
  background: var(--tk-sand);
}

/* Hamburger */
.elementor-location-header .elementor-menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--tk-radius-sm);
  border: 1px solid var(--tk-line);
  background: transparent;
  color: var(--tk-ink);
}
.elementor-location-header .elementor-menu-toggle:hover,
.elementor-location-header .elementor-menu-toggle.elementor-active { border-color: var(--tk-ink); color: var(--tk-ink); }

/* Mobile / tablet panel */
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: var(--tk-paper);
  border-top: 1px solid var(--tk-line);
  border-bottom: 1px solid var(--tk-line);
  box-shadow: none;
  border-radius: 0;
}
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item {
  font-size: 17px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--tk-line);
}
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container li:last-child .elementor-item { border-bottom: 0; }
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu .elementor-item {
  font-size: var(--tk-small);
  padding-left: 40px;
  color: var(--tk-muted);
}

/* CTA button — covers both V4 Button element and legacy Button widget */
.elementor-location-header .tk-header__cta a,
.elementor-location-header a.tk-header__cta,
.elementor-location-header .tk-header__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: var(--tk-radius-sm);
  background: var(--tk-accent) !important;
  color: var(--tk-accent-ink) !important;
  font-family: var(--tk-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  border: 1.5px solid var(--tk-accent);
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.elementor-location-header .tk-header__cta a:hover,
.elementor-location-header a.tk-header__cta:hover,
.elementor-location-header .tk-header__cta .elementor-button:hover {
  background: var(--tk-ink) !important;
  border-color: var(--tk-ink);
}
.elementor-location-header .tk-header__cta a:active,
.elementor-location-header a.tk-header__cta:active,
.elementor-location-header .tk-header__cta .elementor-button:active { transform: translateY(1px); }

/* Phone: keep logo, toggle and button on one row without shrinking the logo */
@media (max-width: 767px) {
  .elementor-location-header .elementor-widget-image,
  .elementor-location-header .elementor-widget-theme-site-logo,
  .elementor-location-header .elementor-widget-nav-menu,
  .elementor-location-header .elementor-widget-button { flex-shrink: 0; }

  .elementor-location-header .elementor-widget-image img,
  .elementor-location-header .elementor-widget-theme-site-logo img,
  .elementor-location-header img { width: 132px; max-width: none; height: auto; }

  /* Dropdown overlays the page instead of sitting in the row, so the
     hidden menu's width no longer pushes the CTA off-screen. */
  .elementor-location-header .elementor-widget-nav-menu { position: static; }
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .elementor-location-header .elementor-menu-toggle {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .elementor-location-header .tk-header__cta a,
  .elementor-location-header a.tk-header__cta,
  .elementor-location-header .tk-header__cta .elementor-button { padding: 11px 12px; font-size: 13px; }
}


/* ==========================================================================
   FOOTER — Elementor V4 Flexboxes + Image / Heading / Paragraph / Icon List
   Classes used: tk-footer (outer), tk-footer__grid, tk-footer__brand,
   tk-footer__col (x3), tk-footer__bar
   ========================================================================== */

.tk-footer {
  background: var(--tk-ink);
  color: var(--tk-paper);
  border-top: 1px solid var(--tk-line-d); /* separates it from a dark closing band */
}

/* top grid */
.tk-footer__grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--tk-line-d);
}

/* brand column */
.tk-footer__brand img { width: 150px; height: auto; }
.tk-footer__brand p,
.tk-footer__brand .elementor-widget-text-editor {
  font-size: var(--tk-small);
  line-height: 1.55;
  color: var(--tk-muted-d);
  max-width: 30ch;
  margin: 0;
}

/* link columns */
.tk-footer__col h4,
.tk-footer__col .elementor-heading-title {
  margin: 0 0 16px;
  font-family: var(--tk-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tk-muted-d);
}
.tk-footer__col .elementor-icon-list-items { display: grid; gap: 10px; }
.tk-footer__col .elementor-icon-list-item { padding: 0; margin: 0; }
.tk-footer__col .elementor-icon-list-icon { display: none; }
.tk-footer__col .elementor-icon-list-text,
.tk-footer__col .elementor-icon-list-item a {
  font-family: var(--tk-font-body);
  font-size: var(--tk-small);
  color: var(--tk-paper) !important;
  padding: 0;
  transition: color .15s ease;
}
.tk-footer__col .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--tk-accent-lt) !important; }

/* bottom bar */
.tk-footer__bar {
  font-size: var(--tk-micro);
  color: var(--tk-muted-d);
}
.tk-footer__bar p,
.tk-footer__bar .elementor-widget-text-editor { margin: 0; font-size: var(--tk-micro); color: var(--tk-muted-d); }
.tk-footer__bar .elementor-icon-list-items { display: flex; gap: 20px; flex-wrap: wrap; }
.tk-footer__bar .elementor-icon-list-item { padding: 0; margin: 0; }
.tk-footer__bar .elementor-icon-list-icon { display: none; }
.tk-footer__bar .elementor-icon-list-text { font-size: var(--tk-micro); color: var(--tk-muted-d) !important; padding: 0; }
.tk-footer__bar .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--tk-paper) !important; }

@media (max-width: 1024px) {
  .tk-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .tk-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tk-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   HOMEPAGE — V4 rebuild (October 2026)
   Built from Flexboxes + atomic elements. Section padding and grids come
   from the tk-section / tk-grid patterns above; spacing between stacked
   elements is set in the panel (Layout → Gaps), so these classes carry no
   margins. Atomic elements carry the class on the element itself.
   ========================================================================== */

/* V4 compatibility. Elementor's atomic base styles use two-class selectors
   (.elementor .e-flexbox-base, .elementor .e-button-base) that beat single
   tk- classes. These .tk-scoped rules match that specificity and win by
   source order. Inner Flexboxes start at 0 padding; spacing comes from
   classes and panel gaps. */
.tk .e-flexbox-base { padding: 0; }
.tk.tk-section { padding: var(--tk-section) 0; }
.tk.tk-section--md { padding: var(--tk-section-md) 0; }
.tk .tk-wrap { padding: 0 var(--tk-gutter); }
.tk .tk-btn { display: inline-flex; padding: 15px 28px; border-radius: var(--tk-radius-sm); }
.tk .tk-btn--primary { border: 1.5px solid var(--tk-accent); }
.tk .tk-btn--primary:hover { border-color: var(--tk-ink); }
.tk .tk-btn--ghost { border: 1.5px solid var(--tk-line); }
.tk .tk-btn--ghost:hover { border-color: var(--tk-ink); }
.tk .tk-btn--call { border: 1.5px solid var(--tk-line); }
.tk .tk-btn--call:hover { border-color: var(--tk-ink); }
@media (max-width: 1024px) {
  .tk.tk-section { padding: var(--tk-section-md) 0; }
}
@media (max-width: 640px) {
  .tk.tk-section, .tk.tk-section--md { padding: var(--tk-section-sm) 0; }
  .tk .tk-btn { width: 100%; }
}

.tk-section--sand { background-color: var(--tk-sand); }

/* Text roles (compound with .tk so they beat `.tk p`) */
.tk .tk-sub   { font-size: var(--tk-body); line-height: 1.6; color: var(--tk-muted); max-width: 60ch; }
.tk .tk-lede-home { font-size: 18px; line-height: 1.6; color: var(--tk-muted); max-width: 33em; }
.tk .tk-fine  { font-size: var(--tk-micro); color: var(--tk-muted); }
.tk .tk-body  { font-size: var(--tk-small); line-height: 1.6; color: var(--tk-muted); }

/* Text link built from an atomic Button */
.tk .tk-link {
  display: inline-flex;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--tk-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--tk-accent) !important;
  text-decoration: none;
}
.tk .tk-link:hover { text-decoration: underline; transform: none !important; }
.tk .tk-link.tk-link--light { color: var(--tk-muted-d) !important; font-weight: 500; }
.tk .tk-link.tk-link--light:hover { color: var(--tk-paper) !important; }

/* ---- Hero ---- */
.tk-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--tk-sand);
  border-bottom: 1px solid var(--tk-line);
}
.tk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/wp-content/uploads/2026/09/Boise-Hyde-Park-scaled.webp");
  background-size: cover;
  background-position: center 70%;
}
.tk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(90deg, var(--tk-sand) 0%, var(--tk-sand) 38%, rgba(251, 249, 244, .72) 58%, rgba(251, 249, 244, .1) 100%);
}
.tk-hero > * { position: relative; z-index: 2; }
.tk-hero .tk-agent__log { min-height: 250px; max-height: 330px; }
/* Three children: intro (h1 + lede), the agent, actions (two buttons).
   Desktop: agent on the right across both rows. 1024px and below: one
   column in the order intro, agent, actions (set below). */
.tk-grid.tk-hero__grid { grid-template-columns: 1.05fr .95fr; column-gap: 64px; row-gap: 0; align-items: center; }
.tk-hero__intro { grid-column: 1; grid-row: 1; align-self: end; }
.tk-hero__actions { grid-column: 1; grid-row: 2; align-self: start; }
.tk-hero__grid > .tk-agent,
.tk-hero__grid > .tk-hero__agent { grid-column: 2; grid-row: 1 / span 2; }

/* ---- Problems ---- */
.tk-grid.tk-problems { column-gap: 48px; row-gap: 0; }
.tk .tk-problem { border-top: 1px solid var(--tk-line); padding: 20px 0 24px 0; }

/* ---- What I build (cards) ---- */
.tk-grid.tk-services { gap: 16px; }
/* Lead card: spans the row, three cards under it. Only kicks in once a card
   carries tk-service--lead, so a four-card row keeps working until then. */
.tk-grid.tk-services:has(.tk-service--lead) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk .tk-service.tk-service--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 32px;
  row-gap: 10px;
  padding: 32px;
}
.tk .tk-service--lead .tk-h3 { font-size: 26px; }
.tk .tk-service--lead .tk-body { font-size: var(--tk-body); max-width: 52ch; }
/* Placed by position: on the live page the link sits inside a tk-service__proof box. */
.tk .tk-service--lead > * { grid-column: 1; }
.tk .tk-service--lead > :last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.tk .tk-service--lead .tk-service__proof { margin: 0; border-top: 0; padding: 0; }
.tk .tk-service--lead .tk-link { min-height: 44px; align-items: center; }
.tk .tk-service {
  background-color: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  padding: 24px 22px 22px 22px;
}
.tk .tk-service__proof {
  margin-top: auto;
  border-top: 1px solid var(--tk-line);
  padding: 12px 0 0 0;
}
.tk .tk-web { border-top: 1px solid var(--tk-line); padding: 24px 0 0 0; }
.tk .tk-web p { color: var(--tk-muted); font-size: 16px; line-height: 1.55; max-width: 720px; }

/* ---- Systems (stats) ---- */
.tk-grid.tk-systems { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tk .tk-system { border-top: 2px solid var(--tk-ink); padding: 18px 0 0 0; }
.tk .tk-system__stat { border-top: 1px solid var(--tk-line); padding: 10px 0 0 0; }
.tk .tk-num {
  font-family: var(--tk-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tk-ink);
}
.tk .tk-num-label { font-size: 14px; line-height: 1.45; color: var(--tk-muted); }

/* ---- Process ---- */
.tk .tk-step { border-top: 2px solid var(--tk-ink); padding: 16px 0 0 0; }
/* Retired: the verb titles carry the order. Delete the spans when the page is next opened. */
.tk .tk-step__no { display: none; }

/* ---- Founder ---- */
/* .tk-scoped so it beats the V4 Image base styles (radius was being reset). */
.tk .tk-founder__img,
.tk .tk-founder__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--tk-radius);
}
.tk-grid.tk-founder { align-items: start; gap: 40px; }
.tk .tk-caption { font-size: var(--tk-small); line-height: 1.55; color: var(--tk-muted); }
.tk .tk-sig-name { font-size: var(--tk-small); font-weight: 600; color: var(--tk-ink); }
.tk .tk-sig-meta { font-size: var(--tk-micro); color: var(--tk-muted); }

/* ---- Closing band: full-bleed dark, runs straight into the footer ---- */
.tk-cta-band { background-color: var(--tk-ink); color: var(--tk-paper); }
.tk-cta-band .tk-h2,
.tk-cta-band .tk-h3 { color: var(--tk-paper); }
.tk-grid.tk-cta-band__opts { gap: 16px; max-width: 960px; }
.tk .tk-opt {
  background-color: var(--tk-ink-2);
  border: 1px solid var(--tk-line-d);
  border-radius: var(--tk-radius);
  padding: 26px 24px 26px 24px;
}
.tk .tk-opt p { color: var(--tk-muted-d); font-size: var(--tk-small); line-height: 1.6; }
.tk .tk-opt .tk-opt__phone { font-size: 14px; color: var(--tk-muted-d); }
.tk.tk-cta-band .tk-btn--ghost { color: var(--tk-paper) !important; border-color: var(--tk-line-d); }
.tk.tk-cta-band .tk-btn--ghost:hover { border-color: var(--tk-paper); }
.tk.tk-cta-band .tk-sub { color: var(--tk-muted-d); max-width: 56ch; }
.tk.tk-cta-band .tk-btn--call { color: var(--tk-paper) !important; border-color: var(--tk-line-d); }
.tk.tk-cta-band .tk-btn--call:hover { border-color: var(--tk-paper); }
/* On ink the primary takes the logo's tusk green with ink text (5.1:1). */
.tk.tk-cta-band .tk-btn--primary { background-color: var(--tk-tusk) !important; border-color: var(--tk-tusk); color: var(--tk-ink) !important; }
.tk.tk-cta-band .tk-btn--primary:hover { background-color: var(--tk-paper) !important; border-color: var(--tk-paper); color: var(--tk-ink) !important; }

@media (max-width: 1024px) {
  .tk-hero::after {
    background-image: linear-gradient(180deg, var(--tk-sand) 0%, var(--tk-sand) 55%, rgba(251, 249, 244, .55) 80%, rgba(251, 249, 244, .2) 100%);
  }
  .tk-grid.tk-systems { grid-template-columns: 1fr; gap: 28px; }
  .tk-grid.tk-hero__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .tk-hero__intro, .tk-hero__actions,
  .tk-hero__grid > .tk-agent, .tk-hero__grid > .tk-hero__agent { grid-column: 1; grid-row: auto; }
  .tk-hero__intro { order: 1; }
  .tk-hero__grid > .tk-agent, .tk-hero__grid > .tk-hero__agent { order: 2; }
  .tk-hero__actions { order: 3; }
}
@media (max-width: 640px) {
  .tk-grid.tk-problems { column-gap: 0; }
  .tk-grid.tk-services:has(.tk-service--lead) { grid-template-columns: 1fr; }
  .tk .tk-service.tk-service--lead { grid-template-columns: 1fr; padding: 24px 22px 22px 22px; }
  .tk .tk-service--lead > *, .tk .tk-service--lead > :last-child { grid-column: auto; grid-row: auto; }
}

/* ==========================================================================
   AGENT — chat widget used by the homepage hero and the demo pages.
   Markup lives in an HTML widget; this is the shared look. Each agent sets
   its avatar letter with a modifier (tk-agent--lead → "R").
   ========================================================================== */

.tk-agent {
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  box-shadow: 0 30px 70px -30px rgba(20,22,18,.55), 0 2px 6px rgba(20,22,18,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--tk-font-body);
  color: var(--tk-ink);
}
.tk-agent__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tk-line); }
.tk-agent__mark {
  width: 34px; height: 34px; border-radius: 50%; /* a circle, like the logo mark */
  background: var(--tk-ink); color: var(--tk-paper);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  flex-shrink: 0;
}
.tk-agent__who b { display: block; font-size: var(--tk-small); font-weight: 600; color: var(--tk-ink); }
.tk-agent__who span { font-size: var(--tk-micro); color: var(--tk-muted); }
.tk-agent__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--tk-micro); font-weight: 600; color: var(--tk-accent); }
.tk-agent__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-accent); box-shadow: 0 0 0 3px var(--tk-accent-ring); }
.tk-agent__log {
  min-height: 300px; max-height: 560px;
  overflow-y: auto;
  padding: 22px 18px 8px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--tk-sand);
}
.tk-agent__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; align-self: flex-end; }
.tk-agent__msg--ai { align-self: flex-start; }
.tk-agent__msg--ai::before {
  content: "";
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tk-ink); color: var(--tk-paper);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.tk-agent--lead .tk-agent__msg--ai::before { content: "R"; }
.tk-agent__bubble {
  padding: 11px 15px;
  border-radius: var(--tk-radius);
  font-size: var(--tk-small);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--tk-ink); color: var(--tk-paper);
  border-bottom-right-radius: 3px;
}
.tk-agent__msg--ai .tk-agent__bubble {
  background: var(--tk-paper); color: var(--tk-ink);
  border: 1px solid var(--tk-line);
  border-bottom-right-radius: var(--tk-radius);
  border-bottom-left-radius: 3px;
  white-space: normal;
}
.tk-agent__bubble p { margin: 0 0 8px; font-size: inherit; color: inherit; }
.tk-agent__bubble p:last-child { margin-bottom: 0; }
.tk-agent__bubble ul, .tk-agent__bubble ol { margin: 6px 0 8px; padding-left: 20px; }
.tk-agent__bubble li { margin-bottom: 3px; }
.tk-agent__msg--typing .tk-agent__bubble { color: var(--tk-muted); letter-spacing: .18em; }
/* Error: says what failed and gives Sam's number as a tel: link. */
.tk-agent__msg--err .tk-agent__bubble { border-color: var(--tk-ink); }
.tk-agent__msg--err .tk-agent__bubble a { color: var(--tk-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tk-agent__msg--sys { align-self: stretch; max-width: none; }
.tk-agent__msg--sys .tk-agent__bubble {
  width: 100%; text-align: center;
  background: transparent; color: var(--tk-muted);
  border: 1px dashed var(--tk-line);
  font-size: var(--tk-micro);
}
.tk-agent__msg--sys .tk-agent__bubble a { color: var(--tk-ink); font-weight: 600; }
.tk-agent__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 14px; background: var(--tk-sand); }
.tk-agent__chips span { font-size: var(--tk-micro); color: var(--tk-muted); margin-right: 4px; }
.tk-agent__chips button {
  font: inherit; font-size: var(--tk-micro); font-weight: 500;
  color: var(--tk-ink); background: var(--tk-paper);
  border: 1px solid var(--tk-line); border-radius: 999px;
  min-height: 44px; padding: 10px 16px; cursor: pointer;
}
.tk-agent__chips button:hover { border-color: var(--tk-ink); }
.tk-agent__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--tk-line); background: var(--tk-paper); }
.tk-agent__form input[type="text"]:not(.tk-agent__hp) {
  flex: 1; min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--tk-line); border-radius: var(--tk-radius-sm);
  font: inherit; font-size: 16px; /* smaller zooms the page on iOS */
  color: var(--tk-ink); background: var(--tk-paper);
}
.tk-agent__form input::placeholder { color: var(--tk-muted); opacity: 1; }
.tk-agent__form input:focus { outline: 2px solid var(--tk-accent); outline-offset: 1px; border-color: var(--tk-accent); }
.tk-agent__form button {
  width: 48px; flex-shrink: 0;
  border: 1.5px solid var(--tk-accent); border-radius: var(--tk-radius-sm);
  background: var(--tk-accent); color: var(--tk-accent-ink);
  font-size: 18px; cursor: pointer;
}
.tk-agent__form button:disabled, .tk-agent__form input:disabled { opacity: .5; cursor: default; }
.tk-agent__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tk-agent__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 18px 12px; font-size: var(--tk-micro); color: var(--tk-muted); border-top: 1px solid var(--tk-line); }
.tk-agent__foot a { color: var(--tk-ink); font-weight: 600; }
.tk-agent__reset { margin-left: auto; font: inherit; font-weight: 600; color: var(--tk-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tk-agent--closed .tk-agent__form,
.tk-agent--closed .tk-agent__chips,
.tk-agent--started .tk-agent__chips { display: none; }

@media (max-width: 1024px) {
  .tk-agent__log { min-height: 240px; max-height: 440px; }
  .tk-agent__msg { max-width: 92%; }
}
@media (max-width: 640px) {
  /* One scroll on a phone: the log grows instead of scrolling inside the page. */
  .tk-agent__log, .tk-hero .tk-agent__log { min-height: 200px; max-height: 60svh; }
  .tk-agent__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tk-agent__chips::-webkit-scrollbar { display: none; }
  .tk-agent__chips button { flex-shrink: 0; white-space: nowrap; }
}

/* ==========================================================================
   LEAD INTAKE DEMO — /lead-intake-agent-demo/ (October 2026)
   Hero: dark photo band, copy + things to try on the left, agent right.
   Flexboxes carry tk-demo-hero / tk-demo-hero__grid; the things-to-try list
   and the agent are two HTML widgets (child-theme/lead-demo-*.html).
   ========================================================================== */

/* ---- Hero band ---- */
.tk.tk-demo-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--tk-ink);
}
.tk-demo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/wp-content/uploads/2026/09/Boise-Hyde-Park-scaled.webp");
  background-size: cover;
  background-position: center 45%;
}
.tk-demo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(90deg, rgba(20,22,18,.82) 0%, rgba(20,22,18,.66) 45%, rgba(20,22,18,.3) 100%);
}
.tk-demo-hero > * { position: relative; z-index: 2; }

.tk .tk-demo-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 56px;
  row-gap: 32px;
  align-items: center;
}
.tk.tk-demo-hero .tk-h1 {
  color: var(--tk-paper);
  font-size: clamp(34px, 3.6vw, 46px);
  max-width: 15ch;
}
.tk.tk-demo-hero .tk-lede-home { color: rgba(251, 249, 244, .86); }

/* ---- Things to try (desktop list on the photo) ---- */
.tk .tk-demo-try__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tk-muted-d);
  margin-bottom: 6px;
}
.tk .tk-demo-try ul { list-style: none; border-top: 1px solid rgba(251, 249, 244, .22); }
.tk .tk-demo-try li { border-bottom: 1px solid rgba(251, 249, 244, .22); }
.tk .tk-demo-try button {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 28px 12px 0;
  cursor: pointer;
  position: relative;
}
.tk .tk-demo-try button::after { content: "→"; position: absolute; right: 2px; top: 12px; color: rgba(251, 249, 244, .6); }
.tk .tk-demo-try b { display: block; font-size: var(--tk-small); font-weight: 600; color: var(--tk-paper); }
.tk .tk-demo-try small { display: block; font-size: var(--tk-micro); color: rgba(251, 249, 244, .7); margin-top: 3px; }
.tk .tk-demo-try button:hover b,
.tk .tk-demo-try button:hover::after { color: var(--tk-accent-lt); }
.tk .tk-demo-try button:focus-visible { outline: 2px solid var(--tk-accent-lt); outline-offset: 2px; }
.tk .tk-demo-try button:disabled { cursor: default; opacity: .5; }

/* ---- Agent on the photo ---- */
.tk-demo-hero .tk-agent { box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.15); }

/* Try chips inside the card: phones and tablets only, stay after the first message */
.tk-agent .tk-agent__chips--try { display: none; padding: 10px 14px 0 14px; background: var(--tk-paper); border-top: 1px solid var(--tk-line); }

/* ---- Lead record strip inside the agent card ---- */
.tk-rec { border-top: 1px solid var(--tk-line); padding: 12px 18px 14px 18px; background: var(--tk-paper); }
.tk-rec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.tk-rec__label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tk-muted); }
.tk-rec__where { font-size: 12px; color: var(--tk-muted); }
.tk-rec__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--tk-line);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
}
.tk-rec__cell { background: var(--tk-paper); padding: 8px 10px; min-width: 0; transition: background-color .3s; }
.tk-rec__cell span { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--tk-muted); }
.tk-rec__cell b { display: block; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--tk-muted); overflow-wrap: anywhere; }
.tk-rec__cell.is-set b { color: var(--tk-ink); font-weight: 600; }
.tk-rec__cell.is-set span::after { content: "✓"; color: var(--tk-accent); font-weight: 700; }
.tk-rec__cell--wide { grid-column: span 2; }
.tk-rec__cell.is-booked { background: var(--tk-booked); }
.tk .tk-rec__foot { font-size: 12px; color: var(--tk-muted); margin: 8px 0 0 0; }

@media (max-width: 1024px) {
  .tk .tk-demo-hero__grid { grid-template-columns: 1fr; }
  .tk-demo-hero::after {
    background-image: linear-gradient(180deg, rgba(20,22,18,.8) 0%, rgba(20,22,18,.6) 40%, rgba(20,22,18,.45) 100%);
  }
  .tk-agent .tk-agent__chips--try { display: flex; }
  .tk-agent .tk-agent__chips--try + .tk-agent__form { border-top: 0; }
  .tk-agent--closed .tk-agent__chips--try { display: none; }
}
@media (max-width: 640px) {
  .tk-demo-hero .tk-agent__log { min-height: 200px; padding: 18px 14px 12px 14px; }
  .tk-rec { padding: 10px 14px 10px 14px; }
  .tk-rec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-rec__cell { padding: 5px 8px 6px 8px; }
  .tk-rec__cell span { line-height: 1.3; }
  .tk-rec__cell b { font-size: 13px; line-height: 1.3; }
  .tk-rec__where { display: none; }
  .tk .tk-rec__foot { margin: 6px 0 0 0; }
  /* Try chips: one row that scrolls sideways */
  .tk-agent .tk-agent__chips--try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 2px 14px; }
  .tk-agent .tk-agent__chips--try::-webkit-scrollbar { display: none; }
  .tk-agent .tk-agent__chips--try button,
  .tk-agent .tk-agent__chips--try span { flex-shrink: 0; white-space: nowrap; }
}

/* ==========================================================================
   LEGACY — carried over from Customizer Additional CSS. Colors read the
   tokens above; layout is unchanged until these pages are rebuilt.
   ========================================================================== */

.tkr-service-example {
  list-style: none !important;
}

.tkr-service-example::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--tk-accent) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 8px !important;
  margin-bottom: 2px !important;
}

.tkr-founder-photo-small {
  object-position: top center !important;
}

header.site-header,
.site-header,
#masthead {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.tkr-svc2-btn-ghost {
  color: #888780 !important;
  text-decoration-color: #444 !important;
}

.tkr-svc2-btn-ghost:hover {
  color: #ffffff !important;
}
/* =========================================================
   TUSKR BLOG — V4 editor build
   ========================================================= */

/* ---------- Shared hero band ---------- */
.tuskr-hero {
  position: relative;
  width: 100%;
  background-color: var(--tk-sand) !important;
  background-image:
    radial-gradient(ellipse 60% 70% at 8% 100%, rgba(30, 110, 20, .16) 0%, rgba(30, 110, 20, 0) 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23D3D1C7'/%3E%3C/svg%3E") !important;
  border-bottom: 1px solid var(--tk-line) !important;
  overflow: hidden;
}
.tuskr-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 60px solid rgba(30, 110, 20, .07);
  pointer-events: none;
}
.tuskr-archive-hero { padding: 96px 24px 72px !important; }
.tuskr-post-hero    { padding: 88px 24px 64px !important; }

.tuskr-hero-inner {
  position: relative;
  z-index: 1;
  width: 100% !important;
  margin: 0 auto !important;
}
.tuskr-archive-hero .tuskr-hero-inner { max-width: 1100px !important; }
.tuskr-post-hero .tuskr-hero-inner    { max-width: 760px !important; }

.tuskr-hero .elementor-widget-heading .elementor-heading-title,
.tuskr-hero .elementor-widget-theme-post-title .elementor-heading-title,
.tuskr-hero .elementor-widget-theme-archive-title .elementor-heading-title {
  font-family: var(--tk-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em;
  color: var(--tk-ink) !important;
  line-height: 1.08 !important;
}
.tuskr-archive-hero .elementor-heading-title { font-size: clamp(40px, 6vw, 64px) !important; margin-bottom: 14px !important; }
.tuskr-post-hero .elementor-heading-title    { font-size: clamp(32px, 4.8vw, 50px) !important; margin: 14px 0 20px !important; }

.tuskr-hero-sub .elementor-widget-container,
.tuskr-hero-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: var(--tk-muted) !important;
  max-width: 560px;
}

.tuskr-post-meta,
.tuskr-post-meta .elementor-icon-list-item,
.tuskr-post-meta .elementor-icon-list-text,
.tuskr-post-meta .elementor-shortcode {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tk-muted) !important;
}
.tuskr-post-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ---------- Category chip ---------- */
.tuskr-cat .elementor-post-info__terms-list,
.tuskr-cat .elementor-icon-list-items,
.tuskr-cat .elementor-icon-list-item { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.tuskr-cat .elementor-post-info__terms-list-item,
.tuskr-cat .elementor-icon-list-text a,
.tuskr-cat .elementor-icon-list-text span {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 5px 10px;
  border-radius: var(--tk-radius-sm);
  background-color: var(--tk-wash);
  color: var(--tk-ink) !important;
}


/* ---------- Archive grid wrapper ---------- */
.tuskr-archive {
  width: 100%;
  padding: 64px 24px !important;
}
.tuskr-archive .elementor-widget-loop-grid {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Card (the Loop Item root) ---------- */
.tuskr-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background-color: var(--tk-paper) !important;
  border: 1px solid var(--tk-line) !important;
  border-radius: 14px !important;
  padding: 140px 28px 26px !important;
  height: 100%;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tuskr-card:hover {
  border-color: var(--tk-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28, 28, 26, .06);
}
.tuskr-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 112px;
  background-color: var(--tk-booked);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(30, 110, 20, .18) 0%, rgba(30, 110, 20, 0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23D3D1C7'/%3E%3C/svg%3E");
  border-bottom: 1px solid var(--tk-line);
}
.tuskr-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 22px solid rgba(30, 110, 20, .10);
  pointer-events: none;
}


.tuskr-card > * { position: relative; z-index: 1; }
.tuskr-card .tuskr-cat {
  position: absolute !important;
  top: 24px;
  left: 28px;
  z-index: 2;
}
.tuskr-card .tuskr-cat .elementor-post-info__terms-list-item,
.tuskr-card .tuskr-cat .elementor-icon-list-text a,
.tuskr-card .tuskr-cat .elementor-icon-list-text span { background-color: var(--tk-paper); }

.tuskr-card .tuskr-card-date .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tk-muted) !important;
  margin-bottom: 10px !important;
}
.tuskr-card .elementor-widget-theme-post-title .elementor-heading-title,
.tuskr-card .elementor-widget-theme-post-title .elementor-heading-title a {
  font-family: var(--tk-font-display) !important;
  letter-spacing: -.01em;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--tk-ink) !important;
  text-decoration: none !important;
  margin-bottom: 12px !important;
}
.tuskr-card .elementor-widget-theme-post-title .elementor-heading-title a:hover { color: var(--tk-accent) !important; }
.tuskr-card .elementor-widget-theme-post-excerpt .elementor-widget-container {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--tk-muted) !important;
  margin-bottom: 18px !important;
}
.tuskr-card .tuskr-card-link a {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--tk-accent) !important;
  text-decoration: none !important;
}
.tuskr-card .tuskr-card-link a:hover { text-decoration: underline !important; }

/* Pagination */
.tuskr-archive .elementor-pagination {
  font-family: 'Inter', sans-serif !important;
  margin-top: 44px;
}
.tuskr-archive .elementor-pagination .page-numbers {
  color: var(--tk-muted) !important;
  padding: 8px 12px;
  border-radius: 8px;
}
.tuskr-archive .elementor-pagination .page-numbers.current {
  background-color: var(--tk-booked) !important;
  color: var(--tk-accent) !important;
  font-weight: 600;
}

/* ---------- Single post body ---------- */
.tuskr-article {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px 24px 48px !important;
}
.tuskr-article .elementor-widget-theme-post-content .elementor-widget-container {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--tk-ink) !important;
}
.tuskr-article .elementor-widget-theme-post-content p { margin: 0 0 24px !important; }
.tuskr-article .elementor-widget-theme-post-content h2 {
  font-family: var(--tk-font-display) !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--tk-ink) !important;
  margin: 48px 0 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--tk-line);
}
.tuskr-article .elementor-widget-theme-post-content h3 {
  font-family: var(--tk-font-display) !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--tk-ink) !important;
  margin: 36px 0 12px !important;
}
.tuskr-article .elementor-widget-theme-post-content h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 28px 0 8px !important;
}
.tuskr-article .elementor-widget-theme-post-content ul,
.tuskr-article .elementor-widget-theme-post-content ol {
  margin: 0 0 24px !important;
  padding-left: 26px !important;
}
.tuskr-article .elementor-widget-theme-post-content li { margin-bottom: 8px !important; }
.tuskr-article .elementor-widget-theme-post-content li::marker { color: var(--tk-accent); }
.tuskr-article .elementor-widget-theme-post-content a {
  color: var(--tk-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.tuskr-article .elementor-widget-theme-post-content a:hover { color: var(--tk-ink) !important; }
.tuskr-article .elementor-widget-theme-post-content strong { font-weight: 600 !important; }
.tuskr-article .elementor-widget-theme-post-content blockquote {
  margin: 32px 0 !important;
  padding: 20px 24px !important;
  border-left: 1px solid var(--tk-accent) !important;
  background-color: transparent !important;
  border-radius: 0;
  font-size: 18px !important;
  font-style: normal !important;
}
.tuskr-article .elementor-widget-theme-post-content blockquote p:last-child { margin-bottom: 0 !important; }
.tuskr-article .elementor-widget-theme-post-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  margin: 8px 0 24px !important;
}
.tuskr-article .elementor-widget-theme-post-content hr {
  border: 0 !important;
  border-top: 1px solid var(--tk-line) !important;
  margin: 40px 0 !important;
}
.tuskr-article .elementor-widget-theme-post-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 0 24px !important;
  font-size: 16px !important;
}
.tuskr-article .elementor-widget-theme-post-content th,
.tuskr-article .elementor-widget-theme-post-content td {
  border: 1px solid var(--tk-line) !important;
  padding: 10px 12px !important;
  text-align: left !important;
}
.tuskr-article .elementor-widget-theme-post-content th {
  background-color: var(--tk-booked) !important;
  font-weight: 600 !important;
}

/* ---------- End-of-post CTA ---------- */
.tuskr-article-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 56px !important;
  padding: 40px 36px !important;
  background-color: var(--tk-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='rgba(255,255,240,0.18)'/%3E%3C/svg%3E") !important;
  border-radius: 14px !important;
}
.tuskr-article-cta::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 36px solid rgba(251, 249, 244, .08);
  pointer-events: none;
}
.tuskr-article-cta > * { position: relative; z-index: 1; }
.tuskr-article-cta .elementor-heading-title {
  font-family: var(--tk-font-display) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--tk-sand) !important;
  margin-bottom: 10px !important;
}
.tuskr-article-cta .elementor-widget-text-editor {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: rgba(251, 249, 244, .82) !important;
  margin-bottom: 22px !important;
}
.tuskr-article-cta .elementor-button {
  background-color: var(--tk-sand) !important;
  background-image: none !important;
  color: var(--tk-accent) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
}
.tuskr-article-cta .elementor-button:hover {
  background-color: var(--tk-booked) !important;
  color: var(--tk-ink) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .tuskr-archive-hero { padding: 64px 20px 48px !important; }
  .tuskr-post-hero    { padding: 56px 20px 40px !important; }
  .tuskr-hero::after  { display: none; }
  .tuskr-archive { padding: 40px 20px !important; }
  .tuskr-article { padding: 40px 20px 32px !important; }
  .tuskr-article .elementor-widget-theme-post-content .elementor-widget-container { font-size: 17px !important; }
  .tuskr-article .elementor-widget-theme-post-content h2 { font-size: 24px !important; }
  .tuskr-article .elementor-widget-theme-post-content h3 { font-size: 20px !important; }
  .tuskr-card { padding: 132px 22px 22px !important; }
  .tuskr-card .tuskr-cat { left: 22px; }
  .tuskr-article-cta { padding: 32px 24px !important; }
}