
.campaign-faq{--cf-green:#26362f;--cf-copper:#bd6d3f;--cf-cream:#f5f0e7;position:relative;overflow:hidden;padding:clamp(78px,8vw,125px) 0;background:var(--cf-cream);color:var(--cf-green)}
.campaign-faq--green{background:var(--cf-green);color:var(--cf-cream)}
.campaign-faq__inner{width:min(calc(100% - clamp(32px,7vw,120px)),1180px);margin:auto}
.campaign-faq__masthead{position:relative;display:flex;justify-content:center;align-items:center;min-height:250px;margin-bottom:34px;text-align:center}
.campaign-faq__masthead-copy{position:relative;z-index:2;width:min(760px,94%)}
.campaign-faq__decorative{position:absolute;z-index:1;left:50%;top:34%;width:max-content;color:transparent!important;-webkit-text-stroke:1px rgba(189,109,63,.34);font-family:'BigMooreItalic','BigMoore',Georgia,serif!important;font-style:italic!important;font-size:clamp(7rem,14vw,13rem);line-height:.8;text-transform:lowercase!important;transform:translate(-50%,-76%);white-space:nowrap}
.campaign-faq__eyebrow{margin:0 0 14px!important;color:var(--cf-copper)!important;font-family:'Jost',Arial,sans-serif!important;font-size:.82rem!important;font-weight:600!important;letter-spacing:.09em!important;text-transform:uppercase!important}
.campaign-faq__title{margin:0!important;color:inherit!important;font-family:'BigMoore',Georgia,serif!important;font-size:clamp(3.5rem,5.2vw,6rem)!important;font-weight:300!important;line-height:1!important;letter-spacing:-.03em!important;text-transform:none!important}
.campaign-faq__intro{max-width:650px;margin:22px auto 0;font-family:'Jost',Arial,sans-serif;line-height:1.65}
.campaign-faq__items{border-top:1px solid rgba(189,109,63,.45)}
.campaign-faq__item{margin:0;border:0;border-bottom:1px solid rgba(189,109,63,.45)}
.campaign-faq__item>summary{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:84px;padding:20px 2px;cursor:pointer;list-style:none;color:inherit;font-family:'PassionSans','Jost',sans-serif;font-size:clamp(1.45rem,2.1vw,2.15rem);line-height:1.15;text-transform:none}
.campaign-faq__item>summary::-webkit-details-marker{display:none}
.campaign-faq__toggle{position:relative;flex:0 0 22px;width:22px;height:22px}
.campaign-faq__toggle:before,.campaign-faq__toggle:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;background:var(--cf-copper);transform:translate(-50%,-50%);transition:opacity .22s ease,transform .28s ease}
.campaign-faq__toggle:after{transform:translate(-50%,-50%) rotate(90deg)}
.campaign-faq__item[open] .campaign-faq__toggle:after{opacity:0}
.campaign-faq__answer{max-width:850px;padding:0 54px 30px 2px;font-family:'Jost',Arial,sans-serif;font-size:1rem;line-height:1.7}
.campaign-faq__answer>:first-child{margin-top:0}.campaign-faq__answer>:last-child{margin-bottom:0}
@media(max-width:650px){.campaign-faq{padding:70px 0 88px}.campaign-faq__inner{width:calc(100% - 30px)}.campaign-faq__masthead{min-height:220px;margin-bottom:22px}.campaign-faq__decorative{top:31%;font-size:clamp(5.5rem,25vw,8rem);transform:translate(-50%,-84%)}.campaign-faq__title{font-size:clamp(3.15rem,13vw,4.6rem)!important}.campaign-faq__item>summary{min-height:72px;padding:17px 0;font-size:clamp(1.35rem,6vw,1.7rem)}.campaign-faq__answer{padding:0 34px 24px 0}}



/* ==========================================================
   Albert's decorative outline typography - final positioning rule
   The display word sits BEHIND the heading. Only its upper ~20-25%
   is crossed by the foreground heading; most of the word remains
   visible beneath it.
   ========================================================== */

.campaign-hero__decorative,
.media-mosaic__decorative,
.campaign-grid__decorative,
.menu-showcase__decorative,
.campaign-faq__decorative{
  z-index:0!important;
  pointer-events:none!important;
  user-select:none!important;
  font-family:'BigMooreItalic','BigMoore',Georgia,serif!important;
  font-style:italic!important;
  font-weight:400!important;
  text-transform:lowercase!important;
  color:transparent!important;
  opacity:.72!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

/* Foreground copy always owns the higher layer */
.campaign-hero__content-inner,
.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy{
  position:relative!important;
  z-index:2!important;
}

/* The title occupies the upper part of each masthead. The decorative
   word is deliberately pushed DOWN so it peeks from the title's lower edge. */
.media-mosaic__copy,
.campaign-grid__masthead,
.menu-showcase__masthead,
.campaign-faq__masthead{
  align-items:flex-start!important;
}

.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy{
  padding-top:clamp(18px,1.5vw,28px)!important;
}

/* centred campaign mastheads */
.media-mosaic__decorative,
.campaign-grid__decorative,
.menu-showcase__decorative,
.campaign-faq__decorative{
  top:clamp(132px,11vw,175px)!important;
  left:50%!important;
  transform:translate(-50%,0)!important;
  line-height:.78!important;
}

/* Reserve enough vertical room for the readable lower 75% of the word */
.media-mosaic__copy{
  min-height:clamp(360px,29vw,445px)!important;
}
.campaign-grid__masthead{
  min-height:clamp(340px,27vw,415px)!important;
}
.menu-showcase__masthead{
  min-height:clamp(330px,25vw,395px)!important;
}
.campaign-faq__masthead{
  min-height:clamp(330px,25vw,395px)!important;
}

/* Hero is left aligned, so place "christmas" just below the H1 rather than
   through its middle. It remains behind all real content. */
.campaign-hero__decorative{
  top:clamp(300px,31vh,390px)!important;
  left:clamp(24px,3.3vw,62px)!important;
  width:auto!important;
  transform:none!important;
  font-size:clamp(7.2rem,12vw,13rem)!important;
  -webkit-text-stroke:1px rgba(189,109,63,.32)!important;
  text-stroke:1px rgba(189,109,63,.32)!important;
}

/* Increase space after H1 a little so the decorative word has breathing room */
.campaign-hero__title::after{
  margin-top:clamp(46px,4vw,62px)!important;
}

/* Mosaic captions can carry a little more personality */
.media-mosaic__caption{
  font-size:clamp(1.12rem,1.16vw,1.34rem)!important;
  line-height:1.18!important;
}

@media(max-width:767px){
  .media-mosaic__copy,
  .campaign-grid__masthead,
  .menu-showcase__masthead,
  .campaign-faq__masthead{
    min-height:330px!important;
  }

  .media-mosaic__decorative,
  .campaign-grid__decorative,
  .menu-showcase__decorative,
  .campaign-faq__decorative{
    top:150px!important;
    font-size:clamp(5.5rem,23vw,7.8rem)!important;
    transform:translate(-50%,0)!important;
    opacity:.64!important;
  }

  .campaign-hero__decorative{
    top:clamp(600px,79svh,770px)!important;
    left:18px!important;
    width:auto!important;
    max-width:calc(100vw - 26px)!important;
    font-size:clamp(5.2rem,23vw,7.4rem)!important;
    transform:none!important;
    opacity:.58!important;
  }

  .campaign-hero__title::after{
    margin-top:42px!important;
  }

  .media-mosaic__caption{
    font-size:1.08rem!important;
  }
}
