:root{
  --nav-height: 72px;
  --bg: #F9EADE;            /* your exact beige */
  --ink: #2f2422;
  --muted: rgba(47,36,34,.72);
  --card: rgba(255,255,255,.55);
  --card2: rgba(255,255,255,.35);
  --line: rgba(47,36,34,.12);
  --accent: #7a1f1f;
  --accent2: #5e1616;
  --radius: 22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-y: scroll; scrollbar-gutter: stable; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* subtle grain */
.grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.22;
}

/* NAV */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  backdrop-filter: blur(10px);
  background: rgba(249,234,222,.65);
  border-bottom: 1px solid var(--line);

  transition: background .28s ease, box-shadow .28s ease, transform .18s ease;
}

main{ padding-top: var(--nav-height); }

/* Header when page is scrolled past hero */
.nav--scrolled{
  background: rgba(249,234,222,.88);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  transform: translateY(0);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  font-weight:600;
}
.brand__dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow:0 0 0 6px rgba(122,31,31,.12);
}
.brand__text{
  font-family:"Cormorant Garamond", serif;
  font-size:1.35rem;
  letter-spacing:.4px;
}
.nav__links{ display:flex; gap:16px; }
.nav__links a{
  text-decoration:none; color:var(--muted);
  font-size:.95rem;
  padding:8px 10px;
  border-radius:12px;
  transition:.25s ease;
}
.nav__links a:hover{
  color:var(--ink);
  background: rgba(255,255,255,.45);
}

.container{ width:min(1100px, calc(100% - 36px)); margin:0 auto; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  padding:12px 22px;
  border-radius:999px;
  background: var(--accent);
  color:white;
  border:1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, background .2s ease;
  font-weight:600;
}
.btn:hover{ background: var(--accent2); transform: translateY(-2px); }
.btn--soft{
  background: rgba(122,31,31,.12);
  color: var(--accent);
  border:1px solid rgba(122,31,31,.18);
}
.btn--soft:hover{
  background: rgba(122,31,31,.18);
  transform: translateY(-2px);
}
.btn--ghost{
  background: rgba(255,255,255,.45);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.65);
  transform: translateY(-2px);
}

/* HERO */
.hero{
  min-height: 92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 56px 18px 40px;
  position:relative;
}
.hero__glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(122,31,31,.12), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(47,36,34,.10), transparent 52%),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.55), transparent 55%);
  filter: blur(10px);
}

/* Hero glow subtle breathing */
@keyframes glowPulse{
  0%{ transform: scale(1); opacity:.9; filter: blur(8px); }
  50%{ transform: scale(1.03); opacity:1; filter: blur(12px); }
 100%{ transform: scale(1); opacity:.9; filter: blur(8px); }
}
/* slower but subtle - keep long but reduce intensity on hover */
.hero__glow{ animation: glowPulse 8s ease-in-out infinite; }
.hero__content{
  position:relative;
  width:min(980px, 100%);
  text-align:center;
  padding: 10px;
}

/* Hero waves: smaller, separated colored layers with distinct wavy motion */
.hero__waves{
  position:absolute;
  inset:0 0 0 0;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.hero__waves .wave{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:90%;
  height:32%;
  /* more wavy, asymmetric radii */
  border-radius: 62% 38% 72% 28% / 38% 58% 42% 62%;
  filter: blur(12px);
  opacity: .18; /* faded colors */
  mix-blend-mode: normal;
  pointer-events: none;
  overflow: visible;
}
.hero__waves .wave--red{
  background: radial-gradient(60% 60% at 50% 26%, rgba(122,31,31,0.62), rgba(122,31,31,0.36) 58%, transparent 88%);
  top:-4%;
  opacity:.26;
}
.hero__waves .wave--black{
  background: radial-gradient(62% 62% at 50% 50%, rgba(0,0,0,0.66), rgba(0,0,0,0.36) 58%, transparent 88%);
  top:40%;
  opacity:.18;
}
.hero__waves .wave--green{
  background: radial-gradient(60% 60% at 50% 74%, rgba(0,102,51,0.66), rgba(0,102,51,0.36) 58%, transparent 88%);
  top:72%;
  opacity:.22;
}

/* Distinct, wavy, horizontal offsets and slight vertical bobbing */
.hero__waves .wave--red{ animation: redMove 10s ease-in-out infinite, redWobble 4.8s ease-in-out infinite, redBob 6.5s ease-in-out infinite; }
.hero__waves .wave--black{ animation: blackMove 14s ease-in-out infinite, blackWobble 6.2s ease-in-out infinite, blackBob 8s ease-in-out infinite; }
.hero__waves .wave--green{ animation: greenMove 12s ease-in-out infinite, greenWobble 5.2s ease-in-out infinite, greenBob 5.5s ease-in-out infinite; }

@keyframes redMove{
  0%{ transform: translateX(-50%) translateY(0) scaleX(1); }
  25%{ transform: translateX(-34%) translateY(-12px) scaleX(1.04); }
  50%{ transform: translateX(-66%) translateY(10px) scaleX(0.96); }
  75%{ transform: translateX(-38%) translateY(-14px) scaleX(1.06); }
 100%{ transform: translateX(-50%) translateY(0) scaleX(1); }
}

@keyframes blackMove{
  0%{ transform: translateX(-50%) translateY(0) scaleX(1); }
  20%{ transform: translateX(-62%) translateY(8px) scaleX(0.97); }
  50%{ transform: translateX(-38%) translateY(-14px) scaleX(1.05); }
  80%{ transform: translateX(-58%) translateY(6px) scaleX(0.96); }
 100%{ transform: translateX(-50%) translateY(0) scaleX(1); }
}

@keyframes greenMove{
  0%{ transform: translateX(-50%) translateY(0) scaleX(1); }
  30%{ transform: translateX(-36%) translateY(-10px) scaleX(1.03); }
  60%{ transform: translateX(-64%) translateY(12px) scaleX(0.95); }
 100%{ transform: translateX(-50%) translateY(0) scaleX(1); }
}

/* Additional wobble animations for visible undulation */
@keyframes redWobble{
  0%{ transform: translateX(-50%) rotate(-0.4deg) skewX(-0.8deg); }
  25%{ transform: translateX(-40%) rotate(0.8deg) skewX(0.6deg); }
  50%{ transform: translateX(-56%) rotate(-0.6deg) skewX(-0.4deg); }
  75%{ transform: translateX(-44%) rotate(0.9deg) skewX(0.7deg); }
 100%{ transform: translateX(-50%) rotate(-0.4deg) skewX(-0.8deg); }
}
@keyframes blackWobble{
  0%{ transform: translateX(-50%) rotate(0deg) skewX(0deg); }
  30%{ transform: translateX(-58%) rotate(-0.8deg) skewX(-0.6deg); }
  60%{ transform: translateX(-42%) rotate(0.9deg) skewX(0.8deg); }
 100%{ transform: translateX(-50%) rotate(0deg) skewX(0deg); }
}
@keyframes greenWobble{
  0%{ transform: translateX(-50%) rotate(0.2deg) skewX(0.2deg); }
  40%{ transform: translateX(-42%) rotate(0.6deg) skewX(0.5deg); }
  80%{ transform: translateX(-56%) rotate(-0.7deg) skewX(-0.5deg); }
 100%{ transform: translateX(-50%) rotate(0.2deg) skewX(0.2deg); }
}

@keyframes redBob{
  0%,100%{ top:4%; }
  50%{ top: calc(4% - 24px); }
}
@keyframes blackBob{
  0%,100%{ top:36%; }
  50%{ top: calc(36% + 28px); }
}
@keyframes greenBob{
  0%,100%{ top:64%; }
  50%{ top: calc(64% - 20px); }
}

/* Slightly reduce on small screens */
@media (max-width: 640px){
  .hero__waves .wave{ height:34%; filter: blur(12px); opacity:.18; }
  .hero__waves .wave--red{ top:2%; }
  .hero__waves .wave--black{ top:40%; }
  .hero__waves .wave--green{ top:68%; }
}

@media (prefers-reduced-motion: reduce){
  .hero__waves .wave{ animation:none !important; }
}

/* Olive-image overlays (use the attached image saved as images/olive-branch.png) */
.oliveImage{
  position: absolute;
  width: 300px;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .22; /* more faded */
  filter: blur(1px) saturate(105%);
  pointer-events: none;
  z-index: 3;
  transition: opacity .3s ease, transform .3s ease;
}
.oliveImage--tl{
  left: 6%;
  top: 8%;
  transform: translateY(-4%) rotate(180deg);
  background-image: url('images/olive-branch.png');
}
.oliveImage--br{
  right: 6%;
  bottom: 10%;
  width: 250px;
  height: 250px;
  transform: translateY(4%) rotate(12deg);
  background-image: url('images/olive-branch.png');
}

/* gentle float to make them subtly animated but still faint */
.oliveImage--tl{ animation: oliveFloatTL 12s ease-in-out infinite, oliveDriftTL 44s linear infinite; }
.oliveImage--br{ animation: oliveFloatBR 14s ease-in-out infinite, oliveDriftBR 52s linear infinite; }

@keyframes oliveFloatTL{
  0%{ transform: translateY(-4%) rotate(-6deg) translateX(0); opacity:.28 }
  50%{ transform: translateY(-8%) rotate(-2deg) translateX(6px); opacity:.34 }
  100%{ transform: translateY(-4%) rotate(-6deg) translateX(0); opacity:.28 }
}
@keyframes oliveFloatBR{
  0%{ transform: translateY(4%) rotate(12deg) translateX(0); opacity:.28 }
  50%{ transform: translateY(8%) rotate(8deg) translateX(-6px); opacity:.32 }
  100%{ transform: translateY(4%) rotate(12deg) translateX(0); opacity:.28 }
}

/* long slow drift paths for olives (subtle but mobile across hero) */
@keyframes oliveDriftTL{
  0%{ transform: translate3d(0,-4%,0) rotate(-18deg) scale(1); }
  25%{ transform: translate3d(18px,-8%,0) rotate(-12deg) scale(.995); }
  50%{ transform: translate3d(-22px,-10%,0) rotate(-20deg) scale(1.01); }
  75%{ transform: translate3d(12px,-6%,0) rotate(-14deg) scale(.997); }
 100%{ transform: translate3d(0,-4%,0) rotate(-18deg) scale(1); }
}
@keyframes oliveDriftBR{
  0%{ transform: translate3d(0,4%,0) rotate(12deg) scale(1); }
  25%{ transform: translate3d(-14px,8%,0) rotate(8deg) scale(1.002); }
  50%{ transform: translate3d(20px,10%,0) rotate(16deg) scale(.998); }
  75%{ transform: translate3d(-8px,6%,0) rotate(10deg) scale(1.003); }
 100%{ transform: translate3d(0,4%,0) rotate(12deg) scale(1); }
}

@media (max-width:640px){
  .oliveImage{ width: 96px; height: 96px; opacity:.2; filter: blur(1px); }
  .oliveImage--tl{ left:7%; top:6%; }
  .oliveImage--br{ right:7%; bottom:8%; }
}

@media (prefers-reduced-motion: reduce){
  .oliveImage{ animation: none !important; }
}
.badge{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid var(--line);
  color: var(--muted);
  margin-bottom:14px;
}

/* Badge micro-interaction */
@keyframes badgePulse{ 0%{ transform: translateY(0);}50%{ transform: translateY(-2px);}100%{ transform: translateY(0);} }
.badge{ animation: badgePulse 3.2s ease-in-out infinite; }
.hero h1{
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(3rem, 6vw, 4.8rem);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* Title entrance */
@keyframes titleFloatIn{ from{ transform: translateY(14px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
.hero h1{ animation: titleFloatIn 520ms cubic-bezier(.2,.9,.2,1) both; }
.sub{
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 22px;
  line-height: 1.85;
}
.hero__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }

.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.metaCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  text-align:left;
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
}
.metaTop{ color: var(--muted); font-size:.9rem; }
.metaBig{ font-size:1.5rem; font-weight:700; margin-top:4px; font-family:"Cormorant Garamond", serif; }
.metaSmall{ color: var(--muted); font-size:.92rem; margin-top:6px; }

/* PAGE / ARTICLE */
.page{ padding: 60px 0 30px; }
.articleGrid{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items:start;
}

.toc{
  position: sticky;
  top: calc(var(--nav-height) + 10px);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
}
.toc h3{
  font-family:"Cormorant Garamond", serif;
  font-size:1.6rem;
  margin-bottom:10px;
}
.toc a{
  display:block;
  color: var(--muted);
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 14px;
  transition:.2s ease;
}
.toc a:hover{ background: rgba(255,255,255,.45); color: var(--ink); }
.toc__box{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border:1px dashed rgba(47,36,34,.18);
  background: rgba(255,255,255,.35);
}
.toc__label{ font-weight:700; margin-bottom:6px; }

.article{
  background: rgba(255,255,255,.35);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.05);
}

.articleHeader h2{
  font-family:"Cormorant Garamond", serif;
  font-size: 2.6rem;
  margin-bottom: 10px;
}
.articleLead{
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
  margin-bottom: 12px;
}
.byline{
  display:flex; flex-wrap:wrap; gap:10px;
  color: rgba(47,36,34,.62);
  font-size:.95rem;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--line);
}
.byline .dot{ opacity:.5; }

.block{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.block:last-child{ border-bottom:none; }
.block h3{
  font-family:"Cormorant Garamond", serif;
  font-size: 2rem;
  margin-bottom: 10px;
}
.block p{
  color: var(--muted);
  line-height: 1.9;
  font-size: 1.03rem;
  margin-top: 10px;
}

/* Callout + quote */
.callout{
  margin: 18px 0 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(122,31,31,.08);
  border: 1px solid rgba(122,31,31,.14);
}
.callout p{ color: rgba(47,36,34,.82); line-height:1.8; }

.quote{
  margin-top: 16px;
  padding: 16px 16px 16px 18px;
  border-left: 4px solid rgba(122,31,31,.45);
  background: rgba(255,255,255,.40);
  border-radius: 14px;
}
.quote p{ color: rgba(47,36,34,.8); }

/* Split cards */
.split{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.card{
  background: rgba(255,255,255,.45);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.card h4{ margin-bottom: 6px; }
.card p{ margin:0; }

/* Figures */
.figure{
  margin: 16px 0;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.45);
}
.figure img{
  width:100%;
  display:block;
  max-height: 360px;
  object-fit: cover;
  transition: transform .35s ease;
}
.figure:hover img{ transform: scale(1.02); }
.figure figcaption{
  padding: 12px 14px;
  color: rgba(47,36,34,.64);
  font-size: .95rem;
}
.figure--wide img{ max-height: 420px; }

.figure__placeholder{
  display:none;
  padding: 34px 16px;
  text-align:center;
}
.figure.missing .figure__placeholder{ display:block; }
.figure.missing{
  background:
    radial-gradient(circle at 20% 25%, rgba(122,31,31,.10), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(47,36,34,.08), transparent 55%),
    rgba(255,255,255,.40);
}
.phTitle{
  font-family:"Cormorant Garamond", serif;
  font-size: 1.8rem;
  margin-bottom: 6px;
}
.phSub{ color: var(--muted); }

/* Steps */
.steps{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}
.step{
  display:flex; gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.42);
  border: 1px solid var(--line);
}
.step__num{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  color: var(--accent);
  background: rgba(122,31,31,.10);
  border: 1px solid rgba(122,31,31,.18);
}
.step__body h4{ margin-bottom: 6px; }

/* mini FAQ inside article */
.miniFAQ{ margin-top: 10px; display:grid; gap: 10px; }
.miniFAQ details{
  background: rgba(255,255,255,.42);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
}
.miniFAQ summary{ cursor:pointer; font-weight:700; }
.miniFAQ p{ margin-top: 10px; }

/* end CTA */
.endCTA{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(122,31,31,.08);
  border: 1px solid rgba(122,31,31,.16);
}
.endCTA h4{
  font-family:"Cormorant Garamond", serif;
  font-size: 1.8rem;
  margin-bottom: 6px;
}
.endCTA p{ margin: 0 0 12px; }

/* Gallery */
.gallery{ padding: 60px 0; }
.gallery h2{
  font-family:"Cormorant Garamond", serif;
  font-size: 2.6rem;
}
.muted{ color: var(--muted); line-height: 1.85; margin-top: 8px; }

.tiles{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.tile{
  height: 160px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 25% 30%, rgba(122,31,31,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(47,36,34,.10), transparent 50%),
    rgba(255,255,255,.35);
  transition: transform .25s ease;
}
.tile:hover{ transform: translateY(-4px); }

/* FAQ */
.faq{ padding: 60px 0 80px; }
.faq h2{
  font-family:"Cormorant Garamond", serif;
  font-size: 2.6rem;
}
.faqGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.faqItem{
  background: rgba(255,255,255,.42);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px 16px;
  position: relative;
  z-index: 0;
}
.faqItem summary{ cursor:pointer; font-weight:700; }
.faqItem p{ margin-top: 10px; }

.faqItem[open]{ z-index: 2; }

/* Styles for custom FAQ accordion (replaces native details) */
.faqItem.custom{ padding: 12px 16px; }
.faqItem.custom .faqSummary{
  background: none;
  border: none;
  padding: 0;
  font-weight:700;
  cursor:pointer;
  text-align:left;
  width:100%;
  font-size: 1rem;
}
.faqItem.custom .faqContent{ display:none; margin-top:10px; }
.faqItem.custom.open .faqContent{ display:block; }
.faqItem.custom .faqContent p{ margin-top:0; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  background: rgba(255,255,255,.25);
}
.footerInner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
}
.footerBrand{
  font-family:"Cormorant Garamond", serif;
  font-size: 1.6rem;
  font-weight: 700;
}
.footerLinks{ display:flex; gap: 14px; }
.footerLinks a{ color: var(--muted); text-decoration:none; }
.footerLinks a:hover{ color: var(--ink); }

/* Animations */
.fade-in{ opacity:0; transform: translateY(18px); animation: fadeUp 1.1s forwards; }
.delay{ animation-delay:.25s; }
.delay2{ animation-delay:.55s; }
.delay3{ animation-delay:.85s; }
.delay4{ animation-delay:1.1s; }

@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0); }
}
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: transform 320ms var(--reveal-delay, 0ms) cubic-bezier(.2,.9,.2,1), opacity 320ms var(--reveal-delay, 0ms) ease;
}
.reveal.active{
  opacity:1;
  transform: translateY(0);
}

/* improved fade-in utility for elements that use fade-in classes */
.fade-in{ opacity:0; transform: translateY(6px); animation: fadeUp 420ms forwards; }

/* Buttons: shiny hover */
.btn{ position: relative; overflow: hidden; }
.btn::after{ content: ''; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0)); transform: translateX(-100%); transition: transform .36s ease; pointer-events:none; }
.btn:hover::after{ transform: translateX(10%); }
.btn{ transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.06); }

/* Tiles: subtle float and tilt on hover */
.tile{ transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease; }
.tile:hover{ transform: translateY(-6px) rotate(-0.8deg) scale(1.02); box-shadow: 0 14px 32px rgba(0,0,0,.06); }

@keyframes floatSlow{ 0%{ transform: translateY(0);}50%{ transform: translateY(-6px);}100%{ transform: translateY(0);} }
.tile{ animation: floatSlow 10s ease-in-out infinite; }

/* FAQ static Q&A styles */
.faqItem h4{ margin:0 0 8px; font-size:1.05rem; transition: color .18s ease, transform .18s ease; }
.faqItem p{ margin:0 0 16px; color: var(--muted); }

/* Hover animation for questions */
.faqItem:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.04); background: rgba(255,255,255,.52); }
.faqItem:hover h4{ color: var(--accent); transform: translateX(6px); }

/* Hover interactions for cards and articles */
.metaCard, .card, .article, .faqItem{
  transition: transform .18s ease, box-shadow .18s ease;
}
.metaCard:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 40px rgba(0,0,0,.05); }
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.05); }
.article:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.04); }

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero__glow, .badge, .tile, .btn::after, .reveal, .fade-in, .metaCard, .card, .article{ animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 980px){
  .articleGrid{ grid-template-columns: 1fr; }
  .toc{ position:relative; top:auto; }
  .hero__meta{ grid-template-columns: 1fr; }
  .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faqGrid{ grid-template-columns: 1fr; }
}

.hero__subtitle{
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 8px;
  font-style: normal;
  font-weight:600;
  letter-spacing: .2px;
}

@media (max-width: 480px){
  .hero__subtitle{ font-size: 1rem; }
}

/* Team section */
.team{ padding: 48px 0; }
.team__title{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  text-align: center;
  margin: 0;
  color: var(--ink);
}
.team .teamGrid{ display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.teamMember{ width:140px; text-align:center; }
.teamMember img{ width:96px; height:96px; object-fit:cover; border-radius:999px; border:4px solid rgba(255,255,255,.6); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.teamMember h5{ margin-top:10px; font-size:1rem; }
.teamMember p{ margin-top:6px; color: var(--muted); font-size:.92rem; }

/* Decorative placeholder when team image is missing */
.teamMember{ display:flex; align-items:center; justify-content:center; }
.teamMember.missing::before{ content: ''; width:96px; height:96px; border-radius:999px; display:block;
  background: linear-gradient(135deg, rgba(122,31,31,.12), rgba(47,36,34,.06));
  border: 4px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.teamMember img{ display:block; }
.teamMember.missing img{ display:none; }