:root{
  --accent:#c87e80;
  --deep:#7a1f20;
  --muted:#666;
  --maxw:1200px;
  --pad:20px;
  font-family: "Georgia", serif;
  --transition: 320ms cubic-bezier(.2,.9,.3,1);
}
*{box-sizing:border-box}
body{margin:0;color:#222;line-height:1.6;background:#fff}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* HEADER RIBBON */
.site-header{background:#fff;position:sticky;top:0;z-index:200;border-bottom:1px solid #f2e9e9;backdrop-filter: blur(3px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.header-left{display:flex;align-items:center;gap:12px}
.small-logo{height:40px;width:40px;object-fit:contain;border-radius:6px}
.header-title{font-weight:700;color:var(--deep);font-size:16px}
.header-sub{font-size:12px;color:var(--muted)}
.main-nav a{margin-left:18px;text-decoration:none;color:#333;font-size:15px}
.menu-toggle{display:none;background:none;border:0;font-size:20px}

/* HERO larger central layout */
.hero{padding:48px 0 36px 0;background:#fff}
.hero-inner{display:flex;align-items:center;gap:36px;justify-content:center}
.hero-left{flex:0 0 auto;text-align:center}
.hero-right{flex:1 1 580px;max-width:780px}
.hero-logo-main{width:500px;height:500px;object-fit:contain;border-radius:14px}
.site-title{font-size:96px;color:var(--deep);margin:0;font-family: Georgia, serif;font-weight:700}
.site-sub{font-size:20px;color:#7c3e47;margin:10px 0 12px 0}
.lead-hero{font-size:17px;color:#333;max-width:780px}

/* section */
.section{padding:34px 0}
.centered{text-align:center}
.about-text{font-size:17px;color:#3b2b2b;margin:0 auto;max-width:900px}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.04);transition:transform var(--transition),box-shadow var(--transition)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.08)}
.card-img{width:100%;height:160px;object-fit:cover;border-radius:6px;margin-bottom:12px}

/* callout */
.callout-inner{padding:22px;text-align:center;border-radius:6px;background:linear-gradient(180deg,#fff,#fff)}

/* team */
.team-grid-full{display:flex;flex-direction:column;gap:22px;margin-top:18px}
.team-member-full{display:flex;gap:18px;align-items:flex-start;transition:transform 360ms cubic-bezier(.2,.9,.3,1),box-shadow 360ms, border-color 360ms;padding:12px;border-radius:8px;border:1px solid rgba(0,0,0,0.03);background:#fff;transform-origin:center left;z-index:1}
.team-member-full:hover{transform:scale(1.25) translateY(-8px);box-shadow:0 40px 80px rgba(0,0,0,0.18);border-color:rgba(122,31,32,0.9);z-index:50}
.member-photo{width:220px;height:140px;object-fit:cover;border-radius:8px}
.member-bio{max-width:820px}
.member-bio h3{margin-top:0;color:var(--deep)}

/* features */
.feature-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.feature{flex:1;min-width:220px;padding:16px;background:#f8f8f8;border-radius:6px}

/* footer */
.site-footer{background:var(--accent);color:#3e1d1d;padding:36px 0;margin-top:22px}
.footer-inner{text-align:center}
.site-footer a{color:#2b1b1b;text-decoration:underline}

/* chat widget */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: sans-serif;}
.chat-toggle { width:56px;height:56px;border-radius:50%;border:0;background:var(--deep);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.chat-box { width:420px;border-radius:12px;background:#fff;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,0.18); display:none}
.chat-box input, .chat-box textarea { width:100%;padding:10px;margin:8px 0;border:1px solid #eee;border-radius:6px}
.contact-hidden{display:none}
.chat-actions{display:flex;gap:8px;justify-content:flex-end}
.btn{background:var(--deep);color:#fff;padding:8px 12px;border-radius:6px;border:0;cursor:pointer}
.btn.secondary{background:#eee;color:#333}

/* reveal on scroll (more dramatic) */
.reveal{opacity:0;transform:translateY(28px) scale(0.98);transition:opacity 3500ms cubic-bezier(.2,.9,.3,1), transform 3500ms cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* Inkspir3d — slanted full-width bands (more pronounced) */
.ink-row{padding:14px 0;overflow:visible}
.ink-row.even{background:#fafafa;transform:skewY(-0deg);margin:10px 0}
.ink-row.even .ink-inner{transform:skewY(0deg);max-width:var(--maxw);margin:0 auto;padding:22px 36px}
.ink-row.odd{background:#fff;transform:skewY(-0deg);margin:10px 0}
.ink-row.odd .ink-inner{transform:skewY(0deg);max-width:var(--maxw);margin:0 auto;padding:22px 36px}
.ink-title{font-weight:700;color:var(--deep);font-style:italic;margin:0 0 8px 0}

/* small screen adjustments */
@media (max-width:1100px){
  .hero-logo-main{width:360px;height:360px}
  .site-title{font-size:64px}
}
@media (max-width:900px){
  .main-nav{display:none}
  .menu-toggle{display:block}
  .hero-inner{flex-direction:column;align-items:center;text-align:center}
  .hero-logo-main{width:220px;height:220px;margin-bottom:12px}
  .site-title{font-size:42px}
  .card-grid{grid-template-columns:1fr}
  .team-member-full{flex-direction:column;align-items:center;transform:none !important}
  .member-photo{width:100%;height:auto}
  .hero-right{max-width:100%}
  .chat-box{width:92vw}
}

/* === Reveal animation (add to styles.css) ===
   Keeps elements hidden until revealed, then animates them.
   Paste this into styles.css (near the top or bottom).
*/
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.997);
  transition: opacity 3500ms cubic-bezier(.2,.9,.2,1), transform 600ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
  visibility: hidden;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

/* optional: stagger helper if you add 'data-reveal-delay' on elements */
.reveal[data-reveal-delay] {
  transition-delay: var(--reveal-delay, 0ms);
}