/* JOVAMY — "Cameroun" theme (2026-10-20), layered on top of site.css.
   Strong Cameroon flag colours (green, red, yellow + the yellow star) with JOVAMY rose.
   Remove the <link> to this file in layout.ejs to go back to the previous look.
   All effects are CSS/GPU-friendly and switched off for people who prefer reduced motion. */

:root {
  --cm-green: #007a5e;
  --cm-green-deep: #00523f;
  --cm-red: #ce1126;
  --cm-yellow: #fcd116;
  --rose: #c2255c;          /* white text on it: 5.1:1 */
  --rose-dark: #9e1c4a;
  --rose-light: #f6a5c0;
  --blush: #fdeef3;
  --blush-2: #fbdbe6;
  --gold: #fcd116;
  --gold-text: #8a6d00;
  --sage: #007a5e;
  --navy: #14201b;          /* headings: deep green-black */
  --ink: #1f2522;
  --ivory: #fffaf5;
  --line: #f0e3e6;
  --flag: linear-gradient(90deg, var(--cm-green) 0 33.3%, var(--cm-red) 33.3% 66.6%, var(--cm-yellow) 66.6% 100%);
  --flag-soft: linear-gradient(115deg, var(--cm-green), var(--rose) 45%, var(--cm-red) 70%, var(--cm-yellow));
  --glow-rose: 0 12px 34px rgba(194, 37, 92, .35);
  --glass: rgba(255, 255, 255, .72);
}

body { background:
  radial-gradient(1200px 600px at 110% -10%, rgba(252, 209, 22, .10), transparent 60%),
  radial-gradient(900px 500px at -10% 30%, rgba(0, 122, 94, .07), transparent 60%),
  var(--ivory); }
::selection { background: var(--cm-yellow); color: #14201b; }
a { color: var(--rose-dark); }

/* ---------- flag ribbon + scroll progress ---------- */
.flag-ribbon { display: flex; height: 5px; overflow: hidden; position: relative; }
.flag-ribbon span { flex: 1; }
.flag-ribbon span:nth-child(1) { background: var(--cm-green); }
.flag-ribbon span:nth-child(2) { background: var(--cm-red); }
.flag-ribbon span:nth-child(3) { background: var(--cm-yellow); }
.flag-ribbon::after { content: ''; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(420%); } }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: var(--flag-soft); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ---------- header: glass ---------- */
.site-header { background: rgba(255, 250, 245, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.site-header.scrolled { box-shadow: 0 6px 28px rgba(20, 32, 27, .08); }
.brand-text strong { background: linear-gradient(90deg, var(--cm-green), var(--rose), var(--cm-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu-btn { background: linear-gradient(135deg, var(--cm-green), var(--cm-green-deep)); }
@media (min-width: 900px) {
  .main-nav li a { position: relative; }
  .main-nav li a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--flag); transform: scaleX(0); transition: transform .3s ease; }
  .main-nav li a:hover, .main-nav a[aria-current] { background: transparent; }
  .main-nav li a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
}

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-rose { background: linear-gradient(120deg, var(--rose), var(--cm-red)); border: 0; box-shadow: var(--glow-rose); }
.btn-rose:hover { background: linear-gradient(120deg, var(--rose-dark), #a50e1f); box-shadow: 0 16px 40px rgba(206, 17, 38, .38); }
.btn-rose::before, .btn-navy::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn-rose:hover::before, .btn-navy:hover::before { transform: translateX(120%); }
.btn-navy { background: linear-gradient(120deg, var(--cm-green), var(--cm-green-deep)); }
.btn-navy:hover { background: linear-gradient(120deg, #00684f, #003d2f); }
.btn-ghost { border-color: rgba(0, 122, 94, .35); color: var(--cm-green-deep); background: rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: var(--cm-green); color: var(--cm-green-deep); background: #fff; }
.link-arrow { color: var(--cm-green); }
.kicker { color: var(--cm-green); }
.kicker::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: var(--flag); }

/* ---------- hero: living colour + stars ---------- */
.hero { position: relative; isolation: isolate; background: none; }
.hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.blob { position: absolute; width: 34vmax; height: 34vmax; border-radius: 50%; filter: blur(80px); opacity: .2; will-change: transform; animation: drift 22s ease-in-out infinite alternate; }
.b-green { background: var(--cm-green); left: -16vmax; top: -18vmax; opacity: .24; }
.b-red { background: var(--cm-red); right: -16vmax; top: -6vmax; opacity: .2; animation-duration: 26s; animation-delay: -6s; }
.b-yellow { background: var(--cm-yellow); left: 18%; bottom: -24vmax; opacity: .36; animation-duration: 30s; animation-delay: -12s; }
.b-rose { background: var(--rose-light); right: 8%; top: 30%; width: 28vmax; height: 28vmax; opacity: .3; animation-duration: 24s; animation-delay: -3s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, 3vmax) scale(1.08); } 100% { transform: translate(-3vmax, 5vmax) scale(.95); } }
.twinkle { position: absolute; width: 18px; height: 18px; color: var(--cm-yellow); filter: drop-shadow(0 0 6px rgba(252, 209, 22, .9)); animation: twinkle 3.6s ease-in-out infinite; }
.t0 { left: 6%; top: 18%; } .t1 { left: 44%; top: 8%; width: 12px; height: 12px; animation-delay: -1s; }
.t2 { left: 92%; top: 14%; animation-delay: -2s; } .t3 { left: 52%; top: 82%; width: 14px; height: 14px; animation-delay: -.5s; }
.t4 { left: 12%; top: 88%; width: 10px; height: 10px; animation-delay: -2.6s; } .t5 { left: 80%; top: 70%; width: 24px; height: 24px; animation-delay: -1.7s; }
.t6 { left: 34%; top: 46%; width: 9px; height: 9px; animation-delay: -3s; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(36deg); } }

.glow-text { background: linear-gradient(100deg, var(--rose), var(--cm-red) 30%, #e8a400 55%, var(--cm-green) 80%, var(--rose)); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 9s linear infinite; font-style: italic; padding-right: .06em; }
@keyframes flow { to { background-position: 250% 0; } }

/* Arch photos with a turning tricolour ring */
.hero-art .arch { border: 0; padding: 5px; background: conic-gradient(from var(--a, 0deg), var(--cm-green), var(--cm-red), var(--cm-yellow), var(--rose), var(--cm-green)); animation: spin-ring 12s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-ring { to { --a: 360deg; } }
.hero-art .a1 { animation-duration: 14s; }
.hero-art .a2 { animation-direction: reverse; }
.hero-art .a1, .hero-art .a2, .hero-art .a3 { transition: transform .5s ease; }
.hero-art:hover .a1 { transform: translateY(-6px); }
.hero-art:hover .a2 { transform: translate(-6px, 4px) rotate(-2deg); }
.hero-art:hover .a3 { transform: translate(6px, -4px) rotate(2deg); }
.hero-badge { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.8); }
.hero-badge .ic { color: var(--cm-red); }
.trust .ic { color: var(--cm-green); }

/* ---------- section titles: tricolour underline with a star ---------- */
.sec-title.center::after, .sec-head.center .sec-title::after { width: 88px; height: 4px; border-radius: 4px; background: var(--flag); }
.sec-head.center .sec-title, .sec-title.center { position: relative; }

/* ---------- occasion cards: glow border + tilt ---------- */
.occasions-sec { background: transparent; }
.occ-card { transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease; }
.occ-card::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), var(--cm-green), var(--cm-red), var(--cm-yellow), var(--rose), var(--cm-green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: spin-ring 6s linear infinite; }
.occ-card:hover::before, .occ-card:focus-visible::before { opacity: 1; }
.occ-card:hover { box-shadow: 0 22px 50px rgba(20, 32, 27, .22); }
.occ-card::after { background: linear-gradient(180deg, transparent 30%, rgba(0, 45, 34, .55) 65%, rgba(0, 30, 22, .9)); }
.occ-icon { background: linear-gradient(135deg, #fff, #fff7d6); color: var(--cm-red); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.occ-body small { color: var(--cm-yellow); font-weight: 500; opacity: 1; }

/* ---------- steps / values / reviews: glass cards ---------- */
.steps-sec { background: linear-gradient(180deg, rgba(0, 122, 94, .06), rgba(252, 209, 22, .06) 60%, transparent); }
.steps li, .value, .review { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.steps li::after, .value::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--flag); transform: scaleX(.2); transform-origin: left; transition: transform .45s ease; }
.steps li:hover, .value:hover, .review:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 32, 27, .12); }
.steps li:hover::after, .value:hover::after { transform: scaleX(1); }
.step-n { background: var(--cm-green); color: #fff; font-weight: 600; box-shadow: 0 0 0 5px rgba(0,122,94,.14); }
.steps li:nth-child(2) .step-n { background: var(--cm-red); box-shadow: 0 0 0 5px rgba(206,17,38,.14); }
.steps li:nth-child(3) .step-n { background: var(--cm-yellow); color: #14201b; box-shadow: 0 0 0 5px rgba(252,209,22,.25); }
.steps li:nth-child(4) .step-n { background: var(--rose); box-shadow: 0 0 0 5px rgba(194,37,92,.14); }
.value h3 { color: var(--cm-red); }
.reviews-sec { background: transparent; }
.review { background: rgba(255,255,255,.8); }
.review blockquote { color: var(--navy); }
.stars { color: var(--cm-yellow); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* ---------- photo grid ---------- */
.m-item { transition: transform .35s ease, box-shadow .35s ease; }
.m-item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 32, 27, .18); }
.m-item figcaption { border-top: 3px solid transparent; border-image: var(--flag) 1; }
.chip.on { background: linear-gradient(120deg, var(--cm-green), var(--cm-green-deep)); border-color: var(--cm-green); }
.chip:hover { border-color: var(--cm-yellow); }

/* ---------- quiz band: deep green night with stars ---------- */
.quiz-band { background:
  radial-gradient(circle at 15% 30%, rgba(252, 209, 22, .22), transparent 30%),
  radial-gradient(circle at 85% 80%, rgba(206, 17, 38, .28), transparent 35%),
  linear-gradient(135deg, var(--cm-green-deep), #003327); }
.quiz-band::before { content: '★  ★  ★'; position: absolute; right: 4%; top: 12%; color: var(--cm-yellow); font-size: 1.4rem; letter-spacing: .6em; opacity: .5; animation: twinkle 4s ease-in-out infinite; }
.quiz-swatches span { border-color: rgba(255,255,255,.95); box-shadow: 0 8px 22px rgba(0,0,0,.25); animation: bob 4s ease-in-out infinite; }
.quiz-swatches span:nth-child(2n) { animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- about photos ---------- */
.about-photo > img:first-child { border: 0; padding: 6px; background: var(--flag-soft); }
.about-photo2 { border-color: var(--cm-yellow); }

/* ---------- CTA band: rose → red with the star ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--rose-dark), var(--cm-red) 55%, #a50e1f); }
.cta-band::before { content: ''; position: absolute; width: 260px; height: 260px; right: -40px; top: -60px; opacity: .2;
  background: var(--cm-yellow); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: spin-slow 40s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.cta-band .btn-rose { background: #fff; color: var(--cm-red); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.cta-band .btn-rose:hover { background: var(--cm-yellow); color: #14201b; }

/* ---------- inner pages ---------- */
.page-hero { background:
  radial-gradient(40% 70% at 15% 0%, rgba(0, 122, 94, .14), transparent 70%),
  radial-gradient(40% 70% at 85% 0%, rgba(252, 209, 22, .18), transparent 70%),
  radial-gradient(40% 80% at 50% 0%, rgba(194, 37, 92, .12), transparent 70%); }
.page-hero h1 { background: linear-gradient(90deg, var(--navy), var(--cm-green) 60%, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-hero { background: radial-gradient(50% 60% at 90% 10%, rgba(252, 209, 22, .2), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(0, 122, 94, .12), transparent 70%); }
.svc-hero-img { border: 0; padding: 6px; background: var(--flag-soft); }
.ticks .ic { color: var(--cm-green); }
.price-tag strong, .pk-price { color: var(--cm-red); }
.package.featured { border: 0; background: linear-gradient(#fff, #fff) padding-box, var(--flag-soft) border-box; border: 2px solid transparent; }
.package.featured::before { content: '★'; background: var(--cm-red); color: var(--cm-yellow); }
.card { border-color: rgba(240, 227, 230, .9); }
.faq summary::after { color: var(--cm-red); }
.faq[open] { border-color: var(--cm-green); box-shadow: 0 8px 24px rgba(0, 122, 94, .1); }
.note-box { background: linear-gradient(120deg, #fff8dc, var(--blush)); }

/* ---------- quote assistant & quiz ---------- */
.dots li.on, .progress span { background: var(--flag-soft); }
.bubble { background: linear-gradient(120deg, var(--blush), #fff6d6); }
.occ-radio .ic, .q-opt .ic { color: var(--cm-red); }
.occ-radio input:checked + span, .q-opt[aria-pressed=true] { border-color: var(--cm-green); box-shadow: 0 0 0 3px rgba(0, 122, 94, .18); }
.occ-radio span, .q-opt { transition: transform .2s ease, border-color .2s, box-shadow .2s; }
.occ-radio span:hover, .q-opt:hover { transform: translateY(-2px); border-color: var(--cm-yellow); }
.est-total { color: var(--cm-red); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--cm-green); box-shadow: 0 0 0 4px rgba(0, 122, 94, .15); }
.big-check { background: linear-gradient(135deg, #e3f5ee, #fff7d6); color: var(--cm-green); }

/* ---------- footer: deep green with the flag on top ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, #0b2a21, #061a14); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--flag); }
.f-title { color: var(--cm-yellow); }
.f-contact .ic { color: var(--rose-light); }
.socials a:hover { background: var(--cm-red); border-color: var(--cm-red); }

/* ---------- tab bar + WhatsApp ---------- */
.tabbar { border-top: 0; box-shadow: 0 -6px 24px rgba(20, 32, 27, .08); }
.tabbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--flag); }
.tabbar a[aria-current] { color: var(--cm-red); }
.tabbar a[aria-current] .ic { filter: drop-shadow(0 2px 4px rgba(206, 17, 38, .35)); }
.wa-float { animation: pulse-wa 3s ease-in-out infinite; }
@keyframes pulse-wa { 0%, 100% { box-shadow: 0 10px 26px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .45); } 50% { box-shadow: 0 10px 26px rgba(37, 211, 102, .35), 0 0 0 12px rgba(37, 211, 102, 0); } }

/* ---------- 3D tilt (set by site.js on devices with a mouse) ---------- */
[data-tilt], .js .reveal.in[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .2s ease-out, box-shadow .35s ease; }

/* Phones: lighter effects (less blur = faster on budget phones) */
@media (max-width: 899px) {
  .blob { filter: blur(48px); opacity: .25; }
  .site-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .twinkle, .glow-text, .hero-art .arch, .occ-card::before, .flag-ribbon::after, .quiz-band::before, .quiz-swatches span, .cta-band::before, .wa-float { animation: none !important; }
  [data-tilt] { transform: none !important; }
}

/* ======================================================================
   GREEN SITE + YELLOW MENU (2026-10-21, owner's request):
   the whole page uses the deep green of the "style quiz" panel, the menu bars use its yellow (#f2c94c).
   Text outside cards becomes light; white cards keep dark text.
   ====================================================================== */
:root {
  --menu-yellow: #f2c94c;
  --on-green: #eef6f1;
  --on-green-muted: #b8d2c6;
  --green-bg: #00523f;
  --green-bg-deep: #003327;
}
html { background: var(--green-bg-deep); }
body { color: var(--on-green); background:
  radial-gradient(900px 600px at 12% 8%, rgba(242, 201, 76, .16), transparent 60%),
  radial-gradient(800px 600px at 92% 40%, rgba(206, 17, 38, .16), transparent 60%),
  radial-gradient(900px 700px at 20% 85%, rgba(242, 201, 76, .08), transparent 60%),
  linear-gradient(160deg, #0a5a42 0%, var(--green-bg) 35%, var(--green-bg-deep) 100%); background-color: var(--green-bg-deep); }
::selection { background: var(--menu-yellow); color: #14201b; }

/* Text on the green background */
main h1, main h2, main h3 { color: #fff; }
main { color: var(--on-green); }
main a { color: #ffc2d6; }
main .muted, .crumbs, .crumbs a, .f-label, .page-hero .lead, .lead, .sec-head p, .sec-head.center p { color: var(--on-green-muted); }
.lead { color: #d9e8e1; }
.kicker { color: var(--menu-yellow); }
.link-arrow { color: var(--menu-yellow); }
.trust { color: #d9e8e1; }
.trust .ic, .ticks .ic { color: var(--menu-yellow); }
.price-tag { color: var(--on-green-muted); }
.price-tag strong { color: var(--menu-yellow); }
.glow-text { background-image: linear-gradient(100deg, var(--menu-yellow), #ffb3c9 30%, #ff6b6b 55%, var(--menu-yellow) 80%, #ffb3c9); }
.page-hero h1 { background: linear-gradient(90deg, #fff, #fff 40%, var(--menu-yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-body h2 a { color: #fff; }
.about-photo figcaption, .empty { color: var(--on-green-muted); }

/* Section backgrounds: let the green show through */
.occasions-sec, .steps-sec, .reviews-sec, .work-sec, .page-hero, .svc-hero { background: transparent; }
.quiz-band { box-shadow: inset 0 1px 0 rgba(242, 201, 76, .25), inset 0 -1px 0 rgba(242, 201, 76, .25); }
.blob.b-green { display: none; }

/* Buttons on green */
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { color: #14201b; background: var(--menu-yellow); border-color: var(--menu-yellow); }
.btn-navy { background: linear-gradient(120deg, var(--menu-yellow), #e0ae1f); color: #14201b; }
.btn-navy:hover { background: linear-gradient(120deg, #ffd966, var(--menu-yellow)); color: #14201b; }

/* White cards keep dark text */
main :is(.card, .d-step, .review, .package, .faq, .c-card, .steps li, .value, .m-item figcaption, .price-list, .note-box, .estimate, .quiz, .prop-card, .review-card, .includes, .chip) { color: var(--ink); }
main :is(.card, .d-step, .review, .package, .faq, .c-card, .steps li, .value, .price-list, .estimate, .quiz, .prop-card, .review-card, .includes) :is(h1, h2, h3) { color: var(--navy); }
main :is(.card, .d-step, .review, .package, .faq, .c-card, .steps li, .value, .m-item, .price-list, .estimate, .quiz, .prop-card, .review-card, .includes, .note-box) :is(.muted, p.muted, small) { color: var(--muted); }
main :is(.card, .d-step, .review, .package, .faq, .price-list, .quiz, .prop-card, .review-card, .includes, .m-item) a:not(.btn) { color: var(--rose-dark); }
main :is(.card, .package, .d-step, .quiz, .review-card) .btn-ghost { color: var(--cm-green-deep); background: #fff; border-color: rgba(0, 122, 94, .35); }
main :is(.card, .price-list, .package) .price-tag strong, main .price-list strong { color: var(--cm-red); }
main :is(.includes, .package) .ticks .ic { color: var(--cm-green); }
.steps li, .value, .review { background: rgba(255, 255, 255, .94); }
.review figcaption { color: var(--muted); }
.d-step .label-like, .card .label-like { color: var(--navy); }
.form label { color: inherit; }
main :is(.card, .d-step, .quiz, .review-card) .form label, main :is(.card, .d-step, .review-card) label { color: var(--navy); }

/* ---------- yellow menu bar (top) ---------- */
.site-header { background: rgba(242, 201, 76, .97); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.site-header.scrolled { box-shadow: 0 8px 26px rgba(0, 0, 0, .25); }
.brand-text small { color: #4a3f12; }
.brand-text strong { background: linear-gradient(90deg, var(--cm-green-deep), var(--cm-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lang-switch { color: #14201b; border-color: rgba(20, 32, 27, .25); background: rgba(255, 255, 255, .45); }
.main-nav li a { color: #14201b; }
.main-nav a[aria-current] { color: var(--cm-red); }
.nav-contact { color: #14201b; }
@media (max-width: 899px) {
  .main-nav { background: var(--menu-yellow); }
  .main-nav li a { border-bottom-color: rgba(20, 32, 27, .15); }
}
@media (min-width: 900px) {
  .main-nav li a::after { background: linear-gradient(90deg, var(--cm-green), var(--cm-red)); }
}

/* ---------- yellow menu bar (phone, bottom) ---------- */
.tabbar { background: rgba(242, 201, 76, .98); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabbar a { color: #3d3410; }
.tabbar a[aria-current] { color: var(--cm-red); }
.tabbar .tab-wa { color: #0d6b38; }

/* Footer: a touch darker than the page so it still stands apart */
.site-footer { background: linear-gradient(180deg, #002a20, #001a14); }

/* ---------- real roses as a soft overlay on the green (Adobe Stock photos, licensed 2026-10-21) ---------- */
.rose-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 1 !important; } /* hidden by an inline style until this file loads */
.rose { position: absolute; height: auto; max-width: none; filter: saturate(1.05) drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); will-change: transform; }
/* positions (each page picks 3 in layout.ejs) */
.rose { --rot: 0deg; --fx: 1; transform: rotate(var(--rot)) scaleX(var(--fx)); animation: sway 15s ease-in-out infinite alternate; opacity: .3; }
.rose.pos-flip { --fx: -1; }
.rose.pos-tl { width: 540px; left: -150px; top: 70px; --rot: -20deg; }
.rose.pos-tr { width: 540px; right: -150px; top: 70px; --rot: 18deg; }
.rose.pos-bl { width: 560px; left: -170px; bottom: -110px; --rot: 14deg; animation-duration: 17s; }
.rose.pos-br { width: 580px; right: -170px; bottom: -110px; --rot: -16deg; animation-duration: 17s; }
.rose.pos-ml { width: 260px; left: -70px; top: 52%; --rot: 24deg; opacity: .22; animation-duration: 12s; }
.rose.pos-mr { width: 260px; right: -70px; top: 48%; --rot: -24deg; opacity: .22; animation-duration: 12s; }
.rose.pos-bottom { width: 980px; left: 50%; bottom: -60px; margin-left: -490px; opacity: .2; animation: none; }
@keyframes sway { to { transform: rotate(calc(var(--rot) + 5deg)) scaleX(var(--fx)) translate(12px, 8px); } }
@media (max-width: 899px) {
  .rose.pos-tl, .rose.pos-tr { width: 290px; top: 110px; opacity: .2; }
  .rose.pos-tl { left: -110px; } .rose.pos-tr { right: -110px; }
  .rose.pos-bl, .rose.pos-br { width: 310px; bottom: 40px; opacity: .2; }
  .rose.pos-bl { left: -120px; } .rose.pos-br { right: -120px; }
  .rose.pos-ml, .rose.pos-mr { display: none; }
  .rose.pos-bottom { width: 600px; margin-left: -300px; bottom: 40px; }
}
main, .site-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .rose { animation: none !important; } }
@media print { .rose-overlay { display: none; } }