/* "From families": one white card, three quotes split by thin lines */
.tq { background: #fff; padding: 120px 0 120px; }
.sec-calm main > section.tq + section.faq { padding-top: 0 !important; }
.tq-wrap { width: var(--colw); margin: 0 auto; }
.tq-head { text-align: center; display: grid; gap: 16px; justify-items: center; margin-bottom: 56px; }
.tq-head h2 { font: 400 clamp(44px, 5.2vw, 76px)/.92 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; color: #E8503A; text-transform: uppercase; margin: 0; }
.tq-head p { font: 400 21px/1.45 p22-mackinac-pro, "Fraunces", Georgia, serif; color: #23676A; max-width: 26em; margin: 0; }
.tq-card { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(31,42,43,.12); border-radius: 30px; overflow: hidden; background: #fff; }
.tq-card figure { margin: 0; padding: 44px 42px 46px; display: flex; flex-direction: column; gap: 22px; }
.tq-card figure + figure { border-left: 1px solid rgba(31,42,43,.12); }
.tq-vis { height: 150px; display: flex; align-items: center; }
.tq-vis img { max-height: 120px; width: auto; filter: drop-shadow(0 10px 14px rgba(40,30,20,.14)); }
.tq-card figure:nth-child(1) .tq-vis img { transform: rotate(-6deg); }
.tq-card figure:nth-child(2) .tq-vis img { transform: rotate(4deg); }
.tq-card figure:nth-child(3) .tq-vis img { transform: rotate(-3deg); }
.tq-vis img.tq-th { height: 104px; max-height: none; border-radius: 22px; filter: none; transform: none !important; }
.tq-mark { font: 400 120px/.7 p22-mackinac-pro, "Fraunces", Georgia, serif; color: #E8503A; height: 56px; }
.tq-card blockquote { margin: 0; font: 400 23px/1.4 p22-mackinac-pro, "Fraunces", Georgia, serif; color: #23676A; text-wrap: pretty; flex: 1; }
.tq-c blockquote { font-size: 25px; }
.tq-card figcaption { display: flex; flex-direction: column; gap: 8px; }
.tq-who { font: 500 12.5px/1.3 "Outfit", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E8503A; }
.tq-ph { align-self: flex-start; font: 500 11px/1 "Outfit", sans-serif; color: #8A7A5A; background: #FFF3D6; border: 1px dashed #E0B860; border-radius: 99px; padding: 5px 9px; }
@media (max-width: 900px) {
  .tq { padding: 80px 0; }
  .tq-card { grid-template-columns: 1fr; }
  .tq-card figure { padding: 32px 26px 34px; }
  .tq-card figure + figure { border-left: 0; border-top: 1px solid rgba(31,42,43,.12); }
  .tq-vis { height: 110px; } .tq-vis img { max-height: 90px; }
}
/* even out the stickers: wide ones by width, tall ones by height */
.tq-vis img { max-height: 116px; max-width: 150px; }
.tq-card figure:nth-child(1) .tq-vis img { max-width: 140px; }
.tq-card figure:nth-child(2) .tq-vis img { max-height: 124px; }
.tq-vis img.tq-th { width: 104px; height: 104px; max-width: none; background: #EDE3D3; padding: 14px; box-sizing: border-box; object-fit: contain; }

/* ---- C variations (?tq=c1..c4) ---- */
.tq-av { display: none; }
.tq-c figcaption { min-height: 0; }

/* c1: soft cream card, no border; captions with a small initial circle */
.tq-c1 { border: 0; background: #F6F2EC; }
.tq-c1 figure + figure { border-left-color: rgba(31,42,43,.09); }
.tq-c1 .tq-mark { color: #F0B429; }
.tq-c1 figcaption { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.tq-c1 .tq-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #23676A; color: #fff; font: 500 16px/1 "Outfit", sans-serif; }
.tq-c1 figure:nth-child(2) .tq-av { background: #E8503A; } .tq-c1 figure:nth-child(3) .tq-av { background: #F0B429; }
.tq-c1 .tq-who { letter-spacing: .02em; text-transform: none; font-size: 15px; color: #1F2A2B; }

/* c2: the first quote leads, wider and larger */
.tq-c2 { grid-template-columns: 1.5fr 1fr 1fr; }
.tq-c2 figure:first-child { padding: 56px 56px 52px; }
.tq-c2 figure:first-child blockquote { font-size: 31px; line-height: 1.3; }
.tq-c2 figure:first-child .tq-mark { font-size: 170px; height: 78px; }

/* c3: centred, the lines stop short of the edges, the names line up at the bottom */
.tq-c3 { border: 0; border-radius: 0; background: none; overflow: visible; }
.tq-c3 figure { text-align: center; align-items: center; padding: 10px 48px 6px; }
.tq-c3 figure + figure { border-left: 1px solid rgba(31,42,43,.14); }
.tq-c3 .tq-mark { font-size: 96px; height: 46px; }
.tq-c3 figcaption { align-items: center; }
.tqw-c3 { border-top: 1px solid rgba(31,42,43,.12); border-bottom: 1px solid rgba(31,42,43,.12); padding: 64px 0 60px; }
.tqw-c3 .tq-head { margin-bottom: 52px; }

/* c4: on mint like the grown-ups card, a big pale quote mark behind each quote */
.tq-c4 { border: 0; background: #DCEBE7; }
.tq-c4 figure { position: relative; padding-top: 70px; }
.tq-c4 figure + figure { border-left-color: rgba(35,103,106,.16); }
.tq-c4 .tq-mark { position: absolute; left: 30px; top: 30px; font-size: 260px; color: #fff; opacity: .85; height: auto; z-index: 0; }
.tq-c4 blockquote, .tq-c4 figcaption { position: relative; z-index: 1; }
.tq-c4 .tq-who { color: #23676A; }

@media (max-width: 900px) {
  .tq-c2 { grid-template-columns: 1fr; } .tq-c2 figure:first-child { padding: 32px 26px 34px; } .tq-c2 figure:first-child blockquote { font-size: 25px; }
  .tq-c3 figure + figure { border-left: 0; border-top: 1px solid rgba(31,42,43,.14); padding-top: 30px; }
}
.tq-c4 figure { padding-top: 120px; }
.tq-c4 .tq-mark { top: 22px; font-size: 220px; line-height: 1; }

/* the name on one line, who they are on the next */
.tq-who { display: flex; flex-direction: column; gap: 4px; letter-spacing: 0; text-transform: none; }
.tq-name { font: 500 17px/1.25 "Outfit", sans-serif; color: #1F2A2B; }
.tq-role { font: 400 14.5px/1.35 "Outfit", sans-serif; color: #6B7474; }
.tq-c figcaption { padding-top: 18px; border-top: 1px solid rgba(31,42,43,.1); }
.tq-c3 figcaption, .tq-c3 .tq-who { align-items: center; }

/* names signed like the founders' letter: Mackinac bold teal, who they are in the body sans below */
.tq-name { font: 700 19px/1.3 p22-mackinac-pro, "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0; color: #23676A; }
.tq-role { font: 400 15px/1.45 "Outfit", sans-serif; color: #4A5656; }
.tq-c figcaption { padding-top: 0; border-top: 0; margin-top: 6px; }

/* name-line options (compare page: .cap1..cap4 on the section) */
.cap1 .tq-who { flex-direction: column-reverse; gap: 8px; }
.cap1 .tq-name { font: 400 24px/1.2 p22-mackinac-pro, "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; color: #23676A; }
.cap1 .tq-role { font: 500 12.5px/1.3 "Outfit", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E8503A; }
.cap2 .tq-who { flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
.cap2 .tq-name, .cap2 .tq-role { font: 400 16px/1.5 "Outfit", sans-serif; color: #4A5656; }
.cap2 .tq-name::before { content: "— "; }
.cap2 .tq-name { font-weight: 500; color: #1F2A2B; }
.cap2 .tq-name::after { content: ","; }
.cap3 .tq-name { font: 400 26px/1 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #E8503A; }
.cap3 .tq-role { font: 400 16px/1.4 p22-mackinac-pro, "Fraunces", Georgia, serif; color: #23676A; }
.cap4 .tq-name { font: 600 16px/1.3 "Outfit", sans-serif; color: #23676A; }
.cap4 .tq-role { font: 500 12px/1.3 "Outfit", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E8503A; }

/* four quotes: two by two (four columns squeezed the long ones) */
.tq-card { grid-template-columns: 1fr 1fr; }
.tq-card figure { padding: 44px 48px 46px; }
.tq-card figure:nth-child(3) { border-left: 0; }
.tq-card figure:nth-child(n+3) { border-top: 1px solid rgba(31,42,43,.12); }
@media (max-width: 900px) { .tq-card { grid-template-columns: 1fr; } .tq-card figure:nth-child(n+2) { border-left: 0; border-top: 1px solid rgba(31,42,43,.12); } }

/* one big quote on the left, three smaller ones stacked on the right */
.tq-card { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto auto; }
.tq-card figure { padding: 34px 44px 34px; gap: 14px; border-top: 0; border-left: 0; }
.tq-card figure:first-child { grid-row: 1 / 4; padding: 64px 64px 60px; justify-content: space-between; background: #fff; }
.tq-card figure:first-child blockquote { font-size: clamp(32px, 3vw, 44px); line-height: 1.2; flex: 0 1 auto; }
.tq-card figure:first-child .tq-mark { font-size: 200px; height: 90px; }
.tq-card figure:first-child figcaption { margin-top: auto; }
.tq-card figure:first-child .tq-name { font-size: 18px; }
.tq-card figure:not(:first-child) { border-left: 1px solid rgba(31,42,43,.12); }
.tq-card figure:nth-child(n+3) { border-top: 1px solid rgba(31,42,43,.12); }
.tq-card figure:not(:first-child) blockquote { font-size: 19px; line-height: 1.45; }
.tq-card figure:not(:first-child) .tq-mark { font-size: 80px; height: 30px; }
@media (max-width: 900px) {
  .tq-card { grid-template-columns: 1fr; }
  .tq-card figure:first-child { grid-row: auto; padding: 36px 26px; }
  .tq-card figure:not(:first-child) { border-left: 0; border-top: 1px solid rgba(31,42,43,.12); padding: 30px 26px; }
}