/* ==========================================================================
   Bambanani Funeral Services — Vakhandli design edition
   ---------------------------------------------------------------------------
   DESIGN SOURCE: the measured Vakhandli reference. Every value below was read
   from that site's computed styles or sampled from its rendered pixels.
   NOTHING in this file has been redesigned, modernised or simplified.
   CONTENT SOURCE: hosting_sites/bambanani-funeral-services (read-only).
   ========================================================================== */

:root {
  --vk-orange: #9374a7;
  --vk-navy: #47354f;
  --vk-blue: #7a5b8d;
  --vk-body: #666666;
  --vk-card-border: #edeff2;
  --vk-shadow-card: 0 35px 50px 0 rgba(0, 0, 0, 0.07);
  --vk-shadow-hover: 0 25px 35px 0 rgba(71, 53, 79, 0.25);
  --vk-container: 1140px;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--vk-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--vk-orange); text-decoration: none; transition: all 0.4s ease; }
ul { margin: 0; padding: 0; list-style: none; }

/* Headings — reference: Open Sans 800, uppercase, orange */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--vk-orange);
}

/* Placeholder marker (B4/B5/B6/B10) ------------------------------------- */
.vk-placeholder {
  outline: 1px dashed currentColor;
  outline-offset: 2px;
  opacity: 0.85;
  font-style: normal;
}

/* Layout ----------------------------------------------------------------- */
.vk-container {
  width: 100%;
  max-width: var(--vk-container);
  margin: 0 auto;
  padding: 0 15px;
}
.vk-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }

.vk-skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: var(--vk-orange); padding: 10px 20px; z-index: 100;
}
.vk-skip:focus { left: 0; }

/* ==========================================================================
   Header — top bar
   measured: bg rgba(255, 137, 22,.25), padding 10px, height 47
   ========================================================================== */
.vk-topbar {
  background: rgba(147, 116, 167, 0.25);
  padding: 10px 0;
}
/* measured: social list starts at container edge x=150, not the 15px gutter */
.vk-topbar .vk-container { display: flex; align-items: center; padding: 0; }
.vk-topbar-slogan {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.42px;
  text-transform: uppercase;
  color: var(--vk-orange);
}
.vk-social { display: flex; align-items: center; }
.vk-social a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;              /* measured 43x26 */
  height: 26px;
  font-size: 14px;
  color: var(--vk-orange);
}
.vk-social a + a { border-left: 1px solid rgba(147, 116, 167, 0.45); }
.vk-social svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.vk-social a:hover { opacity: 0.75; }

/* ==========================================================================
   Header — info bar   measured: padding 5px 0 3px, height 131
   ========================================================================== */
/* measured: 4 columns 373 / 274 / 265 / 228 inside the 1140 container (x=150),
   each 123px tall; dividers are 1px #e5eaf1 between cols 1|2 and 2|3 */
.vk-infobar { padding: 5px 0 3px; background: #fff; }
.vk-infobar .vk-container { display: flex; align-items: center; padding: 0; }

.vk-ib-col {
  flex: 0 0 auto;
  min-height: 123px;
  display: flex; align-items: center;
}
.vk-ib-col--logo  { width: 373px; padding: 0 15px; }
.vk-ib-col--email { width: 274px; padding-left: 30px; border-right: 1px solid #e2d2ec; }
.vk-ib-col--phone { width: 265px; padding-left: 30px; border-right: 1px solid #e2d2ec; }
.vk-ib-col--btn   { width: 228px; padding-left: 18px; }

.vk-logo { display: block; flex: 0 0 auto; }
.vk-logo img { width: 160px; height: 123px; object-fit: contain; display: block; }

/* measured: 30x30 circle OUTLINE (1px #ff8916), 15px glyph, 15px gap */
.vk-ib-col .vk-ico {
  flex: 0 0 30px; width: 30px; height: 30px;
  margin-right: 15px;
  border: 1px solid var(--vk-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--vk-orange);
}
.vk-ib-col .vk-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.vk-ib-col h3 { text-transform: none; margin: 0 0 6px; }
.vk-ib-col h3 a { color: inherit; display: block; }

/* measured: email block Open Sans 14/16.8 600 -0.54px rgb(255,165,0), width 185 */
.vk-ib-col--email h3 {
  width: 185px;
  min-height: 36px;              /* measured 185x36 */
  font-size: 14px;
  line-height: 16.8px;
  font-weight: 600;
  letter-spacing: -0.54px;
  color: #a790ba;
  margin: 0 0 6px;
}
/* measured: phone block Open Sans 18/21.6 700 -0.54px #ff8916 */
.vk-ib-col--phone h3 {
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  letter-spacing: -0.54px;
  color: var(--vk-orange);
  margin: 0 0 6px;
}
/* measured: Rubik 14/14 500 black */
.vk-ib-col--phone p {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  color: #000;
}

/* Button — measured: Rubik 14px/52px 700 uppercase, 195x50, pad 0 30px, r5 */
.vk-btn {
  display: inline-block;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 52px;
  height: 50px;
  padding: 0 30px;
  color: #fff;
  background: var(--vk-orange);
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s ease;
}
.vk-btn:hover { background: var(--vk-navy); color: #fff; }
.vk-infobar .vk-btn { flex: 0 0 auto; }

/* ==========================================================================
   Header — nav
   measured: outer 70px tall; inner bar 1110 wide, #ff8916, padding 0 20px
             link Open Sans 15/24 700 -0.45px uppercase #fff, pad 9px 20px 10px 22px
             nav overlaps hero (hero top 213, nav 178..248)
   ========================================================================== */
.vk-navwrap { position: relative; z-index: 20; height: 70px; }
.vk-navwrap .vk-container { padding: 0 15px; }
.vk-navbar {
  background: var(--vk-orange);
  padding: 0 20px;
  height: 70px;
  border-radius: 5px;            /* measured */
  display: flex; align-items: center;
  position: relative;
}
.vk-navwrap.is-stuck { position: fixed; top: 0; left: 0; right: 0; }

.vk-menu { display: flex; align-items: center; }
.vk-menu > li { position: relative; flex: 0 0 auto; }
.vk-menu > li > a {
  display: flex; align-items: center;
  height: 70px;
  padding: 9px 20px 10px 22px;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.45px;
  text-transform: uppercase;
  color: #fff;
}
/* reference does not style the current item differently */
.vk-menu > li > a:hover { color: var(--vk-navy); }
.vk-caret { margin-left: 11px; width: 10px; height: 10px; fill: currentColor; transition: transform 0.3s ease; }
.vk-menu > li:hover .vk-caret { transform: rotate(180deg); }

.vk-submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 285px;
  background: #fff;
  box-shadow: var(--vk-shadow-card);
  border-radius: 0 0 5px 5px;
  padding: 8px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all 0.4s ease;
}
.vk-menu > li:hover > .vk-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.vk-submenu a {
  display: block;
  padding: 9px 25px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.42px;
  text-transform: uppercase;
  color: var(--vk-navy);
}
.vk-submenu a:hover { color: var(--vk-orange); }

/* Off-canvas trigger — reference renders a 3x3 dot grid */
.vk-offcanvas-btn {
  margin-left: auto;
  width: 34px; height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 4px;
  align-content: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.vk-offcanvas-btn span { width: 4px; height: 4px; background: #fff; border-radius: 50%; display: block; }

.vk-burger { display: none; }

/* ==========================================================================
   Off-canvas panel
   ========================================================================== */
.vk-offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 90vw;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s ease, visibility 0s linear 0.5s;
  z-index: 90;
  padding: 30px;
  overflow-y: auto;
}
.vk-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s ease, visibility 0s;
}
.vk-offcanvas-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px;
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--vk-navy);
}
.vk-offcanvas img { width: 160px; height: 123px; object-fit: contain; }
.vk-offcanvas h3 {
  font-size: 18px; line-height: 24px; letter-spacing: -0.54px;
  margin: 25px 0 12px;
}
.vk-offcanvas p { margin: 0 0 20px; font-size: 15px; line-height: 25px; }
.vk-offcanvas .vk-btn { margin: 0 8px 10px 0; }
.vk-offcanvas ul li {
  display: flex; gap: 12px;
  font-size: 15px; line-height: 25px;
  margin-bottom: 12px;
}
.vk-offcanvas ul li svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--vk-orange); margin-top: 5px; }
.vk-backdrop {
  position: fixed; inset: 0;
  background: rgba(71, 53, 79, 0.45);
  opacity: 0; visibility: hidden;
  transition: all 0.4s ease;
  z-index: 80;
}
.vk-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero — measured: 500px tall, nav overlaps by 35px
   gradient: linear-gradient(90deg, rgba(255, 137, 22,1) 0%,
             rgba(255, 137, 22,0) 70%, rgba(233, 170, 40,0) 100%)
   ========================================================================== */
.vk-hero {
  position: relative;
  height: 500px;
  margin-top: -35px;
  overflow: hidden;
}
.vk-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2010ms ease;
}
.vk-slide.is-active { opacity: 1; }
.vk-slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
}
.vk-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(147, 116, 167, 1) 0%,
    rgba(147, 116, 167, 0) 70%,
    rgba(167, 144, 186, 0) 100%);
}
/* Layers are absolutely placed, exactly as the reference slider places them:
   grid 1110 centred, heading x-offset -15px -> x=150 at 1440.
   Per-slide top offsets (--h-top / --p-top) are the reference's own values. */
.vk-slide-inner { position: absolute; inset: 0; overflow: hidden; }

/* measured: 52px/58px, 800, uppercase, white, box 669 wide at x=150 */
.vk-slide h2 {
  position: absolute;
  left: calc(50% - 570px);
  top: calc(var(--h-pct, 30) * var(--v-scale, 1) * 1%);
  width: 669px;
  margin: 0;
  font-size: 52px;
  line-height: 58px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(175%);
}
/* measured: 18px/28px, 400, white, box 566 wide at x=150 */
.vk-slide p {
  position: absolute;
  left: calc(50% - 570px);
  top: calc(var(--p-pct, 58.8) * var(--p-scale, 1) * 1%);
  width: 566px;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
}
/* measured delays/durations from the reference slider */
.vk-slide.is-active h2 {
  animation: vkHeroIn 1500ms cubic-bezier(0.215, 0.61, 0.355, 1) 1340ms forwards;
}
.vk-slide.is-active p {
  animation: vkHeroUp 1500ms cubic-bezier(0.77, 0, 0.175, 1) 2050ms forwards;
}
@keyframes vkHeroIn { to { opacity: 1; transform: translateX(0); } }
@keyframes vkHeroUp { to { opacity: 1; transform: translateY(0); } }

/* Bullets — measured: 6px dot rgba(255,255,255,.2); active 13px, 1px solid #fff */
.vk-hero-bullets {
  position: absolute; left: 40px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  z-index: 5;
}
.vk-hero-bullets button {
  width: 6px; height: 6px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.vk-hero-bullets button.is-active {
  width: 13px; height: 13px;
  background: transparent;
  border: 1px solid #fff;
}

/* ==========================================================================
   Inner page banner + breadcrumb
   measured: 1440x260, padding 110px 0 70px, background cover 50% 50%
             ::after overlay rgba(255, 137, 22,0.25) z-index -1
             h1 Open Sans 36/36 800 -1.08px uppercase #fff, mb 8px, centred
             ol centred white; li 16px Rubik, margin 5px 10px, "-" separator
   The nav overlaps the banner by 35px exactly as it overlaps the home hero.
   ========================================================================== */
.vk-banner {
  position: relative;
  z-index: 1;
  margin-top: -35px;
  padding: 110px 0 70px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.vk-banner::after {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  content: "";
  background: rgba(147, 116, 167, 0.25);
  z-index: -1;
}
.vk-banner-heading { text-align: center; }
.vk-banner h1 {
  font-size: 36px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -1.08px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.vk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0; padding: 0;
  border-radius: 4px;            /* measured */
  list-style: none;
}
.vk-breadcrumb li {
  position: relative;
  display: inline-block;
  margin: 5px 10px;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}
.vk-breadcrumb li:not(:last-child)::after {
  position: absolute;
  content: "-";
  right: -15px;
  top: 0;
}
.vk-breadcrumb li a { color: #fff; }
.vk-breadcrumb li a:hover { color: var(--vk-navy); }

/* ==========================================================================
   Section heading (elementskit heading + long divider)
   measured: h 36px/44px 800 -1.08px orange, right aligned, margin-right 36px
             divider 5px x 72px #ff8916 at the block's right edge
   ========================================================================== */
/* The reference stacks the heading and a divider block, then pulls the divider
   up by -82px so the pair occupies 78px total with the 5px rule sitting at the
   block's right edge. Reproduced exactly — it determines the section height. */
.vk-sectionhead { display: flex; margin: 0 auto; }
.vk-sectionhead .vk-head-left { flex: 0 0 auto; }
.vk-sectionhead h2 {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -1.08px;
  color: var(--vk-orange);
  text-align: right;
  margin: 0 36px 0 0;
}
.vk-head-divider {
  margin-top: -82px;             /* measured */
  height: 72px;
  display: flex;
  justify-content: flex-end;
}
.vk-rule { width: 5px; height: 72px; background: var(--vk-orange); }

.vk-sectionhead .vk-head-right {
  padding-left: 30px;            /* measured */
  align-self: flex-start;
}
/* measured: 18px/28px, #ff8916 */
.vk-sectionhead .vk-head-right p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--vk-orange);
}

/* Welcome band — measured: padding 30px 0 45px; head row 904 wide, col 472 */
.vk-welcome { padding: 30px 0 45px; }
.vk-welcome .vk-sectionhead { max-width: 904px; }
.vk-welcome .vk-head-left { width: 472px; }

/* ==========================================================================
   Values row
   measured: section padding 0 0 160px; col 285; box 255x248 pad 65px 40px r5
             icon 71x71 mb 13; title Open Sans 18/24 800 -.54 uppercase #fff
             overlay ::before slides in from left, 0.6s, rgba(255, 137, 22,.9)
             content opacity 0 -> 1, 0.5s; hover shadow rgba(34, 47, 90,.25) 0 25px 35px
   ========================================================================== */
.vk-values { padding: 0 0 160px; }
.vk-values .vk-col { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }

.vk-valuebox {
  position: relative;
  height: 248px;
  margin-bottom: 5px;            /* measured: column 253 vs box 248 */
  padding: 65px 40px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
  background-size: cover;
  background-position: center center;
  text-align: center;
  transition: all 0.4s ease;
}
.vk-valuebox::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -100%; right: 100%;
  background: linear-gradient(180deg, rgba(147, 116, 167, 0.9) 0%, rgba(147, 116, 167, 0.9) 100%);
  transition: all 0.6s ease;
}
.vk-valuebox:hover::before { left: 0; right: 0; }
.vk-valuebox:hover { box-shadow: var(--vk-shadow-hover); }

.vk-valuebox .vk-value-inner { position: relative; opacity: 0; transition: opacity 0.5s ease; }
.vk-valuebox:hover .vk-value-inner { opacity: 1; }

.vk-valuebox img {
  width: 71px; height: 71px;
  object-fit: contain;
  margin: 0 auto 13px;
  display: block;
}
.vk-valuebox h3 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.54px;
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   Plans
   measured: heading band padding 75px 0 50px; cards band padding 0 0 80px
             col 570 (50%) pad 0 15px; box 540x214 pad 40 r5
             border 1px solid #edeff2; shadow 0 35px 50px rgba(0,0,0,.07); mb 30
             title Open Sans 24/32 800 -.72 uppercase, link #ff8916, mb 30
             icon 70x70 mr 30; readmore Rubik 14 700 -.14 uppercase underline
   ========================================================================== */
/* measured: head row 851 wide, col0 468, col1 383 */
.vk-planshead { padding: 75px 0 50px; }
.vk-planshead .vk-sectionhead { max-width: 851px; }
.vk-planshead .vk-head-left { width: 468px; }
.vk-planshead .vk-head-right { width: 383px; }

.vk-plans { padding: 0 0 80px; }
/* measured on the Funeral Plans page: 50px spacer + 20px margin before the row */
.vk-spacer { height: 50px; margin-bottom: 20px; }
/* measured: 37px of trailing space between the card grid and the footer */
.vk-plans--page { margin-bottom: 37px; }
.vk-plans .vk-col { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }

.vk-plancard {
  background: #fff;
  border: 1px solid var(--vk-card-border);
  border-radius: 5px;
  box-shadow: var(--vk-shadow-card);
  padding: 40px;
  margin-bottom: 30px;
  transition: all 0.5s ease;
}
.vk-plancard h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.72px;
  margin: 0 0 30px;
}
.vk-plancard h3 a { color: var(--vk-orange); }
.vk-plancard:hover h3 a { color: var(--vk-navy); }

.vk-plancard-media { display: flex; }
.vk-plancard-icon {
  flex: 0 0 70px;
  width: 70px; min-width: 70px; max-width: 70px;
  min-height: 70px;
  margin-right: 30px;
}
.vk-plancard-icon a { display: block; position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }
/* measured: background-size auto, position 0% 0%, no-repeat (icon is 76x76
   inside a 70x70 box, so it clips exactly as the reference does) */
.vk-plancard-icon span {
  position: absolute; inset: 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  transition: all 0.5s ease;
}
.vk-plancard-body { flex: 1 1 auto; min-width: 0; }
.vk-plancard-body p { margin: 0 0 15px; font-size: 16px; line-height: 24px; color: var(--vk-body); }

/* measured: rgb(255,165,0) — the CSS `orange` keyword, not the brand #ff8916 */
.vk-readmore {
  display: inline;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  text-decoration: underline;
  color: #a790ba;
}
.vk-readmore:hover { color: var(--vk-blue); }

/* ==========================================================================
   Plan detail page
   measured: content is full-bleed (no container); card padding 40
             body starts x=140 (40 pad + 70 icon + 30 gap) and is shrink-to-fit
             ul padding-left 40 disc; sub ul padding-left 40 circle
             logo panel at 50% / +102px, half width, hidden below md
   ========================================================================== */
.vk-plandetail { position: relative; }

.vk-plancard--detail {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
  padding: 40px;
}
.vk-plancard--detail .vk-plancard-icon { position: relative; }
.vk-plancard--detail .vk-plancard-icon span {
  position: absolute; inset: 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0% 0%;
}
/* width is set per page from the measured .media-body value */
.vk-plancard--detail .vk-plancard-body { flex: 0 0 auto; max-width: 100%; }
/* measured: .media has align-items: flex-start, so the icon keeps its 70px box */
.vk-plancard--detail .vk-plancard-media { align-items: flex-start; }
.vk-plancard--detail .vk-plancard-icon { flex: 0 0 70px; height: 70px; }
/* measured: section 902 vs card 862 -> 40px below the card */
.vk-plancard--detail { margin-bottom: 40px; }

.vk-planlist { padding-left: 40px; list-style: disc; }
.vk-planlist li { font-size: 16px; line-height: 26px; color: #000; }
.vk-planlist .vk-planlist-group > strong { font-weight: 700; color: #000; }
.vk-planlist .vk-planlist-group > ul { padding-left: 40px; list-style: circle; }

.vk-plandetail-apply { text-align: center; margin-top: 20px; }

.vk-plandetail-logo {
  position: absolute;
  left: 50%; top: 102px;
  width: 680px;                  /* measured */
  max-width: 50%;
  padding: 40px;
  text-align: center;
}
.vk-plandetail-logo img { max-width: 70%; height: auto; }

/* ==========================================================================
   CTA band
   measured: bg rgba(255, 137, 22,.08), padding 60px 0 70px
             heading 36/43 800 -1.08 uppercase centred, mb 10, width 830
             inner section 830 wide; card wrap 405x181 pad 40 r5, mr 10
             overlay #ff8916 @ .93; title Rubik 18/24 400 capitalize #fff mb 5
             p Open Sans 30/26 700 #fff; OR badge 60x56 Rubik 16 700 uppercase
   ========================================================================== */
.vk-cta { background: rgba(147, 116, 167, 0.08); padding: 60px 0 70px; }
/* measured offsets from section top: heading +70, cards +196, section height 457 */
.vk-cta h2 {
  max-width: 830px;
  margin: 10px auto;
  font-size: 36px;
  line-height: 43px;
  letter-spacing: -1.08px;
  text-align: center;
}
/* measured: inner 830 wide; each card 405x181; left pad 40, right pad 40 40 40 60 */
.vk-cta-inner {
  max-width: 830px;
  margin: 0 auto 10px;
  padding-top: 30px;
}
.vk-cta-row {
  display: flex;
  align-items: stretch;
  position: relative;
}
.vk-cta-card {
  position: relative;
  flex: 0 0 405px;
  max-width: 405px;
  min-height: 181px;
  padding: 40px;
  border-radius: 5px;
  overflow: hidden;
  display: flex; align-items: center;
}
/* left card: white beneath an orange overlay at .93 -> renders rgb(255,145,38) */
.vk-cta-card--phone { background: #fff; margin-right: 10px; }
.vk-cta-card--phone::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--vk-orange);
  opacity: 0.93;
  border-radius: 5px;
}
/* right card: solid #ff8916 + measured shadow */
.vk-cta-card--social {
  background: var(--vk-orange);
  margin-left: 10px;
  padding: 40px 40px 40px 60px;
  box-shadow: 0 25px 40px 0 rgba(122, 91, 141, 0.2);
}
.vk-cta-card > * { position: relative; }

.vk-cta-media { display: flex; align-items: center; gap: 20px; }
.vk-cta-media svg { flex: 0 0 30px; width: 30px; height: 30px; fill: #fff; }
/* measured: Rubik 18/24 400 capitalize */
.vk-cta-card h3 {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.54px;
  text-transform: capitalize;
  color: #fff;
  margin: 0 0 5px;
}
/* measured: Open Sans 30/26 700 */
.vk-cta-card p {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #fff;
}
/* measured: Open Sans 18/26 800 uppercase -0.56px, 305x70,
   padding 8px 16px, border-bottom 2px solid #ff8916 */
.vk-cta-note {
  display: block;
  width: 305px;
  max-width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: -0.56px;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 16px;
  border-bottom: 2px solid #f5f5f5;   /* measured: the visible rule is #f5f5f5 */
}

/* OR badge — measured 60x56, radius 50px, padding 10px */
.vk-or {
  position: absolute;
  left: 50%; top: 59px;          /* measured: 59px below the card top */
  transform: translateX(-50%);
  width: 60px; height: 56px;
  padding: 10px;
  border-radius: 50px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vk-orange);
  z-index: 3;
}

/* ==========================================================================
   About page
   measured: intro section padding 80px 0 50px; wrap 832 centred (x=304)
             text column 356 (x=319); logo 316x245 (x=820); spacer 832x50
             VM row 1470 at x=-15; boxes 705x177 padding 24px
             values band bg #f0f3fa; title 36/43 800 -1.08 centred
             accordion card 1060x50 mb 10; toggle Open Sans 18/24 800 -.54 uppercase #000
             body padding 0 100px 0 40px
             blocks: h5 Open Sans 20/24 800 uppercase #555 centred, mar 30 0 8
                     p Rubik 16/24 mb 25 ; hr 200x2 centred, mar 30 0
   ========================================================================== */
.vk-about-intro { padding: 80px 0 50px; }
.vk-about-intro-wrap {
  width: 832px;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 15px;            /* measured: text starts at x=319, wrap at 304 */
  display: flex;
  align-items: flex-start;
}
.vk-about-text { width: 356px; flex: 0 0 356px; margin: 0 145px 20px 0; }  /* measured widget margin-bottom 20 */
.vk-about-text p { margin: 0; font-size: 16px; line-height: 26px; color: #000; }
.vk-about-text h4 { margin: 0 0 8px; }
.vk-about-text strong {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;              /* measured */
  text-transform: uppercase;
  color: var(--vk-orange);
}
.vk-about-logo { flex: 0 0 auto; }
.vk-about-logo img { width: 316px; height: 245px; object-fit: contain; display: block; }
.vk-about-spacer { height: 50px; }

/* Vision / Mission */
.vk-vm { padding: 0; }
.vk-vm-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.vk-vm-col { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
.vk-vm-box {
  border-width: 0 1px 1px;
  border-style: none solid solid;
  border-color: #f8f9fa;         /* measured */
  padding: 24px;
  text-align: center;
  height: 100%;
}
.vk-vm-box h5 {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--vk-orange);
}
.vk-vm-box small { font-size: 16px; line-height: 26px; color: #000; }

/* Our Values band */
.vk-values-band {
  position: relative;
  margin-top: 20px;              /* measured: band sits 20px below the VM row */
  background-color: #faf8fb;
  /* The reference fills this slot with a photograph. It now carries one of the
     site's existing decorative atmospheric assets (the same still-life language
     already deployed in every page banner) behind a #faf8fb scrim, so the band
     reads as textured rather than flat while the accordion text keeps its
     contrast. The scrim is part of background-image on purpose: ::before below
     inherits it, so the measured 0.5 overlay lightens rather than darkens. */
  background-image:
    linear-gradient(rgba(250, 248, 251, 0.9), rgba(250, 248, 251, 0.9)),
    url("../img/hero-about-1400.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.vk-values-band::before {        /* measured: overlay of the same image at .5 */
  content: "";
  position: absolute; inset: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
}
.vk-values-band .vk-container { position: relative; }
/* measured: inner block 1060 wide starting at x=175 */
.vk-values-inner { width: 1060px; max-width: 100%; margin-left: 10px; padding: 10px 0; }
/* measured: 70x5 black bar above the title */
.vk-values-rule { width: 70px; height: 5px; background: #000; margin: 0 auto; }
.vk-values-title {
  font-size: 36px;
  line-height: 43px;
  font-weight: 800;
  letter-spacing: -1.08px;
  text-transform: uppercase;
  color: var(--vk-orange);
  text-align: center;
  margin: 20px 0 0;              /* measured: title lands at +35 from band top */
}
.vk-accordion { margin-top: 35px; counter-reset: vkAcc; }  /* measured gap title->accordion */
.vk-acc-card { margin-bottom: 10px; counter-increment: vkAcc; }
.vk-acc-card:last-child { margin-bottom: 0; }
/* measured: 1px #ededed rule at the top of every row; icon is absolute so the
   row stays exactly 50px tall */
.vk-acc-toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 0 10px;
  background: none;
  border: 0;
  border-top: 1px solid #ededed;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  color: #000;
  text-align: left;
  transition: all 0.4s ease;
}
.vk-acc-toggle:hover { color: var(--vk-orange); }
.vk-acc-toggle > span:first-child::before {
  content: counter(vkAcc) ".";
  margin-right: 4px;
}
/* measured: 40x40, padding 10, radius 5, absolute right, top 16 */
.vk-acc-icon {
  position: absolute;
  right: 30px; top: 16px;        /* measured: icon group has margin-right 30 */
  width: 40px; height: 40px;
  border-radius: 5px;
  transition: all 0.4s ease;
}
.vk-acc-icon::before,
.vk-acc-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.vk-acc-icon::before { width: 14px; height: 2px; }
.vk-acc-icon::after  { width: 2px; height: 14px; transition: opacity 0.3s ease; }
.vk-acc-toggle.is-open .vk-acc-icon {
  background: var(--vk-orange);
  color: #fff;
  box-shadow: 0 10px 20px 0 rgba(122, 91, 141, 0.3);
}
.vk-acc-toggle.is-open .vk-acc-icon::after { opacity: 0; }
.vk-acc-body { padding: 0 100px 0 40px; }
.vk-acc-body p { margin: 0 0 15px; font-size: 16px; line-height: 26px; color: var(--vk-body); }

/* Burial plans / offices / strategy */
.vk-about-blocks {
  margin-top: 27px;              /* measured: 27px below the values band */
  padding: 30px;
  background: #f9f9f9;           /* measured */
  border: 1px solid #ccc;        /* measured */
}
.vk-about-blocks h5 {
  margin: 30px 0 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: #555;
  text-align: center;
}
.vk-about-blocks p { margin: 0 0 25px; font-size: 16px; line-height: 24px; color: #000; }
.vk-about-blocks hr {
  width: 200px; height: 2px;
  margin: 30px auto;
  border: 0;
  background: gray;
}

/* ==========================================================================
   Contact page
   measured: info section padding 80px 0
             main section: two 570px columns (x=150 / x=720), wrap padding 10px
             map iframe 550x450
             info box: white, radius 5, padding 0 30px, 30px circle icon
   ========================================================================== */
.vk-contact-info { padding: 80px 0; }
.vk-contact-info .vk-col { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 15px; }
.vk-contact-box {
  display: flex; align-items: flex-start;
  background: #fff;
  padding: 0 30px;
  border-radius: 5px;
}
.vk-contact-box .vk-ico {
  flex: 0 0 30px; width: 30px; height: 30px;
  margin-right: 15px;
  border: 1px solid var(--vk-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--vk-orange);
}
.vk-contact-box .vk-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.vk-contact-box h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  letter-spacing: -0.54px;
  text-transform: none;
  color: var(--vk-orange);
}
.vk-contact-box h3 a { color: inherit; display: block; }
.vk-contact-box p { margin: 0; font-size: 14px; line-height: 14px; font-weight: 500; color: #000; }

.vk-contact-main { padding-bottom: 80px; }
.vk-contact-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }  /* measured: cols 570 at x=150 / 720 */
.vk-contact-col { flex: 0 0 50%; max-width: 50%; padding: 10px; }

/* Pending blocks — both are blocked on client input (B3 / B4) */
.vk-form-pending,
.vk-map-pending {
  border: 1px dashed var(--vk-orange);
  border-radius: 5px;
  background: rgba(147, 116, 167, 0.06);
  color: var(--vk-body);
}
.vk-form-pending { padding: 30px; min-height: 450px; }
.vk-form-pending p { margin: 0 0 12px; font-size: 15px; line-height: 24px; }
.vk-form-pending strong { color: var(--vk-orange); text-transform: uppercase; }
.vk-map-pending {
  height: 450px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vk-orange);
}

/* ==========================================================================
   Footer
   measured: main padding 50px 0 40px; col 285; heading Open Sans 18/18 800 -.54
             link Rubik 15/25 400; bottom bg #ff8916 padding 35px 0 15px
             social 36x36 r8% (#3b5998 / #833ab4 / #5da9dd)
   ========================================================================== */
.vk-footer { padding: 50px 0 40px; background: #fff; }
.vk-footer .vk-col { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
.vk-footer h3 {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.54px;
  margin: 0 0 10px;              /* measured: heading widget 28px tall */
}
.vk-footer li { font-size: 15px; line-height: 25px; color: #29252d; }
.vk-footer li a { color: #29252d; }
.vk-footer li a:hover { color: var(--vk-orange); }
.vk-footer .vk-iconlist li { display: flex; gap: 12px; margin-bottom: 10px; }
.vk-footer .vk-iconlist svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--vk-orange); margin-top: 5px; }
.vk-footer .vk-iconlist strong { font-weight: 700; }

/* measured: columns 413 / 343 / 380; wraps padded 0 15px (last 0 45px 0 15px);
   content block 85px tall; logo renders ~100x77 */
.vk-footer-bottom { background: var(--vk-orange); padding: 35px 0 15px; }
.vk-footer-bottom .vk-container { display: flex; align-items: flex-start; padding: 0; }
.vk-footer-bottom .vk-fb-col { padding: 0 15px; min-height: 85px; }
.vk-footer-bottom .vk-fb-col:nth-child(1) { flex: 0 0 413px; max-width: 413px; }
.vk-footer-bottom .vk-fb-col:nth-child(2) { flex: 0 0 343px; max-width: 343px; }
.vk-footer-bottom .vk-fb-col:nth-child(3) { flex: 0 0 380px; max-width: 380px; padding: 0 45px 0 15px; }
.vk-footer-bottom p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}
.vk-footer-bottom .vk-fb-logo { text-align: center; }
.vk-footer-bottom .vk-fb-logo img { width: 100px; height: 77px; object-fit: contain; display: inline-block; }
.vk-footer-bottom .vk-fb-social { display: flex; justify-content: flex-end; gap: 9px; padding-top: 6px; }
.vk-footer-bottom .vk-fb-social a {
  width: 36px; height: 36px;
  border-radius: 8%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.vk-footer-bottom .vk-fb-social svg { width: 16px; height: 16px; fill: currentColor; }
.vk-fb-social .facebook  { background: #3b5998; }
.vk-fb-social .instagram { background: #833ab4; }
.vk-fb-social .twitter   { background: #5da9dd; }

/* Back to top */
.vk-top {
  position: fixed; right: 25px; bottom: 25px;
  width: 45px; height: 45px;
  border: 0; border-radius: 5px;
  background: var(--vk-orange);
  color: #fff;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: all 0.4s ease;
  z-index: 60;
}
.vk-top.is-visible { opacity: 1; visibility: visible; }
.vk-top svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Responsive
   Measured from the reference at 1024 / 768 / 480:
     hero height   500 -> 461 -> 380 -> 238
     hero heading   52 ->  48 ->  35 ->  22
     main menu collapses to the off-canvas trigger at <= 1024 (not 991)
     nav bar height 70 -> 31 (tablet) -> 69 (mobile, full-bleed)
     value cols 4 -> 2 -> 2 -> 1 ; plan cols 2 -> 2 -> 2 -> 1 ; footer 4 -> 2 -> 2 -> 1
   ========================================================================== */
@media (max-width: 1240px) {
  .vk-slide h2 { font-size: 47px; line-height: 53px; }
  .vk-slide p { font-size: 20px; line-height: 28px; }
}

@media (max-width: 1024px) {
  .vk-hero { height: 461px; }
  /* measured @1024: heading 617x53 @x-13 fs48/53 ; sub 522x78 @x-13 fs17/26 */
  .vk-slide h2 { font-size: 48px; line-height: 53px; width: 617px; }
  .vk-slide p  { font-size: 17px; line-height: 26px; width: 522px; }
  .vk-slide h2, .vk-slide p { left: max(-13px, calc(50% - 525px)); }  /* measured -13 @1024; clamped so it cannot drift further left between breakpoints */

  /* info bar wraps: logo on its own centred row, then email | phone | button */
  .vk-infobar .vk-container { flex-wrap: wrap; justify-content: center; }
  .vk-ib-col { width: auto !important; min-height: 0; padding: 5px 20px; }  /* measured: info bar 200px tall at 1024 */
  .vk-ib-col--logo { flex: 0 0 100%; justify-content: center; }

  /* menu collapses */
  .vk-menu { display: none; }
  .vk-navwrap { height: 31px; }
  .vk-navbar { height: 31px; padding: 0 12px; justify-content: flex-start; gap: 18px; }
  .vk-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 3px;
    width: 40px; height: 23px; padding: 0 6px;
    background: none; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 4px;
    cursor: pointer;
  }
  .vk-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .vk-offcanvas-btn { margin-left: 0; }
  .vk-hero, .vk-banner { margin-top: 0; }

  /* fixed footer-bottom columns must release once the container is narrower */
  .vk-footer-bottom .vk-container { flex-wrap: wrap; padding: 0 15px; }
  .vk-footer-bottom .vk-fb-col:nth-child(1),
  .vk-footer-bottom .vk-fb-col:nth-child(2),
  .vk-footer-bottom .vk-fb-col:nth-child(3) {
    flex: 1 1 33.3333%; max-width: 33.3333%; padding: 0 15px;
  }
  .vk-values .vk-col  { flex: 0 0 50%; max-width: 50%; margin-bottom: 30px; }
  .vk-valuebox        { margin-bottom: 15px; }   /* measured: column 263 at <=1024 */
  .vk-values          { padding-bottom: 90px; }
  .vk-footer .vk-col  { flex: 0 0 50%; max-width: 50%; margin-bottom: 30px; }
}

@media (max-width: 768px) {
  .vk-hero { height: 380px; }
  /* measured @768: heading 462x39 @x11 fs35/39 ; sub 514x84 @x11 fs20/28
     vertical offsets drop to 21% / 47.2% of hero height */
  .vk-slide { --v-scale: 0.7; --p-scale: 0.803; }
  .vk-slide h2 { font-size: 35px; line-height: 39px; width: 462px; }
  .vk-slide p  { font-size: 20px; line-height: 28px; font-weight: 600; width: 514px; }
  .vk-slide h2, .vk-slide p { left: max(11px, calc(50% - 373px)); }   /* measured 11 @768 */
  .vk-hero-bullets { display: none; }   /* reference hides bullets under 1024 */

  .vk-sectionhead { flex-direction: column; align-items: center; max-width: none !important; }
  .vk-sectionhead .vk-head-left  { width: auto !important; text-align: center; }
  .vk-sectionhead h2 { margin: 0 0 18px; text-align: center; }
  .vk-head-divider { margin-top: 0; height: 5px; justify-content: center; }
  .vk-rule { width: 72px; height: 5px; }
  .vk-sectionhead .vk-head-right { width: auto !important; padding: 18px 0 0; text-align: center; }

  /* CTA cards shrink with the container; measured gutter is 10px, not 15 */
  .vk-cta-card { flex: 1 1 50%; max-width: 405px; }
  .vk-cta .vk-container { padding: 0 10px; }
  .vk-banner { padding: 80px 0 55px; }
}

@media (max-width: 991px) {
  /* the intro's fixed 832px wrap and the detail card's fixed body width must
     release before they overflow the viewport */
  .vk-about-intro-wrap { width: 100%; padding-left: 0; flex-direction: column; }
  .vk-about-text { width: 100%; flex: 0 0 auto; margin: 0 0 30px; }
  .vk-plancard--detail .vk-plancard-body { width: auto !important; flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 767px) {
  .vk-plans .vk-col { flex: 0 0 100%; max-width: 100%; }
  .vk-contact-info .vk-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 25px; }
  .vk-contact-col { flex: 0 0 100%; max-width: 100%; }
  .vk-about-intro-wrap { flex-direction: column; }
  .vk-about-text { width: 100%; flex: 0 0 auto; margin: 0 0 30px; }
  .vk-vm-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 15px; }
  .vk-acc-body { padding: 0 15px 0 0; }
  /* mobile visibility is now an owner-approved divergence from V9 - see the block at the end of this file */
  .vk-plancard--detail { padding: 30px 15px; }
  .vk-planlist { padding-left: 22px; }
  .vk-planlist .vk-planlist-group > ul { padding-left: 22px; }
}

@media (max-width: 575px) {
  .vk-hero { height: 238px; }
  /* measured @480: heading 289x24 @x6 fs22/24 ; sub 321x72 @x6 fs13/18 */
  .vk-slide h2 { font-size: 22px; line-height: 24px; width: 289px; }
  .vk-slide p  { font-size: 13px; line-height: 18px; font-weight: 600; width: 321px; }
  .vk-slide h2, .vk-slide p { left: max(6px, calc(50% - 234px)); }    /* measured 6 @480 */

  /* top bar + info bar stack and centre */
  .vk-topbar .vk-social { margin: 0 auto; }
  .vk-ib-col { flex: 0 0 100%; justify-content: center; text-align: left; border: 0; padding: 8px 20px; }
  .vk-ib-col--btn { justify-content: center; }

  /* nav goes full-bleed and taller */
  .vk-navwrap { height: 69px; }
  .vk-navwrap .vk-container { padding: 0; max-width: none; }
  .vk-navbar { height: 69px; border-radius: 0; padding: 0 15px; }

  .vk-banner { padding: 60px 0; }
  .vk-banner h1 { font-size: 28px; line-height: 32px; }
  .vk-planshead { padding: 55px 0 35px; }
  .vk-values .vk-col { flex: 0 0 100%; max-width: 100%; }
  .vk-footer .vk-col { flex: 0 0 100%; max-width: 100%; }
  .vk-footer-bottom .vk-container { flex-direction: column; gap: 22px; text-align: center; }
  .vk-footer-bottom .vk-fb-col { flex: 0 0 auto !important; max-width: none !important; padding: 0 15px; min-height: 0; }
  .vk-footer-bottom .vk-fb-social { justify-content: center; }
  .vk-plancard { padding: 30px; }

  .vk-cta-row { flex-direction: column; align-items: center; }
  .vk-cta-card { flex: 0 0 auto; width: 100%; max-width: 460px; min-height: 155px; }
  .vk-cta-card--phone  { margin: 0 0 30px; }
  .vk-cta-card--social { margin: 0; padding: 40px; }
  .vk-or { top: auto; bottom: -28px; }
}

/* ==========================================================================
   CONTENT ADAPTATIONS
   The client's own SVG sprite replaces the reference's licensed icon fonts,
   and the client has no square photography for the values row. Both are
   handled INSIDE the existing components — every measured geometry, colour,
   radius, shadow and type value above is unchanged.
   ========================================================================== */

/* Card icon: the reference painted a 76x76 bitmap into the 70x70 slot.
   Here the same slot holds a client SVG at the same size. */
/* the reference nested this span inside a positioned <a>; without that wrapper
   the icon needs its own containing block — geometry is unchanged (70x70) */
.vk-plancard-icon { position: relative; }
.vk-cardicon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--vk-orange);
}
.vk-cardicon svg { width: 46px; height: 46px; fill: currentColor; }

/* Values box without photography.
   The reference box is a photo that an orange overlay slides across on hover
   (rgba(255, 137, 22,.9)). With no photo supplied, the box carries that same
   measured overlay colour as its resting state so the icon and title remain
   legible. Geometry (255x248), radius 5, padding 65/40, icon 71x71 and the
   white Open Sans 18/24 800 -0.54px title are all unchanged. */
.vk-valuebox--icon {
  background-color: rgba(147, 116, 167, 0.9);
  background-image: none;
  padding: 40px 24px;
}
.vk-valuebox--icon::before { display: none; }
.vk-valuebox--icon .vk-value-inner { opacity: 1; }
.vk-valuebox--icon:hover { box-shadow: var(--vk-shadow-hover); }
.vk-valueicon {
  display: flex; align-items: center; justify-content: center;
  width: 71px; height: 71px;          /* measured */
  margin: 0 auto 13px;                /* measured */
  color: #fff;
}
.vk-valueicon svg { width: 42px; height: 42px; fill: currentColor; }
.vk-valuebox--icon p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: #fff;
}

/* Standalone note panel — the reference document block used for one paragraph. */
.vk-note { margin-top: 0; }
.vk-note p { margin: 0; }

/* Off-canvas link lists */
.vk-offcanvas ul li a { color: var(--vk-navy); }
.vk-offcanvas ul li a:hover { color: var(--vk-orange); }

/* Footer icon-list rows wrap onto two lines for longer client data */
.vk-footer .vk-iconlist li { align-items: flex-start; }

@media (max-width: 575px) {
  .vk-valuebox--icon { height: auto; min-height: 248px; }
}

/* Contact form — field styling taken from the reference's own input treatment
   (its search/CF7 inputs: 50px min-height, radius 5, 1px #ededed,
   0 35px 50px rgba(0,0,0,.07), Open Sans 14/600 uppercase, #666).
   No new visual language is introduced. */
.vk-form { }
.vk-form-title {
  font-family: "Open Sans", sans-serif;
  font-size: 24px; line-height: 32px; font-weight: 800;
  letter-spacing: -0.72px; text-transform: uppercase;
  color: var(--vk-orange);
  margin: 0 0 14px;
}
.vk-form-lead { margin: 0 0 24px; font-size: 16px; line-height: 26px; color: var(--vk-body); }
.vk-field { display: block; margin-bottom: 18px; }
.vk-field > span {
  display: block; margin-bottom: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.42px;
  text-transform: uppercase; color: var(--vk-navy);
}
.vk-field > span b { color: var(--vk-orange); }
.vk-field > span i { font-style: normal; font-weight: 400; text-transform: none; color: var(--vk-body); }
.vk-field input,
.vk-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid #ededed;
  border-radius: 5px;
  box-shadow: 0 35px 50px 0 rgba(0, 0, 0, 0.07);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--vk-body);
  transition: all 0.5s;
}
.vk-field textarea { min-height: 120px; resize: vertical; }
.vk-field input:focus,
.vk-field textarea:focus { outline: none; border-color: var(--vk-orange); }
.vk-form-note { margin: 14px 0 0; font-size: 14px; line-height: 22px; color: var(--vk-body); }

/* Contact page: two plan cards stack in the right column */
.vk-contact-col .vk-plancard + .vk-plancard { margin-top: 0; }

/* Fidelity corrections found in the side-by-side measurement pass.
   Reference values restored exactly. */

/* Card icon must stay 70x70 (reference). Longer client copy made the flex
   child stretch to the card's height. */
.vk-plancard-icon { align-self: flex-start; height: 70px; max-height: 70px; }

/* Top bar measures 47-48px in the reference; the client's text line is 2px
   shorter than the reference's icon row. Pin it to the measured height. */
.vk-topbar .vk-container { min-height: 27px; }

/* The client's email address is longer than the reference's placeholder text and
   forced the 3-up contact row past the viewport at 768px. Allow the flex item to
   shrink and the text to wrap — layout, spacing and typography are unchanged. */
.vk-contact-info .vk-col { min-width: 0; }
.vk-contact-box { min-width: 0; }
.vk-contact-box > div { min-width: 0; }
.vk-contact-box h3,
.vk-contact-box h3 a,
.vk-contact-box p { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   GALLERY — recovered from the reference's own image-gallery component
   (vakhandligroup p6967, re-admitted by the owner as a DESIGN-ONLY source).
   Every value below was measured from that rendered component.
   ========================================================================== */
.vk-gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -15px 0;      /* measured */
}
.vk-gallery .gallery-item {
  display: block;
  padding: 0 15px 15px 0;       /* measured */
  margin: 0;
  max-width: 16.666%;           /* measured — 6 columns */
  flex: 0 0 16.666%;
}
.vk-gallery .gallery-icon { margin: 0; display: block; }
.vk-gallery .gallery-icon a { display: block; }
.vk-gallery .gallery-item img {
  border: 3px groove var(--vk-orange);   /* measured: 3px groove rgb(255,137,22) */
  max-width: 100%;
  height: auto;
  display: block;
}
.vk-gallery .gallery-caption { display: none; }   /* measured: captions hidden */

/* measured breakpoints: 6 cols >=768, 2 cols <=767, 1 col <=479 */
@media (max-width: 767px) {
  .vk-gallery .gallery-item { max-width: 50%; flex: 0 0 50%; }
}
@media (max-width: 479px) {
  .vk-gallery .gallery-item { max-width: 100%; flex: 0 0 100%; }
}

/* No client photography has been supplied. The gallery renders naturally
   shorter rather than fabricating content. */
.vk-gallery-empty {
  border: 1px solid #ededed;
  border-radius: 5px;
  padding: 40px;
  text-align: center;
}
.vk-gallery-empty p { margin: 0; font-size: 16px; line-height: 26px; color: var(--vk-body); }

/* ==========================================================================
   ACCESSIBILITY CORRECTION (owner-approved, colour values only)
   ---------------------------------------------------------------------------
   Only `color` and `background` are set below. No dimension, font, spacing,
   radius, shadow, layout or structural property is touched.

   Rule 1 — small Soft Lavender (#A790BA) text on white  -> #7A5B8D Primary Purple
   Rule 2 — small white text on #9374A7 surfaces         -> #7A5B8D background

   #9374A7 REMAINS the primary brand accent for large headings (36px section
   heads, 24px card titles — both pass AA-Large), borders, icons, overlays,
   tints and decorative treatments. #A790BA remains available for decorative
   (non-text) accents.
   ========================================================================== */

/* --- Rule 1: small purple TEXT on light surfaces --------------------------- */
.vk-readmore,
.vk-readmore:link,
.vk-readmore:visited        { color: #7a5b8d; }   /* was #A790BA  2.86 -> 5.66 */
.vk-ib-col--email h3,
.vk-ib-col--email h3 a      { color: #7a5b8d; }   /* was #A790BA  2.86 -> 5.66 */

.vk-topbar-slogan           { color: #47354f; }   /* Deep Plum on the topbar tint — owner-approved final fix */
.vk-ib-col--phone h3        { color: #7a5b8d; }   /* was #9374A7  3.96 -> 5.66 */
.vk-sectionhead .vk-head-right p { color: #7a5b8d; } /* section subtitle 18/400 */
.vk-or                      { color: #7a5b8d; }   /* 16/700 badge */
.vk-footer h3               { color: #7a5b8d; }   /* footer column headings 18/800 */
.vk-footer .vk-iconlist strong,
.vk-footer .vk-iconlist a   { color: #7a5b8d; }
.vk-about-blocks a,
.vk-note a                  { color: #7a5b8d; }   /* inline links inside note panels */

/* --- Rule 2: solid surfaces carrying small white text --------------------- */
.vk-btn                     { background: #7a5b8d; }  /* white 14/700  3.96 -> 5.66 */
.vk-navbar                  { background: #7a5b8d; }  /* nav links white 15/700 */
.vk-footer-bottom           { background: #7a5b8d; }  /* copyright white 14/400 */
.vk-cta-card--social,
.vk-cta-card--phone::before { background: #7a5b8d; }  /* CTA cards, white 18/800 + 18/400 */
.vk-cta-card .elementor-background-overlay,
.vk-cta-card--phone > .vk-cta-overlay { background: #7a5b8d; }
.vk-valuebox--icon          { background-color: rgba(122, 91, 141, 0.9); } /* alpha kept */
.vk-valuebox::before        { background: linear-gradient(180deg, rgba(122, 91, 141, 0.9) 0%, rgba(122, 91, 141, 0.9) 100%); }
.vk-acc-toggle.is-open .vk-acc-icon { background: #7a5b8d; }  /* white glyph on it */

/* Remaining small purple text found by the post-correction audit (colour only) */
.vk-contact-box h3,
.vk-contact-box h3 a        { color: #7a5b8d; }   /* phone / email links 18/700 */
.vk-offcanvas h3            { color: #7a5b8d; }   /* off-canvas panel headings 18/800 */
.vk-field > span b          { color: #7a5b8d; }   /* required-field marker 14/900 */
.vk-skip                    { color: #7a5b8d; }


/* Top bar: below the container gutter the slogan sat hard against the screen
   edge. The reference's social icons carried a 14px inset of their own - match it. */
@media (max-width: 991px) {
  .vk-topbar-slogan { padding: 0 14px; }
}


/* ── Mobile fixes ──────────────────────────────────────────────────────────
   1. The two-column intro text stacks full-bleed below 992px, so the heading
      and paragraph sat hard against both screen edges. Apply the site's OWN
      existing gutter (15px — the value `.vk-col` uses everywhere). No new
      spacing token, no typography or structural change.
   2. The header carried TWO menu triggers on mobile (a 3-line hamburger and
      the dot-grid). The dot-grid is the trigger present in the header at all
      widths, so the duplicate hamburger is hidden. Nothing else changes. */
@media (max-width: 991px) {
  .vk-about-text { padding-left: 15px; padding-right: 15px; }
}

/* The duplicate 3-line hamburger is hidden at EVERY width (it also surfaced in
   the 992-1199px band where the desktop menu is already collapsed). The
   dot-grid trigger, which is present in the header at all widths, is the only
   menu control that renders. */
.vk-burger { display: none !important; }

/* ── 320px correction (owner-approved) ────────────────────────────────────────
   Cause: the section heading "03. Memorialisation" is one unbreakable 15-letter
   word. At the reference's measured 36px/800 it renders 338px wide, which cannot
   fit a 320px viewport, so the heading overflowed by 9px.

   Fix: permit that single over-long word to wrap. This is a text-flow property
   only — no font-size, weight, line-height, letter-spacing, colour, padding,
   margin or layout value changes. Scoped to <=339px so every width from 340px
   upward is provably untouched. The reference theme contains no wrapping rule of
   its own, so this rule has no upstream precedent; it exists solely to stop the
   overflow without shrinking type. */
@media (max-width: 339px) {
  /* the flex item defaults to max-content and will not shrink below the long
     word, so it needs min-width:0 before the wrap can take effect */
  /* flex-shrink is 0 in the base rule, so the item cannot shrink below its
     max-content width no matter what min-width says — allow it to shrink here */
  .vk-sectionhead .vk-head-left { min-width: 0; flex-shrink: 1; }
  /* `break-word` does NOT reduce intrinsic min-content width, so the flex item
     still could not shrink; `anywhere` does. */
  .vk-sectionhead h2 { overflow-wrap: anywhere; }
}

/* ── V9 tablet overlap correction (owner-approved reference-fidelity fix) ─────
   Measured from the live reference plan page: its text column ALWAYS ends at
   exactly 50% of the viewport — a 50/50 split with the side panel —
     1440 -> 720 (50%)   1280 -> 640 (50%)   1200 -> 600 (50%)
     1024 -> 512 (50%)    768 -> 384 (50%)
   Our body was pinned to width:580px, which happens to equal 50% only at
   1440px; below that it stayed at 720 while the panel moved inward, so the two
   collided (2px @1200, 103px @1024, 258px @768).

   The body's left edge sits at 140px (40 card padding + 70 icon + 30 gap), so
   reproducing the reference means: right edge = 50vw, i.e. width = 50vw - 140.
   At 1440 that evaluates to exactly 580px, so desktop is unchanged by
   definition. Scoped to >=768px so the existing mobile behaviour (panel hidden,
   body full width) is untouched, and to <=1279px so 1280 and 1440 keep the
   approved layout. No font, colour, content, image or panel value changes. */
/* Upper bound removed: the reference holds the 50/50 split at EVERY width, so
   the rule now applies from 768px up. At 1440 calc(50vw-140) = 580px, which is
   the existing desktop value, so wide desktop is unchanged; 1280 now follows the
   reference (640 = 50%) instead of the previously frozen 720. */
@media (min-width: 768px) {
  .vk-plancard--detail .vk-plancard-body { max-width: calc(50vw - 140px); }
}


/* ── V10 CTA band overflow correction (owner-approved) ───────────────────────
   Measured from the live reference: its CTA cards are never stacked and never
   fixed — they are min(415px, ~48.8% of the row):
     1440->415  1100->415  900->415  846->413  830->405  800->390  769->375
   i.e. the pixel value caps them at wide widths and a percentage takes over
   below ~848px. Ours used `flex: 0 0 405px` (flex-shrink 0), so between 769px
   and ~845px the two cards stayed 810px wide inside a shrinking row and pushed
   the page 45-73px past the viewport.
   Restoring the reference behaviour: let the cards shrink on the same ~48.8%
   basis in that band. Desktop (>=849px) keeps the approved fixed 405px, and the
   existing <=767px stacked layout is untouched. */
@media (min-width: 768px) and (max-width: 848px) {
  .vk-cta-card { flex: 0 1 48.8%; max-width: 48.8%; min-width: 0; }
}

/* ── Header info bar + footer bottom: 1025-1139px overflow correction ────────
   The reference container shrinks to the viewport below its 1140px max-width
   (measured: 1100px-wide container at a 1100px viewport, apply button ending at
   1085 — no overflow). Ours could not: `.vk-ib-col` widths sum to exactly 1140
   (373+274+265+228) and `.vk-fb-col` to 1140 (3x380), all with flex-shrink 0,
   so between 1025px and 1139px they held the row at 1140 and pushed the page
   40-90px past the viewport on every page.
   Allowing these flex items to shrink reproduces the reference. At >=1140px the
   container is already 1140 so nothing shrinks and desktop is unchanged; below
   1025px the existing stacked rules take over. */
.vk-infobar .vk-ib-col,
/* the per-column `flex: 0 0 Npx` rules below set shrink to 0 and out-specify a
   bare .vk-fb-col selector, so match their specificity here */
.vk-footer-bottom .vk-fb-col:nth-child(1),
.vk-footer-bottom .vk-fb-col:nth-child(2),
.vk-footer-bottom .vk-fb-col:nth-child(3) { flex-shrink: 1; min-width: 0; }
/* The CTA column holds a fixed-width button, so it cannot shrink below its
   content; let the three text columns absorb the reduction instead (the
   reference does the same - its button stays 195px at every width). */
.vk-infobar .vk-ib-col--btn { flex-shrink: 0; }


/* ── Detail-page image on mobile (OWNER-APPROVED divergence from V9) ─────────
   V9 hides the side panel below 768px. The owner has approved showing the
   approved photography on mobile instead. The panel is taken out of absolute
   positioning and allowed to flow in normal document order after the content
   card, using the same 15px gutter the rest of the mobile layout uses. No new
   component, no new photograph, no change to the desktop/tablet panel.

   SCOPED to `.vk-plancard-body > .vk-plandetail-logo` on purpose. That child
   combinator matches ONLY the nine approved photography pages (3 plans +
   6 services), where the panel now lives inside the card body. It deliberately
   does NOT match funeral-plans.php / grocery-package.php, whose panels still hold
   the decorative logo as a direct child of .vk-plandetail — those two are outside
   the approved scope and keep their existing V9 behaviour untouched. */
@media (max-width: 767px) {
  .vk-plancard-body > .vk-plandetail-logo {
    display: block;
    position: static;
    left: auto; top: auto;
    width: auto;
    max-width: none;
    /* it now sits INSIDE .vk-plancard-body, which already carries the card's
       30px 15px mobile gutter — so no horizontal padding of its own. */
    padding: 25px 0 0;
    text-align: center;
  }
  .vk-plancard-body > .vk-plandetail-logo img {
    max-width: 100%;
    height: auto;                /* aspect ratio preserved - never stretched */
    border-radius: 5px;          /* existing card radius token */
  }
}


/* ── Home "Dignified funeral care in Viljoenskroon" photo, stacked layout ─────
   .vk-about-intro-wrap turns to flex-direction: column at 991px, but the base
   rule's align-items: flex-start stays in force, so the fixed 316px photo stayed
   pinned to the left while the paragraph above it ran the full width. The photo
   also missed the 15px gutter the text carries, so it sat flush against the
   viewport edge. Centre it and match the gutter. Desktop (>=992px) is untouched:
   the row layout there still gets align-items: flex-start from the base rule. */
@media (max-width: 991px) {
  .vk-about-logo {
    align-self: center;
    max-width: 100%;
    padding: 0 15px;             /* same gutter as .vk-about-text */
  }
  .vk-about-logo img {
    max-width: 100%;
    height: auto;                /* keeps the 316x245 ratio when it must shrink */
  }
}


/* ── Decorative texture in the reference's two photo slots ───────────────────
   Both slots below are defined by the reference design as photographic; they
   were left flat only because no photograph was available at the time (see the
   comments at .vk-values-band and .vk-valuebox--icon). They are now filled with
   the site's EXISTING decorative atmospheric assets — the same still-life
   language already deployed in every page banner. No new photography, no
   client/documentary imagery, no third-party material.

   The tint is carried inside background-image, above the photo, so the photo
   sits underneath it. That preserves the measured overlay alpha exactly and
   keeps every text contrast ratio unchanged from the flat version. */
.vk-valuebox--icon {
  background-image:
    linear-gradient(rgba(122, 91, 141, 0.9), rgba(122, 91, 141, 0.9)),
    url("../img/hero-quiet-1100.webp");
  background-size: cover;
  background-position: 50% 50%;
}
/* a little variety across a row, using assets already on the site */
.vk-values .vk-row > .vk-col:nth-child(4n+2) .vk-valuebox--icon {
  background-image:
    linear-gradient(rgba(122, 91, 141, 0.9), rgba(122, 91, 141, 0.9)),
    url("../img/hero-about-1100.webp");
}
.vk-values .vk-row > .vk-col:nth-child(4n+3) .vk-valuebox--icon {
  background-image:
    linear-gradient(rgba(122, 91, 141, 0.9), rgba(122, 91, 141, 0.9)),
    url("../img/hero-services-1100.webp");
}
.vk-values .vk-row > .vk-col:nth-child(4n+4) .vk-valuebox--icon {
  background-image:
    linear-gradient(rgba(122, 91, 141, 0.9), rgba(122, 91, 141, 0.9)),
    url("../img/hero-plans-1100.webp");
}