/* ---- Home page layout, 2026-08-29 ------------------------------------------
   Palette and type are taken from the existing site and assets/css/mcs-ui.css
   (cream #F5EFE5 / card #FFFDFA / maroon #4C2626 / ink #2E1B14 / body #5C4638 /
   muted #8A7059 / rule #E6DCCC / terracotta #a44423). No new fonts or colours
   are introduced -- the page inherits the site's Lato stack.
   -------------------------------------------------------------------------- */
.mcs-sec        { padding: 76px 0; }
.mcs-shell      { max-width: 1120px; margin: 0 auto; padding: 0 24px; }   /* the page's column, like the top bar */
.mcs-eyebrow    { display:block; font-size:13px; font-weight:700; letter-spacing:.18em;
                  text-transform:uppercase; color:#a44423; margin:0 0 14px; }
.mcs-h2         { font-size:clamp(26px,3.4vw,40px); font-weight:800; color:#2E1B14;
                  line-height:1.15; letter-spacing:-0.01em; margin:0 0 16px;
                  text-wrap:balance; }
.mcs-h2 em      { font-style:italic; font-weight:800; color:#4C2626; }
.mcs-lede       { font-size:17px; line-height:1.7; color:#5C4638; margin:0; max-width:64ch; }

/* ---- Hero ---- */
.mcs-hero        { position:relative; margin-top:75px; overflow:hidden;
                   min-height:clamp(460px,64vh,660px); display:flex;
                   align-items:center; justify-content:center; }
.mcs-hero-img    { position:absolute; top:0; left:0; width:100%; height:100%;
                   object-fit:cover; object-position:center 38%; }
.mcs-hero-scrim  { position:absolute; top:0; right:0; bottom:0; left:0;
                   background-image:linear-gradient(to bottom, rgba(0,0,0,.88) 0%,
                     rgba(0,0,0,.62) 55%, rgba(0,0,0,.34) 100%); }
.mcs-hero-inner  { position:relative; z-index:2; max-width:760px;
                   padding:64px 26px; text-align:center; }
.mcs-hero-eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:.2em;
                   text-transform:uppercase; color:#E0A277; margin:0 0 16px; }
.mcs-hero-h1     { font-size:clamp(32px,6vw,58px); font-weight:800; color:#fff;
                   line-height:1.08; letter-spacing:-0.02em; margin:0 0 20px;
                   text-wrap:balance; }
.mcs-hero-h1 em  { font-style:italic; }
.mcs-hero-lede   { font-size:clamp(14.5px,1.45vw,16.5px); line-height:1.68;
                   color:rgba(255,255,255,.92); margin:0 auto 30px; max-width:62ch;
                   text-align:center; hyphens:manual; -webkit-hyphens:manual; text-wrap:pretty; }
.mcs-hero-cta    { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (max-width:575px){
  .mcs-hero-cta            { flex-direction:column; align-items:center; gap:10px; }
  .mcs-hero-cta .mcs-btn   { width:100%; max-width:300px; }
}

/* ---- Buttons ---- */
/* Every button is a key (css/keys.css): shape, colour, bevel and the press come from there. This is size and type. */
.mcs-btn         { display:inline-flex; align-items:center; justify-content:center;
                   height:46px; padding:0 26px; font-size:15px; font-weight:700;
                   white-space:nowrap; }

/* ---- Stats ---- */
.mcs-stats       { background:#261a13; }
.mcs-stats-grid  { max-width:1000px; margin:0 auto; padding:30px 22px;
                   display:grid; grid-template-columns:repeat(3,1fr);
                   transition:opacity .3s ease; }
.mcs-stats-grid.is-turning { opacity:0; }
.mcs-stat-n      { font-variant-numeric:tabular-nums; }
.mcs-stat        { text-align:center; padding:6px 12px;
                   border-left:1px solid rgba(243,239,231,.14); }
.mcs-stat:first-child { border-left:0; }
.mcs-stat-n      { display:block; font-size:clamp(22px,3vw,32px); color:#f3efe7;
                   font-style:italic; line-height:1.1; }
.mcs-stat-l      { display:block; font-size:13px; color:#9a8d80; margin-top:7px;
                   line-height:1.3; }
@media (max-width:420px){
  .mcs-stat-l    { font-size:11.5px; }
  .mcs-stat      { padding:6px 6px; }
}

/* ---- Ready for the perfect cup ----
   Was two bootstrap columns where the text column used .home-section-3
   (display:flex; align-items:center), which centred each child independently.
   The heading shrank to its own width and centred while the 420px body block
   sat left, so the two never lined up. A grid with one padded text block keeps
   them on the same left edge at every width. */
.mcs-ready       { background:#F1E8DC; display:grid; grid-template-columns:1fr 1fr;
                   align-items:center; gap:34px; padding:44px; }
.mcs-ready-img   { display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
                   border-radius:14px; }
.mcs-ready-body  { text-align:left; }
.mcs-ready-body p{ font-size:16px; line-height:1.6; color:#5C4638; margin:0; max-width:46ch; }
@media (max-width:767px){
  .mcs-ready     { grid-template-columns:1fr; gap:24px; padding:28px 22px 36px; }
}

/* ---- Why / How / What ---- */
.mcs-why        { background:#F5EFE5; }
.mcs-why-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:38px; }
.mcs-why-k      { display:block; font-size:12px; font-weight:700; letter-spacing:.16em;
                  text-transform:uppercase; color:#8A7059; margin:0 0 12px;
                  padding-bottom:12px; border-bottom:1px solid #E6DCCC; }
.mcs-why-col p  { font-size:16px; line-height:1.7; color:#5C4638; margin:0; }
.mcs-why-quote  { margin-top:44px; margin-bottom:0; padding-top:26px;
                  border-top:1px solid #E6DCCC;
                  font-size:clamp(18px,2.2vw,25px); line-height:1.45; color:#4C2626;
                  font-style:italic; text-align:center; }

/* ---- What you can do ---- */
.mcs-do         { background:#F5EFE5; }
.mcs-do-grid    { display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
                  margin-top:40px; }
.mcs-do-card    { background:#FFFDFA; border:1px solid #E6DCCC; border-radius:14px;
                  padding:26px 24px; grid-column:span 2; }
/* five cards: three on top, the last two centred beneath them */
.mcs-do-card:nth-child(4) { grid-column:2 / span 2; }
.mcs-do-card:nth-child(5) { grid-column:4 / span 2; }
.mcs-do-ico     { display:block; width:26px; height:26px; color:#4C2626; margin-bottom:15px; }
.mcs-do-card h3 { font-size:16px; font-weight:700; color:#2E1B14; margin:0 0 8px; line-height:1.3; }
.mcs-do-card p  { font-size:14px; line-height:1.62; color:#5C4638; margin:0; }

@media (max-width: 991px) {
  .mcs-why-grid  { grid-template-columns:1fr; gap:28px; }
  .mcs-do-grid   { grid-template-columns:repeat(2,1fr); }
  .mcs-do-card, .mcs-do-card:nth-child(4), .mcs-do-card:nth-child(5) { grid-column:auto; }
  .mcs-do-card:last-child { grid-column:1 / -1; width:calc(50% - 9px); justify-self:center; }
}
@media (max-width: 575px) {
  .mcs-sec       { padding:54px 0; }
  .mcs-do-grid   { grid-template-columns:1fr; }
  .mcs-do-card:last-child { width:auto; }
  .mcs-do-card               { border-right:0; border-bottom:1px solid #E6DCCC; }
  .mcs-do-card:last-child    { border-bottom:0; }
}
/* ---- roaster logo strip — the marquee mechanic itself (scroll, hover-pause,
   reduced-motion) is the shared .mcs-marquee/.mcs-marquee-track base in
   mcs-extra.css; only this strip's own chrome and content styling live here. */
.mcs-roaster-strip {
  padding: 26px 0; background: #FFFDFA;
  border-top: 1px solid #E6DCCC; border-bottom: 1px solid #E6DCCC;
  --mcs-marquee-duration: 46s;
  --mcs-marquee-gap: 56px;
}
.mcs-roaster-logo { flex: 0 0 auto; display: block; }
.mcs-roaster-logo img {
  height: 46px; width: auto; max-width: 150px; object-fit: contain; border-radius: 8px;
  filter: grayscale(1); opacity: .55; transition: filter .2s ease, opacity .2s ease;
}
.mcs-roaster-logo:hover img { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mcs-roaster-track { gap: 32px 44px; }
}