/* ============ Mulberry Creations — The Momentum Engine ============
   Brand palette: Deep Charcoal #2B2825 · Warm Terracotta #C67B5C
                  Deep Sage #6B806B · Warm Off-White/Cream #FAF8F5
   Type: Playfair Display (headings) · Lato (body)
   Section styling is inline in index.html; this file holds resets,
   animations, the responsive desktop/mobile switch, nav and footer.
   ================================================================= */


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes frameH { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes frameV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #2B2825; text-decoration: none; }
  a:hover { color: #000; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #FAF8F5; text-decoration: none; }
  a:hover { color: #fff; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }


  * { box-sizing: border-box; }
  body { margin: 0; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes growLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #FAF8F5; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

html,body{margin:0;padding:0;}
body{background:#FAF8F5; font-family:'Lato',sans-serif;}
[data-reveal]{opacity:1 !important; transform:none !important;}
a{color:#C67B5C; text-decoration:none;}



  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  @keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #B0603C; text-decoration: none; }
  a:hover { color: #96502f; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #2B2825; text-decoration: none; }
  a:hover { color: #000; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #b06a4b; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #FAF8F5; text-decoration: none; }
  a:hover { color: #fff; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }


  * { box-sizing: border-box; }
  body { margin: 0; }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes growLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }


  * { box-sizing: border-box; }
  body { margin: 0; }
  a { color: #C67B5C; text-decoration: none; }
  a:hover { color: #FAF8F5; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

html,body{margin:0;padding:0;}
body{background:#cbc5bb; font-family:'Lato',sans-serif;}
[data-reveal]{opacity:1 !important; transform:none !important;}
a{color:#C67B5C; text-decoration:none;}


/* ---------- responsive switch ---------- */
.view-desktop { display: block; }
.view-mobile  { display: none; }
@media (max-width: 899px) {
  .view-desktop { display: none; }
  .view-mobile  { display: block; }
}

/* ---------- navigation ---------- */
.site-nav { position: sticky; top: 0; z-index: 100; background: #2B2825; border-bottom: 1px solid rgba(169,136,79,0.55); font-family: 'Lato', sans-serif; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 40px; }
.wordmark { font-family: 'Playfair Display', serif; font-size: 19px; color: #FAF8F5; text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: #C67B5C; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.nav-links a { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(250,248,245,0.78); text-decoration: none; }
.nav-links a:hover { color: #C67B5C; }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: #FAF8F5; }
@media (max-width: 1099px) {
  .nav-inner { padding: 14px 22px; }
  .nav-burger { display: flex; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: #2B2825; border-bottom: 1px solid rgba(169,136,79,0.55); max-height: 0; overflow: hidden; transition: max-height .32s ease; }
  .nav-links a { width: 100%; padding: 15px 22px; border-top: 1px solid rgba(250,248,245,0.1); }
  #nav-toggle:checked ~ .nav-links { max-height: 70vh; overflow-y: auto; }
}

/* ---------- footer ---------- */
.site-footer { background: #2B2825; border-top: 1px solid rgba(169,136,79,0.55); font-family: 'Lato', sans-serif; padding: 56px 40px 46px; }
.foot-inner { max-width: 1080px; margin: 0 auto; }
.foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot-mark { font-family: 'Playfair Display', serif; font-size: 24px; color: #FAF8F5; }
.foot-mark em { font-style: italic; color: #C67B5C; }
.foot-links { display: flex; gap: 26px; }
.foot-links a { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(250,248,245,0.72); text-decoration: none; }
.foot-links a:hover { color: #C67B5C; }
.foot-rule { height: 1px; background: rgba(169,136,79,0.4); margin: 30px 0 26px; }
.foot-copy { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.04em; color: rgba(250,248,245,0.6); }
.foot-disclaimer { margin: 0; max-width: 760px; font-size: 12px; line-height: 1.7; color: rgba(250,248,245,0.42); }
@media (max-width: 899px) {
  .site-footer { padding: 44px 24px 40px; }
  .foot-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-mark { font-size: 21px; }
}


  /* ---- Section divider: components → offer ecosystem ---- */
  @keyframes dvFade { from { opacity: 0; transform: translateY(10px) rotate(-8deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }