/* Shared "who reads it" section of the resource pages (partials/who.blade.php) */
.rw { padding: 88px 0; background: #F2FAF6 url("../img/resources/terms-curves.svg") center / cover no-repeat; color: #1C2522; }
.rw-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.rw-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #00744A; }
.rw-eyebrow::before, .rw-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: #00B26B; }
.rw-title { margin: 0 0 20px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #0B2A1F; }
.rw-lead { max-width: 600px; margin: 0 auto; font-size: 17px; line-height: 1.6; color: #4A5550; }

.rw-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.rw-card, .rw-quote, .rw-rate { border: 1px solid rgba(11,42,31,.07); background: #fff; box-shadow: 0 12px 32px -14px rgba(11,42,31,.16); }
.rw-card { display: flex; flex-direction: column-reverse; gap: 20px; padding: 24px; border-radius: 20px; }
.rw-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.rw-tag { padding: 4px 12px; border-radius: 999px; background: #DDF3E8; color: #00744A; font-size: 13px; font-weight: 600; line-height: 1.4; }
.rw-card__name { margin: 14px 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; color: #0B2A1F; }
.rw-card__text { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4A5550; }
.rw-card__link { margin: auto 0 0; font-size: 15px; font-weight: 600; color: #4A5550; }
.rw-card__link a { color: #00744A; text-decoration: none; }
.rw-card__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rw a:focus-visible { outline: 2px solid #00744A; outline-offset: 3px; border-radius: 6px; }

/* logo tile: soft tint of the brand colour, a gentle curve accent, the logo contained and centred */
.rw-logo { --b: #7FA392; flex: none; position: relative; display: grid; place-items: center; overflow: hidden; height: 112px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--b) 12%, #fff); }
.rw-logo::before { content: ""; position: absolute; right: -36px; top: -44px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--b) 14%, transparent); }
.rw-logo::after { content: ""; position: absolute; left: -30px; bottom: -52px; width: 110px; height: 110px; border-radius: 50%; border: 18px solid color-mix(in srgb, var(--b) 10%, transparent); }
.rw-logo img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.rw-logo[data-brand="motionlasers"] { --b: #00B86B; } .rw-logo[data-brand="lgxnds"] { --b: #1B8C7D; }
.rw-logo[data-brand="truewholesale"] { --b: #3961A8; } .rw-logo[data-brand="the-vault"] { --b: #44CC9B; }
.rw-logo[data-brand="olis"] { --b: #FDC544; } .rw-logo[data-brand="hauzd"] { --b: #7FA392; }
.rw-logo[data-brand="acs"] { --b: #004D43; } .rw-logo[data-brand="proviscommerce"] { --b: #8769DA; }
.rw-logo[data-brand="gyanee"] { --b: #4D74FF; } .rw-logo[data-brand="chitra"] { --b: #A77310; }

.rw-quote { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px 28px; margin: 24px 0 0; padding: 28px 24px; border-radius: 20px; }
.rw-quote__mark { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; padding-top: 14px; border-radius: 50%; background: #DDF3E8; color: #00744A; font: 700 56px/1 Georgia, serif; }
.rw-quote__text { margin: 0; font-size: 18px; line-height: 1.6; color: #2B3531; }
.rw-quote__by { display: grid; gap: 2px; font-size: 14px; color: #4A5550; }
.rw-quote__by b { font-size: 16px; color: #0B2A1F; }

.rw-rate { list-style: none; margin: 24px 0 0; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; background: #F7FCF9; }
.rw-rate li { min-width: 0; }
.rw-rate__in { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
a.rw-rate__in:hover .rw-rate__txt b { text-decoration: underline; text-underline-offset: 3px; }
.rw-rate__logo { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.rw-rate__logo--ic { display: grid; place-items: center; background: #DDF3E8; }
.rw-rate__txt { display: grid; gap: 1px; font-size: 14px; line-height: 1.4; color: #4A5550; }
.rw-rate__txt b { font-size: 15px; color: #0B2A1F; }
.rw-stars { display: flex; gap: 2px; margin-top: 2px; }
.rw-rate__ok { margin-top: 2px; }

@media (min-width: 700px) {
  .rw-card { flex-direction: row; align-items: stretch; gap: 24px; padding: 28px; }
  .rw-card__name { font-size: 26px; }
  .rw-logo { width: 140px; height: auto; min-height: 170px; }
  .rw-quote { padding: 32px 40px; gap: 8px 36px; }
  .rw-quote__text { font-size: 20px; }
}
@media (min-width: 1024px) {
  .rw-cards[data-n="4"] { grid-template-columns: 1fr 1fr; }
  .rw-cards[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
  .rw-cards[data-n="3"] .rw-card { flex-direction: column-reverse; padding: 24px; }
  .rw-cards[data-n="3"] .rw-logo { width: auto; min-height: 0; height: 130px; }
  .rw-cards[data-n="3"] .rw-card__name { font-size: 24px; }
  .rw-rate { grid-template-columns: repeat(4, 1fr); border-radius: 999px; padding: 8px 16px; }
  .rw-rate li + li { border-left: 1px solid #DCE9E2; }
  .rw-rate__in { justify-content: center; }
}
@media (max-width: 639px) {
  .rw { padding: 64px 0; }
  .rw-head { margin-bottom: 32px; }
  .rw-eyebrow { font-size: 12px; letter-spacing: .1em; gap: 8px; }
  .rw-eyebrow::before, .rw-eyebrow::after { width: 16px; }
  .rw-quote { grid-template-columns: 1fr; padding: 24px 20px; }
  .rw-quote__mark { grid-row: auto; width: 52px; height: 52px; font-size: 46px; padding-top: 12px; }
  .rw-rate__in { padding: 12px 8px; gap: 10px; }
}

/* Fit one screen height on desktop, on the site's corner radius scale (16px cards and panels, 12px tiles) */
.rw-card, .rw-quote { border-radius: 16px; }
.rw-logo { border-radius: 12px; }
@media (min-width: 1024px) {
  .rw { padding: clamp(28px, 5vh, 56px) 0; }
  .rw-head { margin-bottom: clamp(16px, 2.6vh, 28px); }
  .rw-eyebrow { margin-bottom: 8px; }
  .rw-title { margin-bottom: 8px; font-size: clamp(28px, 4.4vh, 44px); }
  .rw-lead { font-size: 15.5px; line-height: 1.5; }
  .rw-cards { gap: 16px; }
  .rw-cards[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
  .rw-cards[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
  .rw-cards .rw-card, .rw-cards[data-n="3"] .rw-card { flex-direction: column-reverse; gap: 12px; padding: 16px; }
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { width: auto; min-height: 0; height: clamp(56px, 9vh, 84px); padding: 10px 14px; }
  .rw-logo img { max-height: clamp(30px, 5vh, 46px); }
  .rw-tag { font-size: 12px; padding: 3px 10px; }
  .rw-card__name, .rw-cards[data-n="3"] .rw-card__name { margin: 8px 0 4px; font-size: 18px; }
  .rw-card__text { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
  .rw-card__link { font-size: 14px; }
  .rw-quote { margin-top: clamp(12px, 2vh, 20px); padding: clamp(14px, 2.2vh, 22px) 32px; gap: 4px 24px; }
  .rw-quote__mark { width: 48px; height: 48px; padding-top: 10px; font-size: 42px; }
  .rw-quote__text { font-size: 16px; line-height: 1.55; }
  .rw-quote__by { font-size: 13px; }
  .rw-quote__by b { font-size: 14.5px; }
  .rw-rate { margin-top: clamp(12px, 2vh, 20px); padding: 4px 12px; }
  .rw-rate__in { padding: clamp(6px, 1.2vh, 12px) 12px; }
  .rw-rate__logo { width: 32px; height: 32px; }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .rw-head { margin-bottom: 14px; }
  .rw-lead { font-size: 14.5px; }
  .rw-cards .rw-card, .rw-cards[data-n="3"] .rw-card { gap: 10px; padding: 14px; }
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { height: 52px; }
  .rw-card__name, .rw-cards[data-n="3"] .rw-card__name { margin: 6px 0 2px; font-size: 17px; }
  .rw-card__text { margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; }
  .rw-quote { padding-block: 12px; }
  .rw-quote__text { font-size: 15px; line-height: 1.5; }
}
/* Logos keep breathing room in the shorter tiles; the ratings strip uses the panel radius like the cards */
.rw-rate { border-radius: 16px; }
@media (min-width: 1024px) {
  .rw-logo img { max-width: 78%; }
  .rw-rate { border-radius: 16px; }
}
/* The whole section (not just its box) fits under the sticky header */
@media (min-width: 1024px) {
  .rt, .rw { padding: clamp(18px, 3.2vh, 40px) 0; }
  .rt-title, .rw-title { font-size: clamp(26px, 4vh, 40px); }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .rt-head, .rw-head { margin-bottom: 12px; }
  .rt-eyebrow, .rw-eyebrow { margin-bottom: 6px; }
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { height: 48px; }
  .rw-quote { margin-top: 12px; padding-block: 10px; }
  .rw-rate { margin-top: 12px; }
  .rw-rate__in { padding-block: 6px; }
  .rw-stars { margin-top: 0; }
}
@media (min-width: 1024px) and (max-height: 740px) {
  .rt, .rw { padding-block: 14px; }
  .rt-lead, .rw-lead { font-size: 14px; line-height: 1.45; }
  .rt-list li { font-size: 13.5px; }
  .rw-card__text { font-size: 13px; }
}

/* Logos never overflow their tile; Hauzd tile in its brand teal */
@media (min-width: 1024px) {
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { padding: 8px 14px; }
  .rw-logo img { max-height: 100%; }
}
.rw-logo[data-brand="hauzd"] { --b: #16779D; }

/* Explicit logo height inside the tile (a % max-height does not resolve in the grid cell) */
@media (min-width: 1024px) {
  .rw-cards .rw-logo img { max-height: calc(clamp(56px, 9vh, 84px) - 16px); }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .rw-cards .rw-logo img { max-height: 32px; }
}

/* Section spacing = the site's section rhythm (.ec-sec: 64 / 80 / 104px), like every other section */
.rt, .rw { padding-block: var(--ec-sec-y, 80px); }

/* Inner spacing: comfortable again now that the section uses the site's section rhythm (all screen heights) */
@media (min-width: 1024px) {
  .rw-head { margin-bottom: 40px; }
  .rw-eyebrow { margin-bottom: 14px; }
  .rw-title { margin-bottom: 14px; font-size: clamp(32px, 3.2vw, 44px); }
  .rw-lead { font-size: 16px; line-height: 1.6; }
  .rw-cards { gap: 20px; }
  .rw-cards .rw-card, .rw-cards[data-n="3"] .rw-card { gap: 16px; padding: 20px; }
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { height: 76px; padding: 12px 16px; }
  .rw-cards .rw-logo img { max-height: 48px; }
  .rw-card__name, .rw-cards[data-n="3"] .rw-card__name { margin: 12px 0 6px; font-size: 19px; }
  .rw-card__text { margin-bottom: 16px; font-size: 14.5px; line-height: 1.55; }
  .rw-quote { margin-top: 24px; padding: 24px 36px; gap: 6px 28px; }
  .rw-quote__mark { width: 56px; height: 56px; padding-top: 12px; font-size: 48px; }
  .rw-quote__text { font-size: 17px; line-height: 1.6; }
  .rw-rate { margin-top: 24px; padding: 8px 16px; }
  .rw-rate__in { padding-block: 14px; }
  .rw-stars { margin-top: 2px; }
}

/* (terms rules repeated here: this file loads after resource-terms.css and its older shared .rt rules would win) */
@media (min-width: 1024px) {
  .rt-head { margin-bottom: 40px; }
  .rt-eyebrow { margin-bottom: 14px; }
  .rt-title { margin-bottom: 14px; font-size: clamp(32px, 3.2vw, 44px); }
  .rt-lead { font-size: 16px; line-height: 1.6; }
  .rt-card { padding: 24px 28px; }
  .rt-card__h { margin-bottom: 16px; }
  .rt-list { gap: 12px; }
  .rt-list li { font-size: 15px; line-height: 1.5; }
  .rt-strip { margin-top: 28px; padding: 8px; }
  .rt-strip__item, .rt-strip[data-n="4"] .rt-strip__item { padding: 18px 20px; gap: 16px; }
  .rt-strip__d { font-size: 14px; line-height: 1.5; }
  .rt-tip { margin-top: 16px; }
}

/* Phones: the client cards become a swipe slider (next card peeking in), like the service pages' "Different" cards */
@media (max-width: 699.98px) {
  .rw-cards { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rw-cards::-webkit-scrollbar { display: none; }
  .rw-cards > .rw-card { flex: 0 0 82%; scroll-snap-align: start; }
  .rw-cards:focus-visible { outline: 2px solid #00744A; outline-offset: 2px; border-radius: 16px; }
}

/* Logo tiles: white with the brand colour as a soft border and a top line (no tinted fill, no circles), so every logo reads clearly */
.rw-logo { background: #fff; border: 1px solid color-mix(in srgb, var(--b) 28%, #E3ECE7); box-shadow: inset 0 3px 0 var(--b); }
.rw-logo::before, .rw-logo::after { display: none; }
/* logos that only exist as light-grey files are shown in a deep charcoal; colour logos stay as they are */
.rw-logo[data-brand="chitra"] img, .rw-logo[data-brand="gyanee"] img, .rw-logo[data-brand="lgxnds"] img,
.rw-logo[data-brand="motionlasers"] img, .rw-logo[data-brand="the-vault"] img { filter: grayscale(1) brightness(.42) contrast(1.15); }