@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,500&family=Poppins:wght@700;800&display=swap");
/* vCard templates: each changes the page structure, not just colours.
   --tpl-accent is the card's theme colour, set inline on <main>. */

/* Light palette and solid panels for the light layouts */
main.tpl-profile, main.tpl-banner, main.tpl-executive, main.tpl-bento {
  --surface-container: 243 244 246;
  --on-surface: 17 24 39;
  --on-surface-variant: 75 85 99;
  --outline: 209 213 219;
  --on-primary: 255 255 255;
  color: rgb(17 24 39);
}
main.tpl-profile .glass-hi, main.tpl-banner .glass-hi, main.tpl-executive .glass-hi, main.tpl-bento .glass-hi, main.tpl-impact .glass-hi {
  backdrop-filter: none;
  background: #fff;
  border: 0;
}
main.tpl-profile .card-avatar, main.tpl-banner .card-avatar, main.tpl-executive .card-avatar,
main.tpl-impact .card-avatar, main.tpl-bento .card-avatar {
  background-image: none;
  background-color: var(--tpl-accent);
}

/* PROFILE: photo beside the name, everything left aligned, actions as a list */
main.tpl-profile { background: #f4f5f7; }
main.tpl-profile .glass-hi { border-radius: 14px; border: 1px solid #e5e7eb; text-align: left; }
main.tpl-profile .card-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 16px;
  padding: 20px;
}
main.tpl-profile .card-head > * { grid-column: 1 / -1; }
main.tpl-profile .card-avatar { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
main.tpl-profile .card-head h1 { grid-column: 2; align-self: end; padding-right: 40px; }
main.tpl-profile .card-head h1 + p { grid-column: 2; }
main.tpl-profile .card-head > .flex.justify-center { justify-content: flex-start; }
main.tpl-profile .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
main.tpl-profile .grid.grid-cols-2 > * { justify-content: flex-start; padding-left: 16px; border-radius: 10px; }

/* BANNER: full-width colour cover, large overlapping photo, icon tiles */
main.tpl-banner { background: #eef1f6; position: relative; }
main.tpl-banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background: var(--tpl-accent);
  border-radius: 0 0 50% 50% / 0 0 36px 36px;
}
main.tpl-banner > .fadeup { position: relative; max-width: 520px; }
main.tpl-banner .glass-hi { border-radius: 18px; box-shadow: 0 6px 20px rgba(15, 23, 42, .1); }
main.tpl-banner .card-head { margin-top: 70px; padding-top: 0; overflow: visible; }
main.tpl-banner .card-avatar {
  width: 128px;
  height: 128px;
  margin: -64px auto 14px;
  padding: 5px;
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .2);
}
main.tpl-banner .card-head h1 { font-size: 1.6rem; }
main.tpl-banner .grid.grid-cols-2 > * {
  flex-direction: column;
  gap: 4px;
  padding: 14px 6px;
  font-size: 13px;
}

/* EXECUTIVE: two columns on desktop, full-colour sidebar with the profile */
main.tpl-executive { background: #f1f3f6; }
main.tpl-executive > .fadeup {
  max-width: 1020px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
main.tpl-executive > .fadeup > * { grid-column: 2; margin: 0 !important; }
main.tpl-executive .glass-hi { border-radius: 10px; box-shadow: 0 1px 6px rgba(15, 23, 42, .08); }
main.tpl-executive .card-head {
  --on-surface: 255 255 255;
  --on-surface-variant: 255 255 255;
  grid-column: 1;
  grid-row: 1 / span 12;
  position: sticky;
  top: 96px;
  background: var(--tpl-accent);
  color: #fff;
}
main.tpl-executive .card-head .card-avatar { background-color: #fff; width: 112px; height: 112px; }
main.tpl-executive .card-head [class*="text-["] { color: #fff !important; }
main.tpl-executive .card-head > button:not(.absolute) { background: #fff !important; color: var(--tpl-accent) !important; }
main.tpl-executive .card-head > button.absolute { background: rgba(255, 255, 255, .22) !important; }
main.tpl-executive .card-head .bg-surface-container { background: #fff; }
main.tpl-executive .card-head .card-avatar .ic { color: var(--tpl-accent) !important; }
@media (max-width: 820px) {
  main.tpl-executive > .fadeup { grid-template-columns: minmax(0, 1fr); }
  main.tpl-executive > .fadeup > *, main.tpl-executive .card-head { grid-column: 1; grid-row: auto; position: relative; top: 0; }
}

/* IMPACT: dark page, angled colour hero with oversized left-aligned name */
main.tpl-impact {
  --surface-container: 25 25 33;
  --on-surface: 243 244 246;
  --on-surface-variant: 176 178 190;
  --on-primary: 255 255 255;
  background: #0c0c11;
}
main.tpl-impact > .fadeup { max-width: 520px; }
main.tpl-impact .glass-hi { background: #17171f; border-radius: 0; border-left: 5px solid var(--tpl-accent); }
main.tpl-impact .card-head {
  --on-surface: 255 255 255;
  --on-surface-variant: 255 255 255;
  background: var(--tpl-accent);
  border: 0;
  color: #fff;
  text-align: left;
  padding-bottom: 60px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%);
}
main.tpl-impact .card-avatar { margin: 0 0 18px; border-radius: 12px; background-color: #fff; }
main.tpl-impact .card-avatar > div { border-radius: 9px; }
main.tpl-impact .card-head h1 { font-size: 2.4rem; line-height: 1.05; text-transform: uppercase; font-weight: 800; }
main.tpl-impact .card-head [class*="text-["] { color: #fff !important; }
main.tpl-impact .card-head > .flex.justify-center { justify-content: flex-start; }
main.tpl-impact .card-head > button:not(.absolute) { background: #0c0c11 !important; color: #fff; border-radius: 0; }
main.tpl-impact .card-head > button.absolute { background: rgba(0, 0, 0, .3) !important; border-radius: 0; }
main.tpl-impact .card-head .card-avatar .ic { color: var(--tpl-accent) !important; }
main.tpl-impact .grid.grid-cols-2 > *, main.tpl-impact .glass-hi button, main.tpl-impact .glass-hi > a { border-radius: 0; }

/* BENTO: mosaic of tiles of different sizes, large action tiles */
main.tpl-bento { background: #eceef2; }
main.tpl-bento > .fadeup {
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
main.tpl-bento > .fadeup > * { margin: 0 !important; }
main.tpl-bento > .fadeup > :not(.glass-hi),
main.tpl-bento .card-head,
main.tpl-bento .glass-hi:has(.grid-cols-2) { grid-column: 1 / -1; }
main.tpl-bento .glass-hi { border-radius: 24px; }
main.tpl-bento .card-head { text-align: left; }
main.tpl-bento .card-avatar { margin: 0 0 12px; }
main.tpl-bento .card-head h1 { font-size: 1.8rem; }
main.tpl-bento .card-head > .flex.justify-center { justify-content: flex-start; }
main.tpl-bento .glass-hi:has(.grid-cols-2) .grid.grid-cols-2 > * {
  flex-direction: column;
  gap: 6px;
  padding: 22px 8px;
  border-radius: 18px;
  border: 0;
  background: color-mix(in srgb, var(--tpl-accent) 12%, #fff);
  color: rgb(17 24 39) !important;
}
@media (max-width: 640px) {
  main.tpl-bento > .fadeup { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Quick action buttons (used by the mood templates below) ---------- */
.card-quick, .card-dock { display: none; }
.card-quick a { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgb(var(--on-surface)); }
.card-quick .cq-i { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: var(--tpl-accent); border-radius: 50%; transition: transform .15s; }
.card-quick a:hover .cq-i { transform: translateY(-2px); }
main.tpl-trendy .card-quick, main.tpl-professional .card-quick, main.tpl-calm .card-quick,
main.tpl-services .card-quick, main.tpl-luxury .card-quick, main.tpl-bold .card-quick { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }

/* The quick buttons replace these in the first contact panel */
main.tpl-trendy > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-trendy > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]),
main.tpl-professional > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-professional > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]),
main.tpl-calm > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-calm > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]),
main.tpl-services > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-services > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]),
main.tpl-luxury > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-luxury > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]),
main.tpl-bold > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2.mt-6, main.tpl-bold > .fadeup > .glass-hi:nth-of-type(2) .grid-cols-2:has(a[href*="wa.me"]) { display: none; }

main.tpl-trendy .glass-hi, main.tpl-professional .glass-hi, main.tpl-calm .glass-hi,
main.tpl-services .glass-hi, main.tpl-luxury .glass-hi, main.tpl-bold .glass-hi { backdrop-filter: none; border: 0; }

/* TRENDY: glowing gradient mesh, frosted panels, tilted photo, gradient pills */
main.tpl-trendy {
  --surface-container: 40 24 70;
  --on-surface: 255 255 255;
  --on-surface-variant: 226 220 245;
  --outline: 170 150 215;
  --on-primary: 255 255 255;
  color: #fff;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--tpl-accent) 85%, transparent) 0, transparent 38%),
    radial-gradient(circle at 92% 22%, rgba(255, 75, 150, .75) 0, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(255, 165, 60, .45) 0, transparent 40%),
    #150a2e;
}
main.tpl-trendy .glass-hi { background: rgba(255, 255, 255, .11); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; }
main.tpl-trendy .card-avatar { width: 104px; height: 104px; border-radius: 30px; transform: rotate(-6deg); background-image: linear-gradient(135deg, var(--tpl-accent), #ff4b96, #ffa53c); box-shadow: 0 10px 30px rgba(255, 75, 150, .45); }
main.tpl-trendy .card-avatar > div { border-radius: 26px; transform: rotate(6deg); }
main.tpl-trendy .card-head h1 { font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.9rem; }
main.tpl-trendy [class*="text-[#"] { color: #ffd1e6 !important; }
main.tpl-trendy [class*="bg-[#"] { background: linear-gradient(90deg, var(--tpl-accent), #ff4b96) !important; color: #fff !important; border-radius: 999px; }
main.tpl-trendy .card-quick .cq-i { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 0 18px rgba(255, 75, 150, .55); }
main.tpl-trendy .glass-hi button.border, main.tpl-trendy .glass-hi a.border { border-radius: 999px; }

/* PROFESSIONAL: navy header with photo and name side by side, square icon bar */
main.tpl-professional {
  --surface-container: 233 237 244;
  --on-surface: 15 31 61;
  --on-surface-variant: 80 92 115;
  --outline: 205 212 224;
  --on-primary: 255 255 255;
  color: rgb(15 31 61);
  background: #eef1f6;
}
main.tpl-professional .glass-hi { background: #fff; border-radius: 6px; border-top: 3px solid #0f1f3d; box-shadow: 0 2px 10px rgba(15, 31, 61, .08); }
main.tpl-professional .card-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 16px;
  text-align: left;
  padding: 24px 20px 20px;
  overflow: hidden;
  border-top: 0;
}
main.tpl-professional .card-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 128px;
  background: linear-gradient(115deg, #0f1f3d 70%, var(--tpl-accent) 70.5%);
}
main.tpl-professional .card-head > * { position: relative; grid-column: 1 / -1; }
main.tpl-professional .card-head > button.absolute { position: absolute; background: rgba(255, 255, 255, .18) !important; border-radius: 6px; }
main.tpl-professional .card-avatar { grid-column: 1; grid-row: 1 / span 2; width: 92px; height: 92px; margin: 0; border-radius: 10px; background-image: none; background-color: #fff; }
main.tpl-professional .card-avatar > div { border-radius: 8px; }
main.tpl-professional .card-head h1 { grid-column: 2; color: #fff; align-self: end; padding-right: 44px; font-size: 1.35rem; }
main.tpl-professional .card-head h1 + p { grid-column: 2; color: #cfe0ff !important; font-size: 12px; margin-bottom: 26px; }
main.tpl-professional .card-head > .flex.justify-center { justify-content: flex-start; }
main.tpl-professional .card-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgb(var(--outline)); border-radius: 6px; }
main.tpl-professional .card-quick a { padding: 10px 0; border-right: 1px solid rgb(var(--outline)); }
main.tpl-professional .card-quick a:last-child { border-right: 0; }
main.tpl-professional .card-quick .cq-i { background: transparent; color: #0f1f3d; width: 28px; height: 28px; }
main.tpl-professional [class*="bg-[#"]:not(.absolute) { background: #0f1f3d !important; border-radius: 6px; }
main.tpl-professional .glass-hi button.border, main.tpl-professional .glass-hi a.border { border-radius: 6px; }

/* CALM: soft pastel washes, arched photo, serif type, airy outlined buttons */
main.tpl-calm {
  --surface-container: 238 241 232;
  --on-surface: 52 62 52;
  --on-surface-variant: 104 114 102;
  --outline: 205 212 198;
  --on-primary: 255 255 255;
  color: rgb(52 62 52);
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--tpl-accent) 22%, transparent) 0, transparent 36%),
    radial-gradient(circle at 95% 34%, #eadfca 0, transparent 42%),
    #f3f5ee;
}
main.tpl-calm .glass-hi { background: #fffefa; border-radius: 30px; box-shadow: 0 12px 34px rgba(90, 105, 85, .1); padding: 28px; }
main.tpl-calm .card-avatar { width: 124px; height: 156px; border-radius: 999px 999px 18px 18px; background-image: none; background-color: color-mix(in srgb, var(--tpl-accent) 45%, #fff); }
main.tpl-calm .card-avatar > div { border-radius: 999px 999px 15px 15px; }
main.tpl-calm .card-head h1 { font-family: "Playfair Display", Georgia, serif; font-size: 1.8rem; font-weight: 600; }
main.tpl-calm .card-head h1 + p { text-transform: none; font-style: italic; font-weight: 500; font-family: "Playfair Display", Georgia, serif; font-size: 15px; }
main.tpl-calm .card-quick .cq-i { background: transparent; border: 1.5px solid var(--tpl-accent); color: var(--tpl-accent); }
main.tpl-calm [class*="bg-[#"] { border-radius: 999px; }
main.tpl-calm .glass-hi button.border, main.tpl-calm .glass-hi a.border { border-radius: 999px; }

/* SERVICES: dotted colour cover, app-style action tiles, contact tiles, bottom menu */
main.tpl-services {
  --surface-container: 238 241 247;
  --on-surface: 22 28 45;
  --on-surface-variant: 86 94 112;
  --outline: 212 217 228;
  --on-primary: 255 255 255;
  color: rgb(22 28 45);
  background: #f2f4f9;
  position: relative;
  padding-bottom: 100px;
}
main.tpl-services::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  background-color: var(--tpl-accent);
  background-image: radial-gradient(rgba(255, 255, 255, .28) 2px, transparent 2px);
  background-size: 18px 18px;
}
main.tpl-services > .fadeup { position: relative; }
main.tpl-services .glass-hi { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(22, 28, 45, .08); }
main.tpl-services .card-head { margin-top: 44px; overflow: visible; }
main.tpl-services .card-avatar { margin: -68px auto 12px; width: 96px; height: 96px; background-image: none; background-color: #fff; box-shadow: 0 6px 16px rgba(22, 28, 45, .18); }
main.tpl-services .card-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
main.tpl-services .card-quick a { padding: 12px 0; border-radius: 14px; background: color-mix(in srgb, var(--tpl-accent) 11%, #fff); }
main.tpl-services .card-quick .cq-i { background: transparent; color: var(--tpl-accent); width: 28px; height: 28px; font-size: 22px; }
main.tpl-services .glass-hi .space-y-2.text-sm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
main.tpl-services .glass-hi .space-y-2.text-sm > * { margin: 0; padding: 10px; background: #f2f4f9; border-radius: 10px; font-size: 12px; overflow-wrap: anywhere; }
main.tpl-services .card-dock {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: 8px 0 10px;
  background: #fff;
  box-shadow: 0 -4px 18px rgba(22, 28, 45, .12);
}
main.tpl-services .card-dock a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: rgb(var(--on-surface)); }
main.tpl-services .card-dock .cq-i { color: var(--tpl-accent); font-size: 20px; }
body:has(main.tpl-services) .fixed.bottom-5.right-5 { bottom: 84px; }

/* LUXURY: black and gold, framed panels, diamond buttons, serif capitals */
main.tpl-luxury {
  --gold: #c9a24b;
  --surface-container: 30 26 18;
  --on-surface: 245 236 215;
  --on-surface-variant: 190 178 150;
  --outline: 110 92 52;
  color: #f5ecd7;
  background: radial-gradient(circle at 50% 0, #2a2214 0, #0d0b07 55%);
}
main.tpl-luxury .glass-hi { background: #15120b; border-radius: 2px; outline: 1px solid rgba(201, 162, 75, .55); outline-offset: -8px; padding: 30px; }
main.tpl-luxury .card-avatar { width: 112px; height: 112px; background-image: linear-gradient(135deg, #f0d98c, #a67c2d); }
main.tpl-luxury .card-head h1 { font-family: "Playfair Display", Georgia, serif; text-transform: uppercase; letter-spacing: .14em; font-size: 1.45rem; font-weight: 600; color: #f0d98c; }
main.tpl-luxury [class*="text-[#"] { color: var(--gold) !important; }
main.tpl-luxury [class*="bg-[#"] { background: linear-gradient(135deg, #f0d98c, #a67c2d) !important; color: #15120b !important; border-radius: 2px; }
main.tpl-luxury .glass-hi button.border, main.tpl-luxury .glass-hi a.border { border-radius: 2px; }
main.tpl-luxury .card-quick { gap: 24px; margin-top: 24px; }
main.tpl-luxury .card-quick .cq-i { width: 40px; height: 40px; border-radius: 3px; background: transparent; border: 1px solid var(--gold); color: var(--gold); transform: rotate(45deg); margin-bottom: 8px; }
main.tpl-luxury .card-quick .cq-i > * { transform: rotate(-45deg); }
main.tpl-luxury .card-quick a:hover .cq-i { transform: rotate(45deg) scale(1.08); }

/* BOLD: cream page, thick outlines and hard shadows, sticker-style title */
main.tpl-bold {
  --surface-container: 255 244 214;
  --on-surface: 17 17 17;
  --on-surface-variant: 60 60 60;
  --outline: 17 17 17;
  --on-primary: 255 255 255;
  color: #111;
  background: #fff4d6;
}
main.tpl-bold .glass-hi { background: #fff; border: 3px solid #111; border-radius: 14px; box-shadow: 6px 6px 0 #111; }
main.tpl-bold .card-avatar { width: 104px; height: 104px; border-radius: 14px; background-image: none; background-color: var(--tpl-accent); border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
main.tpl-bold .card-avatar > div { border-radius: 8px; }
main.tpl-bold .card-head h1 { font-family: Poppins, sans-serif; font-weight: 800; font-size: 2rem; }
main.tpl-bold .card-head h1 + p { display: inline-block; padding: 3px 12px; color: #fff !important; background: var(--tpl-accent); border: 2px solid #111; transform: rotate(-2deg); }
main.tpl-bold [class*="bg-[#"]:not(.card-head *.absolute), main.tpl-bold .glass-hi button.border, main.tpl-bold .glass-hi a.border { border: 2px solid #111 !important; border-radius: 10px; box-shadow: 3px 3px 0 #111; font-weight: 700; }
main.tpl-bold .card-quick .cq-i { border-radius: 10px; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }

/* Fixes: keep text below the Professional header, full-width Services description, visible Luxury social icons */
main.tpl-professional .card-avatar { margin-bottom: 24px; }
main.tpl-services .glass-hi .space-y-2.text-sm > :not(a):not(.flex) { grid-column: 1 / -1; padding: 0; background: none; font-size: 14px; }
main.tpl-luxury a[class*="bg-[#"][class*="/10"] { background: transparent !important; border: 1px solid var(--gold); border-radius: 2px; }
/* ---------- Profile photo and cover image ---------- */
.card-avatar > div { overflow: hidden; }
.card-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Templates with no colour band: cover sits across the top of the profile panel */
main.has-cover:is(.tpl-classic, .tpl-profile, .tpl-trendy, .tpl-calm, .tpl-luxury, .tpl-bold, .tpl-bento) .card-head { position: relative; overflow: hidden; padding-top: 88px; }
main.has-cover:is(.tpl-classic, .tpl-profile, .tpl-trendy, .tpl-calm, .tpl-luxury, .tpl-bold, .tpl-bento) .card-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 130px;
  background: var(--tpl-cover) center / cover;
}
main.has-cover:is(.tpl-classic, .tpl-profile, .tpl-trendy, .tpl-calm, .tpl-luxury, .tpl-bold, .tpl-bento) .card-head > * { position: relative; }
main.has-cover:is(.tpl-classic, .tpl-profile, .tpl-trendy, .tpl-calm, .tpl-luxury, .tpl-bold, .tpl-bento) .card-head > button.absolute { position: absolute; }
main.has-cover.tpl-profile .card-head { padding-top: 146px; }

/* Templates with a band or hero: the cover replaces it */
main.has-cover.tpl-banner::before, main.has-cover.tpl-services::before { background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .3)), var(--tpl-cover) center / cover; }
main.has-cover.tpl-professional .card-head::before { background: linear-gradient(115deg, rgba(15, 31, 61, .92) 45%, rgba(15, 31, 61, .35)), var(--tpl-cover) center / cover; }
main.has-cover.tpl-executive .card-head { background: linear-gradient(color-mix(in srgb, var(--tpl-accent) 55%, transparent), var(--tpl-accent) 42%), var(--tpl-cover) top / 100% auto no-repeat; }
main.has-cover.tpl-impact .card-head { background: linear-gradient(color-mix(in srgb, var(--tpl-accent) 55%, transparent), var(--tpl-accent) 55%), var(--tpl-cover) top / 100% auto no-repeat; }