.tc-w-cols__kicker {
  margin: 0 0 16px;
}

.tc-w-cols__title {
  margin: 0 0 24px;
  max-width: var(--tc-span-8, 888px);
}

.tc-w-cols__text {
  margin: 0 0 48px;
  max-width: var(--tc-read, 432px);
}

.tc-w-cols__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tc-gutter, 24px);
  width: 100%;
}

/* Column count is the layout option: equal tracks, not a 12-column span. */
.tc-w-cols--grid-2 .tc-w-cols__grid { --tc-cols-count: 2; }
.tc-w-cols--grid-3 .tc-w-cols__grid { --tc-cols-count: 3; }
.tc-w-cols--grid-4 .tc-w-cols__grid { --tc-cols-count: 4; }

.tc-w-cols--grid-2 .tc-w-cols__grid,
.tc-w-cols--grid-3 .tc-w-cols__grid,
.tc-w-cols--grid-4 .tc-w-cols__grid {
  grid-template-columns: repeat(var(--tc-cols-count, 2), var(--tc-grid-col, minmax(0, 1fr)));
  grid-template-rows: repeat(var(--tc-cols-rows, 1), auto);
  grid-auto-flow: column;
  column-gap: var(--tc-grid-gap, 48px);
  row-gap: var(--tc-grid-row-gap, 0px);
}

.tc-w-cols--grid-2 .tc-w-cols__item,
.tc-w-cols--grid-3 .tc-w-cols__item,
.tc-w-cols--grid-4 .tc-w-cols__item {
  position: relative;
  grid-column: auto;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--tc-cols-pad-t, 20px) var(--tc-cols-pad-r, 0px) var(--tc-cols-pad-b, 32px) var(--tc-cols-pad-l, 0px);
}

/* Same keyline as the service rows (::after). Top matches the previous border-top. */
.tc-w-cols--grid-2 .tc-w-cols__item::after,
.tc-w-cols--grid-3 .tc-w-cols__item::after,
.tc-w-cols--grid-4 .tc-w-cols__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  height: var(--tc-cols-line-size, 1px);
  background: var(--tc-cols-line, var(--tc-cols-ink, currentColor));
  pointer-events: none;
}

.tc-w-cols--line-bottom.tc-w-cols--grid-2 .tc-w-cols__item::after,
.tc-w-cols--line-bottom.tc-w-cols--grid-3 .tc-w-cols__item::after,
.tc-w-cols--line-bottom.tc-w-cols--grid-4 .tc-w-cols__item::after {
  top: auto;
  bottom: 0;
}

/* Follow the item heading colour. Beats the Index control's cream default, which disappears on sand. */
.elementor-widget-tc-copy-list .tc-w.tc-w-cols--grid-2 .tc-w-cols__index,
.elementor-widget-tc-copy-list .tc-w.tc-w-cols--grid-3 .tc-w-cols__index,
.elementor-widget-tc-copy-list .tc-w.tc-w-cols--grid-4 .tc-w-cols__index {
  margin: 0 0 16px;
  color: var(--tc-cols-ink, currentColor);
}

.tc-w-cols--grid-2 .tc-w-cols__item-body,
.tc-w-cols--grid-3 .tc-w-cols__item-body,
.tc-w-cols--grid-4 .tc-w-cols__item-body {
  max-width: none;
}
.tc-w-cols--stack .tc-w-cols__item {
  grid-column: span 12;
}

/* Style → Item → Padding sets --tc-cols-pad-*; rows add them to the centred canvas offset. */
.tc-w-cols__item {
  margin: 0;
  padding: var(--tc-cols-pad-t, 0) var(--tc-cols-pad-r, 0) var(--tc-cols-pad-b, 0) var(--tc-cols-pad-l, 0);
}

.tc-w-cols__index {
  margin: 0;
}

.tc-w-cols__bullet {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background: currentColor;
}

.tc-w-cols__item-title {
  margin: 0 0 12px;
}

.tc-w-cols__item-body {
  margin: 0;
  max-width: var(--tc-read, 432px);
}

/* Rows layout is full-bleed, so the header block carries the page margins. */
.tc-w-cols--stack .tc-w-cols__head {
  padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
  padding-right: max(48px, calc((100% - 1440px) / 2 + 48px));
  box-sizing: border-box;
}

/* Expertise: What we do → SERVICES */
.tc-w-cols--kicker-below .tc-w-cols__head {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding-top: 96px;
  padding-bottom: 48px;
  padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
  padding-right: max(48px, calc((100% - 1440px) / 2 + 48px));
  width: 100%;
  box-sizing: border-box;
}

.tc-w-cols--kicker-below .tc-w-cols__title {
  margin: 0;
  order: 1;
}

.tc-w-cols--kicker-below .tc-w-cols__kicker {
  margin: 0;
  order: 2;
}

.tc-w-cols--kicker-below .tc-w-cols__text {
  margin: 24px 0 0;
  order: 3;
}

.tc-w-cols--stack .tc-w-cols__grid {
  gap: 0;
  width: 100%;
}

/* Rows are full-bleed: --tc-cols-canvas is the extra space outside the 1440 canvas on wide screens. */
.tc-w-cols--stack {
  --tc-cols-canvas: max(0px, (100% - 1440px) / 2);
  --tc-cols-pad-y: 48px;
  --tc-cols-pad-x: 48px;
}

/*
 * expertise.html service rows
 * full-bleed red hover; keylines inset 48px; no border on last row (→ red CTA)
 * index 90 / title 546 / body 318 / gap 138 / h 184 / px 48
 */
/* Kept at low specificity so Style → Item (border, radius, padding, background) overrides it. */
.tc-w-cols--stack .tc-w-cols__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 318px);
  column-gap: 24px;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  /* Full-bleed red bar; the type sits on the centered 1440 canvas. */
  padding:
    var(--tc-cols-pad-t, var(--tc-cols-pad-y))
    calc(var(--tc-cols-canvas) + var(--tc-cols-pad-r, var(--tc-cols-pad-x)))
    var(--tc-cols-pad-b, var(--tc-cols-pad-y))
    calc(var(--tc-cols-canvas) + var(--tc-cols-pad-l, var(--tc-cols-pad-x)));
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  background-color: transparent;
  
}

/* Keyline / content width — lines up with the row padding, so it follows Style → Item → Padding
   (culture.html, expertise.html, retriva.html); none under the last row unless "Keyline under last row"
   is on. Colour defaults to the Item heading colour (cream on charcoal, charcoal on cream / sand). */
.tc-w-cols--stack .tc-w-cols__item::after {
  content: "";
  position: absolute;
  left: calc(var(--tc-cols-line-left, calc(var(--tc-cols-canvas) + var(--tc-cols-pad-l, var(--tc-cols-pad-x)))) + var(--tc-cols-line-start, 0px));
  right: var(--tc-cols-line-right, calc(var(--tc-cols-canvas) + var(--tc-cols-pad-r, var(--tc-cols-pad-x))));
  top: var(--tc-cols-line-top, auto);
  bottom: var(--tc-cols-line-bottom, 0);
  height: var(--tc-cols-line-size, 1px);
  background: var(--tc-cols-line, var(--tc-cols-ink, #fff9f5));
  pointer-events: none;
  transition: opacity var(--tc-cols-hover-dur, 0.2s) ease, background-color var(--tc-cols-hover-dur, 0.2s) ease;
}

/* Top: one line on every row, including the last. Bottom ::after is turned off. */
.tc-w-cols--stack.tc-w-cols--line-top,
.tc-w-cols--line-top .tc-w-cols--stack {
  --tc-cols-line-top: 0;
  --tc-cols-line-bottom: auto;
  --tc-cols-last-content: "";
  --tc-cols-last-h: var(--tc-cols-line-size, 1px);
  --tc-cols-last-o: 1;
}

.tc-w-cols--stack .tc-w-cols__item:last-child::after {
  /* Hidden on Bottom unless Style → Keyline under last row is on. Shown on Top. */
  display: var(--tc-cols-line-last, block);
  content: var(--tc-cols-last-content, none);
  height: var(--tc-cols-last-h, 0px);
  opacity: var(--tc-cols-last-o, 0);
}

.tc-w-cols--stack.tc-w-cols--marker-index .tc-w-cols__item {
  grid-template-columns: var(--tc-cols-mark, 90px) minmax(0, var(--tc-cols-head, 546px)) minmax(0, var(--tc-cols-body, 318px));
  column-gap: var(--tc-cols-gap, 138px);
}

.tc-w-cols--stack.tc-w-cols--marker-none .tc-w-cols__item {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--tc-cols-body, 318px));
}

.tc-w-cols--stack .tc-w-cols__item-title {
  margin: 0;
}

.tc-w-cols--stack .tc-w-cols__item-body {
  justify-self: stretch;
  max-width: none;
}

/* Row hover — colors from Elementor “Item hover” (--tc-cols-hover-*).
   Outranks Style → Item (normal) but not Style → Item → Hover, so either can set the hover look. */
.tc-w-cols.tc-w-cols--stack article.tc-w-cols__item:is(:hover, :focus-visible, :active) {
  background-color: var(--tc-cols-hover-bg, #f44349);
  color: var(--tc-cols-hover-color, #fff9f5) !important;
  outline: none;
}

/* The hovered row and the row above it lose their keylines, so the colour bar reads as one block. */
.tc-w-cols--stack .tc-w-cols__item:is(:hover, :focus-visible, :active)::after,
.tc-w-cols--stack .tc-w-cols__item:has(+ .tc-w-cols__item:is(:hover, :focus-visible, :active))::after {
  opacity: var(--tc-cols-line-hover, 0);
}

.tc-w-cols--stack .tc-w-cols__item:is(:hover, :focus-visible, :active) * {
  color: var(--tc-cols-hover-color, #fff9f5) !important;
}

/* Optional button under the items (Content → Button). Same pill as the theme's other buttons. */
.tc-w-cols__foot {
  margin-top: 48px;
}

.tc-w-cols--stack .tc-w-cols__foot {
  padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
  padding-right: max(48px, calc((100% - 1440px) / 2 + 48px));
}

.tc-w-cols__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease-out, background 180ms, color 180ms, border-color 180ms;
}

.tc-w-cols__btn-logo {
  display: block;
  width: auto;
  height: 18px;
  object-fit: contain;
}

/* Decorative logo printed as a background (no <img>): width follows the image's own proportions. */
.tc-w-cols__btn-logo--bg {
  flex: 0 0 auto;
  width: calc(18px * var(--tc-logo-ratio, 1));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tc-w-cols__btn:is(:hover, :focus-visible) {
  background-color: #f44349;
  border-color: #f44349;
  color: #262626;
}

@media (max-width: 900px) {
  .tc-w-cols__foot {
    margin-top: 32px;
  }

  .tc-w-cols--stack .tc-w-cols__foot {
    padding-left: var(--tc-margin);
    padding-right: var(--tc-margin);
  }

  .tc-w-cols--kicker-below .tc-w-cols__head {
    padding: 64px 24px 24px;
  }

  .tc-w-cols--stack .tc-w-cols__item,
  .tc-w-cols--stack.tc-w-cols--marker-index .tc-w-cols__item {
    grid-column: span 12;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    min-height: 0;
  }

  .tc-w-cols--stack.tc-w-cols--marker-none .tc-w-cols__item {
    grid-template-columns: 1fr;
  }

  .tc-w-cols--stack .tc-w-cols__item-body {
    grid-column: 2;
  }

  .tc-w-cols--stack.tc-w-cols--marker-none .tc-w-cols__item-body {
    grid-column: 1;
  }
}


/* Tablet and mobile layouts for this widget. */
@media (max-width: 900px) {
  .tc-w-cols--stack .tc-w-cols__head { padding-left: var(--tc-margin); padding-right: var(--tc-margin); }

  .tc-w-cols--kicker-below .tc-w-cols__head { padding: 72px var(--tc-margin) 32px; }

  .tc-w-cols--stack { --tc-cols-pad-y: 28px; --tc-cols-pad-x: var(--tc-margin); }

  .tc-w-cols--stack .tc-w-cols__item,
  .tc-w-cols--stack.tc-w-cols--marker-index .tc-w-cols__item { display: grid; grid-template-columns: 1fr; gap: 6px; min-height: 0; }

  .tc-w-cols--stack .tc-w-cols__item-body { grid-column: 1; max-width: 700px; }
}
@media (max-width: 600px) {
  .tc-w-cols--kicker-below .tc-w-cols__head { padding: 56px 20px 24px; }

  .tc-w-cols--stack { --tc-cols-pad-y: 24px; --tc-cols-pad-x: 20px; }
}

@media (max-width: 900px) {
  .tc-w-cols--grid-3 .tc-w-cols__grid,
  .tc-w-cols--grid-4 .tc-w-cols__grid {
    --tc-cols-count: 2;
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

@media (max-width: 768px) {
  body.tangerine-theme .elementor .tc-w-cols { padding-left: 0; padding-right: 0; }
}

@media (max-width: 600px) {
  .tc-w-cols--grid-2 .tc-w-cols__grid,
  .tc-w-cols--grid-3 .tc-w-cols__grid,
  .tc-w-cols--grid-4 .tc-w-cols__grid {
    --tc-cols-count: 1;
    grid-auto-flow: row;
    grid-template-rows: none;
    column-gap: var(--tc-grid-gap, 0px);
  }
}