/* Catering page. Sections top to bottom: yellow hero band, white intro (staggered
   two-block layout with the menu cover between them), blue custom-quotes rows,
   teal schools & churches band with a photo carousel, white FAQ + closing call.

   The page uses a slightly larger eyebrow than the sitewide .eyebrow (25px vs 22px
   at full width), so .cat-eyebrow re-scales it across the same breakpoints. */

.cat-eyebrow { font-size: 25px; }
.cat-copy { margin: 0; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); }
.cat-divider { width: 100%; height: 10px; padding: 0; object-fit: contain; object-position: left center; }

/* ---------- hero ---------- */
.cat-hero {
  display: flex; align-items: stretch;
  background: var(--white) url(/assets/img/MustardYellow-Background2.png) repeat-x top left;
}
.cat-hero-text {
  flex: 0 0 40%; max-width: 40%; margin-top: -50px;
  padding: 10px 10px 10px calc(5% + 10px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.cat-hero-title { font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white); margin-left: -4px; }
.cat-hero-photo { flex: 1 1 auto; margin-right: 60px; display: flex; align-items: flex-start; }
.cat-hero-photo img { width: 100%; height: auto; }

/* Elementor draws every divider as an inline image inside a 31.39px line box, so the
   block it occupies is a little taller than the image itself, and a text-editor
   paragraph carries a 14.4px trailing margin. The divider heights and margins below
   reproduce those boxes exactly; without them the page drifts a pixel upwards. */


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .cat-hero { height: 460px; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .cat-hero-text { padding-left: calc(13% + 10px); }
}

/* ---------- intro ---------- */
.cat-intro {
  background: var(--white); padding-bottom: 5%;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.cat-intro-lead { width: 75%; padding: 10px; margin-top: -50px; }
.cat-intro-lead-text { width: 46%; padding-top: 15px; display: flex; flex-direction: column; align-items: flex-start; }
.cat-intro-lead-text .eyebrow { margin: 6px 0 10px; }
.cat-intro-lead-text .h2 { width: 75%; margin: 10px 0 0; }
.cat-intro-lead-text .cat-divider { margin: 38.6px 0 42.4px; }
.cat-intro-lead-text .cat-copy { width: 100%; margin-bottom: 14.4px; }

.cat-intro-cover { width: 42%; align-self: flex-end; margin: -60px 75px 0 0; padding: 10px; }
.cat-intro-cover a { display: block; line-height: 0; }
.cat-intro-cover img { width: 100%; height: auto; }

.cat-intro-menu { width: 47%; align-self: flex-start; margin-top: -470px; padding-left: 245px; }
.cat-intro-menu-text { padding: 15px 0 5px; display: flex; flex-direction: column; align-items: flex-start; }
.cat-intro-menu-text .h2 { width: 100%; margin: 10px 0 0; }
.cat-intro-menu-text .cat-divider { margin: 48.6px 0 47.4px; }
.cat-intro-menu-text .cat-copy { width: 100%; margin-bottom: 14.4px; }
.cat-buttons { display: flex; gap: 20px; margin-top: 40px; }
.cat-buttons .btn { flex: 0 1 auto; }

/* ---------- custom quotes (blue) ---------- */
.cat-quotes {
  min-height: 1155px; padding: 3% 1% 0 0;
  background: url(/assets/img/Background-blue_resized.jpg) center / cover no-repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 70px;
}
.cat-row { width: 75%; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.cat-row-photo { line-height: 0; }
.cat-row-photo img { width: 100%; height: auto; border-radius: 20px; }
.cat-row-text {
  min-height: 435px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
}
.cat-row-text .h2 { width: 100%; margin-top: 10px; }
.cat-row-text .cat-divider { width: 602px; max-width: 100%; margin: 34px 0 27px; }
.cat-row-text .cat-copy { width: 86%; margin-bottom: 14.4px; }
.cat-row-cta { margin: 10px 0 0; }

/* Second row is a flex pair on live, not the 85px grid: the photo column takes
   half the row and the text takes what is left. */
.cat-row-flip { display: flex; gap: 20px; margin-top: -15px; align-items: stretch; }
.cat-row-flip .cat-row-text { flex: 1 1 auto; min-height: 440px; }
.cat-row-flip .cat-row-text .h2 { width: 72%; }
.cat-row-flip .cat-row-photo { flex: 0 0 50%; padding: 10px; text-align: center; }
.cat-row-flip .cat-row-photo img { width: 637px; }

/* ---------- schools & churches (teal) ---------- */
.cat-schools { min-height: 698px; background: var(--teal); display: flex; align-items: center; }
.cat-carousel { position: relative; flex: 0 0 50%; max-width: 50%; align-self: center; }
/* live's swiper keeps a fixed track height, so a slide whose photo is shorter than
   1000x600 leaves a gap instead of pulling the rest of the page up */
.cat-slides { position: relative; line-height: 0; aspect-ratio: 1000 / 600; }
.cat-slides img { width: 100%; height: auto; display: block; }
.cat-carousel-prev, .cat-carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%); color: var(--white); padding: 10px;
}
.cat-carousel-prev { left: 12px; }
.cat-carousel-next { right: 12px; }
.cat-carousel-prev .icon, .cat-carousel-next .icon { width: 17px; height: 17px; }
.cat-carousel-prev .icon { transform: rotate(-90deg); }
.cat-carousel-next .icon { transform: rotate(90deg); }
.cat-carousel-dots { display: flex; justify-content: center; gap: 12px; padding: 15px 0; }
.cat-carousel-dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 45, 86, .35); }
.cat-carousel-dots button[aria-current="true"] { background: var(--navy); }

.cat-schools-text {
  flex: 0 0 700px; min-height: 580px; width: 700px;
  margin-left: 40px; padding: 0 10px;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
}
.cat-schools-text .h2 { width: 100%; }
.cat-schools-text .cat-divider { width: 602px; max-width: 100%; margin: 25px 0 30px; }
.cat-schools-text .cat-copy { width: 95%; padding-bottom: 25px; }
.cat-btn-wide { width: 86%; margin-top: 4px; }
.cat-schools-contact { display: flex; gap: 20px; margin-top: 10px; }
.cat-schools-contact .btn { gap: 11px; }
.cat-schools-contact .icon { width: 18px; height: 18px; }

/* ---------- FAQ + closing ---------- */
.cat-faq {
  min-height: 1147px;
  background: var(--white) url(/assets/img/image4.png) top right no-repeat;
  display: flex; flex-direction: column; align-items: center;
}
/* Live's columns are strict halves: below ~1480 the 730px box is wider than its
   column and, being right-aligned, hangs off the left edge instead of widening it. */
.cat-faq-grid { width: 100%; min-height: 745px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cat-faq-col {
  width: 100%; padding-bottom: 46px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
}
.cat-faq-box { width: 730px; min-height: 505px; padding: 0 10px 0 30px; }
.cat-faq-divider { width: 580px; height: 9px; max-width: 100%; padding: 0; margin: 29px 0 33px; }
.cat-faq-col .cat-copy { width: 87%; padding-bottom: 30px; }
/* live wraps the link in a red, underlined, bold span, but the anchor's own navy
   500-weight theme style wins for the text, so only the underline is red */
.cat-faq-link { color: var(--navy); font-weight: 500; text-decoration: underline #FF0000; }

.cat-accordion { width: 690px; max-width: 100%; }
.cat-acc-item { border: 2px solid var(--navy); border-radius: 6px; margin-bottom: 30px; }
.cat-acc-item.is-open { border-color: var(--red); }
.cat-acc-title {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  width: 100%; padding: 25px; background: #F3F3F3; color: var(--navy);
  font: 700 30px / 30px var(--font-serif); letter-spacing: 1px; text-align: left;
}
.cat-acc-icon { color: var(--red); line-height: 0; flex: 0 0 auto; }
.cat-acc-icon .icon { width: 22px; height: 30px; }
.cat-acc-icon .icon-caret-up { display: none; }
.is-open .cat-acc-icon .icon-caret-up { display: inline-block; }
.is-open .cat-acc-icon .icon-caret-down { display: none; }
.cat-acc-panel { background: #F3F3F3; color: #333; padding: 0 14px 45px 27px; }
.cat-acc-panel p { margin: 0; }

.cat-closing {
  width: 100%; margin-top: 65px; transform: translateY(-50px); padding: 10px; gap: 20px;
  display: flex; flex-direction: column; align-items: center;
}
.cat-closing-title {
  width: 65%; margin: 0 0 14.4px; padding-top: 20px; text-align: center; color: var(--navy);
  font: 400 var(--fs-h2) / var(--lh-h2) var(--font-display);
}
/* The live page paints this span plain red, not the brand red of the buttons. */
.cat-closing-title .text-red { color: #FF0000; }
.cat-closing-buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; padding: 10px; }

/* ---------- 1366 ---------- */
/* Live's laptop rules keep the desktop structure (staggered intro, two quote rows,
   carousel beside the schools copy, FAQ in the left half) and mostly shrink type
   and re-space it. Measured off live at 1366: hero 225-719, intro 555-1545 (pulled
   up over the hero by margin-top -12%), quotes 1545-2700, schools 2700-3398,
   FAQ 3398-4545. */
@media (max-width: 1366px) {
  .cat-eyebrow { font-size: 18px; }
  .cat-hero { background-image: url(/assets/img/mustard-250px.png); }
  /* live nests the text: its column sits 50px up and the inner box another 115px,
     which centres the title 165px higher than an unshifted column would */
  .cat-hero-text { margin-top: -165px; }

  .cat-intro { margin-top: -12%; padding: 0 40px 80px 60px; }
  .cat-intro-lead { width: 85%; padding: 0; margin-top: 0; align-self: flex-start; }
  .cat-intro-lead-text { width: 55%; }
  /* the cover keeps its desktop 42% column at the right edge, but hangs 146px up
     into the lead block and lets the menu block ride 250px up under it */
  .cat-intro-cover { margin: -146px 30px -250px 0; text-align: center; }
  /* live lets the 487px cover overflow its column by up to 20% rather than shrink,
     so below ~1330 it keeps its full 332px height */
  .cat-intro-cover img { width: 487px; max-width: 120%; }
  .cat-intro-menu { width: 50%; margin-top: 0; padding-left: 0; }
  /* these buttons keep live's explicit 18px while the sitewide button type drops to 17 */
  .cat-buttons .btn, .cat-row .btn { font-size: 18px; }

  .cat-quotes { padding: 2% 4% 0 2%; gap: 0; }
  .cat-row { width: 100%; padding: 0; gap: 20px; }
  .cat-row-flip { padding: 10px; }
  .cat-row-text .h2 { margin-top: 0; }
  .cat-row-flip .cat-row-text .h2 { margin-top: 10px; }
  .cat-row-flip .cat-row-photo img { width: 100%; }

  /* the copy block is a 500px box centred in the right half of the band */
  .cat-schools-text { flex: 0 0 500px; width: 500px; max-width: 100%; margin: 0 auto; padding: 35px 0 0; }
  .cat-schools-text .cat-divider { width: 490px; }
  .cat-schools-text .cat-copy { width: 510px; max-width: 100%; }

  .cat-row-text { min-height: 435px; }
  .cat-faq-grid { gap: 0; }
  .cat-faq-col { align-items: center; }
  .cat-faq-box { width: 500px; min-height: 0; padding: 35px 0 0; }
  .cat-faq-divider { width: 490px; height: auto; }
  .cat-faq-col .cat-copy { width: 510px; max-width: 100%; }
  .cat-acc-title { font-size: 18px; }
  .cat-closing-title { width: 1000px; max-width: 100%; }
}

/* ---------- 1200 ---------- */
/* The first group below used to sit in the 1366 block, where it broke the laptop
   layout; it is kept here unchanged so 1024 and narrower render exactly as before.
   1025-1200 has not been re-measured against live's 1200 rules. */
@media (max-width: 1200px) {
  .cat-eyebrow { font-size: 17px; }
  .cat-hero-text { margin-top: -115px; }
  .cat-intro { margin-top: 0; }
  .cat-intro-lead { align-self: center; }
  .cat-intro-lead-text .h2 { width: 100%; }
  .cat-intro-cover { width: auto; align-self: center; padding: 0; }
  .cat-intro-cover img { max-width: 100%; }
  .cat-intro-menu { align-self: center; }
  .cat-quotes { gap: 70px; }
  .cat-row { padding: 10px; }
  .cat-row-photo { text-align: end; }
  .cat-row-photo img, .cat-row-flip .cat-row-photo img { width: 432px; max-width: 100%; }
  .cat-row-flip .cat-row-photo { padding: 0; text-align: start; }
  .cat-carousel { flex-basis: 100%; max-width: 100%; }
  .cat-schools { flex-direction: column; min-height: 0; align-items: stretch; }
  .cat-schools-text { flex: 0 0 auto; padding: 35px 10px 0; }
  .cat-btn-wide { width: 100%; }
  .cat-faq-grid { gap: 20px; }
  .cat-hero-photo { margin-right: 3%; }
  .cat-intro-lead-text { width: 100%; }
  .cat-intro-cover { margin: 0 0 20px; }
  .cat-intro-menu { width: 100%; }
  .cat-intro-menu-text { width: 775px; max-width: 100%; }
  .cat-acc-title { font-size: 17px; }
  .cat-row { justify-items: center; }
  .cat-row-text { width: 100%; }
  .cat-faq-box { padding-left: 40px; }
}

/* ---------- 1024 ---------- */
@media (max-width: 1024px) {
  .cat-eyebrow { font-size: 16px; }
  .cat-hero-text { margin-top: -30px; padding-left: 5%; flex-basis: 50%; max-width: 50%; }
  .cat-intro-lead { width: 100%; }
  .cat-intro-cover { margin: 0; padding: 10px; }

  .cat-row-photo img, .cat-row-flip .cat-row-photo img { width: 362px; }
  .cat-row-text { width: 415px; max-width: 100%; }
  .cat-row-flip { align-items: center; }

  .cat-schools { flex-direction: column; }
  .cat-schools-text { width: 100%; max-width: 100%; align-items: center; text-align: center; padding: 10px 20px; }
  .cat-schools-text .h2, .cat-schools-text .cat-copy { text-align: center; }
  .cat-btn-wide { width: 63%; }
  .cat-schools-contact { justify-content: center; }

  .cat-faq { min-height: 0; }
  .cat-faq-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cat-faq-col { width: 100%; padding-bottom: 46px; }
  .cat-faq-box { width: 100%; padding: 35px 40px 0; }
  .cat-accordion { width: 100%; }
  .cat-acc-title { font-size: 16px; }
  .cat-closing { margin-top: 15px; transform: none; }
  .cat-closing-title { width: 885px; }

  /* --- measured off live at 1024: hero 222-535, intro 535-1755, quotes
     1755-2910, schools 2910-4260, FAQ 4260-5340 --- */
  .cat-hero-text { padding-left: calc(5% + 10px); }

  .cat-intro-menu-text { padding-top: 0; }
  .cat-buttons .btn, .cat-row .btn { font-size: 18px; }

  /* the two quote rows sit flush against each other, centred in the band */
  .cat-quotes { padding: 0; gap: 0; }
  .cat-row { padding: 0; gap: 0; grid-template-columns: repeat(2, minmax(0, 512px)); justify-items: start; align-items: center; }
  .cat-row-photo { margin-left: 70px; }
  .cat-row-text { width: 415px; min-height: 0; margin-left: 54px; }
  .cat-row-text .h2 { margin-top: 0; }
  .cat-row-photo img { width: 362px; }

  .cat-row-flip { margin-top: 0; padding: 10px 20px; gap: 20px; align-items: stretch; }
  .cat-row-flip .cat-row-text, .cat-row-flip .cat-row-photo { margin-left: 0; }
  .cat-row-flip .cat-row-text { flex: 0 0 415px; min-height: 0; }
  .cat-row-flip .cat-row-text .h2 { width: 299px; margin-top: 10px; }
  .cat-row-flip .cat-row-photo { flex: 0 0 492px; padding: 10px; text-align: left; }
  .cat-row-flip .cat-row-photo img { width: 432px; }

  .cat-carousel { align-self: stretch; width: 100%; }
  .cat-carousel-dots { padding: 16px 0 15px; }
  .cat-schools-text { min-height: 0; padding: 130px 20px; justify-content: flex-start; }
  .cat-schools-text .eyebrow, .cat-schools-text .h2 { margin: 0; }
  .cat-schools-text .cat-divider { width: 490px; margin: 19px 0 12px; }
  .cat-schools-text .cat-copy { width: 510px; margin: 0; padding-bottom: 25px; }
  .cat-btn-wide { width: 633px; max-width: 100%; margin-top: 4px; }
  .cat-schools-contact { margin-top: 10px; }
  .cat-schools-contact .icon { width: 16px; height: 16px; }

  .cat-faq { padding-bottom: 50px; }
  .cat-faq-grid { min-height: 745px; }
  .cat-faq-col { justify-content: center; padding-bottom: 0; }
  .cat-faq-box { width: 100%; padding: 35px 0 0; }
  .cat-faq-divider { width: 490px; height: auto; margin: 15px 0 18px; }
  .cat-faq-col .cat-copy { width: 510px; padding: 0 0 30px; }
}

/* ---------- 880 ---------- */
@media (max-width: 880px) {
  .cat-eyebrow { font-size: 15px; }
  .cat-row-photo, .cat-row-text { margin-left: 0; }
  .cat-hero { min-height: 250px; }
  .cat-intro { padding: 0 5% 40px; }
  .cat-intro-lead { width: 100%; }
  .cat-intro-menu { margin-top: 34px; }
  .cat-row { grid-template-columns: 1fr; }
  .cat-row-photo { text-align: center; }
  .cat-row-photo img, .cat-row-flip .cat-row-photo img { width: 100%; max-width: 635px; }
  .cat-row-flip .cat-row-photo { flex: 0 0 auto; }
  .cat-row-flip { display: flex; flex-direction: column-reverse; }
  .cat-acc-title { font-size: 15px; }
}

/* ---------- 767 ---------- */
/* Every number below is measured off the live page at 390px: the yellow band runs
   139-443, the white intro 443-1714, the blue quotes 1714-3145, the teal band
   3144-4114 and the FAQ 4114-5280. Elementor stacks fixed gaps rather than a
   rhythm, so the margins are spelled out block by block. */
@media (max-width: 767px) {
  .cat-eyebrow { font-size: 14px; }
  .cat-divider { height: auto; }

  /* hero: the title block is offset by the 19.5px left padding of live's
     container, so its centred text sits ~10px right of the viewport centre. */
  .cat-hero {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    min-height: 0; padding-bottom: 0;
  }
  .cat-hero-text {
    flex: 0 0 auto; max-width: 100%; width: 100%; margin: 50px 0 0;
    padding: 10px 0 10px 19.5px; align-items: center;
  }
  .cat-hero-text .cat-eyebrow { margin: 0; text-align: center; }
  .cat-hero-title { margin: 5px 0 0; line-height: 39.6px; }
  .cat-hero-photo { width: 100%; margin: 12px 0 0; justify-content: center; }
  .cat-hero-photo img { width: 225px; margin: 0; }

  /* intro */
  .cat-intro { padding: 0 19.5px 35px; gap: 0; text-align: center; }
  .cat-intro-lead { width: 100%; padding: 0; margin: 0; }
  .cat-intro-lead-text, .cat-intro-menu-text { width: 100%; text-align: center; align-items: center; }
  .cat-intro-lead-text { padding: 15px 0 0; }
  .cat-intro-lead-text .eyebrow { margin: 6px 0 0; }
  .cat-intro-lead-text .h2 { width: 100%; margin: 20px 0 0; }
  .cat-intro-lead-text .cat-divider { width: 341px; margin: 21px 0 15px; }
  .cat-intro-lead-text .cat-copy { width: 100%; margin: 0 0 14.4px; }

  /* the menu cover is left-aligned and wider than its column on live */
  .cat-intro-cover { width: 100%; align-self: stretch; margin: 0; padding: 10px 0 10px 10px; text-align: left; }
  .cat-intro-cover img { width: 300px; max-width: none; }

  .cat-intro-menu { width: 100%; margin: 0; padding: 0; }
  .cat-intro-menu-text { padding: 0; }
  .cat-intro-menu-text .eyebrow { margin: 0; }
  .cat-intro-menu-text .h2 { width: 100%; margin: 10px 0 0; }
  .cat-intro-menu-text .cat-divider { width: 341px; margin: 21px 0 50px; }
  .cat-intro-menu-text .cat-copy { width: 100%; margin: 0 0 14.4px; }
  .cat-buttons { flex-direction: column; align-items: center; gap: 55px; margin-top: 70.6px; }
  .cat-buttons .btn { font-size: 18px; }

  /* custom quotes */
  .cat-quotes { padding: 22px 9px 9px; gap: 0; min-height: 0; }
  .cat-row { width: 100%; padding: 0; gap: 20px; }
  .cat-row-photo { text-align: center; }
  .cat-row-photo img, .cat-row-flip .cat-row-photo img { width: 100%; max-width: none; }
  .cat-row-text {
    width: 100%; min-height: 435px; padding: 20px;
    align-items: center; text-align: center; justify-content: flex-start;
  }
  .cat-row-text .eyebrow { margin: 0; }
  .cat-row-text .h2 { width: 100%; margin: 0; }
  .cat-row-text .cat-divider { width: 322px; max-width: 100%; margin: 21px 0 14px; }
  .cat-row-text .cat-copy { width: 86%; margin: 0 0 14.4px; }
  .cat-row-cta { margin: 10px 0 0; }
  .cat-row .btn { font-size: 18px; }

  .cat-row-flip { padding: 10px 20px; gap: 19px; margin-top: 0; }
  .cat-row-flip .cat-row-photo { flex: 0 0 auto; width: 100%; padding: 10px; }
  .cat-row-flip .cat-row-text { flex: 0 0 auto; min-height: 440px; padding: 0; }
  .cat-row-flip .cat-row-text .eyebrow { margin: 18px 0 0; }
  .cat-row-flip .cat-row-text .h2 { width: 72%; margin: 10px 0 0; }
  /* the second row keeps its paragraph and button left-aligned on live */
  .cat-row-flip .cat-row-text .h2, .cat-row-flip .cat-row-text .cat-copy { text-align: left; }
  .cat-row-flip .cat-row-cta { margin: 10.6px 0 0; align-self: flex-start; }

  /* schools & churches */
  .cat-carousel { flex: 0 0 auto; width: 100%; max-width: 100%; }
  .cat-carousel-dots { padding: 16px 0 15px; }
  .cat-schools-text {
    flex: 0 0 auto; width: 100%; max-width: 100%; min-height: 0; margin: 0;
    padding: 55px 20px; align-items: center; text-align: center;
  }
  .cat-schools-text .eyebrow, .cat-schools-text .h2 { margin: 0; }
  .cat-schools-text .cat-divider { width: 100%; margin: 21px 0 14px; }
  .cat-schools-text .cat-copy { width: 100%; margin: 0; padding-bottom: 0; }
  .cat-btn-wide { width: 63%; margin-top: 29px; }
  .cat-schools-contact { flex-direction: column; align-items: center; width: 100%; gap: 30px; margin-top: 10px; }
  .cat-schools-contact .icon { width: 14px; height: 14px; }

  /* FAQ + closing */
  .cat-faq { min-height: 0; padding-bottom: 50px; }
  .cat-faq-grid { min-height: 0; }
  .cat-faq-col { align-items: center; text-align: center; padding-bottom: 0; }
  .cat-faq-box { width: 100%; min-height: 0; padding: 71px 9.5px 36px; }
  .cat-faq-box .h2 { margin: 0; }
  .cat-faq-divider { width: 100%; margin: 16px 0 19px; }
  /* live keeps this paragraph left-aligned inside a 20px inset, so it wraps to
     five lines where a centred full-width paragraph would take four */
  .cat-faq-col .cat-copy { width: 100%; margin: 0; padding: 0 20px; text-align: left; }
  .cat-accordion { width: 100%; text-align: left; }
  .cat-acc-title { font-size: 14px; gap: 6px; }
  .cat-acc-item { margin-bottom: 30px; }
  .cat-closing { margin-top: 40px; }
  .cat-closing-title { width: 100%; }
  .cat-closing-buttons { flex-direction: column; align-items: center; width: 100%; }
}