/* ---------- Shared section system ----------
   Every section: a quiet label with a hairline, an optional grey serif statement, then content.
   Spacing scale: 120px between sections on desktop, 88px on tablet, 72px on phones. */
:root { --section-gap: 120px; --label-gap: 28px; --content-gap: 40px; --grid-gap: 24px; }
@media (max-width: 991px) { :root { --section-gap: 88px; --grid-gap: 20px; } }
@media (max-width: 767px) { :root { --section-gap: 72px; --content-gap: 28px; --grid-gap: 20px; } }

.section-label {
  display: flex !important; width: 100%; align-items: center; gap: 20px; margin: 0 0 var(--label-gap) !important;
  font: 500 15px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--silver) !important;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .18; }

.section-statement {
  font-family: var(--serif) !important; font-weight: 400 !important; font-optical-sizing: none; font-variation-settings: "opsz" 24;
  font-size: 26px !important; line-height: 1.4 !important; letter-spacing: -0.01em !important;
  max-width: none; width: 100%; margin: 0 !important; color: var(--grey) !important; opacity: 1 !important;
}
@media (max-width: 991px) { .section-statement { font-size: 23px !important; } }
@media (max-width: 767px) { .section-statement { font-size: 20px !important; line-height: 1.45 !important; } }

/* one rhythm between sections */
.bg-dark-blk.section-std { padding: var(--section-gap) 0 0 !important; }
.work-cards-section { padding-bottom: 0 !important; }
.reviews-section { padding: var(--section-gap) 0 0 !important; }
.reviews-section .margin-bottom-72px { margin-bottom: 0; }
.reviews-section .w-tabs { margin-top: 0; }

/* ---------- Resources: same card language as the projects, three to a row ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--content-gap); }
.res-card { display: flex; flex-direction: column; padding: 14px 14px 22px; border-radius: 20px; background: var(--wc-card-bg); border: 1px solid var(--wc-card-border); transition: border-color .3s; }
.res-card:hover { border-color: color-mix(in srgb, var(--silver) 22%, var(--wc-card-border)); }
.rc-media { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--wc-media-bg); }
.rc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.rc-media:hover img { transform: scale(1.03); }
.rc-kind { margin: 18px 6px 0; font: 500 13px/1 var(--sans); color: var(--grey); }
.rc-title { margin: 8px 6px 0; font-family: var(--serif) !important; font-weight: 400 !important; font-variation-settings: "opsz" 24; font-size: 21px !important; line-height: 1.3 !important; }
.rc-title a { color: var(--silver) !important; text-decoration: none; }
.rc-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: auto 6px 0; padding-top: 18px; }
.rc-stat { font: 400 14px/1 var(--sans); color: var(--grey); }
.rc-stat b { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 24; font-size: 20px; color: var(--silver); margin-right: 2px; }
@media (max-width: 991px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kind words tabs: same pill language as the nav ---------- */
.reviews-section .tabs-menu-2 { margin: 0 0 var(--content-gap) !important; justify-content: flex-start !important; padding: 0 !important; gap: 8px; }
.reviews-section .tabs-links { margin: 0 !important; padding: 10px 18px !important; border-radius: 999px !important; font: 500 14px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ---------- Motto ---------- */
.motto { padding-top: var(--section-gap); }
.motto-quote { margin: 0; padding: 0; border: 0; }
.motto-quote p { margin: 0; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 24; font-size: 56px; line-height: 1.12; letter-spacing: -0.012em; color: var(--silver); }
.motto-quote footer { margin-top: 18px; font: 500 15px/1 var(--sans); color: var(--grey); }
.motto-quote footer::before { content: "— "; }
@media (max-width: 991px) { .motto-quote p { font-size: 46px; } }
@media (max-width: 767px) { .motto-quote p { font-size: 34px; } }

/* footer follows the same rhythm */
.mt-84 { margin-top: 0 !important; }
.site-foot { padding-top: var(--section-gap) !important; }
.bg-dark-blk.section-std .about_section_reading { padding: 0 !important; }
.reviews-section .normal-div { padding: 0 !important; }
.home-section_header.hero-simple { padding-bottom: var(--section-gap) !important; }
p.hero-intro { margin-bottom: 0 !important; }
#work.about_section_header_2 { padding-top: 0 !important; }
#work .left-div { margin-top: 0 !important; }

/* ---------- Kind words: quotes in the serif, tidy attribution, quiet arrows ---------- */
.reviews-section .testimonial-slider { padding-bottom: 72px !important; }
.reviews-section .quaotation { font-family: var(--serif) !important; font-size: 72px !important; line-height: .8 !important; color: var(--grey) !important; margin: 0 !important; }
.reviews-section .footer-hed-center {
  font-family: var(--serif) !important; font-weight: 400 !important; font-variation-settings: "opsz" 24;
  font-size: 20px !important; line-height: 1.55 !important; letter-spacing: -0.005em; color: var(--silver) !important; white-space: normal;
}
.reviews-section .mt-40 { margin-top: 24px !important; }
.reviews-section .testimonal-headdig { font: 600 15px/1.4 var(--sans) !important; color: var(--silver) !important; }
.reviews-section .testimonal-disc { font: 400 14px/1.4 var(--sans) !important; color: var(--grey) !important; margin: 2px 0 0; }
.reviews-section .icon-wrapper-link { background: transparent !important; border: 1px solid color-mix(in srgb, var(--silver) 22%, transparent) !important; opacity: 1 !important; transition: border-color .2s !important; }
.reviews-section .icon-wrapper-link:hover { border-color: var(--silver) !important; }
@media (max-width: 767px) {
  .reviews-section .footer-hed-center { font-size: 18px !important; }
  .reviews-section .quaotation { font-size: 56px !important; }
}
/* Work follows the same pattern as Resources: label, statement, then the cards */
.work-cards-section { padding-top: var(--content-gap) !important; }
.work-list { gap: var(--grid-gap) !important; }