*{box-sizing:border-box}
:root{
  --gold:#d4a447;--gold2:#a97122;--ink:#0a1115;--panel:#0c151a;
  --line:rgba(212,164,71,.58);--cream:#f4efe7;--muted:#b6bcc0
}
html{scroll-behavior:smooth}
body{margin:0;background:#081015;color:#fff;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.top{
  min-height:660px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(5,11,14,.05),rgba(5,11,14,.18)),
    url("funeral_background.png") center 42%/cover no-repeat;
}
.top:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,10,13,.08),rgba(5,10,13,.03) 55%,rgba(5,10,13,.55) 100%);
  pointer-events:none
}
.nav,.hero{position:relative;z-index:2}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 4%;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.monogram{font-family:Georgia,serif;font-size:60px;line-height:1;color:var(--gold)}
.brandtext h1{font-family:Georgia,serif;font-size:25px;letter-spacing:5px;margin:0}
.brandtext p{margin:4px 0 0;color:var(--gold);font-size:10px;letter-spacing:3px}
.navlinks{display:flex;gap:28px;align-items:center;font-size:13px}
.livepill{border:1px solid var(--gold);border-radius:6px;padding:10px 15px;color:#f5c468}
.hero{max-width:900px;margin:0 auto;text-align:center;padding:12px 20px}
.hero h2{font-family:Georgia,serif;font-size:62px;letter-spacing:4px;margin:0 0 14px;text-shadow:0 3px 15px rgba(0,0,0,.35)}
.rule{width:380px;height:1px;margin:0 auto 18px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero p{font-family:Georgia,serif;font-size:20px;line-height:1.45;margin:0;color:#fff}
.cta,.btnGold{
  display:inline-block;background:linear-gradient(#d8b264,#a7792c);color:#fff;
  font-weight:700;border-radius:6px;padding:13px 22px;border:1px solid rgba(255,220,150,.35)
}
.cta{margin-top:20px}
.wrap{max-width:1360px;margin:-205px auto 0;padding:0 24px 24px;position:relative;z-index:3}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stat{
  min-height:220px;padding:28px 22px;border-radius:10px;border:1px solid var(--line);
  background:rgba(7,17,21,.95);box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center
}
.stat.light{background:rgba(245,240,232,.98);color:#111}
.stat h3{font-family:Georgia,serif;color:var(--gold);font-size:22px;margin:14px 0 8px}
.stat.light h3{color:#111}
.stat p{font-size:14px;line-height:1.45;margin:0 auto;max-width:300px}
.count{font-family:Georgia,serif;font-size:34px;margin:19px 0 3px}
.small{font-size:11px;letter-spacing:.5px}
.btn{display:inline-block;margin-top:17px;border:1px solid var(--gold);padding:9px 18px;border-radius:5px;color:#efc16e;font-weight:700}
.stat.light .btn{background:linear-gradient(#d9b66b,#a8792c);color:#fff}
.current{
  display:grid;grid-template-columns:1.18fr .82fr;margin-top:12px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0a1419
}
.preview{
  min-height:390px;position:relative;
  background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.18)),url("funeral_background.png") center 58%/cover no-repeat
}
.badge{position:absolute;top:14px;left:14px;background:#c80018;padding:7px 11px;border-radius:5px;font-size:12px;font-weight:700}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play a{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);color:#111;font-size:34px;padding-left:5px}
.details{padding:32px 34px}
.details h3{font-family:Georgia,serif;color:var(--gold);font-size:26px;margin:0 0 18px}
.person{display:flex;gap:18px;align-items:center}
.person img{width:92px;height:92px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:#253139}
.person h4{font-family:Georgia,serif;font-size:24px;margin:0 0 6px}
.meta{line-height:1.8;margin-top:16px;font-size:14px;color:#e6e9eb}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btnDark{display:inline-block;border:1px solid #d9dde0;border-radius:6px;padding:12px 18px;font-weight:700}
.section{max-width:1360px;margin:0 auto;padding:8px 24px 36px}
.section h2{text-align:center;font-family:Georgia,serif;color:var(--gold);font-size:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.event{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0d171c}
.event img{width:100%;height:210px;object-fit:cover}.event .body{padding:18px}.event .status{font-size:11px;color:#e3b75f}
.event h3{font-family:Georgia,serif;font-size:22px;margin:9px 0}.event p{line-height:1.5;color:#d2d6d8}
.marketing{max-width:1360px;margin:0 auto;padding:8px 24px 34px;text-align:center}
.marketingTitle{display:flex;align-items:center;gap:16px;justify-content:center;margin:0 0 18px}
.marketingTitle:before,.marketingTitle:after{content:"";height:1px;flex:1;max-width:320px;background:var(--gold)}
.marketingTitle h2{font-family:Georgia,serif;color:var(--gold);font-size:26px;margin:0}
.marketingGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.marketCard{border:1px solid var(--line);border-radius:10px;padding:18px 14px;background:#0b151a;min-height:150px}
.marketCard h3{font-size:14px;margin:5px 0 8px}.marketCard p{font-size:12px;color:#d7dadd;line-height:1.45;min-height:52px}
.marketIcon{font-size:30px;color:var(--gold);margin-bottom:5px}.marketCard .btnGold{padding:9px 15px;font-size:12px}
.footer{
  border-top:1px solid rgba(212,164,71,.35);padding:15px 4%;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  color:#ddd;font-size:13px;background:#071015
}
.footer strong{color:var(--gold);font-family:Georgia,serif;font-style:italic}
.adminbar{background:#071015;padding:17px 22px}
.formcard{max-width:950px;margin:30px auto;background:#fff;color:#111;padding:26px;border-radius:12px}
label{display:block;font-weight:700;margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px;border:1px solid #ccd2d7;border-radius:7px;font:inherit}
textarea{min-height:90px}
table{width:100%;border-collapse:collapse;background:#fff;color:#111}
th,td{padding:11px;border-bottom:1px solid #eee;text-align:left}
@media(max-width:1000px){
 .navlinks{display:none}.cards{grid-template-columns:1fr}.wrap{margin-top:-130px}
 .current{grid-template-columns:1fr}.marketingGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
 .hero h2{font-size:40px}.hero p{font-size:16px}.wrap{margin-top:-90px}
 .marketingGrid{grid-template-columns:1fr}.brandtext h1{font-size:20px}
}

/* V5.4 funeral-style refinement — keeps all real HTML dynamic, no screenshot-as-background */
.top{
  min-height:690px;
  background:
    radial-gradient(circle at 50% 45%,rgba(210,150,54,.18),transparent 34%),
    linear-gradient(rgba(5,10,13,.04),rgba(5,10,13,.22)),
    url("funeral_background.png") center 42%/cover no-repeat !important;
}
.top:after{
  background:linear-gradient(to bottom,rgba(5,10,13,.08),rgba(5,10,13,.02) 48%,rgba(5,10,13,.52) 100%) !important;
}
.hero h2{font-size:64px !important;text-shadow:0 3px 18px rgba(0,0,0,.55)}
.cards{gap:28px}
.stat{border-color:rgba(212,164,71,.7)}
.current{box-shadow:0 16px 38px rgba(0,0,0,.28)}
.preview{
  background:
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.18)),
    url("funeral_background.png") center 60%/cover no-repeat !important;
}
.marketingTitle h2{letter-spacing:.5px}
.footer{border-top-color:rgba(212,164,71,.5)}

/* V5.5: funeral floral sides + better portrait visibility */
body{position:relative;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;top:120px;bottom:0;width:250px;z-index:0;background-repeat:no-repeat;background-size:contain;opacity:.72;pointer-events:none}
body:before{left:0;background-image:url("flowers_left.jpg");background-position:left top}
body:after{right:0;background-image:url("flowers_right.jpg");background-position:right top}
.top,.wrap,.marketing,.section,.footer{position:relative;z-index:1}
.top{background-position:center 34% !important}
.event{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr);align-items:stretch}
.event img{height:260px !important;object-fit:cover !important;object-position:center 28% !important}
.event .body{display:flex;flex-direction:column;justify-content:center;padding:24px !important}
@media(max-width:900px){body:before,body:after{width:120px;opacity:.30}.event{grid-template-columns:1fr}.event img{height:280px !important;object-position:center 25% !important}}

/* V5.6 — flowers and candles visible from the TOP */
body:before,body:after{display:none !important}

.top{
  position:relative;
  min-height:690px !important;
  overflow:hidden;
}
.top:before,.top:after{
  content:"";
  position:absolute;
  top:0;
  width:31vw;
  max-width:470px;
  height:620px;
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.96;
}
.top:before{
  left:0;
  background-image:
    linear-gradient(to right,rgba(8,16,21,.02) 60%,rgba(8,16,21,1) 100%),
    url("flowers_top_left.jpg");
  background-position:left top;
}
.top:after{
  right:0;
  background-image:
    linear-gradient(to left,rgba(8,16,21,.02) 60%,rgba(8,16,21,1) 100%),
    url("flowers_top_right.jpg");
  background-position:right top;
}
.nav,.hero{position:relative;z-index:4}
.wrap{z-index:5 !important}

/* Keep centre clear and readable like approved example */
.hero{max-width:850px}
.hero h2{text-shadow:0 4px 20px #000}
.hero p{text-shadow:0 2px 10px #000}

/* Better face framing on service cards */
.event img{
  height:300px !important;
  object-fit:cover !important;
  object-position:center 20% !important;
}
@media(max-width:900px){
  .top:before,.top:after{width:32vw;height:430px;opacity:.62}
  .hero{padding-left:12vw;padding-right:12vw}
  .event img{height:280px !important;object-position:center 18% !important}
}
@media(max-width:600px){
  .top:before,.top:after{width:38vw;height:330px;opacity:.42}
  .hero{padding-left:18px;padding-right:18px}
}

/* V5.17 — vorige dienste: hou besonderhede binne die kaart en maak video duidelik */
.previous-services{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
}
.previous-event{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}
.previous-event .event-video-link{
  position:relative;
  display:block;
  background:#05090c;
  overflow:hidden;
}
.previous-event .event-video-link img{
  display:block;
  width:100% !important;
  height:260px !important;
  object-fit:contain !important;
  transition:transform .2s ease,opacity .2s ease;
}
.previous-event .event-video-link:hover img{transform:scale(1.02);opacity:.78}
.previous-event .video-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  padding-left:5px;
  border:2px solid #f2c66d;
  border-radius:50%;
  background:rgba(5,12,16,.84);
  color:#f2c66d;
  font-size:27px;
  box-shadow:0 5px 22px rgba(0,0,0,.6);
}
.previous-event .video-label{
  position:absolute;
  left:50%;bottom:13px;
  transform:translateX(-50%);
  padding:7px 12px;
  border-radius:4px;
  background:rgba(5,12,16,.9);
  color:#f2c66d;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  white-space:nowrap;
}
.previous-event .body{
  display:flex !important;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start !important;
  min-width:0;
}
.previous-event .body h3{overflow-wrap:anywhere}
.previous-event .body .btnGold{margin-top:auto}
@media(max-width:600px){
  .previous-event .event-video-link img{height:auto !important;max-height:420px !important}
}
/* V5.7 balanced full-page funeral decor + single clean header brand */
.nav{padding-left:5%;padding-right:5%}
.brand{position:relative;z-index:6;background:rgba(5,10,13,.72);padding:7px 14px 7px 10px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.28)}
.monogram{font-size:48px!important}.brandtext h1{font-size:21px!important}.brandtext p{font-size:9px!important}
.top:before,.top:after{top:70px!important;height:550px!important;width:28vw!important;max-width:430px!important}
/* carry the floral/candle atmosphere through the whole front page */
.wrap,.marketing,.section{position:relative}
.wrap:before,.marketing:before,.section:before,.wrap:after,.marketing:after,.section:after{content:"";position:absolute;width:190px;height:520px;background-repeat:no-repeat;background-size:contain;opacity:.20;pointer-events:none;z-index:-1}
.wrap:before,.marketing:before,.section:before{left:-20px;background-image:url("flowers_top_left.jpg");background-position:left top}
.wrap:after,.marketing:after,.section:after{right:-20px;background-image:url("flowers_top_right.jpg");background-position:right top}
.marketing:before,.marketing:after{top:0}.section:before,.section:after{top:80px}
/* balanced signature branding on both lower corners */
.footer{position:relative;padding-left:150px!important;padding-right:150px!important;min-height:92px;align-items:center}
.footer:before,.footer:after{position:absolute;top:17px;font-family:Georgia,serif;color:var(--gold);font-size:26px;letter-spacing:3px;line-height:1.05;white-space:pre;text-align:center}
.footer:before{content:"S  STRYDOM\A FUNERAL HOME";left:25px}.footer:after{content:"S  STRYDOM\A FUNERAL HOME";right:25px}
@media(max-width:900px){.footer{padding-left:20px!important;padding-right:20px!important}.footer:before,.footer:after{display:none}.wrap:before,.wrap:after,.marketing:before,.marketing:after,.section:before,.section:after{width:100px;opacity:.10}}

/* V5.8 — fuller floral/candle frame and corrected footer branding */
.top:before,.top:after{
  width:34vw!important;max-width:520px!important;height:650px!important;
  opacity:1!important;background-size:cover!important;
}
.wrap:before,.marketing:before,.section:before,
.wrap:after,.marketing:after,.section:after{
  width:250px!important;height:680px!important;opacity:.32!important;
  background-size:cover!important;
}
.wrap:before,.marketing:before,.section:before{left:-35px!important}
.wrap:after,.marketing:after,.section:after{right:-35px!important}

/* additional candle/floral atmosphere lower down */
.marketing{background:
 linear-gradient(90deg,rgba(7,16,21,.20),rgba(7,16,21,.96) 18%,rgba(7,16,21,.96) 82%,rgba(7,16,21,.20)),
 url("flowers_left.jpg") left center/240px auto no-repeat,
 url("flowers_right.jpg") right center/240px auto no-repeat;
}
.section{
 background:
 linear-gradient(90deg,rgba(7,16,21,.12),rgba(7,16,21,.98) 17%,rgba(7,16,21,.98) 83%,rgba(7,16,21,.12)),
 url("flowers_top_left.jpg") left top/245px auto repeat-y,
 url("flowers_top_right.jpg") right top/245px auto repeat-y;
}

/* footer: no duplicated leading S */
.footer:before,.footer:after{
 content:"STRYDOM\A FUNERAL HOME"!important;
 font-size:24px!important;
 letter-spacing:3px!important;
}
@media(max-width:900px){
 .top:before,.top:after{width:34vw!important;height:440px!important}
 .wrap:before,.marketing:before,.section:before,
 .wrap:after,.marketing:after,.section:after{width:115px!important;opacity:.14!important}
 .marketing,.section{background-size:110px auto,110px auto!important}
}

/* V5.9 — move long floral columns outward to page edges */
.wrap:before,.marketing:before,.section:before{
  left:calc((100vw - 980px)/-2 - 245px)!important;
}
.wrap:after,.marketing:after,.section:after{
  right:calc((100vw - 980px)/-2 - 245px)!important;
}
.marketing,.section{
  background-position:left center,right center!important;
  background-size:205px auto,205px auto!important;
}
@media(min-width:1300px){
 .wrap:before,.marketing:before,.section:before{left:-285px!important}
 .wrap:after,.marketing:after,.section:after{right:-285px!important}
}
@media(max-width:1100px){
 .wrap:before,.marketing:before,.section:before{left:-115px!important}
 .wrap:after,.marketing:after,.section:after{right:-115px!important}
}
@media(max-width:900px){
 .wrap:before,.marketing:before,.section:before{left:-70px!important}
 .wrap:after,.marketing:after,.section:after{right:-70px!important}
}

/* V5.10 — clean footer, NO bottom photo/person section */
.footer{
  background:#071015 !important;
  background-image:none !important;
  min-height:92px !important;
  overflow:hidden !important;
}
.footer img,
.footer .photo,
.footer .staff-photo,
.footer .footer-photo,
.footer .people,
.footer .team{
  display:none !important;
}
/* Keep only branding + contact details at the bottom */
.footer:before,.footer:after{
  background:none !important;
}

/* V5.11 — compact page + full service photos visible */
.wrap,
.section,
.marketing{
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.cards{gap:18px !important}
.stat{min-height:205px !important;padding:22px 18px !important}

.event{
  grid-template-columns:minmax(300px,.95fr) minmax(300px,1.05fr) !important;
  max-width:100% !important;
}

.event img{
  width:100% !important;
  height:250px !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0a1115 !important;
  padding:0 !important;
}

.event .body{
  padding:20px !important;
}

/* keep flowers at outer edges while content becomes narrower */
.section,
.marketing{
  padding-left:28px !important;
  padding-right:28px !important;
}

/* Slightly smaller typography/buttons for a tighter full-page view */
.hero h2{font-size:54px !important}
.hero p{font-size:17px !important}
.stat h3{font-size:20px !important}
.count{font-size:30px !important}
.section h2{font-size:28px !important}

@media(max-width:900px){
  .wrap,.section,.marketing{max-width:760px !important}
  .event{grid-template-columns:1fr !important}
  .event img{height:auto !important;max-height:360px !important;object-fit:contain !important}
}

@media(max-width:600px){
  .wrap,.section,.marketing{max-width:100% !important}
  .event img{height:auto !important;max-height:none !important}
  .hero h2{font-size:38px !important}
}