/* =========================================================================
   Identikit Card — scoped widget styles
   All classes prefixed `.ikc-*` so this file can drop into ANY site without
   colliding with host styles. Inherits site palette via CSS vars; override
   via config.brand or `--ikc-*` overrides at the host level.
   ========================================================================= */

:root {
  /* Defaults — overridden by the host site if it defines these vars */
  --ikc-accent:  var(--gold,   #c4a24f);
  --ikc-surface: var(--white,  #ffffff);
  --ikc-ink:     var(--ink,    #0b1a32);
  --ikc-muted:   var(--muted,  #5b6b80);
  --ikc-line:    var(--line,   #e5e8ee);
  --ikc-navy:    var(--navy,   #0b1a32);
  --ikc-mist:    var(--mist,   #f6f7fa);
  --ikc-radius:  0;        /* keep ARRE's sharp-corner discipline */
  --ikc-shadow:  0 1px 0 rgba(11, 26, 50, 0.05), 0 4px 24px rgba(11, 26, 50, 0.06);
}

/* ---- Mount wrapper — holds outside-placement callouts + the card ----
   When placement = "outside", a callout-row renders as a sibling of .ikc
   (above or below it). When placement = "inside", the wrapper is essentially
   passthrough and the callout renders within .ikc. */
.ikc-mount {
  box-sizing: border-box;
  display: block;
  width: 100%;
}
/* Outside callout sits FLUSH against the card border — no gap. The bar
   touches the card's top or bottom edge for a unified visual block. */
.ikc-mount--placement-outside > .ikc-callout-row { margin: 0; }
.ikc-mount--placement-outside > .ikc-callout-row + .ikc { margin-top: 0; }
.ikc-mount--placement-outside > .ikc + .ikc-callout-row { margin-top: 0; }

/* ---- Root card container ----
   Padding is split into X/Y CSS vars so mode classes can set asymmetric
   defaults (e.g. hero is taller than wide) AND the narrow override can
   collapse them both to one value. */
.ikc {
  --ikc-pad-x: 22px;
  --ikc-pad-y: 22px;
  --ikc-gap: 18px;
  --ikc-info-gap: 4px;
  box-sizing: border-box;
  background: var(--ikc-surface);
  color: var(--ikc-ink);
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
  border: 1px solid var(--ikc-line);
  border-radius: var(--ikc-radius);
  padding: var(--ikc-pad-y) var(--ikc-pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ikc-gap);
  align-items: flex-start;
  position: relative;
}

/* ---- Narrow density: tight padding, tight gaps, compressed info rhythm.
   Selector specificity (0,2,0) beats mode classes (0,1,0) so this wins
   regardless of which mode is active. */
.ikc-mount--padding-narrow .ikc {
  --ikc-pad-x: 8px;
  --ikc-pad-y: 8px;
  --ikc-gap: 10px;
  --ikc-info-gap: 2px;
}
.ikc-mount--padding-narrow .ikc-name      { margin-bottom: 0; }
.ikc-mount--padding-narrow .ikc-tagline   { margin-bottom: 4px; }
.ikc-mount--padding-narrow .ikc-credentials { margin-bottom: 4px; }
.ikc-mount--padding-narrow .ikc-specs     { margin-bottom: 4px; gap: 3px; }
.ikc-mount--padding-narrow .ikc-channels  { margin-bottom: 4px; gap: 2px; }
.ikc-mount--padding-narrow .ikc-socials   { margin-bottom: 6px; gap: 6px; }
.ikc-mount--padding-narrow .ikc-info      { gap: 0; }

/* ---- Optional callout (above/below the card body) ----
   The row uses explicit width: 100% (not flex-basis) so it stays full-width
   regardless of parent flex-direction (mobile hero is column-flex). */
.ikc-callout-row {
  width: 100%;
  flex: 0 0 auto;
  flex-basis: 100%;       /* belt + suspenders for row-flex contexts */
  display: flex;
  justify-content: center;
  margin: 0;
  box-sizing: border-box;
}
.ikc-callout-row--top    { order: -1; }
.ikc-callout-row--bottom { order: 99; }

/* Dual selector — works both INSIDE the card (.ikc .ikc-callout) and
   OUTSIDE the card as a sibling within the wrapper (.ikc-mount .ikc-callout).
   Higher specificity than `.ikc a { color: inherit }` so the white text wins. */
.ikc-mount .ikc-callout,
.ikc .ikc-callout {
  display: inline-block;
  padding: 13px 32px;
  background: var(--ikc-navy);
  color: var(--ikc-surface);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  text-decoration: none;
  border-radius: var(--ikc-radius);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;          /* text stays on ONE LINE always */
  overflow: hidden;
}
.ikc-mount .ikc-callout:hover,
.ikc .ikc-callout:hover {
  background: var(--ikc-accent);
  color: var(--ikc-navy);
  transform: translateY(-1px);
}
.ikc-mount .ikc-callout:focus-visible,
.ikc .ikc-callout:focus-visible {
  outline: 2px solid var(--ikc-accent);
  outline-offset: 2px;
}

/* ---- Callout alignment variants ----
   Applied via .ikc-callout-row--align-{left|right|center|block}. */
.ikc-callout-row--align-left   { justify-content: flex-start; }
.ikc-callout-row--align-right  { justify-content: flex-end; }
.ikc-callout-row--align-center { justify-content: center; }

/* Block: callout sits centered with two INVISIBLE PERFECT SQUARES on each
   side — width === height === bar height. Flush against the bar (no gap).
   Side zones are pure negative space; only the bar is visible. Bar height
   is bumped vs the other alignments so the squares read as substantial. */
/* Block uses CSS Grid with explicit 3-column track + EXPLICIT grid-column
   placement on the callout (col 2) so it never auto-places into col 1 if
   pseudo-elements get hidden by responsive overrides. minmax(0, 1fr) lets
   the middle column shrink below content min-width without breaking layout. */
.ikc-callout-row--align-block {
  --ikc-bar-h: 42px;
  display: grid !important;
  grid-template-columns: var(--ikc-bar-h) minmax(0, 1fr) var(--ikc-bar-h);
  align-items: center;
  gap: 0;                       /* flush */
}
.ikc-callout-row--align-block::before {
  content: "";
  grid-column: 1;
  height: var(--ikc-bar-h);
  width: var(--ikc-bar-h);
  background: transparent;
}
.ikc-callout-row--align-block::after {
  content: "";
  grid-column: 3;
  height: var(--ikc-bar-h);
  width: var(--ikc-bar-h);
  background: transparent;
}
.ikc-callout-row--align-block .ikc-callout {
  grid-column: 2;               /* pinned to middle column always */
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  min-width: 0;                 /* allow shrinking */
}
/* Font shrinks at smaller widths so the (white-space: nowrap) text stays on
   ONE line. Button HEIGHT stays fixed at the natural padding+line-height. */
@media (max-width: 1023px) {
  .ikc-mount .ikc-callout,
  .ikc .ikc-callout { font-size: 0.72rem; letter-spacing: 0.08em; padding: 13px 22px; }
}
@media (max-width: 639px) {
  .ikc-mount .ikc-callout,
  .ikc .ikc-callout { font-size: 0.64rem; letter-spacing: 0.06em; padding: 13px 14px; }
  .ikc-callout-row--align-block { --ikc-bar-h: 38px; }
}
@media (max-width: 419px) {
  .ikc-mount .ikc-callout,
  .ikc .ikc-callout { font-size: 0.56rem; letter-spacing: 0.05em; padding: 13px 8px; }
}

@media (max-width: 639px) {
  .ikc .ikc-callout { font-size: 0.7rem; padding: 11px 22px; letter-spacing: 0.08em; }
}

.ikc *, .ikc *::before, .ikc *::after { box-sizing: border-box; }
/* Scope the link-color reset so it does NOT clobber the callout's white text. */
.ikc a:not(.ikc-callout) { color: inherit; text-decoration: none; }
.ikc a:not(.ikc-callout):focus-visible { outline: 2px solid var(--ikc-accent); outline-offset: 2px; }

/* ---- Photo ---- */
.ikc-photo {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: var(--ikc-radius);
  overflow: hidden;
  background: var(--ikc-mist);
  border: 1px solid var(--ikc-line);
}
.ikc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Info block ---- */
.ikc-info { flex: 1 1 auto; min-width: 0; }
.ikc-name {
  font-family: var(--font-heading, var(--font-body, sans-serif));
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ikc-ink);
  margin: 0 0 2px;
  line-height: 1.2;
}
.ikc-honorific {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ikc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
  vertical-align: middle;
}
.ikc-tagline {
  font-size: 0.84rem;
  color: var(--ikc-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}

/* ---- Credentials row ---- */
.ikc-credentials {
  font-size: 0.76rem;
  color: var(--ikc-muted);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.ikc-credentials strong { color: var(--ikc-ink); font-weight: 600; }

/* ---- Specialty pills ---- */
.ikc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.ikc-specs li {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--ikc-mist);
  color: var(--ikc-ink);
  border: 1px solid var(--ikc-line);
}

/* ---- Channels (phone, sms, email) ---- */
.ikc-channels {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ikc-channels li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
}
.ikc-channels svg { color: var(--ikc-accent); flex-shrink: 0; }
.ikc-channels a { color: var(--ikc-ink); font-weight: 600; }
.ikc-channels a:hover { color: var(--ikc-accent); }
.ikc-channels .ikc-channel-label {
  color: var(--ikc-muted);
  font-size: 0.72rem;
  font-weight: 500;
  margin-left: 4px;
}

/* ---- Socials row ---- */
.ikc-socials {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  gap: 8px;
}
.ikc-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ikc-line);
  color: var(--ikc-muted);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ikc-socials a:hover {
  color: var(--ikc-accent);
  border-color: var(--ikc-accent);
  transform: translateY(-1px);
}

/* ---- CTAs ---- */
.ikc-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ikc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ikc-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
/* DEFAULT: gold bg + navy text — matches ARRE's .btn-header-primary brand */
.ikc-cta-primary {
  background: var(--ikc-accent);
  color: var(--ikc-navy);
  border: 1px solid var(--ikc-accent);
}
.ikc-cta-primary:hover { background: transparent; color: var(--ikc-navy); border-color: var(--ikc-navy); }
.ikc-cta-outline {
  background: transparent;
  color: var(--ikc-navy);
  border: 1px solid var(--ikc-navy);
}
.ikc-cta-outline:hover { background: var(--ikc-navy); color: var(--ikc-surface); }

/* ---- Optional CTA color variants — pick one and apply via class ---- */
/* B: navy bg / white text (the original default) */
.ikc-cta-navy {
  background: var(--ikc-navy);
  color: var(--ikc-surface);
  border: 1px solid var(--ikc-navy);
}
.ikc-cta-navy:hover { background: var(--ikc-accent); border-color: var(--ikc-accent); color: var(--ikc-navy); }
/* C: black bg / white text — Cardenas's exact style */
.ikc-cta-black {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.ikc-cta-black:hover { background: var(--ikc-accent); border-color: var(--ikc-accent); color: var(--ikc-navy); }
/* D: gold outline / navy text — lighter, less commitment */
.ikc-cta-goldoutline {
  background: transparent;
  color: var(--ikc-navy);
  border: 1px solid var(--ikc-accent);
}
.ikc-cta-goldoutline:hover { background: var(--ikc-accent); border-color: var(--ikc-accent); color: var(--ikc-navy); }
/* E: navy bg / gold text + gold border — premium reverse */
.ikc-cta-navygold {
  background: var(--ikc-navy);
  color: var(--ikc-accent);
  border: 1px solid var(--ikc-accent);
}
.ikc-cta-navygold:hover { background: var(--ikc-accent); color: var(--ikc-navy); border-color: var(--ikc-accent); }
.ikc-cta-ghost {
  background: transparent;
  color: var(--ikc-muted);
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.ikc-cta-ghost:hover { color: var(--ikc-ink); }

/* =========================================================================
   PHOTO POSITION — independent of mode. Applied via .ikc--pos-* class.
   Mobile always collapses to top-center regardless (handled in responsive).
   ========================================================================= */
.ikc--pos-left  { flex-direction: row;           align-items: flex-start; text-align: left; }
.ikc--pos-right { flex-direction: row-reverse;   align-items: flex-start; text-align: left; }
.ikc--pos-top-left {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.ikc--pos-top-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ikc--pos-top-center .ikc-specs,
.ikc--pos-top-center .ikc-socials { justify-content: center; }
.ikc--pos-top-center .ikc-channels { align-items: center; }
.ikc--pos-top-center .ikc-channels li { justify-content: center; }
.ikc--pos-top-center .ikc-ctas { justify-content: center; }

/* =========================================================================
   MODES — three placement variants
   ========================================================================= */

/* ---- Mode 1: HERO — fills a hero band, wide horizontal layout
   align-items is intentionally NOT set here — the position class (.ikc--pos-*)
   controls alignment so "left" anchors photo to top-left corner instead of
   vertically centering it. Padding overrides via vars so narrow density can
   win without per-mode redefinition. */
.ikc--hero {
  --ikc-pad-x: 28px;
  --ikc-pad-y: 32px;
}
.ikc--hero .ikc-photo { width: 140px; height: 140px; }
.ikc--hero .ikc-name { font-size: 2rem; }
.ikc--hero .ikc-tagline { font-size: 1rem; }
.ikc--hero .ikc-ctas { margin-top: 4px; }
.ikc--hero .ikc-cta { height: 48px; padding: 0 28px; font-size: 0.88rem; }

/* ---- Mode 2: HEADER — compact horizontal version that lives in nav bar ---- */
.ikc--header {
  --ikc-pad-x: 14px;
  --ikc-pad-y: 10px;
  gap: 12px;
  align-items: center;
  border-width: 0;
  background: transparent;
}
.ikc--header .ikc-photo { width: 48px; height: 48px; }
.ikc--header .ikc-name { font-size: 0.92rem; margin: 0; }
.ikc--header .ikc-tagline,
.ikc--header .ikc-credentials,
.ikc--header .ikc-specs,
.ikc--header .ikc-channels,
.ikc--header .ikc-socials,
.ikc--header .ikc-cta-secondary { display: none; }
.ikc--header .ikc-ctas { margin: 0; }
.ikc--header .ikc-cta { height: 32px; padding: 0 14px; font-size: 0.72rem; }

/* ---- Mode 3: SIDEBAR — vertical stack alongside content ---- */
.ikc--sidebar {
  --ikc-pad-x: 20px;
  --ikc-pad-y: 24px;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: 320px;
}
.ikc--sidebar .ikc-photo {
  width: 100%;
  height: 240px;
  aspect-ratio: 4 / 5;
}
.ikc--sidebar .ikc-ctas { flex-direction: column; }
.ikc--sidebar .ikc-cta { width: 100%; }

/* =========================================================================
   RESPONSIVE — breakpoint behaviors per mode
   Mobile (<640) · Tablet (640–1024) · Desktop (1024+)
   ========================================================================= */

/* ---- HERO mode responsive ----
   Tablet (640–1023): stack photo on TOP, info below, anchored to LEFT.
   (Photo at top-left corner of card per Christian's preference.) */
@media (max-width: 1023px) {
  .ikc--hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    --ikc-pad-x: 20px;
    --ikc-pad-y: 24px;
    gap: 16px;
  }
  .ikc--hero .ikc-photo { width: 120px; height: 120px; }
  .ikc--hero .ikc-name { font-size: 1.6rem; }
  .ikc--hero .ikc-specs { justify-content: flex-start; }
  .ikc--hero .ikc-socials { justify-content: flex-start; }
  .ikc--hero .ikc-channels { align-items: flex-start; }
  .ikc--hero .ikc-channels li { justify-content: flex-start; }
}
@media (max-width: 639px) {
  .ikc--hero {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    --ikc-pad-x: 18px;
    --ikc-pad-y: 22px;
  }
  .ikc--hero .ikc-photo { width: 96px; height: 96px; }
  .ikc--hero .ikc-name { font-size: 1.4rem; }
  .ikc--hero .ikc-specs { justify-content: flex-start; }
  .ikc--hero .ikc-channels { align-items: flex-start; }
  .ikc--hero .ikc-channels li { justify-content: flex-start; }
  .ikc--hero .ikc-socials { justify-content: flex-start; }
  .ikc--hero .ikc-ctas { flex-direction: column; width: 100%; }
  .ikc--hero .ikc-cta { width: 100%; }
}

/* ---- HEADER mode responsive ---- */
@media (max-width: 639px) {
  /* On mobile, the header card collapses to just photo + name + primary CTA */
  .ikc--header .ikc-tagline { display: none; }
  .ikc--header .ikc-name { font-size: 0.84rem; }
  .ikc--header .ikc-photo { width: 40px; height: 40px; }
}

/* ---- SIDEBAR mode responsive ---- */
@media (max-width: 639px) {
  /* On mobile, sidebar becomes a stacked card the full content width */
  .ikc--sidebar { max-width: none; }
  .ikc--sidebar .ikc-photo { height: 200px; }
}

/* =========================================================================
   MODE 4: TOPFIX — sits at the very top of the document, above the header.
   Tablet + mobile only (<900px). Hidden on desktop (>=900px).
   Lives in normal document flow: scrolls AWAY with the page as the user
   scrolls down; only visible when scrolled to the top. The sticky site
   header takes over the pinned-to-top role once the card has scrolled off.
   CTA callout sits on TOP of the card (via data-ikc-callout="top").

   SAVED BASELINE — v3 (2026-06-05, user-approved on staging)
   Mount one-liner: <div data-ikc-mount data-ikc-mode="topfix" data-ikc-callout="top"></div>
   Locked defaults: callout=top, edge-to-edge (breaks card padding),
   align/block squares disabled, full-width navy button, default density,
   NORMAL FLOW (not fixed) — scrolls away with page content.
   Bizcard shape (default in config): height 240px, photo 96px, info-max 360px,
   flex-wrap NOWRAP (info never drops below photo), TOP + BOTTOM 1px borders
   (var(--ikc-line)) framing the card. Live-tunable via 0.58 Bizcard tuning.
   Do NOT alter without confirming — explore variations in a new mode class.
   ========================================================================= */

/* Desktop: hide entirely (the visitor sees normal header + page).
   Override: add `ikc-show-topfix-desktop` to <body> to keep the topfix
   strip visible at >=900px too (staging-tuner toggle option). */
@media (min-width: 900px) {
  .ikc-mount:has(> .ikc--topfix),
  .ikc-mount:has(> .ikc-callout-row + .ikc--topfix),
  .ikc-mount:has(.ikc--topfix) {
    display: none !important;
  }
  body.ikc-show-topfix-desktop .ikc-mount:has(> .ikc--topfix),
  body.ikc-show-topfix-desktop .ikc-mount:has(> .ikc-callout-row + .ikc--topfix),
  body.ikc-show-topfix-desktop .ikc-mount:has(.ikc--topfix) {
    display: block !important;
  }
}

/* Topfix mount hide-toggle (any breakpoint). Used by the "Show on page"
   off switch in the staging tuner. */
body.ikc-hide-topfix .ikc-mount:has(.ikc--topfix) {
  display: none !important;
}

/* Topfix VISUAL styling — applies at ALL widths the mount is visible at.
   Visibility (desktop hide / show-on-desktop / hide-toggle) is gated by
   media queries + body classes above; this block only handles the look. */
.ikc-mount:has(.ikc--topfix) {
  position: relative;            /* normal flow — scrolls with page */
  width: 100%;
  background: var(--ikc-surface);
  /* Light grey demarcation lines top + bottom — matches the staging-page
     preview-frame border. Cleaner boundary than a dropshadow, framing
     the card as a discrete block within the page flow. */
  border-top: 1px solid var(--ikc-line);
  border-bottom: 1px solid var(--ikc-line);
}
/* Card itself: no extra border (mount provides the visual chrome), edge-to-edge */
.ikc--topfix {
  border: 0;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
}
.ikc--topfix .ikc-photo { width: 88px; height: 88px; }

/* Topfix top callout: breaks out of card padding so the strip spans the
   full width of the card. NOTE: deliberately does NOT override `display`
   or `grid-template-columns` — that lets the `--align-block` modifier
   (3-col grid with invisible square spacers) keep its layout when set,
   while other alignments (center/left/right) still work via flex. */
.ikc--topfix .ikc-callout-row--top {
  margin: calc(var(--ikc-pad-y) * -1) calc(var(--ikc-pad-x) * -1) 14px;
  width: calc(100% + var(--ikc-pad-x) * 2);
  max-width: none;
}

/* The navy button itself fills the strip — full width, edge-to-edge,
   no rounded corners, taller padded hit area. */
.ikc--topfix .ikc-callout-row--top .ikc-callout {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 18px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  border-radius: 0;
  white-space: nowrap;
}

/* Even narrower phones — drop photo size + tighten gaps. */
@media (max-width: 480px) {
  .ikc--topfix .ikc-photo { width: 72px; height: 72px; }
}

/* -------------------------------------------------------------------------
   TOPFIX SHAPE VARIANT: BIZCARD  (data-ikc-shape="bizcard" on mount)
   Inspired by Cardenas & Co: fixed-height business-card proportions.
   Photo sits in the top-left corner only (white space below it) — does NOT
   stretch to card height. Right column gets compressed text so all content
   fits without overflow. Applies at ALL widths where the mount is visible
   (so the "show on desktop" override still renders correctly).
   ------------------------------------------------------------------------- */

  /* Card visual (mount + navy strip + white panel + bottom CTAs) spans the
     FULL viewport width. Only the info column caps — that keeps the text
     anchored snug against the photo so it never drifts toward the middle
     on tablet/wider viewports. Right side of card = empty white space.

     The three structural sizes are CSS custom props so the Bizcard-tuning
     picker on the staging page can adjust them live (values written to
     <html> by JS; CSS reads them with sensible fallbacks). */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-info {
    flex: 0 1 auto;                     /* don't grow to fill — stay snug */
    max-width: var(--bizcard-info-max, 360px);
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix {
    /* Fixed business-card height regardless of viewport width.
       Padding inherits from .ikc default (or .ikc-mount--padding-narrow
       when picker selects narrow), so density picker still applies. */
    position: relative;                 /* anchor for absolutely-positioned callout */
    height: var(--bizcard-height, 240px);
    align-items: flex-start;            /* photo anchors top-left, not center */
    overflow: hidden;                   /* clip if content overflows during iteration */
    flex-wrap: nowrap;                  /* never let info wrap below photo */
    /* Reserve space at top for the absolute callout strip so the flex
       row (photo + info) starts BELOW it instead of underneath. */
    padding-top: calc(var(--ikc-pad-y) + var(--bizcard-strip-h, 42px));
  }
  /* Pull the callout-row out of the flex flow. Without this it collides
     with the photo+info siblings under flex-wrap:nowrap and gets squashed.
     Absolute = stays full-width at top of the card.
     NOTE: does NOT override display/grid — so `--align-block` modifier
     keeps its 3-column grid with invisible square spacers. */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-callout-row--top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    z-index: 2;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-callout-row--top .ikc-callout {
    display: block;
    width: 100%;
    text-align: center;
    /* Tighter strip — matches the lowered --bizcard-strip-h reserve so the
       card content gets more room without clipping the bottom CTAs. */
    padding: 11px 16px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    border-radius: 0;
    white-space: nowrap;
  }
  /* Photo: small, fixed, top-left only — white space below it */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-photo {
    width: var(--bizcard-photo, 96px);
    height: var(--bizcard-photo, 96px);
    flex-shrink: 0;
    align-self: flex-start;             /* don't stretch vertically */
  }
  /* Right column: tighter rhythm */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-name {
    font-size: 0.96rem;
    line-height: 1.1;
    margin: 0;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-honorific {
    font-size: 0.6rem;
    margin-left: 4px;
  }
  /* Hide tagline + socials in bizcard — both CTAs stay (Contact Me + Book
     a Call sit side-by-side in one flex row, so the cost is minimal). */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-tagline,
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-socials {
    display: none;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-credentials {
    font-size: 0.66rem;
    margin: 1px 0 3px;
  }
  /* Spec pills — single row, smaller */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-specs {
    gap: 3px;
    margin: 0 0 5px;
    flex-wrap: wrap;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-specs li {
    font-size: 0.56rem;
    padding: 2px 5px;
    letter-spacing: 0.03em;
  }
  /* Channels — compact column, smaller text */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-channels {
    gap: 1px;
    margin: 0 0 4px;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-channels li { font-size: 0.74rem; }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-channels .ikc-channel-label { font-size: 0.62rem; }
  /* Socials — smaller icons */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-socials {
    gap: 6px;
    margin: 0 0 6px;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-socials a {
    width: 26px;
    height: 26px;
  }
  /* CTAs — compact, single row */
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-ctas {
    gap: 6px;
    margin: 0;
  }
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-cta {
    height: 32px;
    padding: 0 12px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
  /* Photo stays smaller on narrow phones, but card height stays fixed.
     Uses --bizcard-photo-mobile if set; otherwise 84px (or the global
     --bizcard-photo if the tuner pinned it). */
@media (max-width: 480px) {
  .ikc-mount[data-ikc-shape="bizcard"] .ikc--topfix .ikc-photo {
    width: var(--bizcard-photo-mobile, 84px);
    height: var(--bizcard-photo-mobile, 84px);
  }
}

/* =========================================================================
   STICKY-ON-SCROLL behavior (opt-in via .ikc-sticky on wrapper)
   ========================================================================= */
.ikc-sticky {
  position: sticky;
  top: 16px;
}
@media (max-width: 1023px) {
  .ikc-sticky { position: static; }   /* drop stickiness on small screens */
}

/* =========================================================================
   TOPFIX STRIP V2 — Static markup variant (replaces the JS-rendered card).
   Global rules so every page (except v1 index.html) can mount the same:
   - Mobile + tablet (<1024px): centered navy "Get Your Home Value" callout
     with squared spacer sides (.topfix-mt-only callout-row).
   - Desktop (>=1024px): navy callout on the LEFT, social icons on the
     RIGHT, both contained within page .container max-width (.topfix-desktop).
   --ikc-bar-h = 32px drives the spacer-square dimension AND the button
   height so the row stays a tight pill with zero body bg leaking through.
   ========================================================================= */
.ikc-mount--placement-outside > .ikc-callout-row--align-block { --ikc-bar-h: 32px; }

.ikc-mount--placement-outside .ikc-callout {
  height: var(--ikc-bar-h);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topfix-desktop { display: none; }
@media (min-width: 1024px) {
  .ikc-mount--placement-outside > .topfix-mt-only { display: none !important; }
  .ikc-mount--placement-outside > .topfix-desktop {
    display: block;
    width: 100%;
    height: var(--ikc-bar-h, 32px);
  }
  .topfix-desktop > .container {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 20px;
    height: var(--ikc-bar-h, 32px);
  }
  .topfix-desktop .topfix-button {
    height: var(--ikc-bar-h, 32px);
    padding: 0 28px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
  .topfix-desktop .topfix-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
    align-items: center;
  }
  .topfix-desktop .topfix-socials a {
    width: 32px;
    height: var(--ikc-bar-h, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #5c6b7a);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .topfix-desktop .topfix-socials a:hover,
  .topfix-desktop .topfix-socials a:focus-visible {
    color: var(--navy, #1a2942);
    background: var(--mist, #f4f6f9);
  }
  .topfix-desktop .topfix-socials svg { width: 18px; height: 18px; }
}