/* site palette */
html:root {
--bg: #F5F3EC;
--surface: #FFFFFF;
--surface-alt: #F3F0E7;
--text: #221F13;
--text-muted: #6D6755;
--border: #E4E1D8;
--primary: #17C68E;
--primary-hover: #13A677;
--on-primary: #111111;
--primary-text: #0E7453;
--accent: #1E2926;
--on-accent: #FFFFFF;
--accent-text: #1E2926;
--dark-band: #18160E;
--on-dark: #FFFFFF;
--on-dark-muted: #C3C0B6;
--brand-btn-bg: #111111;
--brand-btn-text: #17C68E;
--section-alt-bg: #F3F0E7;
--dark-band-bg: #18160E;
--brand-band-bg: #17C68E;
--hero-bg: #18160E;
}
html:root {
--bs-primary: #17C68E;
--bs-primary-rgb: 23, 198, 142;
--bs-link-color: #0E7453;
--bs-link-color-rgb: 14, 116, 83;
--bs-link-hover-color: #13A677;
--mdb-primary: #17C68E;
--mdb-primary-rgb: 23, 198, 142;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover);
--bs-btn-hover-border-color: var(--primary-hover);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-active-bg: var(--primary-hover);
--bs-btn-active-border-color: var(--primary-hover);
--bs-btn-active-color: var(--on-primary);
background-color: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--primary-text);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--on-primary);
color: var(--primary-text);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: var(--on-primary);
}
.text-primary,
.link-primary {
color: var(--primary-text) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary {
color: var(--on-primary) !important;
}
/* /site palette */
body {
font-family: var(--font_family_base, 'Asap', sans-serif);
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.text-muted {
color: var(--text-muted) !important;
}
.bj-section {
background-color: var(--bg);
padding: 80px 0;
position: relative;
}
.bj-section-alt {
background-color: var(--section-alt-bg, var(--surface-alt));
padding: 80px 0;
position: relative;
}
.bj-section-dark {
background-color: var(--dark-band-bg, var(--dark-band));
color: var(--on-dark);
padding: 80px 0;
position: relative;
}
.bj-section-dark .text-muted,
.bj-on-dark .text-muted {
color: var(--on-dark-muted) !important;
}
.bj-section-brand {
background-color: var(--brand-band-bg, var(--primary));
color: var(--on-primary);
padding: 70px 0;
position: relative;
}
.bj-on-dark {
color: var(--on-dark);
}
.bj-on-dark a:not(.bj-btn):not(.bj-btn-alt) {
color: var(--on-dark);
}
.bj-on-dark h1,
.bj-on-dark h2,
.bj-on-dark h3,
.bj-on-dark h4,
.bj-section-dark h1,
.bj-section-dark h2,
.bj-section-dark h3,
.bj-section-dark h4 {
color: var(--on-dark);
}
.bj-on-dark .bj-title,
.bj-section-dark .bj-title {
color: var(--on-dark);
}
.bj-on-dark .bj-eyebrow,
.bj-section-dark .bj-eyebrow {
color: var(--primary);
}
.bj-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 999px;
padding: 12px 28px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bj-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
}
.bj-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: transparent;
color: var(--primary-text);
border: 1.5px solid var(--border);
border-radius: 999px;
padding: 10px 24px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bj-btn-alt:hover {
background-color: var(--surface-alt);
border-color: var(--text);
color: var(--text);
}
.bj-section-brand .bj-btn {
background-color: var(--brand-btn-bg, #111111);
color: var(--brand-btn-text, var(--primary));
}
.bj-section-brand .bj-btn:hover {
background-color: var(--accent, #1E2926);
color: #FFFFFF;
}
.bj-section-brand .bj-btn-alt {
border-color: var(--on-primary);
color: var(--on-primary);
}
.bj-section-brand .bj-btn-alt:hover {
background-color: rgba(0, 0, 0, 0.08);
color: var(--on-primary);
}
.bj-section-dark .bj-btn-alt,
.bj-on-dark .bj-btn-alt {
border-color: var(--on-dark);
color: var(--on-dark);
}
.bj-section-dark .bj-btn-alt:hover,
.bj-on-dark .bj-btn-alt:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--on-dark);
color: var(--on-dark);
}
.bj-card {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.06);
padding: 24px;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.bj-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(34, 31, 19, 0.1);
}
.bj-section-dark .bj-card,
.bj-on-dark .bj-card {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.bj-section-dark .bj-card h1,
.bj-section-dark .bj-card h2,
.bj-section-dark .bj-card h3,
.bj-section-dark .bj-card h4,
.bj-section-dark .bj-card p,
.bj-section-dark .bj-card span,
.bj-on-dark .bj-card h1,
.bj-on-dark .bj-card h2,
.bj-on-dark .bj-card h3,
.bj-on-dark .bj-card h4,
.bj-on-dark .bj-card p,
.bj-on-dark .bj-card span {
color: var(--text);
}
.bj-section-dark .bj-card .text-muted,
.bj-on-dark .bj-card .text-muted {
color: var(--text-muted) !important;
}
.bj-media {
width: 100%;
aspect-ratio: 16 / 10;
flex-shrink: 0;
flex-grow: 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 20px;
}
.bj-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bj-eyebrow {
display: inline-block;
font-size: 13px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary-text);
text-decoration: underline;
text-underline-offset: 6px;
margin-bottom: 12px;
}
.bj-title {
font-size: 36px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 16px;
}
.bj-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
background-color: var(--surface-alt);
color: var(--text);
border: 1px solid var(--border);
}
.bj-badge-primary {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.bj-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 8px;
background-color: var(--surface-alt);
border: 1px solid var(--border);
color: var(--primary-text);
font-size: 18px;
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.bj-section,
.bj-section-alt,
.bj-section-dark {
padding: 50px 0;
}
.bj-section-brand {
padding: 45px 0;
}
.bj-card {
padding: 18px;
}
.bj-title {
font-size: 28px;
line-height: 1.3;
}
}
/* ===== header ===== */
.qs-header {
position: relative;
width: 100%;
z-index: 1020;
}
.qs-header .qs-header__ticker {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
min-height: 38px;
padding: 6px 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}
.qs-header .qs-header__ticker-track {
flex-wrap: wrap;
text-align: center;
}
.qs-header .qs-header__ticker-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.qs-header .qs-header__ticker-divider {
color: rgba(17, 17, 17, 0.4);
font-size: 14px;
}
.qs-header .qs-header__nav {
background-color: var(--bg, #F5F3EC);
border-bottom: 1px solid var(--border, #E4E1D8);
padding-top: 14px;
padding-bottom: 14px;
}
.qs-header .qs-header__logo-img {
width: 44px;
height: 44px;
max-width: 44px;
object-fit: contain;
display: block;
}
.qs-header .qs-header__brand-title {
font-size: 20px;
font-weight: 800;
color: var(--text, #221F13);
letter-spacing: -0.01em;
line-height: 1.2;
}
.qs-header .qs-header__brand-sub {
color: var(--primary-text, #0E7453);
font-weight: 700;
}
.qs-header .qs-header__menu {
gap: 8px;
}
.qs-header .qs-header__nav-link {
color: var(--text, #221F13);
font-size: 15px;
font-weight: 600;
padding: 8px 12px;
border-radius: 6px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.qs-header .qs-header__nav-link:hover,
.qs-header .qs-header__nav-link:focus {
color: var(--primary-text, #0E7453);
background-color: var(--surface-alt, #F3F0E7);
}
.qs-header .qs-header__btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
font-size: 14px;
font-weight: 700;
padding: 10px 24px;
border-radius: 999px;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
border: none;
white-space: nowrap;
}
.qs-header .qs-header__btn-action:hover,
.qs-header .qs-header__btn-action:focus {
background-color: var(--brand-btn-bg, #111111);
color: var(--on-accent, #FFFFFF);
}
.qs-header .qs-header__toggler {
border: 1.5px solid var(--border, #E4E1D8);
background-color: var(--surface, #FFFFFF);
padding: 6px 12px;
border-radius: 8px;
}
.qs-header .qs-header__toggler:focus {
box-shadow: none;
outline: 2px solid var(--primary, #17C68E);
}
.qs-header .qs-header__toggler-icon {
font-size: 18px;
color: var(--text, #221F13);
}
@media (max-width: 991.98px) {
.qs-header .qs-header__ticker {
min-height: 0;
padding: 10px 0;
font-size: 12px;
}
.qs-header .qs-header__ticker-track {
flex-direction: column;
align-items: center;
gap: 4px;
}
.qs-header .qs-header__ticker-item {
white-space: normal;
text-align: center;
}
.qs-header .qs-header__ticker-divider,
.qs-header .qs-header__ticker-item:last-of-type {
display: none;
}
.qs-header #headerNavbarContent {
background-color: var(--surface, #FFFFFF);
padding: 20px;
border-radius: 12px;
margin-top: 14px;
border: 1px solid var(--border, #E4E1D8);
box-shadow: 0 10px 25px rgba(34, 31, 19, 0.08);
}
.qs-header .qs-header__nav-link {
padding: 10px 14px;
border-bottom: 1px solid var(--surface-alt, #F3F0E7);
}
.qs-header .qs-header__actions {
width: 100%;
padding-top: 8px;
}
.qs-header .qs-header__btn-action {
width: 100%;
}
}
@media (max-width: 575.98px) {
.qs-header .qs-header__ticker-track {
justify-content: center;
font-size: 11px;
}
.qs-header .qs-header__brand-title {
font-size: 18px;
}
}
/* ===== hero ===== */
.hero-block {
background-color: var(--dark-band);
color: var(--on-dark);
min-height: 640px;
}
.hero-block__ornament {
position: absolute;
top: 10%;
width: 140px;
height: 320px;
pointer-events: none;
opacity: 0.35;
z-index: 1;
}
.hero-block__ornament--left {
left: 0;
}
.hero-block__ornament--right {
right: 0;
}
.hero-block__eyebrow {
color: var(--primary) !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 6px;
}
.hero-block__title {
color: var(--on-dark);
font-size: 40px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.015em;
}
.hero-block__lead {
color: var(--on-dark-muted);
font-size: 17px;
line-height: 1.6;
max-width: 720px;
}
.hero-block__btn {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 999px;
padding: 12px 28px;
font-weight: 700;
text-decoration: none;
border: 1.5px solid var(--primary);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hero-block__btn:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.hero-block__btn-alt {
background-color: transparent;
color: var(--on-dark);
border-radius: 999px;
padding: 12px 28px;
font-weight: 600;
text-decoration: none;
border: 1.5px solid var(--border);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-block__btn-alt:hover {
background-color: var(--surface-alt);
border-color: var(--surface-alt);
color: var(--text);
}
.hero-block__media-stage {
max-width: 640px;
}
.hero-block__photo-frame {
background-color: var(--primary);
padding: 8px;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.hero-block__img {
width: 100%;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
border-radius: 12px;
display: block;
}
.hero-block__float-card {
position: absolute;
background-color: var(--surface);
color: var(--text);
border-radius: 12px;
padding: 12px 18px;
z-index: 2;
border: 1px solid var(--border);
min-width: 190px;
}
.hero-block__float-card--top {
top: -20px;
right: -16px;
}
.hero-block__float-card--bottom {
bottom: -20px;
left: -16px;
}
.hero-block__stars {
font-size: 13px;
color: #ffb703;
}
.hero-block__card-score {
font-size: 15px;
color: var(--text);
}
.hero-block__card-metric {
font-size: 20px;
color: var(--primary-text);
}
.hero-block__card-label {
font-size: 12px;
color: var(--text-muted);
display: block;
margin-top: 2px;
}
.hero-block__metric-badge {
font-size: 11px;
background-color: var(--surface-alt);
color: var(--primary-text);
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.hero-block__feature-box {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(228, 225, 216, 0.15);
border-radius: 12px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.hero-block__feature-box:hover {
transform: translateY(-3px);
border-color: var(--primary);
}
.hero-block__feature-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background-color: var(--surface-alt);
border: 1px solid var(--border);
color: var(--primary-text);
font-size: 18px;
}
.hero-block__feature-title {
font-size: 15px;
font-weight: 700;
color: var(--on-dark);
}
.hero-block__feature-desc {
font-size: 13px;
color: var(--on-dark-muted);
line-height: 1.4;
}
@media (max-width: 767px) {
.hero-block__title {
font-size: 18px;
hyphens: auto;
}
.hero-block__feature-title {
font-size: 14px;
}
.hero-block__lead {
font-size: 14px;
}
.hero-block__float-card--top {
position: static;
margin-bottom: 12px;
width: 100%;
}
.hero-block__float-card--bottom {
position: static;
margin-top: 12px;
width: 100%;
}
.hero-block__media-stage {
padding: 0 4px;
}
}
/* ===== key_principle ===== */
.bj-key-principle {
position: relative;
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
overflow-x: hidden;
}
.bj-key-principle__arcs {
position: absolute;
width: 220px;
height: 220px;
pointer-events: none;
opacity: 0.25;
z-index: 1;
}
.bj-key-principle__arcs--left {
top: -40px;
left: -40px;
}
.bj-key-principle__arcs--right {
bottom: -40px;
right: -40px;
}
.bj-key-principle__arcs span {
position: absolute;
border: 1.5px solid var(--on-primary, #111111);
border-radius: 50%;
display: block;
}
.bj-key-principle__arcs span:nth-child(1) {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bj-key-principle__arcs span:nth-child(2) {
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
}
.bj-key-principle__arcs span:nth-child(3) {
width: 50%;
height: 50%;
top: 25%;
left: 25%;
}
.bj-key-principle .bj-eyebrow {
color: var(--on-primary, #111111);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: underline;
text-underline-offset: 6px;
font-size: 13px;
}
.bj-key-principle__title {
color: var(--on-primary, #111111);
font-weight: 800;
font-size: 36px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.bj-key-principle__lead {
color: #1E2926;
font-size: 18px;
line-height: 1.6;
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
.bj-key-principle__tab-btn {
background: rgba(17, 17, 17, 0.1);
color: var(--on-primary, #111111);
border: 1.5px solid rgba(17, 17, 17, 0.25);
border-radius: 999px;
padding: 10px 22px;
font-weight: 700;
font-size: 14px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.bj-key-principle__tab-btn:hover {
background: rgba(17, 17, 17, 0.2);
color: var(--on-primary, #111111);
}
.bj-key-principle__tab-btn.is-active {
background: #111111;
color: #17C68E;
border-color: #111111;
}
.bj-key-principle__tab-panel[hidden] {
display: none;
}
.bj-key-principle__phase-card {
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(17, 17, 17, 0.12);
border-radius: 14px;
padding: 22px;
height: 100%;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bj-key-principle__phase-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(17, 17, 17, 0.08);
}
.bj-key-principle__phase-card.is-warning {
background: rgba(243, 240, 231, 0.95);
border-color: rgba(30, 41, 38, 0.2);
}
.bj-key-principle__phase-num {
font-size: 13px;
font-weight: 800;
color: #0E7453;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.bj-key-principle__phase-card.is-warning .bj-key-principle__phase-num {
color: #8F3A22;
}
.bj-key-principle__phase-heading {
font-size: 18px;
font-weight: 700;
color: #221F13;
margin-bottom: 8px;
overflow-wrap: anywhere;
}
.bj-key-principle__phase-text {
font-size: 14px;
color: #6D6755;
line-height: 1.55;
margin-bottom: 0;
}
.bj-key-principle__card {
background: #FFFFFF;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(34, 31, 19, 0.08);
border: 1px solid #E4E1D8;
overflow: hidden;
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.bj-key-principle__card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(34, 31, 19, 0.14);
}
.bj-key-principle__card-top {
height: 180px;
position: relative;
}
.bj-key-principle__card-top--grad-1 {
background: linear-gradient(135deg, #17C68E 0%, #0E7453 100%);
}
.bj-key-principle__card-top--grad-2 {
background: linear-gradient(135deg, #1E2926 0%, #111111 100%);
}
.bj-key-principle__card-top--grad-3 {
background: linear-gradient(135deg, #3A4743 0%, #18160E 100%);
}
.bj-key-principle__card-top .bj-media img {
object-fit: cover;
width: 100%;
height: 100%;
mix-blend-mode: overlay;
opacity: 0.85;
transition: transform 0.3s ease;
}
.bj-key-principle__card:hover .bj-media img {
transform: scale(1.04);
}
.bj-key-principle__card-badge {
position: absolute;
bottom: 12px;
left: 16px;
right: 16px;
z-index: 2;
pointer-events: none;
}
.bj-key-principle__arrows {
color: #FFFFFF;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
}
.bj-key-principle__card-body {
padding: 22px;
}
.bj-key-principle__meta {
font-size: 13px;
color: #6D6755;
font-weight: 500;
}
.bj-key-principle__card-title {
font-size: 20px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 8px;
}
.bj-key-principle__title-link {
color: #221F13;
text-decoration: none;
transition: color 0.2s ease;
overflow-wrap: anywhere;
}
.bj-key-principle__title-link:hover {
color: #0E7453;
}
.bj-key-principle__card-desc {
font-size: 14px;
line-height: 1.6;
color: #6D6755;
overflow-wrap: anywhere;
}
.bj-key-principle .bj-btn {
background: #111111;
color: #17C68E;
border-radius: 999px;
padding: 12px 24px;
font-weight: 700;
font-size: 14px;
border: 1.5px solid #111111;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bj-key-principle .bj-btn:hover {
background: #1E2926;
color: #FFFFFF;
border-color: #1E2926;
}
@media (max-width: 767px) {
.bj-key-principle__title {
font-size: 16px;
line-height: 1.25;
hyphens: auto;
}
.bj-key-principle__phase-heading {
font-size: 14px;
line-height: 1.3;
hyphens: auto;
}
.bj-key-principle__card-title {
font-size: 14px;
line-height: 1.3;
hyphens: auto;
}
.bj-key-principle__lead {
font-size: 14px;
line-height: 1.5;
}
.bj-key-principle__card-top {
height: 160px;
}
.bj-key-principle__phase-card {
padding: 16px;
}
.bj-key-principle__card-body {
padding: 16px;
}
}
/* ===== glossary ===== */
.qs-glossary-section {
padding-top: 5rem;
padding-bottom: 5rem;
}
.qs-glossary-lead {
color: var(--text-muted);
font-size: 1.125rem;
line-height: 1.6;
margin-left: auto;
margin-right: auto;
max-width: 680px;
}
.qs-filter-pills {
margin-bottom: 0.5rem;
}
.qs-filter-btn {
border: 1.5px solid var(--border);
background-color: var(--surface);
color: var(--text);
font-family: var(--font_family_base, 'Asap', sans-serif);
font-size: 0.875rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 999px;
cursor: pointer;
transition: all 0.25s ease;
}
.qs-filter-btn:hover {
background-color: var(--surface-alt);
border-color: var(--accent);
color: var(--accent-text);
}
.qs-filter-btn.active {
background-color: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
box-shadow: 0 4px 12px rgba(30, 41, 38, 0.16);
}
.qs-term-card {
background-color: var(--surface);
border-radius: 14px;
padding: 24px;
border: 1px solid var(--border);
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.04);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.qs-term-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(34, 31, 19, 0.08);
border-color: var(--primary);
}
.qs-term-badge {
background-color: var(--surface-alt);
color: var(--primary-text);
border: 1px solid var(--border);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.qs-term-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--surface-alt);
color: var(--primary-text);
border-radius: 8px;
font-size: 0.95rem;
}
.qs-term-title {
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
.qs-term-def {
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.qs-term-footer {
border-top-color: var(--border) !important;
}
.qs-term-link {
color: var(--primary-text);
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
}
.qs-term-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.qs-term-link i {
font-size: 0.8rem;
transition: transform 0.2s ease;
}
.qs-term-link:hover i {
transform: translateX(3px);
}
.qs-glossary-cta {
background-color: var(--surface-alt);
border: 1px solid var(--border);
}
.qs-cta-title {
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
}
.qs-cta-text {
color: var(--text-muted);
font-size: 0.9375rem;
}
@media (max-width: 767px) {
.qs-glossary-section {
padding-top: 3rem;
padding-bottom: 3rem;
}
.qs-term-card {
padding: 18px;
}
.qs-glossary-grid {
grid-template-columns: 1fr;
}
.qs-glossary-cta {
text-align: center !important;
flex-direction: column !important;
}
.qs-term-title {
font-size: 1.125rem;
}
}
/* ===== geography ===== */
.qs-geo-block {
padding: 64px 0;
background-color: var(--bg, #F5F3EC);
color: var(--text, #221F13);
}
.qs-geo-block .qs-geo-heading {
color: var(--text, #221F13);
font-weight: 800;
line-height: 1.25;
}
.qs-geo-block .qs-geo-subtext {
color: var(--text-muted, #6D6755);
font-size: 16px;
line-height: 1.6;
}
.qs-geo-block .qs-geo-nav-wrapper {
max-width: 100%;
}
.qs-geo-block .qs-geo-tab {
background: var(--surface-alt, #F3F0E7);
color: var(--text, #221F13);
border: 1px solid var(--border, #E4E1D8);
border-radius: 999px;
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qs-geo-block .qs-geo-tab:hover {
background-color: var(--surface, #FFFFFF);
border-color: var(--primary, #17C68E);
color: var(--primary-text, #0E7453);
}
.qs-geo-block .qs-geo-tab.active {
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
border-color: var(--accent, #1E2926);
}
.qs-geo-block .qs-geo-card {
background: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.05);
padding: 24px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qs-geo-block .qs-geo-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(34, 31, 19, 0.08);
}
.qs-geo-block .qs-geo-tz {
font-size: 12px;
font-weight: 600;
color: var(--text-muted, #6D6755);
background: var(--surface-alt, #F3F0E7);
padding: 4px 10px;
border-radius: 20px;
}
.qs-geo-block .qs-geo-card-title {
color: var(--text, #221F13);
font-size: 20px;
font-weight: 700;
line-height: 1.35;
}
.qs-geo-block .qs-geo-card-desc {
color: var(--text-muted, #6D6755);
font-size: 15px;
line-height: 1.55;
}
.qs-geo-block .qs-geo-meta-group {
border-top-color: var(--border, #E4E1D8) !important;
}
.qs-geo-block .qs-geo-check-icon {
color: var(--primary-text, #0E7453);
font-size: 14px;
}
.qs-geo-block .qs-geo-meta-text {
font-size: 13px;
color: var(--text, #221F13);
font-weight: 500;
}
.qs-geo-block .qs-geo-workflow {
background: var(--surface-alt, #F3F0E7);
border: 1px solid var(--border, #E4E1D8);
}
.qs-geo-block .qs-geo-workflow-title {
color: var(--text, #221F13);
font-size: 24px;
font-weight: 800;
line-height: 1.3;
}
.qs-geo-block .qs-geo-workflow-lead {
color: var(--text-muted, #6D6755);
font-size: 15px;
line-height: 1.6;
}
.qs-geo-block .qs-geo-step-card {
background: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
}
.qs-geo-block .qs-geo-step-num {
font-size: 16px;
font-weight: 800;
color: var(--on-primary, #111111);
background-color: var(--primary, #17C68E);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.qs-geo-block .qs-geo-step-heading {
color: var(--text, #221F13);
font-size: 16px;
font-weight: 700;
}
.qs-geo-block .qs-geo-step-body {
color: var(--text-muted, #6D6755);
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 767px) {
.qs-geo-block {
padding: 40px 0;
}
.qs-geo-block .qs-geo-heading {
font-size: 16px;
hyphens: auto;
}
.qs-geo-block .qs-geo-workflow-title {
font-size: 14px;
hyphens: auto;
}
.qs-geo-block .qs-geo-card-title {
font-size: 14px;
hyphens: auto;
}
.qs-geo-block .qs-geo-step-heading {
font-size: 13px;
hyphens: auto;
}
.qs-geo-block .qs-geo-tab {
font-size: 13px;
padding: 6px 14px;
}
.qs-geo-block .qs-geo-card {
padding: 16px;
}
}
/* ===== process_photos ===== */
.qsr-process-section {
color: var(--text);
position: relative;
}
.qsr-process-section .qsr-process-title {
font-size: 32px;
line-height: 1.25;
font-weight: 800;
color: var(--text);
}
.qsr-process-section .qsr-process-subtitle {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
max-width: 680px;
}
.qsr-process-section .qsr-filter-wrapper {
overflow-x: auto;
padding-bottom: 4px;
}
.qsr-process-section .qsr-filter-pill {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.qsr-process-section .qsr-filter-pill:hover {
background: var(--surface-alt);
border-color: var(--text);
color: var(--text);
}
.qsr-process-section .qsr-filter-pill.is-active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.qsr-process-section .qsr-process-card {
background: var(--surface);
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.qsr-process-section .qsr-process-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(34, 31, 19, 0.09);
}
.qsr-process-section .qsr-card-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 10px;
overflow: hidden;
background: var(--surface-alt);
}
.qsr-process-section .qsr-process-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.qsr-process-section .qsr-media-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--accent);
color: var(--on-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
}
.qsr-process-section .qsr-category-tag {
font-size: 12px;
font-weight: 700;
color: var(--primary-text);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.qsr-process-section .qsr-meta-divider {
color: var(--border);
font-size: 12px;
}
.qsr-process-section .qsr-meta-detail {
font-size: 13px;
color: var(--text-muted);
}
.qsr-process-section .qsr-card-title {
font-size: 19px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
}
.qsr-process-section .qsr-card-desc {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.qsr-process-section .qsr-footer-meta {
font-size: 13px;
color: var(--text-muted);
}
.qsr-process-section .qsr-footer-meta i {
color: var(--primary-text);
}
.qsr-process-section .qsr-card-link {
font-size: 13px;
font-weight: 700;
color: var(--primary-text);
text-decoration: none;
transition: color 0.2s ease;
}
.qsr-process-section .qsr-card-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
@media (max-width: 767px) {
.qsr-process-section .qsr-process-title {
font-size: 16px;
hyphens: auto;
}
.qsr-process-section .qsr-card-title {
font-size: 14px;
hyphens: auto;
}
.qsr-process-section .qsr-process-subtitle {
font-size: 14px;
}
.qsr-process-section .qsr-filter-pill {
font-size: 13px;
padding: 6px 14px;
}
}
/* ===== short_form_alternative ===== */
.qs-inquiry-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
.qs-inquiry-section .bj-eyebrow {
color: var(--primary-text);
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.08em;
text-decoration: underline;
text-underline-offset: 6px;
}
.qs-inquiry-section .bj-title {
color: var(--text);
font-weight: 800;
font-size: 34px;
line-height: 1.25;
margin-bottom: 0;
}
.qs-inquiry-section .qs-inquiry-intro {
color: var(--text-muted);
font-size: 17px;
line-height: 1.6;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.qs-inquiry-section .qs-visual-dossier {
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(34, 31, 19, 0.05);
}
.qs-inquiry-section .qs-dossier-header {
border-bottom: 1px solid var(--border);
}
.qs-inquiry-section .qs-badge-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background-color: var(--surface-alt);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-text);
font-size: 14px;
}
.qs-inquiry-section .qs-dossier-tagline {
font-weight: 700;
color: var(--text);
font-size: 15px;
}
.qs-inquiry-section .qs-status-badge {
background-color: var(--surface-alt);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
}
.qs-inquiry-section .qs-visual-field {
background-color: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
transition: border-color 0.2s ease;
}
.qs-inquiry-section .qs-visual-field:hover {
border-color: var(--primary);
}
.qs-inquiry-section .qs-field-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--primary-text);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.qs-inquiry-section .qs-field-display {
font-size: 15px;
line-height: 1.5;
color: var(--text);
font-weight: 500;
}
.qs-inquiry-section .qs-resolution-card {
background-color: #F8F7F2;
border-left: 3px solid var(--primary);
border-radius: 6px;
}
.qs-inquiry-section .qs-resolution-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.qs-inquiry-section .qs-resolution-title i {
color: var(--primary-text);
font-size: 14px;
}
.qs-inquiry-section .qs-resolution-text {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.qs-inquiry-section .qs-action-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 240px;
}
@media (max-width: 767px) {
.qs-inquiry-section {
padding-top: 3rem;
padding-bottom: 3rem;
}
.qs-inquiry-section .bj-title {
font-size: 16px;
hyphens: auto;
}
.qs-inquiry-section .qs-resolution-title {
font-size: 14px;
hyphens: auto;
}
.qs-inquiry-section .qs-inquiry-intro {
font-size: 14px;
}
.qs-inquiry-section .qs-field-display {
font-size: 14px;
}
.qs-inquiry-section .qs-action-cta {
width: 100%;
min-width: 0;
}
}
/* ===== after_start ===== */
.qs-collaboration-timeline {
padding-top: 5rem;
padding-bottom: 5rem;
}
.qs-collaboration-timeline .qs-timeline-lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--text-muted, #6D6755);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.qs-collaboration-timeline .qs-timeline-filters {
background-color: var(--surface-alt, #F3F0E7);
padding: 6px;
border-radius: 999px;
border: 1px solid var(--border, #E4E1D8);
}
.qs-collaboration-timeline .qs-filter-pill {
border: none;
background: transparent;
color: var(--text, #221F13);
font-size: 0.875rem;
font-weight: 700;
padding: 8px 18px;
border-radius: 999px;
transition: all 0.25s ease;
cursor: pointer;
}
.qs-collaboration-timeline .qs-filter-pill:hover {
background-color: rgba(23, 198, 142, 0.15);
color: var(--primary-text, #0E7453);
}
.qs-collaboration-timeline .qs-filter-pill.active {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
}
.qs-collaboration-timeline .qs-timeline-node {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.06);
padding: 24px;
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.qs-collaboration-timeline .qs-timeline-node:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(34, 31, 19, 0.1);
}
.qs-collaboration-timeline .qs-badge-accent {
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.qs-collaboration-timeline .qs-timeline-date {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted, #6D6755);
}
.qs-collaboration-timeline .qs-node-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: var(--surface-alt, #F3F0E7);
border: 1px solid var(--border, #E4E1D8);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-text, #0E7453);
font-size: 1.25rem;
}
.qs-collaboration-timeline .qs-node-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text, #221F13);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.qs-collaboration-timeline .qs-node-desc {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-muted, #6D6755);
margin-bottom: 1.25rem;
}
.qs-collaboration-timeline .qs-node-steps {
font-size: 0.8125rem;
line-height: 1.4;
color: var(--text, #221F13);
border-color: var(--border, #E4E1D8) !important;
}
.qs-collaboration-timeline .qs-check-icon {
color: var(--primary-text, #0E7453);
font-size: 0.875rem;
flex-shrink: 0;
}
.qs-collaboration-timeline .qs-timeline-footnote {
background-color: var(--surface-alt, #F3F0E7);
border: 1px solid var(--border, #E4E1D8);
border-radius: 12px;
font-size: 0.875rem;
color: var(--text-muted, #6D6755);
}
@media (max-width: 767.98px) {
.qs-collaboration-timeline {
padding-top: 3rem;
padding-bottom: 3rem;
}
.qs-collaboration-timeline .bj-title {
font-size: 1.25rem;
}
.qs-collaboration-timeline .qs-node-title {
font-size: 1.125rem;
}
.qs-collaboration-timeline .qs-timeline-filters {
width: 100%;
border-radius: 12px;
}
.qs-collaboration-timeline .qs-filter-pill {
width: 100%;
text-align: center;
}
.qs-collaboration-timeline .qs-timeline-node {
padding: 18px;
}
}
/* ===== footer ===== */
.qsr-footer {
background-color: var(--dark-band, #18160E);
color: var(--on-dark, #FFFFFF);
position: relative;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font_family_base, 'Asap', sans-serif);
}
.qsr-footer * {
box-sizing: border-box;
}
.qsr-footer__ticker {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
overflow: hidden;
white-space: nowrap;
height: 38px;
display: flex;
align-items: center;
user-select: none;
}
.qsr-footer__ticker-track {
display: flex;
width: max-content;
animation: qsrTickerScroll 28s linear infinite;
}
.qsr-footer__ticker-group {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.qsr-footer__ticker-sep {
margin: 0 16px;
font-size: 8px;
opacity: 0.6;
}
@keyframes qsrTickerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.qsr-footer__container {
padding-top: 56px;
padding-bottom: 40px;
}
.qsr-footer__brand-link {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
margin-bottom: 18px;
}
.qsr-footer__logo {
width: 44px;
height: 44px;
object-fit: contain;
flex-shrink: 0;
}
.qsr-footer__brand-text {
font-size: 20px;
font-weight: 800;
color: var(--on-dark, #FFFFFF);
letter-spacing: -0.01em;
}
.qsr-footer__mission {
font-size: 14px;
line-height: 1.6;
color: var(--on-dark-muted, #C3C0B6);
margin-bottom: 0;
overflow-wrap: anywhere;
}
.qsr-footer__heading {
font-size: 16px;
font-weight: 700;
color: var(--on-dark, #FFFFFF);
margin-bottom: 18px;
position: relative;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.qsr-footer__heading::after {
content: '';
display: block;
width: 24px;
height: 2px;
background-color: var(--primary, #17C68E);
margin-top: 8px;
border-radius: 2px;
}
.qsr-footer__links-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.qsr-footer__nav-link {
color: var(--on-dark-muted, #C3C0B6);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
overflow-wrap: anywhere;
}
.qsr-footer__nav-link:hover,
.qsr-footer__nav-link:focus {
color: var(--primary, #17C68E);
transform: translateX(3px);
}
.qsr-footer__contact-items {
display: flex;
flex-direction: column;
gap: 14px;
}
.qsr-footer__contact-row {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--on-dark-muted, #C3C0B6);
line-height: 1.5;
overflow-wrap: anywhere;
}
.qsr-footer__contact-icon {
color: var(--primary, #17C68E);
font-size: 14px;
margin-top: 4px;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.qsr-footer__contact-val {
color: var(--on-dark-muted, #C3C0B6);
}
.qsr-footer__contact-link {
color: var(--on-dark-muted, #C3C0B6);
text-decoration: none;
transition: color 0.2s ease;
overflow-wrap: anywhere;
}
.qsr-footer__contact-link:hover,
.qsr-footer__contact-link:focus {
color: var(--primary, #17C68E);
}
.qsr-footer__wa-wrapper {
margin-top: 6px;
}
.qsr-footer__wa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #25D366;
color: #FFFFFF;
text-decoration: none;
padding: 9px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
transition: background-color 0.2s ease, transform 0.2s ease;
line-height: 1;
}
.qsr-footer__wa-btn:hover,
.qsr-footer__wa-btn:focus {
background-color: #1EBE5D;
color: #FFFFFF;
transform: translateY(-2px);
}
.qsr-footer__wa-icon {
font-size: 16px;
}
.qsr-footer__divider {
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.1);
margin-top: 44px;
margin-bottom: 24px;
}
.qsr-footer__bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: var(--on-dark-muted, #C3C0B6);
}
.qsr-footer__copyright {
overflow-wrap: anywhere;
}
.qsr-footer__legal-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 24px;
}
.qsr-footer__legal-link {
color: var(--on-dark-muted, #C3C0B6);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
overflow-wrap: anywhere;
}
.qsr-footer__legal-link:hover,
.qsr-footer__legal-link:focus {
color: var(--primary, #17C68E);
}
.qsr-footer__wordmark {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
padding: 18px 16px;
text-align: center;
overflow: hidden;
user-select: none;
}
.qsr-footer__wordmark-inner {
font-size: clamp(20px, 4.5vw, 42px);
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1.1;
margin: 0 auto;
max-width: 100%;
}
@media (max-width: 767px) {
.qsr-footer__container {
padding-top: 40px;
padding-bottom: 32px;
}
.qsr-footer__grid {
flex-direction: column;
}
.qsr-footer__bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.qsr-footer__legal-links {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.qsr-footer__heading {
font-size: 15px;
margin-bottom: 14px;
}
.qsr-footer__heading::after {
margin-top: 6px;
}
.qsr-footer__divider {
margin-top: 32px;
margin-bottom: 20px;
}
.qsr-footer__wa-btn {
width: 100%;
}
}
.qs-cat-hero {
background-color: var(--dark-band, #18160E);
color: var(--on-dark, #FFFFFF);
min-height: 280px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.qs-cat-hero__ornament {
position: absolute;
top: 5%;
width: 140px;
height: 320px;
pointer-events: none;
opacity: 0.35;
z-index: 1;
}
.qs-cat-hero__ornament--left {
left: 0;
}
.qs-cat-hero__ornament--right {
right: 0;
}
.qs-cat-hero__eyebrow {
color: var(--primary, #17C68E) !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 6px;
}
.qs-cat-hero__title {
color: var(--on-dark, #FFFFFF);
font-size: 38px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
.qs-cat-hero__lead {
color: var(--on-dark-muted, #C3C0B6);
font-size: 16px;
line-height: 1.6;
max-width: 720px;
overflow-wrap: anywhere;
}
.qs-cat-hero__badge {
background-color: rgba(255, 255, 255, 0.08);
color: var(--on-dark, #FFFFFF);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.qs-catalog-block {
background-color: var(--bg, #F5F3EC);
}
.qs-catalog-block__heading {
color: var(--text, #221F13);
font-size: 32px;
font-weight: 800;
overflow-wrap: anywhere;
}
.qs-catalog-block__sidebar {
top: 96px;
}
.qs-catalog-block__sidebar-card {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 14px;
padding: 24px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.05);
}
.qs-catalog-block__sidebar-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background-color: var(--surface-alt, #F3F0E7);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-text, #0E7453);
font-size: 18px;
}
.qs-catalog-block__sidebar-title {
font-size: 20px;
font-weight: 700;
color: var(--text, #221F13);
overflow-wrap: anywhere;
}
.qs-catalog-block__sidebar-text {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted, #6D6755);
overflow-wrap: anywhere;
}
.qs-catalog-block__filter-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text, #221F13);
}
.qs-catalog-block__input-addon {
background-color: var(--surface-alt, #F3F0E7);
border-color: var(--border, #E4E1D8);
color: var(--text-muted, #6D6755);
}
.qs-catalog-block__input {
background-color: var(--surface, #FFFFFF);
border-color: var(--border, #E4E1D8);
color: var(--text, #221F13);
font-size: 14px;
}
.qs-catalog-block__input:focus {
border-color: var(--primary, #17C68E);
box-shadow: 0 0 0 0.2rem rgba(23, 198, 142, 0.2);
color: var(--text, #221F13);
background-color: var(--surface, #FFFFFF);
}
.qs-catalog-block__filter-chip {
background-color: var(--surface-alt, #F3F0E7);
color: var(--text, #221F13);
border: 1px solid var(--border, #E4E1D8);
border-radius: 999px;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qs-catalog-block__filter-chip:hover {
background-color: var(--border, #E4E1D8);
color: var(--text, #221F13);
}
.qs-catalog-block__filter-chip.is-active {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
border-color: var(--primary, #17C68E);
}
.qs-catalog-block__sidebar-note {
background-color: var(--surface-alt, #F3F0E7);
border: 1px solid var(--border, #E4E1D8);
}
.qs-catalog-block__note-title {
font-size: 13px;
font-weight: 700;
color: var(--text, #221F13);
}
.qs-catalog-block__note-text {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted, #6D6755);
overflow-wrap: anywhere;
}
.qs-card {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 14px;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
box-shadow: 0 4px 14px rgba(34, 31, 19, 0.05);
}
.qs-card:hover {
transform: translateY(-4px);
border-color: var(--primary, #17C68E);
box-shadow: 0 12px 24px rgba(34, 31, 19, 0.12);
}
.qs-card__media-wrapper {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-color: var(--surface-alt, #F3F0E7);
}
.qs-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.qs-card:hover .qs-card__img {
transform: scale(1.03);
}
.qs-card__badge {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.qs-card__meta {
font-size: 12px;
color: var(--text-muted, #6D6755);
}
.qs-card__title {
font-size: 18px;
font-weight: 700;
color: var(--text, #221F13);
line-height: 1.35;
overflow-wrap: anywhere;
}
.qs-card:hover .qs-card__title {
color: var(--primary-text, #0E7453);
}
.qs-card__desc {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted, #6D6755);
overflow-wrap: anywhere;
}
.qs-card__action-text {
font-size: 13px;
font-weight: 700;
color: var(--primary-text, #0E7453);
display: inline-flex;
align-items: center;
transition: transform 0.2s ease;
}
.qs-card:hover .qs-card__action-text {
transform: translateX(4px);
}
.qs-catalog-block__empty-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--surface-alt, #F3F0E7);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--text-muted, #6D6755);
}
.qs-catalog-block__empty-title {
font-size: 18px;
font-weight: 700;
color: var(--text, #221F13);
}
.qs-catalog-block__empty-desc {
font-size: 14px;
color: var(--text-muted, #6D6755);
}
.qs-banner {
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
}
.qs-banner__inner {
background-color: #129E72;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.qs-banner__badge {
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.05em;
text-transform: uppercase;
display: inline-block;
}
.qs-banner__title {
font-size: 28px;
font-weight: 800;
color: var(--on-primary, #111111);
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.qs-banner__text {
font-size: 15px;
color: var(--on-primary, #111111);
line-height: 1.6;
max-width: 620px;
overflow-wrap: anywhere;
}
.qs-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--accent, #1E2926);
color: var(--on-accent, #FFFFFF);
padding: 12px 28px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
border: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.qs-banner__btn:hover {
background-color: #111111;
color: #FFFFFF;
transform: translateY(-2px);
}
@media (max-width: 767px) {
.qs-cat-hero__title {
font-size: 18px;
hyphens: auto;
}
.qs-cat-hero__lead {
font-size: 14px;
}
.qs-catalog-block__heading {
font-size: 16px;
hyphens: auto;
}
.qs-catalog-block__sidebar-title {
font-size: 16px;
}
.qs-card__title {
font-size: 14px;
hyphens: auto;
}
.qs-banner__title {
font-size: 16px;
hyphens: auto;
}
.qs-catalog-block__sidebar {
position: static !important;
}
.qs-banner__btn {
width: 100%;
}
}
/* ===== PAGE: about ===== */
.about-page-wrapper { padding: 48px 0; background-color: var(--bg); color: var(--text); }
.about-page-wrapper .about-lead-text { font-size: 1.125rem; line-height: 1.6; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.about-page-wrapper .about-body-text { font-size: 1rem; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; }
.about-page-wrapper .about-media-wrapper { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background-color: var(--surface-alt); border: 1px solid var(--border); }
.about-page-wrapper .about-media-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-page-wrapper .about-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.about-page-wrapper .about-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(34, 31, 19, 0.08); }
.about-page-wrapper .about-card-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--primary-text); }
.about-page-wrapper .about-card-title { font-size: 1.25rem; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.about-page-wrapper .about-card-text { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); overflow-wrap: anywhere; }
.about-page-wrapper .about-staircase-section { background-color: var(--surface-alt); border: 1px solid var(--border); }
.about-page-wrapper .about-staircase-item { background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s ease; }
.about-page-wrapper .about-staircase-item:hover { border-color: var(--primary); }
.about-page-wrapper .about-staircase-badge { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.about-page-wrapper .about-badge-step1 { background-color: var(--primary); color: var(--on-primary); }
.about-page-wrapper .about-badge-step2 { background-color: var(--accent); color: var(--on-accent); }
.about-page-wrapper .about-badge-step3 { background-color: var(--dark-band); color: var(--on-dark); }
.about-page-wrapper .about-staircase-step { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--primary-text); margin-bottom: 2px; }
.about-page-wrapper .about-staircase-heading { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.about-page-wrapper .about-staircase-desc { font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.about-page-wrapper .about-faq-item { background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.about-page-wrapper .about-faq-header { background: transparent; border: none; cursor: pointer; color: var(--text); outline: none; }
.about-page-wrapper .about-faq-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.about-page-wrapper .about-faq-toggle-icon { color: var(--primary-text); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 12px; }
.about-page-wrapper .about-faq-body { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; display: none; }
.about-page-wrapper .about-faq-item.is-open .about-faq-body { display: block; }
.about-page-wrapper .about-faq-item.is-open .about-faq-toggle-icon { transform: rotate(180deg); }
@media (max-width: 767.98px) {
.about-page-wrapper { padding: 32px 0; }
.about-page-wrapper h2.bj-title { font-size: 16px; line-height: 1.25; hyphens: auto; }
.about-page-wrapper h3 { font-size: 14px; line-height: 1.3; hyphens: auto; }
.about-page-wrapper .about-lead-text { font-size: 1rem; }
.about-page-wrapper .about-staircase-section { padding: 20px !important; }
.about-page-wrapper .about-staircase-item { flex-direction: column; }
}
/* ===== PAGE: contact ===== */
.contact-details-section {
padding: 80px 0;
background-color: var(--bg);
color: var(--text);
}
.contact-details-section .bj-eyebrow {
color: var(--primary-text);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 6px;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.contact-details-section .bj-title {
font-size: 36px;
font-weight: 800;
line-height: 1.25;
color: var(--text);
}
.contact-details-section .contact-lead {
font-size: 17px;
line-height: 1.6;
color: var(--text-muted);
}
.contact-details-section .contact-channel-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.06);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.contact-details-section .contact-channel-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(34, 31, 19, 0.1);
}
.contact-details-section .contact-icon-box {
width: 58px;
height: 58px;
border-radius: 50%;
background-color: var(--surface-alt);
border: 1px solid var(--border);
color: var(--primary-text);
font-size: 22px;
}
.contact-details-section .contact-card-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.contact-details-section .contact-card-text {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.contact-details-section .contact-info-value {
font-size: 15px;
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
word-break: break-word;
}
.contact-details-section .contact-action-btn {
border-radius: 999px;
padding: 12px 20px;
font-weight: 700;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-details-section .bj-btn {
background-color: var(--primary);
color: var(--on-primary);
border: none;
}
.contact-details-section .bj-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
}
.contact-details-section .bj-btn-alt {
background-color: transparent;
color: var(--text);
border: 1.5px solid var(--border);
}
.contact-details-section .bj-btn-alt:hover {
background-color: var(--surface-alt);
border-color: var(--text);
color: var(--text);
}
.contact-details-section .contact-hours-plate {
background-color: var(--surface-alt);
border: 1px solid var(--border);
}
@media (max-width: 767px) {
.contact-details-section {
padding: 48px 0;
}
.contact-details-section .bj-title {
font-size: 26px;
}
.contact-details-section .contact-lead {
font-size: 15px;
}
.contact-details-section .contact-channel-card {
padding: 24px 18px;
}
}
/* ===== PAGE: privacy ===== */
.qs-privacy-section{padding:54px 0 72px;background-color:var(--bg);color:var(--text)}.qs-privacy-section .qs-privacy-sidebar{position:sticky;top:100px}.qs-privacy-section .qs-toc-card{background:var(--surface);border-radius:14px;border:1px solid var(--border);padding:24px;box-shadow:0 4px 16px rgba(34,31,19,0.04)}.qs-privacy-section .qs-toc-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:18px}.qs-privacy-section .qs-toc-nav{margin-bottom:24px}.qs-privacy-section .qs-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.qs-privacy-section .qs-toc-link{display:block;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-muted);text-decoration:none;transition:all .2s ease;border-left:3px solid transparent}.qs-privacy-section .qs-toc-link:hover{color:var(--primary-text);background:var(--surface-alt)}.qs-privacy-section .qs-toc-link.active{color:var(--on-primary);background:var(--primary);border-left-color:var(--primary-hover)}.qs-privacy-section .qs-meta-box{padding-top:18px;border-top:1px solid var(--border)}.qs-privacy-section .qs-meta-icon{width:28px;height:28px;border-radius:6px;background:var(--surface-alt);color:var(--primary-text);display:inline-flex;align-items:center;justify-content:center;font-size:12px}.qs-privacy-section .qs-meta-text{font-size:13px;color:var(--text-muted);font-weight:500}.qs-privacy-section .qs-support-card{background:var(--surface);border-radius:14px;border:1px solid var(--border);padding:24px;box-shadow:0 4px 16px rgba(34,31,19,0.04)}.qs-privacy-section .qs-support-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px}.qs-privacy-section .qs-support-desc{font-size:14px;color:var(--text-muted);line-height:1.5;margin-bottom:18px}.qs-privacy-section .qs-content-card{background:var(--surface);border-radius:14px;border:1px solid var(--border);padding:36px;box-shadow:0 4px 16px rgba(34,31,19,0.04)}.qs-privacy-section .bj-eyebrow{display:inline-block;color:var(--primary-text);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:underline;text-underline-offset:6px;margin-bottom:10px}.qs-privacy-section .bj-badge{display:inline-block;background:var(--surface-alt);color:var(--primary-text);padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.qs-privacy-section .bj-title{font-size:32px;font-weight:800;line-height:1.25;color:var(--text)}.qs-privacy-section .qs-policy-intro{padding-bottom:24px;border-bottom:1px solid var(--border)}.qs-privacy-section .qs-policy-block{padding:28px 0;border-bottom:1px solid var(--border);scroll-margin-top:110px}.qs-privacy-section .qs-policy-block:last-child{border-bottom:none;padding-bottom:0}.qs-privacy-section .qs-block-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:12px}.qs-privacy-section .qs-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--surface-alt);color:var(--primary-text);font-size:15px;font-weight:800;border-radius:8px;border:1px solid var(--border);flex-shrink:0}.qs-privacy-section p{font-size:15px;line-height:1.65;color:var(--text);margin-bottom:14px}.qs-privacy-section .qs-custom-list{list-style:none;padding-left:0;margin:16px 0}.qs-privacy-section .qs-custom-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;color:var(--text);margin-bottom:10px}.qs-privacy-section .qs-custom-list li::before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;left:0;top:2px;color:var(--primary);font-size:12px}.qs-privacy-section .qs-inner-item{background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;padding:18px;height:100%}.qs-privacy-section .qs-inner-item h4{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}.qs-privacy-section .qs-inner-item p{font-size:13.5px;color:var(--text-muted);line-height:1.5;margin-bottom:0}.qs-privacy-section .qs-inline-link{color:var(--primary-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}.qs-privacy-section .qs-inline-link:hover{color:var(--primary-hover)}.qs-privacy-section .bj-btn{background:var(--primary);color:var(--on-primary);border-radius:999px;padding:12px 28px;font-weight:700;border:none;transition:background-color .2s ease,color .2s ease}.qs-privacy-section .bj-btn:hover{background:var(--primary-hover);color:var(--on-primary)}@media (max-width:991px){.qs-privacy-section .qs-privacy-sidebar{position:static;margin-bottom:24px}}@media (max-width:767px){.qs-privacy-section{padding:36px 0 54px}.qs-privacy-section .qs-content-card{padding:20px}.qs-privacy-section .bj-title{font-size:24px}.qs-privacy-section .qs-block-title{font-size:18px}.qs-privacy-section .qs-number{width:28px;height:28px;font-size:13px}.qs-privacy-section .qs-inner-item{padding:14px}}
/* ===== PAGE: terms ===== */
.terms-page-block {
background-color: var(--bg);
color: var(--text);
}
.terms-page-block .terms-meta-badge {
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.terms-page-block .terms-nav-card {
top: 96px;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.06);
padding: 24px;
}
.terms-page-block .terms-nav-btn {
display: flex;
align-items: center;
width: 100%;
text-align: left;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.terms-page-block .terms-nav-btn:hover {
background-color: var(--surface-alt);
color: var(--text);
}
.terms-page-block .terms-nav-btn.active {
background-color: var(--surface-alt);
color: var(--primary-text);
border-color: var(--primary);
}
.terms-page-block .terms-nav-num {
font-size: 11px;
font-weight: 700;
margin-right: 8px;
opacity: 0.65;
letter-spacing: 0.05em;
white-space: nowrap;
overflow-wrap: normal;
}
.terms-page-block .terms-section-card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px;
box-shadow: 0 4px 14px rgba(34, 31, 19, 0.04);
scroll-margin-top: 100px;
}
.terms-page-block .terms-heading {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.terms-page-block .terms-styled-list {
padding-left: 20px;
margin-bottom: 0;
}
.terms-page-block .terms-styled-list li {
margin-bottom: 8px;
color: var(--text);
}
.terms-page-block .terms-search-box .form-control {
background-color: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text);
}
.terms-page-block .terms-search-box .form-control:focus {
background-color: var(--surface);
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(23, 198, 142, 0.25);
color: var(--text);
}
.terms-page-block .terms-search-box .input-group-text {
background-color: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text-muted);
}
@media (max-width: 991px) {
.terms-page-block .terms-nav-card {
position: static !important;
margin-bottom: 1rem;
}
}
@media (max-width: 767px) {
.terms-page-block .terms-section-card {
padding: 20px 16px;
}
.terms-page-block .terms-heading {
font-size: 18px;
hyphens: auto;
}
}
/* ===== PAGE: disclaimer ===== */
.disc-block { background-color: var(--bg); color: var(--text); overflow-wrap: anywhere; }
.disc-block .disc-block__meta-strip { font-size: 14px; }
.disc-block .disc-block__meta-date { color: var(--text-muted); font-weight: 500; }
.disc-block .disc-block__status-pill { background-color: rgba(23, 198, 142, 0.15); color: var(--primary-text); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--primary); }
.disc-block .disc-block__header h2.bj-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.25; color: var(--text); }
.disc-block .disc-block__lead { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.disc-block .disc-block__subheading { font-size: 20px; font-weight: 700; color: var(--text); display: flex; align-items: center; }
.disc-block .disc-block__icon { color: var(--primary-text); font-size: 18px; }
.disc-block p { line-height: 1.65; color: var(--text); font-size: 15px; margin-bottom: 12px; }
.disc-block .disc-block__callout { background-color: var(--surface-alt); border-left: 4px solid var(--primary); border-radius: 10px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.disc-block .disc-block__callout-icon { color: var(--primary-text); }
.disc-block .disc-block__callout-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.disc-block .disc-block__callout-text { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.disc-block .disc-block__link { color: var(--primary-text); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.disc-block .disc-block__link:hover { color: var(--primary-hover); }
.disc-block .disc-block__footer-nav { margin-top: 24px; }
@media (max-width: 767px) {
.disc-block .disc-block__header h2.bj-title { font-size: 20px; }
.disc-block .disc-block__subheading { font-size: 16px; }
.disc-block .disc-block__footer-nav { flex-direction: column; align-items: stretch !important; }
.disc-block .disc-block__footer-nav .d-flex { flex-direction: column; width: 100%; }
.disc-block .disc-block__footer-nav .bj-btn, .disc-block .disc-block__footer-nav .bj-btn-alt { width: 100%; text-align: center; justify-content: center; }
}
.qs-comment-card {
background: #FFFFFF;
border: 1px solid #E4E1D8;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 16px rgba(34, 31, 19, 0.05);
font-family: 'Asap', sans-serif;
color: #221F13;
margin-bottom: 20px;
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.qs-comment-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(34, 31, 19, 0.08);
}
.qs-comment-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.qs-comment-user {
display: flex;
align-items: center;
gap: 14px;
}
.qs-comment-avatar-wrapper {
position: relative;
flex-shrink: 0;
}
.qs-comment-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid #17C68E;
}
.qs-comment-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.qs-comment-author-badge {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.qs-comment-author {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: #221F13;
margin: 0;
}
.qs-verified-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #0E7453;
background-color: rgba(23, 198, 142, 0.12);
padding: 2px 8px;
border-radius: 999px;
}
.qs-comment-date {
font-size: 13px;
color: #6D6755;
display: inline-flex;
align-items: center;
}
.qs-comment-rating {
display: inline-flex;
gap: 3px;
color: #17C68E;
font-size: 14px;
}
.qs-comment-content {
margin-bottom: 18px;
}
.qs-comment-text {
font-size: 15px;
line-height: 1.6;
color: #221F13;
margin: 0;
}
.qs-comment-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #E4E1D8;
padding-top: 14px;
}
.qs-action-group {
display: flex;
align-items: center;
gap: 10px;
}
.qs-btn-action {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: #F3F0E7;
color: #221F13;
border: 1px solid transparent;
border-radius: 999px;
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qs-btn-action:hover {
background-color: #E4E1D8;
color: #0E7453;
border-color: #E4E1D8;
}
.qs-btn-action:focus-visible {
outline: 2px solid #17C68E;
outline-offset: 2px;
}
.qs-action-label {
font-size: 13px;
}
.qs-like-counter {
background-color: #FFFFFF;
color: #221F13;
padding: 2px 7px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.qs-btn-report {
background: transparent;
border: none;
color: #6D6755;
padding: 6px 10px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.qs-btn-report:hover {
color: #18160E;
background-color: #F3F0E7;
}
.qs-reply-card {
position: relative;
margin-left: 48px;
margin-top: -8px;
margin-bottom: 16px;
font-family: 'Asap', sans-serif;
}
.qs-reply-connector {
position: absolute;
left: -26px;
top: 24px;
width: 20px;
height: 26px;
border-left: 2px solid #E4E1D8;
border-bottom: 2px solid #E4E1D8;
border-bottom-left-radius: 10px;
pointer-events: none;
}
.qs-reply-inner {
background: #F3F0E7;
border: 1px solid #E4E1D8;
border-radius: 14px;
padding: 18px 20px;
color: #221F13;
}
.qs-reply-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.qs-reply-user {
display: flex;
align-items: center;
gap: 12px;
}
.qs-reply-avatar-wrapper {
flex-shrink: 0;
}
.qs-reply-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid #E4E1D8;
}
.qs-reply-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.qs-reply-author-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.qs-reply-author {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #221F13;
margin: 0;
}
.qs-reply-role-tag {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #1E2926;
background: rgba(30, 41, 38, 0.08);
padding: 1px 7px;
border-radius: 999px;
}
.qs-reply-date {
font-size: 12px;
color: #6D6755;
display: inline-flex;
align-items: center;
}
.qs-reply-content {
margin-bottom: 12px;
}
.qs-reply-mention {
color: #0E7453;
font-weight: 600;
margin-right: 4px;
}
.qs-reply-text {
font-size: 14px;
line-height: 1.55;
color: #221F13;
margin: 0;
}
.qs-reply-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(228, 225, 216, 0.8);
padding-top: 10px;
}
.qs-btn-reply-like {
background-color: #FFFFFF;
}
.qs-btn-reply-like:hover {
background-color: #E4E1D8;
}
@media (max-width: 576px) {
.qs-reply-card {
margin-left: 20px;
}
.qs-reply-connector {
left: -14px;
width: 12px;
}
}
/* ===== PAGE TEMPLATE: methodological-guide, knowledge-base, case-library, editorial-legal ===== */
.detail-page-body {
background-color: var(--bg, #F5F3EC);
color: var(--text, #221F13);
font-family: var(--font_family_base, 'Asap', sans-serif);
overflow-x: hidden;
}
.bento-article__hero-meta {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--on-dark-muted, #C3C0B6);
font-size: 14px;
}
.bento-article__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
align-items: stretch;
}
.bento-article__tile--desc {
grid-column: span 7;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 16px;
box-shadow: 0 4px 18px rgba(34, 31, 19, 0.05);
padding: 32px;
}
.bento-article__tile--media {
grid-column: span 5;
position: relative;
min-height: 280px;
}
.bento-article__media-offset {
position: absolute;
top: -12px;
right: -12px;
width: 100%;
height: 100%;
background-color: var(--primary, #17C68E);
border-radius: 18px;
opacity: 0.35;
z-index: 1;
}
.bento-article__media-frame {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border, #E4E1D8);
}
.bento-article__main-img {
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
display: block;
}
.bento-article__tile--facts {
grid-column: span 7;
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 16px;
box-shadow: 0 4px 18px rgba(34, 31, 19, 0.05);
padding: 28px 32px;
}
.bento-article__tile--cta {
grid-column: span 5;
background-color: var(--surface-alt, #F3F0E7);
border: 1px solid var(--border, #E4E1D8);
border-radius: 16px;
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.bento-article__tile-title {
font-size: 26px;
font-weight: 800;
color: var(--text, #221F13);
line-height: 1.25;
letter-spacing: -0.01em;
}
.bento-article__tile-subtitle {
font-size: 20px;
font-weight: 700;
color: var(--text, #221F13);
line-height: 1.3;
}
.bento-article__text {
font-size: 16px;
line-height: 1.6;
color: var(--text, #221F13);
}
.bento-article__text-muted {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted, #6D6755);
}
.bento-article__facts-list {
list-style: none;
}
.bento-article__fact-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--primary, #17C68E);
color: var(--on-primary, #111111);
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
white-space: nowrap;
overflow-wrap: normal;
}
.bento-article__fact-content {
font-size: 15px;
line-height: 1.5;
color: var(--text, #221F13);
overflow-wrap: anywhere;
}
.bento-article__fact-label {
color: var(--text, #221F13);
}
.bento-article__cta-icon-box {
width: 44px;
height: 44px;
border-radius: 10px;
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
color: var(--primary-text, #0E7453);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.bento-article__btn-block {
width: 100%;
}
.bento-article__column {
max-width: 820px;
}
.bento-article__numbered-heading {
font-size: 26px;
font-weight: 800;
color: var(--text, #221F13);
display: flex;
align-items: baseline;
gap: 12px;
}
.bento-article__heading-num {
color: var(--primary-text, #0E7453);
font-size: 20px;
font-weight: 800;
width: 32px;
flex: 0 0 32px;
white-space: nowrap;
overflow-wrap: normal;
}
.bento-article__paragraph {
font-size: 16px;
line-height: 1.7;
color: var(--text, #221F13);
overflow-wrap: anywhere;
}
.bento-article__inline-cta {
background-color: var(--surface-alt, #F3F0E7);
border-color: var(--border, #E4E1D8) !important;
}
.bento-article__inline-cta-title {
font-size: 18px;
font-weight: 700;
color: var(--text, #221F13);
}
.bento-article__inline-cta-desc {
font-size: 14px;
color: var(--text-muted, #6D6755);
line-height: 1.5;
}
.bento-article__pullquote {
background-color: var(--surface, #FFFFFF);
border-left: 4px solid var(--primary, #17C68E);
border-top: 1px solid var(--border, #E4E1D8);
border-right: 1px solid var(--border, #E4E1D8);
border-bottom: 1px solid var(--border, #E4E1D8);
box-shadow: 0 4px 14px rgba(34, 31, 19, 0.04);
}
.bento-article__quote-mark {
font-size: 24px;
color: var(--primary, #17C68E);
margin-bottom: 8px;
opacity: 0.8;
}
.bento-article__quote-text {
font-size: 18px;
font-style: italic;
line-height: 1.5;
color: var(--text, #221F13);
margin: 0;
}
.bento-article__quote-author {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-text, #0E7453);
}
.bento-article__accordion .bento-article__acc-item {
border: 1px solid var(--border, #E4E1D8);
border-radius: 10px;
background-color: var(--surface, #FFFFFF);
overflow: hidden;
}
.bento-article__acc-btn {
font-size: 16px;
font-weight: 700;
color: var(--text, #221F13);
background-color: var(--surface, #FFFFFF);
box-shadow: none;
padding: 16px 20px;
}
.bento-article__acc-btn:not(.collapsed) {
color: var(--primary-text, #0E7453);
background-color: var(--surface-alt, #F3F0E7);
box-shadow: none;
}
.bento-article__acc-btn:focus {
box-shadow: none;
border-color: var(--primary, #17C68E);
}
.bento-article__acc-body {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted, #6D6755);
padding: 16px 20px;
background-color: var(--surface, #FFFFFF);
border-top: 1px solid var(--border, #E4E1D8);
}
.bento-article__tags-label {
font-size: 14px;
color: var(--text, #221F13);
}
.bento-article__related-card {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E1D8);
border-radius: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bento-article__related-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(34, 31, 19, 0.08);
}
.bento-article__related-card-top {
background: linear-gradient(135deg, #17C68E 0%, #0E7453 100%);
color: #FFFFFF;
}
.bento-article__related-card-top--alt1 {
background: linear-gradient(135deg, #1E2926 0%, #111111 100%);
}
.bento-article__related-card-top--alt2 {
background: linear-gradient(135deg, #18160E 0%, #2A2518 100%);
}
.bento-article__related-card-top--alt3 {
background: linear-gradient(135deg, #13A677 0%, #1E2926 100%);
}
.bento-article__related-tag {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background-color: rgba(255, 255, 255, 0.2);
padding: 3px 8px;
border-radius: 4px;
display: inline-block;
}
.bento-article__related-title {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.3;
}
.bento-article__related-desc {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted, #6D6755);
}
.bento-article__related-meta {
font-size: 12px;
color: var(--text-muted, #6D6755);
}
.bento-article__related-link {
font-size: 13px;
font-weight: 700;
color: var(--primary-text, #0E7453);
text-decoration: none;
transition: color 0.2s ease;
}
.bento-article__related-link:hover {
color: var(--primary-hover, #13A677);
}
@media (max-width: 991.98px) {
.bento-article__tile--desc,
.bento-article__tile--media,
.bento-article__tile--facts,
.bento-article__tile--cta {
grid-column: span 12;
}
.bento-article__media-offset {
display: none;
}
}
@media (max-width: 767.98px) {
.bento-article__grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.bento-article__tile--desc,
.bento-article__tile--facts,
.bento-article__tile--cta {
padding: 20px 16px;
}
.bento-article__tile-title {
font-size: 20px;
}
.bento-article__numbered-heading {
font-size: 18px;
}
.bento-article__heading-num {
font-size: 16px;
}
.bento-article__pullquote {
padding: 16px;
}
.bento-article__quote-text {
font-size: 15px;
}
}
/* mobile-text-guard */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
overflow-wrap: anywhere;
}
a, button, .btn {
overflow-wrap: anywhere;
white-space: normal;
}
img, video, iframe {
max-width: 100%;
}
}