/* Maak 'n Kopskuif — rebuilt from the Wix original (desktop canvas 1265px). */
:root {
  /* DEC-0011: palette switched to her requested colours (soft pink, burgundy, gold, beige) — shades pending her confirmation */
  --beige: #F1E6D8;
  --highlight: #F2C4CE;
  --gold: #C9A227;
  --burgundy: #7B1E33;
  --rose: #7B1E33;
  --text: #3E3133;
  --teal: #7B1E33;
  --teal-soft: #7B1E33;
  --brown: #7B1E33;
  --footer: #7B1E33;
  --pink-soft: #F2C4CE;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --forum: "Forum", Georgia, serif;
  --caudex: "Caudex", Georgia, serif;
  --script: "Dancing Script", cursive;
  --display: "Instrument Serif", Georgia, serif;
  --shadow: 0 0 3px rgba(0,0,0,.5), 0 14px 14px -10px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--beige); color: var(--text); font: 16px/1.4 var(--forum); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding-left: 28px; }

/* Layout follows the Wix original: section backgrounds and boxes stretch with the screen, while the
   content inside keeps the 1265px design size and stays centred (measured at 1280/1615/2560px). */
.wrap { position: relative; }

/* Highlighted heading lines (the beige marker behind text) */
.hl span:not(.wipe) { background: var(--highlight); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl .wipe { display: block; }

/* ---------- Header ---------- */
.site-header { background: #fff; }
.header-in { height: 209px; display: flex; align-items: flex-start; }
.brand-logo { margin: 21px 0 0 19px; width: 178px; flex: none; }
.brand-text { margin-top: 71px; display: flex; flex-direction: column; }
.tagline { font: 14px/1.4 var(--sans); color: #000; }
.brand-name { font: 700 30px/1.1 var(--forum); color: var(--text); text-decoration: none; margin: 4px 0 0 19px; }
/* DEC-0014: 6 items + Praatjies dropdown + EN; tighter padding so it fits the 1265px canvas */
.nav { margin: 87px 30px 0 auto; display: flex; align-items: center; }
.nav > a, .dd > a { font: 16px/50px var(--sans); color: var(--text); text-decoration: none; padding: 0 12px; border-left: 1px solid var(--gold); display: block; }
.nav > a:first-child { border-left: 0; }
.nav a[aria-current="page"], .nav a:hover { color: var(--burgundy); }
.dd { position: relative; }
.dd > a::after { content: " ▾"; font-size: 12px; }
.dd-menu { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 240px; background: #fff; border-top: 3px solid var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,.18); display: none; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
.dd-menu a { display: block; padding: 9px 18px; font: 15px var(--sans); color: var(--text); text-decoration: none; }
.dd-menu a:hover { background: var(--beige); }
.lang-btn { margin-left: 10px; border: 1px solid var(--gold); background: #fff; color: var(--text); border-radius: 14px; padding: 4px 10px; font: 700 13px var(--sans); cursor: pointer; }
.lang-btn:hover { background: var(--beige); }
.menu-btn { display: none; }
/* Google's translate bar would push the page down; hide it (the EN/AF button is the switch) */
iframe.skiptranslate, .goog-te-banner-frame { display: none !important; }
/* DEC-0021: hide Google's floating badge/tooltips; hide the page (max 2.5 s) while it translates */
body > .skiptranslate, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, [id^=goog-gt-] { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
html.gt-wait body { opacity: 0; }
body { transition: opacity .2s; }
body { top: 0 !important; }
.band { height: 54px; background: var(--beige); }

/* ---------- Buttons ---------- */
.btn-soft { display: inline-flex; align-items: center; justify-content: center; background: var(--highlight); color: #000; text-decoration: none; font: 700 14px var(--sans); border: 0; border-radius: 20px; box-shadow: 0 3px 9px rgba(0,0,0,.23); cursor: pointer; }
.btn-soft { background: var(--gold) !important; color: var(--text); }
.btn-soft:hover { background: var(--burgundy) !important; color: #fff; }
/* a talk name locked against translation (span) is a flex item in the button: keep its leading space ("BESPREEK SKUIF…") */
.btn-soft > span[translate], .btn-ghost > span[translate] { white-space: pre; }
.btn-outline { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 10px; border: 2px solid var(--brown); border-radius: 50px; color: var(--brown); background: #fff; text-decoration: none; font: 300 16px var(--sans); }
.btn-outline::after { content: ""; width: 9px; height: 9px; border: solid var(--brown); border-width: 3px 3px 0 0; transform: rotate(45deg); margin-right: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--beige); text-align: center; padding: 40px 16px 34px; font: 15px/1.6 var(--sans); }
.site-footer a { color: var(--beige); }
.ft p + p { margin-top: 10px; }
.ft-name { font: 700 22px/1.2 var(--caudex); letter-spacing: 2px; }
.ft-motto { font: italic 20px var(--caudex); }

/* ================= HOME ================= */
.hero { display: grid; grid-template-columns: 1fr 1fr; }

.poster { width: 634px; max-width: none; margin: 32px 0 0 -167px; }
.quicket-btn { position: relative; display: block; width: 505px; margin: -3px 0 0 -42px; padding-left: 78px; background: #000; color: #fff; font: 700 18px/40px "Mulish", var(--sans); text-decoration: none; }
.quicket-btn::before { content: "›"; position: absolute; left: -13px; top: -18px; width: 66px; height: 66px; border-radius: 10px; background: #F48FB1; color: #000; font: 700 22px/66px var(--sans); text-align: center; transform: rotate(-12deg); box-shadow: 0 2px 14px rgba(0,0,0,.45); }
.quicket-btn::before { background: var(--highlight) !important; }
.quicket-btn:hover::before { background: var(--gold) !important; }

/* Bordered "about" box */




.vir-wie { margin: 74px 0 0 88px; font: italic 700 38px/1.4 var(--forum); }

.meer { margin: 83px 0 0 156px; font: italic 700 38px/1.4 var(--forum); }

.hart { text-align: center; margin-top: 51px; }
.hart h2 { font: italic 700 40px/1.4 var(--caudex); }
.hart .btn-soft { width: 142px; height: 50px; margin-top: -2px; }

/* Testimonials */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; background: #fff; margin: -58px 80px 0; position: relative; min-height: 867px; }
.review { width: 368px; padding: 32px 30px 0 60px; color: var(--teal); font: 18px/1.47 var(--forum); }
.review .quote { display: block; width: 49px; height: 35px; margin: 4px 0 15px -16px; }
.review .stars { font-size: 26px; letter-spacing: 2px; margin: -8px 0 12px 32px; line-height: 26px; height: 26px; overflow: visible; }
.review p + p { margin-top: 26px; }
.review .stars + p { margin-top: 0; }
.review .name { font: italic 26px/1.3 var(--caudex); margin: 10px 0 0 16px; }

/* Closing CTA */
.cta { text-align: center; padding: 9px 0 32px; }
.cta h2 { font: italic 700 38px/1.4 var(--caudex); }
.cta .sub { font: italic 20px/1.4 var(--caudex); color: var(--teal-soft); text-align: left; display: inline-block; margin-top: 6px; padding-left: 60px; width: 833px; max-width: 100%; }
.cta .logo-small { width: 101px; margin: 36px auto 10px; position: relative; left: -42px; }
.cta h2, .cta .btn-wrap { position: relative; left: -20px; }
.cta .btn-wrap { left: -37px; }

/* ================= MEER OOR ================= */
.story { background: var(--rose); padding: 46px 80px 24px; }
.story-head { text-align: center; padding-bottom: 19px; color: var(--beige); }
.story-head h1 { font: 65px/1 var(--display); }
.story-head p { font: 25px/1.2 var(--forum); margin-top: 12px; }
.story-card { background: #fff; display: grid; grid-template-columns: 1fr 1fr; padding: 85px 0 0; font: 16px/1.4 var(--sans); }
.story-card p + p { margin-top: 22px; }
.col-left { width: 552px; justify-self: center; padding-left: 58px; }
.col-right { padding-left: 17px; }
.photo-frame { position: relative; background: var(--highlight); }
.photo-frame img { box-shadow: var(--shadow); }
.frame-beige { margin: 60px 0 0 -31px; width: 490px; height: 643px; padding: 23px 0 0 14px; }
.frame-beige img { width: 461px; }

.dienste-head { text-align: center; margin-top: 24px; max-width: 445px; }
.dienste-head h2 { font: 53px/1.2 var(--script); }
.dienste-head p { font: 26px/1.4 var(--caudex); margin-top: -6px; }
.svc-title { font: 38px/1.4 var(--caudex); margin: 32px 0 6px 22px; }
.svc { max-width: 445px; margin-left: 22px; position: relative; }
.vbox { position: absolute; box-shadow: var(--shadow); background: var(--burgundy); }
.vbox video { width: 100%; height: 100%; object-fit: cover; }
.vbox button { position: absolute; border: 0; padding: 0; background-color: transparent; cursor: pointer; opacity: 0; transition: opacity .2s; }
.vbox button:focus-visible, .vbox.is-paused .vb-play { opacity: 1; }
@media (hover: hover) { .vbox:hover button { opacity: 1; } .vbox:hover .vb-play { opacity: .8; } }
/* Touch screens: controls stay invisible (and untappable) until the video itself is tapped */
@media (hover: none) { .vbox button, .vbox.is-paused .vb-play { opacity: 0; pointer-events: none; }
  .vbox.show-ctl button, .vbox.show-ctl.is-paused .vb-play { opacity: 1; pointer-events: auto; } }
/* DEC-0027: soft beige round button with burgundy icon (was a bare black icon) */
.vbox .vb-play { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background-color: rgba(241,230,216,.88); box-shadow: 0 3px 14px rgba(0,0,0,.3); }
.vb-play::before { content: ""; position: absolute; left: 22px; top: 19px; width: 7px; height: 26px; background: var(--burgundy); box-shadow: 13px 0 0 var(--burgundy); }
.vbox.is-paused .vb-play::before { width: 0; height: 0; background: none; box-shadow: none; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--burgundy); }
.vb-mute { right: 6px; bottom: 6px; width: 32px; height: 32px; background: linear-gradient(135deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 3v10.6A4 4 0 1 0 11 17V7h6V3z'/%3E%3C/svg%3E") center / 22px no-repeat; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.vbox.is-unmuted .vb-mute { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 3v10.6A4 4 0 1 0 11 17V7h6V3z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.svc ul { margin: 0; padding-left: 28px; }
.mt { margin-top: 22px; }

/* ================= KONTAK ================= */
.contact { background: #fff; padding: 65px 40px 4px; }
.contact-box { background: var(--beige); padding: 55px 16px 44px max(16px, calc((100% - 1185px) / 2 + 139px)); color: #000; font: 16px/1.4 var(--sans); }
.contact-form { width: 100%; max-width: 790px; margin: 53px 0 0 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; font: 300 14px "Mulish", var(--sans); }
.contact-form label { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
.contact-form input, .contact-form textarea { font: 15px var(--sans); border: 1px solid #000; background: #fff; padding: 8px; margin-left: -2px; }
.contact-form input { height: 37px; }
.contact-form .full { grid-column: 1 / -1; margin-top: 57px; }
.contact-form textarea { height: 85px; resize: vertical; }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 20px; font: 15px var(--forum); }
.form-foot .btn-soft { width: 250px; height: 36px; }
/* Thank-you note: FormSubmit redirects back to /contact-8#gestuur after sending */
.form-status { display: none; grid-column: 1 / -1; margin-top: 16px; padding: 12px 16px; background: #fff; border-left: 4px solid var(--rose); font: 16px var(--forum); }
.form-status:target { display: block; }

/* ================= SPREEKONDERWERPE (added on Wix 2026-10-02; measured from her page) ================= */
.spreek { background: var(--pink-soft); min-height: 683px; }
.spreek h1 { font: 56px/1.4 var(--caudex); }

/* ================= MEER OOR v2 — DEC-0010 (her Wix rewrite, 2026-10-02 evening; positions measured at 1280px) ================= */
/* Wix rule: left-column items stay centred in the left half, right-column items in the page */
.oor-canvas .v1 { height: 219px; } .oor-canvas .v2 { height: 268px; }
.o-kontak { height: 55px; } .o-besp .btn-soft { width: 250px; height: 50px; }

/* ================= WERKSWINKELS — concept page (DEC-0012), her tokens + existing patterns ================= */
.ws { background: var(--beige); padding-bottom: 70px; }
.ws-head { background: var(--burgundy); color: var(--beige); text-align: center; padding: 46px 16px 40px; }
.ws-head h1 { font: 65px/1 var(--display); }
.ws-sub { font: italic 20px/1.5 var(--caudex); max-width: 640px; margin: 14px auto 0; }
.contact-form select { font: 15px var(--sans); border: 1px solid #000; background: #fff; padding: 8px; margin-left: -2px; height: 37px; }

/* ================= WINKEL — concept shop (DEC-0013) ================= */
.konsep-bar { background: var(--gold); color: var(--text); text-align: center; font: 15px/1.4 var(--sans); padding: 10px 16px; }
.shop-grid { width: min(1103px, calc(100% - 48px)); margin: 0 auto; padding-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.shop-card { background: #fff; box-shadow: var(--shadow); border-top: 4px solid var(--gold); padding: 0 24px 26px; display: flex; flex-direction: column; gap: 8px; font: 16px/1.5 var(--forum); }
.shop-img { position: relative; margin: 0 -24px 10px; background: var(--highlight); }
.shop-logo { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.shop-card h3 { font: 700 28px/1.25 var(--caudex); color: var(--burgundy); }
.shop-card > p:not(.shop-price) { flex: 1; }
.shop-price { font: 700 22px var(--caudex); }
.shop-size { font: 15px var(--sans); display: flex; align-items: center; gap: 10px; }
.shop-size select { font: 15px var(--sans); padding: 6px; border: 1px solid #000; background: #fff; }
.shop-add { height: 46px; margin-top: 6px; }
.shop-soon .shop-price { color: var(--burgundy); font-style: italic; }
.cart-btn { position: fixed; right: 24px; bottom: 24px; z-index: 20; background: var(--burgundy); color: #fff; border: 0; border-radius: 30px; padding: 14px 22px; font: 700 17px var(--sans); box-shadow: var(--shadow); cursor: pointer; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(400px, 100%); background: var(--beige); box-shadow: -6px 0 24px rgba(0,0,0,.25); padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; font: 16px/1.4 var(--sans); }
.cart[hidden], .cart-btn[hidden] { display: none; }
.cart-top { display: flex; justify-content: space-between; align-items: center; }
.cart-top h2 { font: 700 28px var(--caudex); color: var(--burgundy); }
.cart-close { background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: var(--text); }
.cart-items { list-style: none; padding: 0; margin: 0; }
.cart-items li { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(123,30,51,.2); }
.ci-qty { display: flex; align-items: center; gap: 8px; }
.ci-qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--burgundy); background: #fff; color: var(--burgundy); cursor: pointer; font-size: 16px; }
.ci-sum { text-align: right; font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; font-size: 18px; }
.cart-pay { height: 48px; font-size: 16px; }
.cart-note { background: #fff; border-left: 4px solid var(--gold); padding: 12px 14px; font-size: 14px; }

/* ================= v2 LAYOUT — DEC-0014 (her email copy 2026-10-06 + example-site video): simple flowing sections ================= */
.home-hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: var(--burgundy); }
.hh-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(62,20,32,.88) 0%, rgba(62,20,32,.7) 42%, rgba(62,20,32,0) 72%); }
.hh-text { position: relative; z-index: 1; width: min(560px, 58%); margin-left: max(40px, calc(50% - 552px)); padding: 60px 0; color: #fff; font: 17px/1.6 var(--forum); }
.hh-text h1 { font: 64px/1.05 var(--display); letter-spacing: 1px; }
.hh-name { font: 46px/1.3 var(--script); margin-top: 18px; }
.hh-role { font: 700 13px/1.5 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--highlight); margin-bottom: 18px; }
.hh-text p + p { margin-top: 12px; }
.hh-tags { font: italic 17px var(--caudex); color: var(--highlight); }


.sec { width: min(1103px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 0; font: 17px/1.6 var(--forum); }
.sec p + p { margin-top: 14px; }
.sec-h { font: italic 700 38px/1.4 var(--forum); margin-bottom: 18px; }
#vorm .sec-h, .sec > .sec-h { text-align: center; }
.sec-intro { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.sec-btn { text-align: center; margin-top: 36px; }
.sec-btn .btn-soft, .split-text .btn-soft { height: 48px; padding: 0 30px; margin-top: 22px; font-size: 14px; }
main > .sec:last-child { padding-bottom: 80px; }
.sub-h { font: 700 26px/1.3 var(--caudex); color: var(--burgundy); margin: 26px 0 8px; }

.split { display: grid; grid-template-columns: min(440px, 42%) 1fr; gap: 60px; align-items: center; }
.split.flip { grid-template-columns: 1fr min(440px, 42%); }
.split.flip .split-photo { order: 2; }
.split-photo { width: 100%; max-height: 560px; object-fit: cover; box-shadow: var(--shadow); }
.split-photo.top { object-position: 50% 15%; }
.talk { scroll-margin-top: 20px; }
.talk .split-photo { aspect-ratio: 4 / 3.4; }
.tags { font: italic 18px var(--caudex); color: var(--burgundy); margin-bottom: 16px; }


.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile img.top { object-position: 50% 15%; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(62,20,32,.9) 0%, rgba(62,20,32,.35) 55%, rgba(62,20,32,.1) 100%); }
.tile:hover img { transform: scale(1.05); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.three .card:last-child:nth-child(3n+1) { grid-column: 2; }
.card { background: #fff; border-top: 4px solid var(--gold); box-shadow: var(--shadow); padding: 24px 24px 26px; font: 16px/1.55 var(--forum); }
.card h3 { font: 700 22px/1.3 var(--caudex); color: var(--burgundy); margin-bottom: 10px; }
.card p + p { margin-top: 10px; }
.chips { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { background: var(--highlight); border-radius: 18px; padding: 4px 16px; font: 15px/1.6 var(--sans); }

.band-pink { background: var(--highlight); margin-top: 70px; padding-bottom: 60px; }
.sec.narrow { width: min(820px, calc(100% - 48px)); text-align: center; }
.big-quote { margin: 30px 0 0; font: italic 700 28px/1.45 var(--forum); color: var(--burgundy); }
.big-quote img { margin: 0 auto 12px; }

.story2-grid { display: grid; grid-template-columns: 1fr 520px; gap: 50px; align-items: start; }
.story2-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.story2 .vbox { position: relative; aspect-ratio: 9 / 13; }
/* DEC-0026: talk videos on offer pages (native controls, sound on when she presses play) */
/* DEC-0027: framed like her photos — offset pink backdrop, 3:4 crop (trims TikTok black bars), soft play button */
.vids { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; }
.vids figure { width: min(320px, calc(100% - 16px)); margin: 0; }
.vframe { position: relative; isolation: isolate; }
.vframe::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--highlight); z-index: -1; }
.vids video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--burgundy); box-shadow: var(--shadow); }
.v-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; border: 0; border-radius: 50%; background: rgba(241,230,216,.88); box-shadow: 0 3px 14px rgba(0,0,0,.3); cursor: pointer; transition: transform .2s; }
.v-play::before { content: ""; position: absolute; left: 28px; top: 22px; border-style: solid; border-width: 14px 0 14px 23px; border-color: transparent transparent transparent var(--burgundy); }
.v-play:hover, .v-play:focus-visible { transform: scale(1.08); }
.vframe.on .v-play { display: none; }
.vids figcaption { margin-top: 30px; text-align: center; font: italic 22px/1.3 var(--caudex); }

.form-box { padding: 40px max(24px, calc((100% - 790px) / 2)) 36px; background: #fff; box-shadow: var(--shadow); }
.book-form { margin-top: 0; gap: 22px 20px; }
.book-form .full { margin-top: 0; }
.book-form .form-foot { justify-content: space-between; }
.book-form .form-foot span { max-width: 470px; }

/* ================= v3 — DEC-0015: heatherrose.uk structure in Magda's palette ================= */
.topbar { background: var(--burgundy); color: var(--beige); display: flex; justify-content: space-between; padding: 6px max(16px, calc(50% - 600px)); font: 12px/1.6 var(--sans); }
.topbar a { color: var(--beige); text-decoration: none; }
.topbar-soc a + a, .ft-soc a + a { margin-left: 14px; }
.nav > a, .dd > a { text-transform: uppercase; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
/* compact header like her example site (was the 209px Wix header) */
.header-in { height: auto; align-items: center; padding: 10px 0; }
.brand-logo { margin: 0 0 0 19px; width: 104px; }
.brand-text { margin: 0 0 0 14px; }
.brand-name { margin: 2px 0 0; font-size: 26px; }
.nav { margin: 0 24px 0 auto; }
.o-hero-btns .btn-soft, .o-hero-btns .btn-dark, .o-hero-btns .btn-ghost { margin-top: 0; }
.dd.sub { position: relative; }
.dd.sub > a { display: flex; justify-content: space-between; }
.dd-menu .dd > a { text-transform: none; letter-spacing: 0; font: 15px var(--sans); line-height: normal; padding: 9px 18px; border: 0; }
.dd.sub > a::after { content: "›"; margin-left: 10px; }
.dd.sub > .dd-menu { top: -11px; left: 100%; display: none; }
.dd.sub:hover > .dd-menu, .dd.sub:focus-within > .dd-menu { display: block; }
.dd:hover > .dd-menu .dd.sub:not(:hover):not(:focus-within) > .dd-menu { display: none; }
.nav .btn-book { margin-left: 12px; border: 0; background: var(--gold); color: var(--text); border-radius: 22px; padding: 0 18px; line-height: 38px; font: 700 12px/38px var(--sans); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; box-shadow: 0 3px 9px rgba(0,0,0,.2); }
.nav .btn-book:hover { background: var(--burgundy); color: #fff; }
.btn-ghost, .btn-dark { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: 26px; font: 700 13px var(--sans); letter-spacing: 1px; text-decoration: none; }
.btn-ghost { border: 2px solid currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(255,255,255,.15); }
.btn-dark { background: var(--burgundy); color: #fff; }
.btn-dark:hover { background: var(--text); }
.kicker { font: 700 12px/1.6 var(--sans); letter-spacing: 3px; text-transform: uppercase; color: var(--burgundy); margin-bottom: 12px; }
.kicker.light { color: var(--beige); }
.o-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.o-hero-btns.left { justify-content: flex-start; }
.o-hero-btns .btn-soft { height: 48px; padding: 0 28px; font-size: 13px; letter-spacing: 1px; border-radius: 26px; }
.home-hero .hh-role { margin-bottom: 14px; }

.o-hero { background: linear-gradient(120deg, var(--burgundy) 0%, color-mix(in srgb, var(--burgundy) 72%, var(--highlight)) 100%); color: #fff; text-align: center; padding: 70px 16px 64px; }
.o-hero .kicker { color: var(--highlight); }
.o-hero h1 { font: 68px/1.1 var(--display); }
.o-hero-sub { font: italic 20px/1.5 var(--caudex); max-width: 760px; margin: 14px auto 0; color: var(--beige); }

.pink-split { background: var(--highlight); padding-bottom: 70px; }
.pink-split .split-text .kicker { margin-bottom: 14px; }
.sub-h.big { font: 40px/1.2 var(--display); color: var(--text); margin: 0 0 16px; }
.chips.center { justify-content: center; }
.focus { text-align: center; }
.event-box { margin-top: 22px; background: #fff; padding: 20px 22px 26px; border-left: 4px solid var(--gold); }
.event-box .quicket-btn { width: auto; margin: 18px 0 0 30px; }
.card.pkg { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.card.pkg p:not(.emo-big) { flex: 1; }
.card.pkg .btn-soft { height: 42px; margin-top: 12px; }
.emo-big { font-size: 34px; line-height: 1; margin-bottom: 4px; }

.o-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.o-card { background: #fff; box-shadow: var(--shadow); text-decoration: none; color: var(--text); display: flex; flex-direction: column; }
.o-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.o-card img.top { object-position: 50% 15%; }
.o-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.o-card-name { font: 700 24px/1.25 var(--caudex); color: var(--burgundy); }
.o-card-tags { font: italic 15px/1.4 var(--caudex); flex: 1; }
.o-card-more { font: 700 12px var(--sans); letter-spacing: 2px; color: var(--burgundy); margin-top: 8px; }
.o-card:hover .o-card-name { text-decoration: underline; }
.o-cards.all .o-card:last-child:nth-child(3n+1) { grid-column: 2; }

.cta-band { background: var(--burgundy); color: var(--beige); text-align: center; padding: 70px 16px; margin-top: 80px; font: 18px/1.6 var(--forum); }
.cta-band .kicker { color: var(--highlight); }
.cta-band h2 { font: 44px/1.2 var(--display); margin-bottom: 12px; }
.cta-band .btn-soft { height: 48px; padding: 0 30px; margin-top: 22px; border-radius: 26px; letter-spacing: 1px; }

.tile-frame { background: var(--burgundy); padding: 34px max(20px, calc(50% - 620px)) 40px; text-align: center; }
.ftiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ftile { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; text-decoration: none; padding: 16px; }
.ftile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ftile img.top { object-position: 50% 15%; }
.ftile::after { content: ""; position: absolute; inset: 0; background: rgba(62,20,32,.5); transition: background .4s; }
.ftile:hover::after { background: rgba(62,20,32,.3); }
.ftile:hover img { transform: scale(1.05); }
.ftile span, .ftile small { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.ftile span { font: 34px/1.15 var(--display); text-transform: uppercase; letter-spacing: 1px; }
.ftile small { font: 13px/1.4 var(--sans); margin-top: 8px; color: var(--beige); }
.tile-frame .sec-btn { margin-top: 26px; }

.dark-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--burgundy); color: var(--beige); }
.dark-split > img { width: 100%; height: 100%; max-height: 760px; object-fit: cover; object-position: 50% 20%; }
.dark-text { padding: 70px max(30px, calc(50vw - 560px)) 70px 70px; text-align: center; align-self: center; font: 17px/1.7 var(--forum); }
.dark-text h2 { font: 48px/1.2 var(--display); color: #fff; margin-bottom: 22px; }
.dark-text p + p { margin-top: 14px; }
.dark-text .btn-soft { height: 48px; padding: 0 28px; margin-top: 18px; border-radius: 26px; letter-spacing: 1px; }
.pink-line { color: var(--highlight); font-weight: 700; }
.center-sec .pink-line, .center-sec.pink .pink-line { color: var(--burgundy); }

.center-sec { max-width: 820px; margin: 0 auto; padding: 80px 16px; text-align: center; font: 17px/1.7 var(--forum); }
.center-sec.pink { max-width: none; padding-left: max(16px, calc(50% - 410px)); padding-right: max(16px, calc(50% - 410px)); background: color-mix(in srgb, var(--highlight) 45%, #fff); }
.center-h { font: 34px/1.35 var(--display); margin: 22px 0 18px; }
.center-sec p + p { margin-top: 14px; }
.rule { width: 60px; border: 0; border-top: 3px solid var(--gold); margin: 22px auto; }
.rule.left { margin-left: 0; }

.who { background: color-mix(in srgb, var(--highlight) 45%, #fff); padding: 80px 16px; }
.who-in { width: 1000px; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; font: 17px/1.6 var(--forum); }
.diamonds { list-style: none; padding: 0; columns: 2; }
.diamonds li { padding: 4px 0 4px 22px; position: relative; break-inside: avoid; }
.diamonds li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 8px; }
.says { list-style: none; padding: 0; display: grid; gap: 10px; }
.says li { background: #fff; border-left: 3px solid var(--burgundy); padding: 12px 16px; font: italic 17px/1.5 var(--caudex); }
.says span { display: block; font: 13px var(--sans); font-style: normal; color: var(--burgundy); margin-top: 4px; }
.say-box { margin-top: 18px; background: var(--burgundy); color: var(--beige); padding: 20px 22px; border-radius: 8px; }
.say-box a { color: #fff; font-weight: 700; }
.say-box p + p { margin-top: 8px; }

.photo-strip { display: flex; overflow: hidden; background: var(--burgundy); padding: 26px 0; gap: 0; }
.photo-strip img { width: 12.5%; aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.photo-strip img:nth-child(odd) { transform: rotate(-4deg); } .photo-strip img:nth-child(even) { transform: rotate(3deg) translateY(6px); }

.review-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
.review-cards .review { width: auto; background: #fff; box-shadow: var(--shadow); padding: 28px 26px 26px; border-top: 4px solid var(--gold); }
.review-cards .review .stars, .review-cards .review .name { margin-left: 0 !important; text-align: left !important; }

.contact2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: start; }
.c2-card { background: #fff; box-shadow: var(--shadow); padding: 30px 30px 34px; font: 17px/1.6 var(--forum); }
.c2-card p + p { margin-top: 10px; }
.c2-card .btn-dark { margin-top: 10px; }
.c2-form { width: auto; margin: 6px 0 0; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.c2-form .full { margin-top: 0; }
.c2-form .form-foot { justify-content: space-between; }
.c2-form .form-foot .btn-soft { width: 180px; height: 42px; }
.ft-logo { margin: 0 auto 14px; width: 80px; border-radius: 50%; }

/* DEC-0016: per-offering booking box */
.book-sec { scroll-margin-top: 10px; }
.fmt { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fmt legend { padding: 0 0 6px 2px; font-weight: 700; }
.fmt label { flex-direction: row; align-items: center; gap: 8px; font: 15px var(--sans); }
.fmt em { color: var(--burgundy); }
/* Zoom / online chosen → the event questions don't apply */
/* DEC-0036: only the online formats (Live / Op jou eie tyd) skip the event details; Praatjie/Werkswinkel keep them */
.book-form:has(input[name=formaat][value^=Live]:checked, input[name=formaat][value^=Op]:checked) .ip { display: none; }
/* DEC-0033: the date list only belongs to Live */
.book-form label.live-only { display: none; }
.book-form:has(input[name=formaat][value^=Live]:checked) .live-only { display: flex; }

/* ================= RESPONSIVE — DEC-0018 =================
   >=1265 desktop · 861–1264 only the menu collapses (it needs ~1240px), layout keeps its desktop shape ·
   601–860 single column, 2-up grids · <=600 phones, 1-up grids. Replaces the Wix-era "<1265 = phone" rule. */
@media (max-width: 1264px) {
  .header-in { flex-wrap: wrap; padding: 10px 16px; }
  .brand-logo { width: 90px; margin: 0; }
  .brand-text { margin: 0 0 0 12px; }
  .brand-name { font-size: 24px; }
  .menu-btn { display: block; margin-left: auto; align-self: center; border: 1px solid var(--gold); background: #fff; color: var(--text); border-radius: 18px; padding: 8px 16px; font: 700 15px var(--sans); cursor: pointer; }
  .nav { display: none; flex-direction: column; align-items: stretch; margin: 10px 0 4px; width: 100%; }
  .nav.open { display: flex; }
  .nav > a, .dd > a { border-left: 0; border-top: 1px solid rgba(201,162,39,.5); font-size: 15px; line-height: 46px; padding: 0 8px; }
  .dd-menu, .dd.sub > .dd-menu, .dd.sub:not(:hover) > .dd-menu { display: block !important; position: static; box-shadow: none; border: 0; padding: 0 0 8px 18px; min-width: 0; }
  .dd > a::after, .dd.sub > a::after { content: ""; }
  .nav .btn-book { margin: 12px 8px 0; align-self: flex-start; }
  .lang-btn { align-self: flex-start; margin: 10px 8px 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .review-cards { grid-template-columns: repeat(2, 1fr); }
  .hh-text h1 { font-size: 54px; }
  .ftile span { font-size: 26px; }
}
@media (max-width: 860px) {
  .home-hero { min-height: 0; display: block; }
  .hh-photo { position: static; height: 320px; }
  .home-hero::after { display: none; }
  .hh-text { width: auto; margin: 0; padding: 28px 16px 34px; background: var(--burgundy); }
  .hh-text h1 { font-size: 42px; }
  .hh-name { font-size: 38px; }
  .sec, .sec.narrow { padding-top: 44px; }
  .sec-h { font-size: 28px; }
  .split, .split.flip, .story2-grid, .dark-split, .who-in, .contact2 { grid-template-columns: 1fr; gap: 24px; }
  .split.flip .split-photo { order: 0; }
  .split-photo { max-height: 420px; }
  .dark-split > img { max-height: 420px; }
  .dark-text { padding: 40px 20px 50px; }
  .dark-text h2, .cta-band h2 { font-size: 36px; }
  .o-hero h1 { font-size: 46px; }
  .o-cards, .ftiles, .tiles, .cards.three { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cards.three .card:last-child:nth-child(3n+1), .o-cards.all .o-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .ftile span { font-size: 22px; }
  .center-sec { padding: 54px 16px; }
  .center-h { font-size: 26px; }
  .who { padding: 54px 16px; }
  .photo-strip img { width: 25%; }
  .big-quote { font-size: 22px; }
  .form-box, .contact-box { padding: 24px 16px; }
  .contact-form, .c2-form { grid-template-columns: 1fr; gap: 14px; }
  .form-foot, .book-form .form-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .form-foot .btn-soft { width: 100%; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .shop-card { padding: 0 14px 18px; }
  .shop-img { margin: 0 -14px 6px; }
  .shop-card h3 { font-size: 22px; }
  .ws-head h1 { font-size: 48px; }
  .quicket-btn { width: 100%; max-width: 505px; padding-left: 64px; font-size: 15px; }
  .quicket-btn::before { left: -4px; width: 52px; height: 52px; line-height: 52px; top: -6px; }
}
@media (max-width: 600px) {
  .topbar-soc { display: none; }
  .tiles, .cards, .cards.three, .cards.two, .o-cards, .ftiles, .review-cards, .shop-grid { grid-template-columns: 1fr; }
  .diamonds { columns: 1; }
  .vb-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .vb-play::before { left: 15px; top: 12px; width: 6px; height: 24px; box-shadow: 12px 0 0 #000; }
  .vbox.is-paused .vb-play::before { left: 17px; border-width: 12px 0 12px 20px; }
}

/* DEC-0018: big screens — scale the whole page up so content fills a 1920/2560 screen in the same proportions as on
   a ~1440 laptop (Alexander's screen is 2560; a fixed 1265px canvas left wide empty bands). Every size here is px, so
   whole-page zoom = the rem-scaling equivalent without rewriting 500 rules. */
@media (min-width: 1600px) { html { zoom: 1.1; } }
@media (min-width: 1800px) { html { zoom: 1.25; } }
@media (min-width: 2000px) { html { zoom: 1.4; } }
@media (min-width: 2300px) { html { zoom: 1.6; } }
@media (min-width: 2500px) { html { zoom: 1.7; } }

/* ================= SCROLL ANIMATIONS =================
   Ported from the Wix entrance effects: durations, easing curves and keyframes read from the live
   site. Like Wix, an element waits invisible in its resting place, and the animation starts when
   ~15% of it is on screen (anim.js adds .in). Wix layers some effects on an outer + inner element;
   those use a .wipe / .slot-inner child here. */
.js [data-anim]:not(.in), .js .quicket-btn:not(.in)::before { visibility: hidden; }
.btn-wrap { display: inline-block; }

.js .in[data-anim="blur-in"]    { animation-name: a-fade, a-unblur; animation-duration: 1.4s, 2s; animation-timing-function: cubic-bezier(.47,0,.745,.715), linear; }
.js .in[data-anim="flip-x"]     { animation: a-flip-x 1.2s cubic-bezier(.215,.61,.355,1); }
.js .in[data-anim="flip-x"] .wipe { animation: a-wipe .96s cubic-bezier(.215,.61,.355,1); }
.js .in[data-anim="rise-grow"]  { animation-name: a-fade, a-rise-grow; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.645,.045,.355,1); }
.js .in[data-anim="fold-down"]  { animation-name: a-fade, a-fold-down; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.25,.46,.45,.94), cubic-bezier(.175,.885,.32,1.275); }
.js .in[data-anim="from-right"] { animation: a-from-right 1.2s cubic-bezier(.445,.05,.55,.95); }
.js .in[data-anim="float-up"]   { animation: a-float-up 1.2s cubic-bezier(.445,.05,.55,.95); }
.js .in[data-anim="fly-left"]   { animation: a-fly-left 1.2s cubic-bezier(.645,.045,.355,1); }
.js .in[data-anim="swing-in"]   { transform-origin: 0 100%; animation-name: a-fade, a-swing-in; animation-duration: .6s, 1s; animation-timing-function: cubic-bezier(.47,0,.745,.715), cubic-bezier(.175,.885,.32,1.275); }
.js .in[data-anim="fade"]       { animation: a-fade 1.2s cubic-bezier(.445,.05,.55,.95); }
.js .in[data-anim="wipe-down"]  { animation: a-wipe-down 1.2s cubic-bezier(.645,.045,.355,1); }
.js .in[data-anim="grow"]       { animation-name: a-fade, a-grow; animation-duration: 1.2s; animation-timing-function: linear, cubic-bezier(.645,.045,.355,1); }
.js .in[data-anim="open-mid"]   { animation-name: a-fade, a-open-clip, a-open-scale; animation-duration: 1.2s, 1.2s, 1.02s; animation-timing-function: cubic-bezier(.25,.46,.45,.94), cubic-bezier(.86,0,.07,1), cubic-bezier(.86,0,.07,1); }
/* Quicket icon: circle pop-in, then a pendulum swing that never stops (as on Wix) */
.quicket-btn::before { transform: none; transform-origin: 50% 0; }
.js .quicket-btn.in::before { animation-name: a-fade, a-circle, a-swing; animation-duration: 1.2s, 1.5s, 4s; animation-timing-function: cubic-bezier(.25,.46,.45,.94), cubic-bezier(.645,.045,.355,1), linear; animation-iteration-count: 1, 1, infinite; animation-delay: 0s, 0s, 1.5s; }

@keyframes a-fade      { from { opacity: 0; } }
@keyframes a-unblur    { from { filter: blur(6px); } }
@keyframes a-flip-x    { from { transform: perspective(800px) translateZ(-100px) rotateX(-90deg) translateZ(100px); } to { transform: perspective(800px) translateZ(-100px) rotateX(0) translateZ(100px); } }
@keyframes a-wipe      { from { transform: rotateZ(30deg); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes a-rise-grow { from { transform: translateY(120px) scale(.8); } }
@keyframes a-fold-down { from { transform: translateY(-50%) perspective(800px) rotateX(-90deg) translateY(50%); } to { transform: translateY(-50%) perspective(800px) rotateX(0) translateY(50%); } }
@keyframes a-from-right{ from { opacity: 0; transform: translateX(60px); } }
@keyframes a-float-up  { from { opacity: 0; transform: translateY(60px); } }
@keyframes a-fly-left  { from { transform: translateX(calc(-100% - 510px)); } }
@keyframes a-swing-in  { from { transform: rotate(-50deg); } }
@keyframes a-wipe-down { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes a-grow      { from { transform: scale(.8); } }
@keyframes a-open-clip { from { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes a-open-scale{ from { transform: scaleY(0); } }
@keyframes a-circle    { from { clip-path: circle(0%); } to { clip-path: circle(75%); } }
@keyframes a-swing     { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(.61,1,.88,1); }
                         25% { transform: rotate(20deg); animation-timing-function: cubic-bezier(.37,0,.63,1); }
                         75% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(.12,0,.39,0); }
                         100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-anim] *, .js .quicket-btn::before { animation: none !important; visibility: visible !important; }
}

/* DEC-0017: price cards, like the package cards on heatherrose.uk */
.cards.two { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; }
.card.price { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.card.price p:not(.price-big) { flex: 1; }
.price-big { font: 44px/1.1 var(--display); color: var(--burgundy); margin: 8px 0 10px; }
.card.price .btn-soft { height: 44px; }
.price-rows { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; border-top: 1px solid rgba(123,30,51,.2); }
.price-rows li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label label" "price btn"; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(123,30,51,.2); font: 14px/1.4 var(--sans); }
.price-rows li > span:first-child { grid-area: label; font-weight: 700; }
.price-rows .pr { grid-area: price; display: flex; align-items: center; gap: 8px; }
.price-rows .pr b { font: 22px var(--display); color: var(--burgundy); font-weight: 400; }
.tbc { background: var(--highlight); border-radius: 10px; padding: 1px 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.price-rows a { grid-area: btn; background: var(--gold); color: var(--text); border-radius: 16px; padding: 5px 16px; font: 700 12px var(--sans); letter-spacing: 1px; text-decoration: none; text-transform: uppercase; }
.price-rows a:hover { background: var(--burgundy); color: #fff; }
.sec-intro.small { font-size: 15px; margin-top: 18px; }
.org-btn { width: 260px; height: 46px; }
.price-rows li.live { grid-template-areas: "label label" "price price" "nxt nxt"; }
.price-rows .nxt { grid-area: nxt; margin-top: 6px; }
.price-rows .nxt p { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin: 0; padding: 8px 0; border-top: 1px dashed rgba(123,30,51,.25); }
.price-rows .nxt p:first-child { border-top: 0; }
.price-rows .nxt p[hidden] { display: none; }
.price-rows .nxt a { grid-area: auto; flex: none; }
.price-rows .nxt b { color: var(--burgundy); }
.up-card { text-decoration: none; color: var(--text); }
.up-card .btn-soft { height: 40px; margin-top: 10px; }
.sec.upcoming { padding-bottom: 70px; }
/* DEC-0039: next-event bar above the home hero */
.event-bar { background: var(--burgundy); color: var(--beige); display: flex; align-items: center; justify-content: center; gap: 12px 28px; flex-wrap: wrap; padding: 12px 16px; text-align: center; }
.eb-text { color: inherit; text-decoration: none; display: flex; align-items: baseline; justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.eb-kick { font: 700 12px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.eb-text strong { font: italic 700 22px Forum, serif; }
.eb-when { font: 15px var(--sans); }
.eb-text:hover strong { text-decoration: underline; }
.eb-btn { height: 38px; padding: 0 22px; margin: 0; }
@media (max-width: 600px) { .event-bar { padding: 10px 16px; } .eb-text { flex-direction: column; align-items: center; gap: 2px; } .eb-text strong { font-size: 20px; } .eb-when { font-size: 14px; } }