:root {
--bg: #F4F3EF;
--surface: #FFFFFF;
--s2: #EDECE8;
--s3: #E5E4DF;
--border: rgba(0, 0, 0, .09);
--b2: rgba(0, 0, 0, .16);
--ink: #0F0F0F;
--ink2: #3D3D3D;
--sub: #646464;
--ghost: #8A8A8A;
--green: #1D6A45;
--greenb: rgba(29, 106, 69, .10);
--r: 18px;
--gap: 10px;
--sh: 0 0 0 1px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
}
[data-theme="dark"] {
--bg: #101010;
--surface: #191919;
--s2: #212121;
--s3: #2A2A2A;
--border: rgba(255, 255, 255, .07);
--b2: rgba(255, 255, 255, .13);
--ink: #F0F0F0;
--ink2: #B0B0B0;
--sub: #8D8D8D;
--ghost: #727272;
--green: #3ECF8E;
--greenb: rgba(62, 207, 142, .10);
--sh: 0 0 0 1px rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.35);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'DM Sans', system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background .25s, color .25s;
padding-bottom: 80px;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { border: none; background: none; cursor: pointer; font: inherit; }
.wrap {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.bento-wrap {
max-width: 1160px;
margin: 40px auto 0;
padding: 0 20px;
}
.nav {
position: fixed;
inset: 0 0 auto;
z-index: 100;
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--border);
transition: background .25s;
}
.nav .wrap {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 700;
letter-spacing: -.01em;
flex-shrink: 0;
}
.brand-sq {
width: 26px;
height: 26px;
border-radius: 7px;
flex-shrink: 0;
background: var(--ink);
color: var(--bg);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: .03em;
transition: background .25s, color .25s;
}
.nav-menu {
display: flex;
gap: 22px;
font-size: 13px;
color: var(--sub);
}
.nav-menu a { transition: color .15s; }
.nav-menu a:hover { color: var(--ink); }
.nav-end {
display: flex;
align-items: center;
gap: 8px;
}
.nav-wa {
font-size: 13px;
color: var(--sub);
font-weight: 500;
}
.nav-wa:hover { color: var(--ink); }
.btn-theme {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--s2);
border: 1px solid var(--border);
display: grid;
place-items: center;
font-size: 14px;
flex-shrink: 0;
transition: background .15s;
}
.btn-theme:hover { background: var(--s3); }
.btn-nav-call {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
padding: 7px 16px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
transition: opacity .15s, background .25s, color .25s;
}
.btn-nav-call:hover { opacity: .8; }
.hero { padding: 80px 0 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sub);
margin-bottom: 24px;
}
.eyebrow i {
display: block;
width: 28px;
height: 1px;
background: var(--ghost);
}
.hero-h {
font-size: clamp(48px, 8.5vw, 112px);
line-height: .93;
letter-spacing: -.05em;
color: var(--ink);
max-width: 860px;
}
.hero-h .serif {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-weight: 400;
}
.hero-head {
position: relative;
display: inline-flex;
align-items: flex-start;
}
.hero-mark {
position: absolute;
right: -110px;
top: -18px;
width: clamp(180px, 26vw, 320px);
height: auto;
opacity: .11;
filter: saturate(.95);
pointer-events: none;
user-select: none;
}
.hero-meta {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
padding: 36px 0 0;
flex-wrap: wrap;
}
.hero-desc {
max-width: 380px;
font-size: 15px;
color: var(--ink2);
line-height: 1.7;
font-weight: 400;
}
.hero-desc strong { color: var(--ink); font-weight: 600; }
.hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.btn-prim {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
padding: 13px 24px;
font-size: 15px;
font-weight: 700;
transition: opacity .15s, background .25s, color .25s;
}
.btn-prim:hover { opacity: .8; }
.btn-prim--sm { font-size: 13px; padding: 9px 18px; }
.btn-sec {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
color: var(--ink);
border: 1px solid var(--b2);
border-radius: 999px;
padding: 13px 24px;
font-size: 15px;
font-weight: 600;
transition: background .15s, border-color .15s;
}
.btn-sec:hover { background: var(--s2); }
.photo-strip {
display: grid;
grid-template-columns: 5fr 4fr 4fr;
gap: var(--gap);
margin: 32px 0 0;
height: 340px;
}
.psi {
border-radius: var(--r);
overflow: hidden;
position: relative;
}
.psi img {
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.psi:hover img { transform: scale(1.04); }
.psi-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
pointer-events: none;
}
.psi-cap {
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,.8);
line-height: 1.3;
}
.cert-strip {
border-top: 1px solid var(--border);
padding: 14px 0;
}
.cert-strip .wrap {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.ctag {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 11px;
font-size: 11px;
font-weight: 600;
color: var(--ink2);
transition: background .25s, border-color .25s;
}
.cdot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
}
.sec-lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--sub);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.sec-lbl::before {
content: '';
width: 18px;
height: 1px;
background: var(--ghost);
}
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(148px, auto);
gap: var(--gap);
}
.s2 { grid-column: span 2; }
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.r2 { grid-row: span 2; }
.cell {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
position: relative;
box-shadow: var(--sh);
transition: border-color .2s, background .25s, box-shadow .25s;
}
.cell:hover { border-color: var(--b2); }
.pad { padding: 26px; }
.pad-sm { padding: 20px; }
.stat-n {
font-size: clamp(48px, 6vw, 72px);
font-weight: 800;
line-height: 1;
letter-spacing: -.05em;
color: var(--ink);
}
.stat-l {
font-size: 12px;
color: var(--sub);
font-weight: 500;
line-height: 1.4;
margin-top: 8px;
}
.inv { background: var(--ink) !important; border-color: transparent !important; }
.inv .stat-n { color: var(--bg); }
.inv .stat-l { color: color-mix(in srgb, var(--bg) 50%, transparent); }
[data-theme="dark"] .inv { background: #F0F0F0 !important; }
[data-theme="dark"] .inv .stat-n { color: #111; }
[data-theme="dark"] .inv .stat-l { color: #666; }
.cell-img img { height: 100%; object-fit: cover; transition: transform .55s ease; }
.cell-img:hover img { transform: scale(1.04); }
.img-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.img-ov-t { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.img-ov-s { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 3px; }
.cell-h {
font-size: clamp(17px, 2vw, 24px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.1;
color: var(--ink);
margin-bottom: 9px;
}
.cell-p { font-size: 13px; color: var(--ink2); line-height: 1.65; }
.cert-label-sm {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--sub);
margin-bottom: 8px;
display: block;
}
.cert-name-lg {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: clamp(26px, 3vw, 40px);
color: var(--ink);
line-height: 1;
margin-bottom: 20px;
letter-spacing: -.02em;
}
.cert-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.cert-header .cert-name-lg {
margin-bottom: 16px;
}
.cert-inline-seal {
width: clamp(96px, 11vw, 140px);
min-width: 90px;
height: auto;
object-fit: contain;
flex-shrink: 0;
margin-top: -6px;
}
.cert-rows { display: flex; flex-direction: column; gap: 9px; }
.cert-row { display: flex; gap: 9px; font-size: 13px; color: var(--ink2); align-items: flex-start; }
.ck { color: var(--green); font-weight: 800; flex-shrink: 0; }
.dakks-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--greenb);
border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
border-radius: 999px;
padding: 4px 11px;
font-size: 10px;
font-weight: 700;
color: var(--green);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 14px;
}
.cta-cell {
background: var(--ink) !important;
border-color: transparent !important;
padding: 26px;
}
.cta-cell h3 {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: clamp(22px, 2.6vw, 32px);
color: var(--bg);
line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: 8px;
}
.cta-cell p {
font-size: 13px;
color: color-mix(in srgb, var(--bg) 60%, transparent);
line-height: 1.6;
}
.cta-phone {
display: block;
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 800;
letter-spacing: -.04em;
color: var(--bg);
margin: 16px 0 4px;
}
.cta-addr {
font-size: 11px;
color: color-mix(in srgb, var(--bg) 40%, transparent);
}
.cta-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.cta-btns a {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 9px 17px;
font-size: 13px;
font-weight: 700;
}
.cb-w { background: var(--bg); color: var(--ink); transition: opacity .15s; }
.cb-w:hover { opacity: .85; }
.cb-wa { background: #25D366; color: #fff; }
.cb-wa:hover { opacity: .9; }
.cb-g {
background: transparent;
color: var(--bg);
border: 1px solid color-mix(in srgb, var(--bg) 25%, transparent);
}
[data-theme="dark"] .cta-cell { background: #F0F0F0 !important; }
[data-theme="dark"] .cta-cell h3,
[data-theme="dark"] .cta-phone { color: #0F0F0F; }
[data-theme="dark"] .cta-cell p { color: #666; }
[data-theme="dark"] .cta-addr { color: #999; }
[data-theme="dark"] .cb-w { background: #111; color: #F0F0F0; }
[data-theme="dark"] .cb-g { color: #333; border-color: rgba(0,0,0,.18); }
.step-row {
display: flex;
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--border);
}
.step-row:last-child { border-bottom: 1px solid var(--border); }
.step-num {
font-size: 11px;
color: var(--ghost);
font-weight: 700;
width: 22px;
flex-shrink: 0;
padding-top: 2px;
}
.step-row h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.step-row p { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.svc-row {
display: flex;
align-items: baseline;
gap: 14px;
padding: 12px 26px;
border-top: 1px solid var(--border);
}
.svc-n {
font-size: 10px;
font-weight: 700;
color: var(--ghost);
letter-spacing: .06em;
flex-shrink: 0;
width: 18px;
padding-top: 1px;
}
.svc-row strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.svc-row span { font-size: 12px; color: var(--sub); line-height: 1.45; }
.rpills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.rpill {
background: var(--s2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
color: var(--ink2);
transition: background .25s;
}
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-of-type { border-top: none; }
.faq-item summary {
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--ink);
padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
color: var(--sub);
font-size: 18px;
font-weight: 300;
flex-shrink: 0;
line-height: 1;
}
details[open].faq-item > summary::after { content: '×'; }
.faq-item > p {
font-size: 13px;
color: var(--ink2);
line-height: 1.7;
padding: 0 24px 16px;
}
.faq-hdr {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--sub);
padding: 18px 24px 12px;
}
.reviews-stack-section {
max-width: 1160px;
margin: 40px auto 0;
padding: 0 20px;
}
.reviews-shell { padding: 0; }
.reviews-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.reviews-header-left { display: flex; flex-direction: column; }
.google-rating-summary { display: flex; align-items: center; gap: 16px; }
.google-g-badge {
width: 58px;
height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--sh);
flex-shrink: 0;
}
.google-g-badge img { width: 30px; height: auto; }
.reviews-title {
font-size: clamp(20px, 2vw, 28px);
line-height: 1.12;
letter-spacing: -.03em;
color: var(--ink);
margin: 0 0 4px;
}
.reviews-score-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-big-score {
font-size: 48px;
font-weight: 900;
line-height: 1;
letter-spacing: -.05em;
color: var(--ink);
}
.review-stars-overview, .review-stars {
color: #FBBC04;
letter-spacing: 2px;
text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.review-stars-overview { font-size: 20px; }
.rev-count { font-size: 12px; font-weight: 600; color: var(--sub); margin-top: 4px; }
.reviews-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.rev-google-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: var(--ink2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 14px;
transition: color .15s, border-color .15s, transform .15s;
}
.rev-google-link img { width: 16px; height: auto; }
.rev-google-link:hover { color: var(--ink); border-color: var(--b2); transform: translateY(-1px); }
.rev-nav-btns { display: flex; align-items: center; gap: 10px; }
.rev-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: grid;
place-items: center;
font-size: 18px;
cursor: pointer;
color: var(--ink);
transition: background .15s, border-color .15s, transform .15s;
}
.rev-arrow:hover { background: var(--s2); border-color: var(--b2); transform: translateY(-1px); }
.rev-counter {
font-size: 12px;
font-weight: 700;
color: var(--sub);
min-width: 44px;
text-align: center;
}
.review-stack-stage {
position: relative;
min-height: 320px;
cursor: grab;
outline: none;
user-select: none;
touch-action: pan-y;
transition: height .28s ease;
padding-top: 4px;
}
.review-stack-stage:focus-visible {
border-radius: var(--r);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent);
}
.review-stack-stage:active { cursor: grabbing; }
.review-stack {
position: relative;
width: min(760px, 100%);
margin: 0 auto;
}
.testimonial-card {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
background: color-mix(in srgb, var(--surface) 90%, transparent);
border: 1px solid var(--border);
border-radius: calc(var(--r) + 4px);
box-shadow: var(--sh), 0 22px 54px rgba(0,0,0,.08);
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
transform-origin: center top;
transition: transform .38s cubic-bezier(.22,.8,.22,1), opacity .28s ease, box-shadow .28s ease;
will-change: transform, opacity;
}
.testimonial-card.is-active { pointer-events: auto; }
.testimonial-card.is-behind, .testimonial-card.is-hidden { pointer-events: none; }
.testimonial-card.is-dragging { transition: none; }
.testimonial-inner { padding: 28px; }
.testimonial-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.review-author { display: flex; align-items: center; gap: 14px; min-width: 0; }
.review-avatar {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--ink), color-mix(in srgb, var(--ink) 65%, var(--green)));
color: var(--bg);
font-size: 14px;
font-weight: 800;
letter-spacing: .04em;
flex-shrink: 0;
}
.review-name {
font-size: 18px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
color: var(--ink);
margin: 0;
}
.review-meta { font-size: 12px; color: var(--sub); font-weight: 600; margin-top: 4px; }
.review-provider {
display: inline-flex;
align-items: center;
gap: 7px;
background: #fff;
color: #3c4043;
border: 1px solid rgba(0,0,0,.08);
border-radius: 999px;
padding: 7px 11px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.review-provider img { width: 17px; height: auto; }
.review-stars { font-size: 18px; margin-bottom: 16px; }
.review-quote {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: clamp(17px, 1.8vw, 22px);
line-height: 1.65;
letter-spacing: -.01em;
color: var(--ink);
margin: 0;
}
.review-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
border-top: 1px solid var(--border);
margin-top: 22px;
padding-top: 18px;
}
.review-tags span {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: var(--s2);
color: var(--ink2);
border: 1px solid var(--border);
padding: 6px 11px;
font-size: 11px;
font-weight: 700;
}
.review-stack-footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 14px;
margin-top: 12px;
}
.review-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
flex-wrap: wrap;
max-width: 720px;
}
.pagination-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--s3);
border: 1px solid var(--border);
transition: width .2s ease, background .2s ease, transform .2s ease;
}
.pagination-dot:hover, .pagination-dot:focus-visible { transform: scale(1.16); background: var(--ghost); }
.pagination-dot.active { width: 24px; background: var(--ink); border-color: var(--ink); }
.review-hint {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--sub);
}
@media (max-width: 900px) {
.reviews-header { align-items: flex-start; }
.reviews-header-right { align-items: flex-start; }
}
@media (max-width: 560px) {
.reviews-stack-section { padding: 0 20px; }
.google-rating-summary { align-items: flex-start; gap: 12px; }
.google-g-badge { width: 50px; height: 50px; border-radius: 16px; }
.google-g-badge img { width: 26px; }
.reviews-title { font-size: 20px; }
.rev-big-score { font-size: 42px; }
.review-stars-overview { font-size: 18px; letter-spacing: 1.5px; }
.reviews-header-right { width: 100%; }
.rev-nav-btns { width: 100%; justify-content: space-between; }
.review-stack-stage { min-height: 360px; }
.testimonial-inner { padding: 20px; }
.testimonial-head { flex-direction: column; gap: 14px; margin-bottom: 16px; }
.review-avatar { width: 44px; height: 44px; border-radius: 14px; }
.review-name { font-size: 16px; }
.review-provider { padding: 6px 10px; }
.review-stars { font-size: 17px; margin-bottom: 14px; }
.review-quote { font-size: 16px; line-height: 1.62; }
.review-tags { margin-top: 18px; padding-top: 15px; }
.review-pagination { gap: 6px; }
}
.stick {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
transition: background .25s;
}
.st-call {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--ink);
color: var(--bg);
border-radius: 14px;
padding: 12px;
font-size: 15px;
font-weight: 700;
transition: opacity .15s, background .25s, color .25s;
}
.st-call:hover { opacity: .85; }
.st-wa {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: #25D366;
color: #fff;
border-radius: 14px;
padding: 12px;
font-size: 15px;
font-weight: 700;
}
.st-wa:hover { opacity: .9; }
.footer {
max-width: 1160px;
margin: 48px auto 0;
padding: 24px 20px 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--sub);
}
.footer a { color: var(--ink2); }
.footer a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.sr { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.sr.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .15s; }
.d3 { transition-delay: .22s; }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.s3, .s4 { grid-column: span 2; }
.nav-menu { display: none; }
.photo-strip { height: 240px; }
}
@media (max-width: 560px) {
.bento { grid-template-columns: 1fr; }
.s2, .s3, .s4 { grid-column: span 1; }
.r2 { grid-row: span 1; }
.photo-strip { grid-template-columns: 1fr 1fr; height: 200px; }
.photo-strip .psi:nth-child(3) { display: none; }
.hero-h { font-size: clamp(40px, 13vw, 64px); }
.hero-meta { flex-direction: column; align-items: flex-start; gap: 20px; }
.nav-wa { display: none; }
.st-num { display: none; }
.brand span:last-child { display: none; }
.hero-head {
display: block;
}
.hero-mark {
right: -12px;
top: 10px;
width: 150px;
opacity: .10;
}
.cert-header {
align-items: center;
}
.cert-inline-seal {
width: 92px;
min-width: 92px;
margin-top: 0;
}
}
.legal-page {
padding-top: 90px;
}
.legal-hero {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px 18px;
}
.legal-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sub);
margin-bottom: 18px;
}
.legal-kicker::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--ghost);
}
.legal-title {
font-size: clamp(42px, 7vw, 86px);
line-height: .96;
letter-spacing: -.05em;
color: var(--ink);
margin-bottom: 18px;
}
.legal-title .serif {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-weight: 400;
}
.legal-intro {
max-width: 760px;
font-size: 16px;
line-height: 1.75;
color: var(--ink2);
}
.legal-grid {
max-width: 1160px;
margin: 22px auto 0;
padding: 0 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--gap);
align-items: start;
}
.legal-card,
.legal-side {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--sh);
}
.legal-card {
padding: clamp(22px, 3vw, 38px);
}
.legal-side {
padding: 22px;
position: sticky;
top: 74px;
}
.legal-side h3 {
font-size: 14px;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 12px;
}
.legal-side p,
.legal-side a {
font-size: 13px;
line-height: 1.7;
color: var(--ink2);
}
.legal-side a:hover { color: var(--ink); }
.legal-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.legal-pill {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--s2);
font-size: 12px;
font-weight: 700;
color: var(--ink);
transition: background .15s, border-color .15s;
}
.legal-pill:hover { background: var(--s3); border-color: var(--b2); }
.legal-content h2 {
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: -.03em;
line-height: 1.15;
margin: 30px 0 12px;
color: var(--ink);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
font-size: 16px;
line-height: 1.35;
letter-spacing: -.015em;
margin: 20px 0 8px;
color: var(--ink);
}
.legal-content p,
.legal-content li {
font-size: 14px;
line-height: 1.78;
color: var(--ink2);
}
.legal-content p + p { margin-top: 10px; }
.legal-content ul,
.legal-content ol {
padding-left: 20px;
margin: 10px 0 14px;
}
.legal-content li + li { margin-top: 5px; }
.legal-content strong { color: var(--ink); }
.legal-content a {
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
text-underline-offset: 3px;
}
.legal-contact {
background: var(--s2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
margin: 12px 0 18px;
}
.legal-contact p { margin: 0; }
.legal-note {
background: var(--greenb);
border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
color: var(--ink2);
border-radius: 14px;
padding: 16px 18px;
margin: 18px 0;
}
.legal-note strong { color: var(--ink); }
.legal-table {
display: grid;
gap: 8px;
margin: 12px 0 16px;
}
.legal-table-row {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--s2);
}
.legal-table-row b {
font-size: 13px;
color: var(--ink);
}
.legal-table-row span {
font-size: 13px;
line-height: 1.65;
color: var(--ink2);
}
.legal-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.legal-back:hover { opacity: .72; }
@media (max-width: 900px) {
.legal-grid { grid-template-columns: 1fr; }
.legal-side { position: static; order: -1; }
}
@media (max-width: 560px) {
.legal-page { padding-top: 82px; }
.legal-card { padding: 22px 18px; }
.legal-table-row { grid-template-columns: 1fr; gap: 4px; }
}
.privacy-trust {
position: fixed;
left: 18px;
bottom: calc(78px + env(safe-area-inset-bottom));
z-index: 98;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
pointer-events: none;
}
.privacy-trust-btn,
.privacy-trust-panel {
pointer-events: auto;
}
.privacy-trust-btn {
display: inline-flex;
align-items: center;
gap: 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
color: var(--ink);
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: -.01em;
box-shadow: var(--sh);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
overflow: hidden;
white-space: nowrap;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
padding .32s ease,
gap .32s ease;
}
.privacy-trust-btn:hover,
.privacy-trust-btn:focus-visible,
.privacy-trust-btn.is-panel-open {
transform: translateY(-1px);
border-color: var(--b2);
background: var(--surface);
}
.privacy-trust-label {
display: inline-block;
max-width: 220px;
opacity: 1;
transform: translateX(0);
overflow: hidden;
transition:
max-width .38s ease,
opacity .22s ease,
transform .38s ease;
}
.privacy-trust-btn.is-collapsed {
gap: 0;
padding-left: 12px;
padding-right: 12px;
}
.privacy-trust-btn.is-collapsed .privacy-trust-label {
max-width: 0;
opacity: 0;
transform: translateX(-8px);
}
.privacy-trust-btn.is-collapsed:hover,
.privacy-trust-btn.is-collapsed:focus-visible,
.privacy-trust-btn.is-collapsed.is-panel-open {
gap: 9px;
padding-left: 14px;
padding-right: 14px;
}
.privacy-trust-btn.is-collapsed:hover .privacy-trust-label,
.privacy-trust-btn.is-collapsed:focus-visible .privacy-trust-label,
.privacy-trust-btn.is-collapsed.is-panel-open .privacy-trust-label {
max-width: 220px;
opacity: 1;
transform: translateX(0);
}
.privacy-trust-btn:focus-visible,
.privacy-trust-close:focus-visible,
.privacy-trust-links a:focus-visible {
outline: 2px solid var(--green);
outline-offset: 3px;
}
.privacy-trust-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenb);
flex-shrink: 0;
}
.privacy-trust-panel {
width: min(390px, calc(100vw - 32px));
background: color-mix(in srgb, var(--surface) 96%, transparent);
color: var(--ink);
border: 1px solid var(--border);
border-radius: 22px;
box-shadow: var(--sh);
padding: 20px;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
position: relative;
animation: privacyTrustIn .22s ease both;
}
.privacy-trust-panel[hidden] { display: none; }
.privacy-trust-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--s2);
border: 1px solid var(--border);
color: var(--sub);
font-size: 18px;
line-height: 1;
transition: background .18s ease, color .18s ease;
}
.privacy-trust-close:hover {
background: var(--s3);
color: var(--ink);
}
.privacy-trust-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 8px;
padding-right: 32px;
}
.privacy-trust-panel h2 {
font-size: 18px;
line-height: 1.2;
letter-spacing: -.03em;
margin-bottom: 8px;
padding-right: 26px;
}
.privacy-trust-panel p {
font-size: 13px;
line-height: 1.65;
color: var(--ink2);
}
.privacy-trust-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.privacy-trust-links a {
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--s2);
color: var(--ink);
font-size: 12px;
font-weight: 700;
padding: 7px 12px;
transition: background .18s ease, border-color .18s ease;
}
.privacy-trust-links a:hover {
background: var(--s3);
border-color: var(--b2);
}
@keyframes privacyTrustIn {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 560px) {
.privacy-trust {
left: 12px;
right: 12px;
bottom: calc(78px + env(safe-area-inset-bottom));
}
.privacy-trust-btn {
padding: 9px 13px;
font-size: 11px;
}
.privacy-trust-panel {
width: 100%;
padding: 18px;
}
}
.footer-branding {
display: flex;
align-items: flex-start;
gap: 16px;
max-width: 560px;
}
.footer-logo {
width: 180px;
max-width: min(42vw, 180px);
height: auto;
object-fit: contain;
flex-shrink: 0;
}
.footer-copy {
padding-top: 4px;
}
.cert-seal-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
.cert-seal-img {
width: min(100%, 220px);
max-width: 220px;
height: auto;
object-fit: contain;
margin: 0 auto 14px;
}
@media (max-width: 560px) {
.footer-branding {
flex-direction: column;
gap: 12px;
}
.footer-logo {
width: 150px;
max-width: 150px;
}
}
.hero-title-wrap {
position: relative;
z-index: 1;
}
.hero-seo-h {
font-size: clamp(18px, 2vw, 24px);
line-height: 1.25;
letter-spacing: -.02em;
color: var(--ink2);
font-weight: 700;
max-width: 720px;
margin-bottom: 18px;
}
.seo-wrap {
margin-top: 40px;
}
.seo-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--gap);
}
.seo-grid--balanced {
grid-template-columns: repeat(2, 1fr);
}
.seo-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--sh);
padding: 28px;
transition: border-color .2s, background .25s, box-shadow .25s;
}
.seo-card:hover {
border-color: var(--b2);
}
.seo-card--wide {
background: var(--s2);
}
.seo-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--greenb);
color: var(--green);
border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
border-radius: 999px;
padding: 5px 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 16px;
}
.seo-card h2,
.seo-card h3 {
color: var(--ink);
letter-spacing: -.03em;
line-height: 1.12;
margin-bottom: 12px;
}
.seo-card h2 {
font-size: clamp(22px, 2.4vw, 32px);
}
.seo-card h3 {
font-size: clamp(18px, 1.8vw, 24px);
}
.seo-card p {
color: var(--ink2);
font-size: 14px;
line-height: 1.75;
}
.seo-benefits {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.seo-benefits span {
display: inline-flex;
align-items: center;
background: var(--surface);
color: var(--ink2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 7px 13px;
font-size: 12px;
font-weight: 700;
}
@media (max-width: 900px) {
.seo-grid,
.seo-grid--balanced {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.hero-seo-h {
font-size: 17px;
line-height: 1.35;
margin-bottom: 15px;
}
.seo-card {
padding: 22px;
}
.seo-card p {
font-size: 13px;
}
.seo-benefits span {
font-size: 11px;
padding: 6px 11px;
}
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.skip-link {
position: fixed;
left: 16px;
top: 12px;
z-index: 999;
transform: translateY(-150%);
background: var(--ink);
color: var(--bg);
border-radius: 999px;
padding: 10px 16px;
font-size: 13px;
font-weight: 700;
box-shadow: var(--sh);
transition: transform .18s ease;
}
.skip-link:focus {
transform: translateY(0);
}
.hero-mark,
.footer-logo,
.cert-inline-seal {
content-visibility: auto;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}

.stat-google-card .stat-google-top{
display:inline-flex;
align-items:center;
gap:8px;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--sub);
margin-bottom:6px;
}
.stat-google-card .stat-google-top img{
width:16px;
height:auto;
flex-shrink:0;
}
.stat-google-card .stat-google-score{
display:flex;
align-items:center;
gap:12px;
}
.stat-google-card .stat-google-star{
font-size:72px;
line-height:1;
color:#FBBC04;
text-shadow:0 1px 0 rgba(0,0,0,.06);
}
@media (max-width:560px){
.stat-google-card .stat-google-star{
font-size:58px;
}
}

.review-stack { touch-action: pan-y; }
.testimonial-card.is-active { cursor: grab; }
.testimonial-card.is-active.is-dragging { cursor: grabbing; }

/* ── 18. KNOWLEDGE PAGE ─────────────────────────────────── */
.knowledge-page { padding-top: 50px; }
.knowledge-hero { padding: 54px 0 28px; }
.knowledge-hero-inner { position: relative; }
.knowledge-title {
font-size: clamp(42px, 6.4vw, 84px);
line-height: .96;
letter-spacing: -.055em;
max-width: 940px;
color: var(--ink);
}
.knowledge-lead {
max-width: 850px;
font-size: 16px;
line-height: 1.78;
color: var(--ink2);
margin-top: 22px;
}
.knowledge-search-panel {
margin-top: 30px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: calc(var(--r) + 4px);
box-shadow: var(--sh);
max-width: 940px;
}
.knowledge-search-label {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--sub);
margin-bottom: 10px;
}
.knowledge-search-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.knowledge-search-row input,
.lex-filter-box select {
width: 100%;
border: 1px solid var(--border);
background: var(--bg);
color: var(--ink);
border-radius: 14px;
padding: 14px 16px;
font: inherit;
font-size: 15px;
}
.knowledge-search-row button {
border: 0;
border-radius: 14px;
padding: 14px 18px;
background: var(--ink);
color: var(--bg);
font-weight: 800;
font-size: 14px;
}
.knowledge-search-meta {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
font-weight: 700;
color: var(--sub);
margin-top: 12px;
}
.knowledge-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
margin-top: 16px;
}
.knowledge-highlight {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 22px;
box-shadow: var(--sh);
display: grid;
gap: 12px;
}
.knowledge-highlight span,
.knowledge-pill {
display: inline-flex;
width: fit-content;
align-items: center;
background: var(--greenb);
color: var(--green);
border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
border-radius: 999px;
padding: 6px 11px;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.knowledge-highlight strong {
font-size: 20px;
line-height: 1.35;
letter-spacing: -.025em;
color: var(--ink);
}
.knowledge-section {
margin-top: 44px;
}
.knowledge-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.knowledge-section-head h2,
.knowledge-cta h2 {
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.08;
letter-spacing: -.04em;
color: var(--ink);
margin: 0;
}
.knowledge-section-head p {
max-width: 520px;
font-size: 14px;
line-height: 1.75;
color: var(--ink2);
}
.knowledge-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
.knowledge-card,
.knowledge-step,
.knowledge-check,
.knowledge-accordion,
.lex-entry {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--sh);
}
.knowledge-card {
padding: 24px;
}
.knowledge-card h3,
.lex-entry h3,
.knowledge-step h3 {
font-size: 22px;
line-height: 1.18;
letter-spacing: -.025em;
color: var(--ink);
margin: 14px 0 10px;
}
.knowledge-card p,
.knowledge-step p,
.lex-entry p,
.knowledge-accordion-body {
font-size: 14px;
line-height: 1.78;
color: var(--ink2);
}
.knowledge-steps {
display: grid;
gap: var(--gap);
}
.knowledge-step {
display: grid;
grid-template-columns: 70px 1fr;
gap: 18px;
padding: 22px;
align-items: start;
}
.knowledge-step-num {
width: 62px;
height: 62px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--ink);
color: var(--bg);
font-size: 24px;
font-weight: 900;
}
.knowledge-step h3 { margin: 4px 0 8px; }
.knowledge-check-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
.knowledge-check {
padding: 18px 18px 18px 48px;
position: relative;
font-size: 14px;
line-height: 1.55;
font-weight: 700;
color: var(--ink2);
}
.knowledge-check::before {
content: "✓";
position: absolute;
left: 18px;
top: 17px;
width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenb);
color: var(--green);
font-size: 12px;
font-weight: 900;
}
.knowledge-accordion-list {
display: grid;
gap: 10px;
}
.knowledge-accordion {
overflow: hidden;
}
.knowledge-accordion summary {
list-style: none;
cursor: pointer;
padding: 20px 54px 20px 22px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 17px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--ink);
}
.knowledge-accordion summary::-webkit-details-marker { display: none; }
.knowledge-accordion summary::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
line-height: 1;
color: var(--sub);
}
.knowledge-accordion[open] summary::after { content: "–"; }
.knowledge-accordion summary small {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--sub);
white-space: nowrap;
}
.knowledge-accordion-body {
padding: 0 22px 22px;
}
.knowledge-accordion-body p + p { margin-top: 10px; }
.knowledge-summary {
font-weight: 800;
color: var(--ink);
}
.lex-head { align-items: center; }
.lex-filter-box {
min-width: 180px;
display: grid;
gap: 8px;
}
.lex-filter-box label {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sub);
}
.lex-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.lex-entry {
padding: 20px;
}
.lex-entry h3 {
margin: 0 0 10px;
font-size: 20px;
}
.knowledge-empty {
margin-top: 18px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--sub);
font-weight: 800;
text-align: center;
box-shadow: var(--sh);
}
.knowledge-cta {
margin-top: 48px;
margin-bottom: 50px;
padding: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
background: var(--ink);
color: var(--bg);
border-radius: calc(var(--r) + 8px);
}
.knowledge-cta .sec-lbl,
.knowledge-cta p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.knowledge-cta h2 { color: var(--bg); }
.knowledge-cta p {
max-width: 660px;
font-size: 15px;
line-height: 1.7;
margin-top: 10px;
}
.knowledge-cta-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.knowledge-cta .btn-prim {
background: var(--bg);
color: var(--ink);
}
.knowledge-cta .btn-sec {
border-color: color-mix(in srgb, var(--bg) 40%, transparent);
color: var(--bg);
}
[hidden] { display: none !important; }

@media (max-width: 980px) {
.knowledge-overview,
.knowledge-card-grid,
.knowledge-check-grid,
.lex-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.knowledge-hero { padding-top: 38px; }
.knowledge-title { font-size: clamp(38px, 12vw, 60px); }
.knowledge-lead { font-size: 15px; }
.knowledge-search-row { grid-template-columns: 1fr; }
.knowledge-step {
grid-template-columns: 1fr;
gap: 12px;
}
.knowledge-step-num {
width: 54px;
height: 54px;
border-radius: 16px;
font-size: 22px;
}
.knowledge-accordion summary {
display: block;
padding-right: 52px;
font-size: 16px;
}
.knowledge-accordion summary small {
display: block;
margin-top: 8px;
}
.knowledge-cta {
padding: 22px;
}
}

.knowledge-section[hidden] { display: none !important; }
#lexikon[hidden] { display: none !important; }

/* ── KNOWLEDGE PAGE LAYOUT HARDENING ─────────────────────── */
.knowledge-page{
display:block !important;
width:100% !important;
max-width:none !important;
overflow-x:clip;
}
.knowledge-page > .knowledge-hero,
.knowledge-page > .knowledge-overview,
.knowledge-page > .knowledge-section,
.knowledge-page > .knowledge-cta{
position:relative !important;
float:none !important;
clear:both !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:100% !important;
}
.knowledge-page > .knowledge-overview.wrap,
.knowledge-page > .knowledge-section.wrap,
.knowledge-page > .knowledge-cta.wrap{
max-width:1160px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.knowledge-section-head,
.lex-head,
.knowledge-cta{
isolation:isolate;
}
.knowledge-section-head h2,
.knowledge-cta h2{
overflow-wrap:break-word;
word-break:normal;
}
.lex-grid,
.knowledge-card-grid,
.knowledge-check-grid,
.knowledge-overview{
min-width:0;
}
.lex-entry,
.knowledge-card,
.knowledge-step,
.knowledge-check,
.knowledge-accordion{
min-width:0;
}

/* ── WISSENSSEITE SAFE LAYOUT ───────────────────────────── */
.wissensseite-safe{
display:block;
width:100%;
max-width:none;
padding-top:50px;
overflow-x:hidden;
}
.wissensseite-safe .wrap{
box-sizing:border-box;
}
.wiss-hero{
display:block;
width:100%;
padding:54px 0 28px;
}
.wiss-hero-inner{
position:relative;
}
.wiss-title{
display:block;
max-width:940px;
margin:0;
font-size:clamp(42px,6.4vw,84px);
line-height:.96;
letter-spacing:-.055em;
color:var(--ink);
}
.wiss-lead{
display:block;
max-width:850px;
font-size:16px;
line-height:1.78;
color:var(--ink2);
margin:22px 0 0;
}
.wiss-search-panel{
display:block;
margin-top:30px;
padding:20px;
background:var(--surface);
border:1px solid var(--border);
border-radius:calc(var(--r) + 4px);
box-shadow:var(--sh);
max-width:940px;
}
.wiss-search-label{
display:inline-block;
font-size:11px;
font-weight:800;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--sub);
margin-bottom:10px;
}
.wiss-search-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
}
.wiss-search-row input,
.wiss-lex-filter-box select{
width:100%;
box-sizing:border-box;
border:1px solid var(--border);
background:var(--bg);
color:var(--ink);
border-radius:14px;
padding:14px 16px;
font:inherit;
font-size:15px;
}
.wiss-search-row button{
border:0;
border-radius:14px;
padding:14px 18px;
background:var(--ink);
color:var(--bg);
font-weight:800;
font-size:14px;
}
.wiss-search-meta{
display:flex;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
font-size:12px;
font-weight:700;
color:var(--sub);
margin-top:12px;
}
.wiss-overview{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gap);
margin-top:16px;
}
.wiss-highlight{
display:grid;
gap:12px;
min-width:0;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
padding:22px;
box-shadow:var(--sh);
}
.wiss-highlight span,
.wiss-pill{
display:inline-flex;
width:fit-content;
align-items:center;
background:var(--greenb);
color:var(--green);
border:1px solid color-mix(in srgb,var(--green) 28%,transparent);
border-radius:999px;
padding:6px 11px;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.wiss-highlight strong{
font-size:20px;
line-height:1.35;
letter-spacing:-.025em;
color:var(--ink);
}
.wiss-section{
display:block;
position:relative;
width:100%;
max-width:1160px;
margin:44px auto 0;
padding:0 20px;
box-sizing:border-box;
clear:both;
}
.wiss-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
margin:0 0 20px;
position:relative;
}
.wiss-section-head h2,
.wiss-cta h2{
display:block;
font-size:clamp(28px,3.6vw,46px);
line-height:1.08;
letter-spacing:-.04em;
color:var(--ink);
margin:0;
overflow-wrap:anywhere;
}
.wiss-section-head p{
display:block;
max-width:520px;
font-size:14px;
line-height:1.75;
color:var(--ink2);
margin:0;
}
.wiss-card-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gap);
position:relative;
}
.wiss-card,
.wiss-step,
.wiss-check,
.wiss-accordion,
.wiss-lex-entry{
min-width:0;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
box-shadow:var(--sh);
}
.wiss-card{
display:block;
padding:24px;
}
.wiss-card h3,
.wiss-lex-entry h3,
.wiss-step h3{
font-size:22px;
line-height:1.18;
letter-spacing:-.025em;
color:var(--ink);
margin:14px 0 10px;
}
.wiss-card p,
.wiss-step p,
.wiss-lex-entry p,
.wiss-accordion-body{
font-size:14px;
line-height:1.78;
color:var(--ink2);
margin:0;
}
.wiss-steps{
display:grid;
gap:var(--gap);
}
.wiss-step{
display:grid;
grid-template-columns:70px minmax(0,1fr);
gap:18px;
padding:22px;
align-items:start;
}
.wiss-step-num{
width:62px;
height:62px;
border-radius:18px;
display:grid;
place-items:center;
background:var(--ink);
color:var(--bg);
font-size:24px;
font-weight:900;
}
.wiss-step h3{margin:4px 0 8px;}
.wiss-check-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gap);
}
.wiss-check{
padding:18px 18px 18px 48px;
position:relative;
font-size:14px;
line-height:1.55;
font-weight:700;
color:var(--ink2);
}
.wiss-check::before{
content:"✓";
position:absolute;
left:18px;
top:17px;
width:20px;
height:20px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--greenb);
color:var(--green);
font-size:12px;
font-weight:900;
}
.wiss-accordion-list{
display:grid;
gap:10px;
}
.wiss-accordion{
display:block;
overflow:hidden;
}
.wiss-accordion summary{
list-style:none;
cursor:pointer;
padding:20px 54px 20px 22px;
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:17px;
font-weight:800;
letter-spacing:-.01em;
color:var(--ink);
}
.wiss-accordion summary::-webkit-details-marker{display:none;}
.wiss-accordion summary::after{
content:"+";
position:absolute;
right:22px;
top:50%;
transform:translateY(-50%);
font-size:24px;
line-height:1;
color:var(--sub);
}
.wiss-accordion[open] summary::after{content:"–";}
.wiss-accordion summary small{
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--sub);
white-space:nowrap;
}
.wiss-accordion-body{
padding:0 22px 22px;
}
.wiss-accordion-body p + p{margin-top:10px;}
.wiss-summary{
font-weight:800;
color:var(--ink);
}
.wiss-lex-head{
align-items:center;
}
.wiss-lex-filter-box{
min-width:180px;
display:grid;
gap:8px;
}
.wiss-lex-filter-box label{
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--sub);
}
.wiss-lex-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gap);
}
.wiss-lex-entry{
display:block;
padding:20px;
}
.wiss-lex-entry h3{
margin:0 0 10px;
font-size:20px;
}
.wiss-empty{
display:block;
margin-top:18px;
padding:20px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
color:var(--sub);
font-weight:800;
text-align:center;
box-shadow:var(--sh);
}
.wiss-cta{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
width:calc(100% - 40px);
max-width:1120px;
margin:48px auto 50px;
padding:28px;
box-sizing:border-box;
background:var(--ink);
color:var(--bg);
border-radius:calc(var(--r) + 8px);
}
.wiss-cta .sec-lbl,
.wiss-cta p{color:color-mix(in srgb,var(--bg) 78%,transparent);}
.wiss-cta h2{color:var(--bg);}
.wiss-cta p{
max-width:660px;
font-size:15px;
line-height:1.7;
margin:10px 0 0;
}
.wiss-cta-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.wiss-cta .btn-prim{
background:var(--bg);
color:var(--ink);
}
.wiss-cta .btn-sec{
border-color:color-mix(in srgb,var(--bg) 40%,transparent);
color:var(--bg);
}
.wissensseite-safe [hidden]{
display:none !important;
}
@media (max-width:980px){
.wiss-overview,
.wiss-card-grid,
.wiss-check-grid,
.wiss-lex-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
.wiss-hero{padding-top:38px;}
.wiss-title{font-size:clamp(38px,12vw,60px);}
.wiss-lead{font-size:15px;}
.wiss-search-row{grid-template-columns:1fr;}
.wiss-step{grid-template-columns:1fr;gap:12px;}
.wiss-step-num{width:54px;height:54px;border-radius:16px;font-size:22px;}
.wiss-accordion summary{display:block;padding-right:52px;font-size:16px;}
.wiss-accordion summary small{display:block;margin-top:8px;}
.wiss-cta{width:calc(100% - 40px);padding:22px;}
}