@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-v1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-arabic-400-v1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-arabic-500-v1.woff2') format('woff2')}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/readex-pro-400-v1.woff2') format('woff2')}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/readex-pro-500-v1.woff2') format('woff2')}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/readex-pro-700-v1.woff2') format('woff2')}
:root {
--kh-ink: #13233A;
--kh-night: #0E1A2B;
--kh-mist: #F4F5F7;
--kh-white: #FFFFFF;
--kh-amber: #E8912D;
--kh-amber-on-dark: #F0A040;
--kh-signal: #2563C9;
--kh-signal-hover: #1A4A9A;
--kh-slate: #46566C;
--kh-line: #D9DEE5;
--kh-on-dark: #EAF0F6;
--kh-muted-on-dark: #A9B6C6;
--kh-soft-on-dark: #C9D3DF;
--kh-pattern-dark: #2A3B52;
--kh-error: #B3261E;
--kh-font-display: 'Readex Pro', 'Noto Kufi Arabic', Tahoma, sans-serif;
--kh-font-body: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
--kh-font-mono: 'IBM Plex Mono', 'Readex Pro', monospace;
--kh-fs-display: clamp(2.375rem, 4.6vw + 0.5rem, 4.125rem);
--kh-fs-h2: clamp(1.875rem, 2.4vw + 0.9rem, 2.875rem);
--kh-fs-h3: 1.5rem;
--kh-fs-lead: 1.1875rem;
--kh-fs-body: 1.125rem;
--kh-fs-small: 0.9375rem;
--kh-fs-label: 0.8125rem;
--kh-s1: 8px;  --kh-s2: 16px; --kh-s3: 24px; --kh-s4: 32px;
--kh-s6: 48px; --kh-s8: 64px; --kh-s11: 88px;
--kh-r-control: 12px;
--kh-r-card: 20px;
--kh-r-panel: 24px;
--kh-container: 1200px;
--kh-gutter: 24px;
--kh-shadow-float: 0 12px 28px rgba(14, 26, 43, 0.28);
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--kh-mist);
color: var(--kh-ink);
font-family: var(--kh-font-display);
font-size: var(--kh-fs-body);
line-height: 1.5;
text-rendering: optimizeLegibility;
}
:lang(ar) { letter-spacing: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--kh-font-display); font-weight: 700; }
a { color: var(--kh-signal); }
a:hover { color: var(--kh-signal-hover); }
:focus-visible {
outline: 3px solid var(--kh-signal);
outline-offset: 3px;
border-radius: 6px;
}
.skip-link {
position: absolute;
inset-inline-start: var(--kh-s2);
top: -100px;
z-index: 100;
padding: 12px 18px;
background: var(--kh-ink);
color: var(--kh-white);
border-radius: var(--kh-r-control);
text-decoration: none;
}
.skip-link:focus { top: var(--kh-s2); color: var(--kh-white); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap;
}
.container {
width: 100%;
max-width: var(--kh-container);
margin-inline: auto;
padding-inline: var(--kh-gutter);
}
.section { padding-block: var(--kh-s11); }
.section--white { background: var(--kh-white); }
.section__head {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 40px;
}
.kicker {
font-family: var(--kh-font-display);
font-size: var(--kh-fs-small);
font-weight: 500;
color: var(--kh-slate);
}
.h2 { font-size: var(--kh-fs-h2); line-height: 1.25; }
.dot-accent { color: var(--kh-amber); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 24px;
border-radius: var(--kh-r-control);
border: 2px solid transparent;
font-family: var(--kh-font-display);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--kh-ink); color: var(--kh-white); }
.btn--primary:hover { background: var(--kh-night); color: var(--kh-white); }
.btn--outline { background: transparent; color: var(--kh-ink); border-color: var(--kh-ink); }
.btn--outline:hover { background: var(--kh-ink); color: var(--kh-white); }
.btn--amber { background: var(--kh-amber-on-dark); color: var(--kh-night); font-weight: 700; }
.btn--amber:hover { background: #F5B25E; color: var(--kh-night); }
.btn--block { width: 100%; }
.btn svg { flex: none; }
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(244, 245, 247, 0.92);
backdrop-filter: saturate(1.2) blur(10px);
-webkit-backdrop-filter: saturate(1.2) blur(10px);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--kh-line); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kh-s3);
min-height: 80px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--kh-ink);
text-decoration: none;
}
.brand:hover { color: var(--kh-ink); }
.brand__mark { width: 34px; height: auto; }
.brand__name { font-size: 1.625rem; font-weight: 700; }
.nav__list {
display: flex;
align-items: center;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.nav__link {
color: var(--kh-ink);
text-decoration: none;
font-size: 1.0625rem;
padding-block: 8px;
}
.nav__link:hover { color: var(--kh-signal); }
.header__actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
display: none;
width: 48px; height: 48px;
align-items: center; justify-content: center;
border: 0;
border-radius: var(--kh-r-control);
background: var(--kh-ink);
color: var(--kh-white);
cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.hero { padding-block: var(--kh-s6) var(--kh-s11); }
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: center;
gap: 56px;
}
.hero__copy { display: flex; flex-direction: column; gap: var(--kh-s3); }
.hero__tagline { font-size: 1.0625rem; font-weight: 500; color: var(--kh-slate); }
.hero__title { font-size: var(--kh-fs-display); line-height: 1.2; }
.hero__lead {
max-width: 34em;
font-family: var(--kh-font-body);
font-size: var(--kh-fs-lead);
line-height: 1.8;
color: var(--kh-slate);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.reassure {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--kh-font-body);
font-size: var(--kh-fs-small);
color: var(--kh-slate);
}
.reassure li { display: inline-flex; align-items: center; gap: 8px; }
.reassure svg { color: var(--kh-ink); }
.algo-card {
background: var(--kh-night);
color: var(--kh-on-dark);
border-radius: var(--kh-r-panel);
padding: 34px;
}
.algo-card__title { font-size: 1.5rem; font-weight: 700; }
.algo-card__intro {
margin-top: var(--kh-s1);
font-family: var(--kh-font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--kh-soft-on-dark);
}
.algo-steps { margin: 26px 0 0; padding: 0; list-style: none; }
.algo-step { display: flex; gap: 18px; }
.algo-step__rail {
display: flex;
flex-direction: column;
align-items: center;
width: 28px;
flex: none;
}
.algo-step__rail::after {
content: "";
flex-grow: 1;
width: 2px;
margin-block: 4px;
background: var(--kh-pattern-dark);
}
.algo-step:last-child .algo-step__rail::after { display: none; }
.algo-step__body { padding-bottom: 20px; }
.algo-step:last-child .algo-step__body { padding-bottom: 0; }
.algo-step__name { font-size: 1.1875rem; font-weight: 700; }
.algo-step__name--decision { color: var(--kh-amber-on-dark); }
.algo-step__desc {
font-family: var(--kh-font-body);
font-size: var(--kh-fs-small);
color: var(--kh-muted-on-dark);
}
.services {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.service {
display: flex;
flex-direction: column;
gap: var(--kh-s2);
padding: 30px;
background: var(--kh-mist);
border-radius: var(--kh-r-card);
}
.service__title { font-size: var(--kh-fs-h3); }
.service__facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.service__facts dt { font-size: var(--kh-fs-label); font-weight: 500; color: var(--kh-slate); }
.service__facts dd {
margin: 2px 0 0;
font-family: var(--kh-font-body);
font-size: 1rem;
line-height: 1.65;
}
.about__grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: center;
gap: 56px;
}
.about__copy { display: flex; flex-direction: column; gap: 20px; }
.about__copy p {
max-width: 36em;
font-family: var(--kh-font-body);
font-size: var(--kh-fs-body);
line-height: 1.85;
color: var(--kh-slate);
}
.origin-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 22px;
padding: 36px 36px 128px;
background: var(--kh-night);
color: var(--kh-on-dark);
border-radius: var(--kh-r-panel);
}
.origin-card__pattern {
position: absolute;
inset-inline-start: -40px;
bottom: -48px;
width: 360px;
pointer-events: none;
}
.origin-card > *:not(.origin-card__pattern) { position: relative; }
.origin-card__label { font-size: var(--kh-fs-small); color: var(--kh-muted-on-dark); }
.origin-card__equation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
font-size: clamp(1.625rem, 1.4vw + 1rem, 2.125rem);
font-weight: 700;
}
.origin-card__text {
max-width: 22em;
font-family: var(--kh-font-body);
font-size: 1rem;
line-height: 1.8;
color: var(--kh-soft-on-dark);
}
.faq { max-width: 860px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
background: var(--kh-white);
border: 1px solid var(--kh-line);
border-radius: 16px;
padding-inline: var(--kh-s3);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kh-s2);
padding-block: 22px;
font-size: 1.1875rem;
font-weight: 500;
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { flex: none; color: var(--kh-slate); transition: transform .2s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p {
padding-bottom: 22px;
font-family: var(--kh-font-body);
font-size: 1rem;
line-height: 1.8;
color: var(--kh-slate);
}
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: var(--kh-s4);
align-items: start;
}
.contact__intro { display: flex; flex-direction: column; gap: 20px; }
.contact__intro p {
font-family: var(--kh-font-body);
font-size: var(--kh-fs-body);
line-height: 1.8;
color: var(--kh-slate);
}
.contact__email {
font-family: var(--kh-font-mono);
font-size: 1rem;
text-decoration: none;
align-self: flex-start;
}
.form {
display: flex;
flex-direction: column;
gap: 18px;
padding: var(--kh-s4);
background: var(--kh-white);
border: 1px solid var(--kh-line);
border-radius: 22px;
}
.field { display: flex; flex-direction: column; gap: var(--kh-s1); }
.field__label { font-size: var(--kh-fs-small); font-weight: 500; }
.field__input {
width: 100%;
min-height: 50px;
padding: 13px 16px;
border: 1px solid var(--kh-line);
border-radius: var(--kh-r-control);
background: var(--kh-white);
color: var(--kh-ink);
font-family: var(--kh-font-body);
font-size: 1rem;
}
.field__input::placeholder { color: #7A889B; }
.field__input:focus { outline: none; border-color: var(--kh-signal); box-shadow: 0 0 0 3px rgba(37, 99, 201, 0.18); }
textarea.field__input { resize: vertical; min-height: 120px; line-height: 1.7; }
select.field__input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346566C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 16px center;
padding-inline-start: 40px;
}
.field__input[aria-invalid="true"] { border-color: var(--kh-error); }
.field__error { min-height: 1.2em; font-family: var(--kh-font-body); font-size: 0.875rem; color: var(--kh-error); }
.field__error:empty { display: none; }
.form__note { font-family: var(--kh-font-body); font-size: 0.8125rem; color: var(--kh-slate); }
.form__status {
font-family: var(--kh-font-body);
font-size: var(--kh-fs-small);
line-height: 1.7;
color: var(--kh-ink);
}
.form__status:empty { display: none; }
.form__status.is-success {
padding: 12px 16px;
background: var(--kh-mist);
border-inline-start: 3px solid var(--kh-amber);
border-radius: 8px;
}
.site-footer { background: var(--kh-night); color: var(--kh-on-dark); }
.site-footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 28px;
padding-block: 56px 32px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.footer__brand .brand { color: var(--kh-on-dark); }
.footer__brand .brand__mark { width: 30px; }
.footer__about { font-family: var(--kh-font-body); font-size: var(--kh-fs-small); line-height: 1.7; color: var(--kh-muted-on-dark); }
.footer__email { font-family: var(--kh-font-mono); font-size: var(--kh-fs-small); color: var(--kh-on-dark); text-decoration: none; }
.footer__email:hover { color: var(--kh-amber-on-dark); }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--kh-s6); }
.footer__col h2 { font-size: var(--kh-fs-small); font-weight: 500; color: var(--kh-muted-on-dark); margin-bottom: 10px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__col a { color: var(--kh-on-dark); text-decoration: none; font-size: var(--kh-fs-small); }
.footer__col a:hover { color: var(--kh-amber-on-dark); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding-block: 22px 32px;
border-top: 1px solid var(--kh-pattern-dark);
font-family: var(--kh-font-body);
font-size: var(--kh-fs-label);
color: var(--kh-muted-on-dark);
}
.site-footer__bottom a { color: var(--kh-muted-on-dark); }
.float-contact {
position: fixed;
inset-inline-end: 20px;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
z-index: 40;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-radius: 999px;
background: var(--kh-ink);
color: var(--kh-white);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
box-shadow: 0 0 0 3px rgba(244, 245, 247, 0.9), var(--kh-shadow-float);
}
.float-contact:hover { background: var(--kh-night); color: var(--kh-white); }
.services > .service { grid-column: span 2; }
.services > .service:nth-child(4), .services > .service:nth-child(5) { grid-column: span 3; }
.service__more {
margin-top: auto;
padding-top: 4px;
font-size: var(--kh-fs-small);
font-weight: 500;
text-decoration: none;
}
.service__title a { color: inherit; text-decoration: none; }
.service__title a:hover { color: var(--kh-signal); }
.breadcrumb { padding-top: var(--kh-s4); }
.breadcrumb ol {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0; padding: 0; list-style: none;
font-family: var(--kh-font-body); font-size: var(--kh-fs-small); color: var(--kh-slate);
}
.breadcrumb li + li::before { content: "‹"; margin-inline-end: 8px; color: var(--kh-line); }
.breadcrumb a { color: var(--kh-slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--kh-signal); }
.page-hero { padding-block: var(--kh-s4) var(--kh-s8); }
.page-hero__inner { display: flex; flex-direction: column; gap: var(--kh-s3); max-width: 820px; }
.page-hero h1 { font-size: clamp(2.125rem, 3.6vw + 0.6rem, 3.5rem); line-height: 1.2; }
.page-hero__lead { font-family: var(--kh-font-body); font-size: var(--kh-fs-lead); line-height: 1.8; color: var(--kh-slate); max-width: 40em; }
.summary {
display: flex; gap: var(--kh-s2); align-items: flex-start;
padding: 22px 24px;
background: var(--kh-white);
border: 1px solid var(--kh-line);
border-inline-start: 4px solid var(--kh-amber);
border-radius: 14px;
}
.summary svg { flex: none; margin-top: 4px; }
.summary p { font-family: var(--kh-font-body); font-size: 1.0625rem; line-height: 1.8; }
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); line-height: 1.3; margin: var(--kh-s6) 0 var(--kh-s2); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-family: var(--kh-font-body); font-size: var(--kh-fs-body); line-height: 1.85; color: var(--kh-slate); }
.prose p + p { margin-top: var(--kh-s2); }
.prose ul { margin: var(--kh-s2) 0 0; padding-inline-start: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--kh-ink); font-weight: 500; }
.deliverables {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
margin: var(--kh-s2) 0 0; padding: 0; list-style: none;
}
.deliverables li {
padding: 18px 20px; background: var(--kh-mist); border-radius: 16px;
font-family: var(--kh-font-body); font-size: 1rem; line-height: 1.7; color: var(--kh-slate);
}
.deliverables b { display: block; margin-bottom: 4px; font-family: var(--kh-font-display); font-size: 1.0625rem; color: var(--kh-ink); }
.steps-list { margin: var(--kh-s2) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps-list li {
position: relative; padding-inline-start: 44px; padding-bottom: 18px;
font-family: var(--kh-font-body); font-size: var(--kh-fs-body); line-height: 1.8; color: var(--kh-slate);
}
.steps-list li::before {
counter-increment: step; content: counter(step);
position: absolute; inset-inline-start: 0; top: 2px;
width: 30px; height: 30px; display: grid; place-items: center;
border-radius: 50%; background: var(--kh-ink); color: var(--kh-white);
font-family: var(--kh-font-mono); font-size: 0.875rem;
}
.steps-list li b { color: var(--kh-ink); font-family: var(--kh-font-display); font-weight: 500; }
.related { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--kh-s2) 0 0; padding: 0; list-style: none; }
.related a {
display: inline-flex; padding: 10px 16px; border: 1px solid var(--kh-line); border-radius: 999px;
background: var(--kh-white); color: var(--kh-ink); text-decoration: none; font-size: var(--kh-fs-small);
}
.related a:hover { border-color: var(--kh-ink); }
.cta-band { background: var(--kh-night); color: var(--kh-on-dark); border-radius: var(--kh-r-panel); padding: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.3; }
.cta-band p { margin-top: 8px; font-family: var(--kh-font-body); color: var(--kh-soft-on-dark); }
.notfound { padding-block: var(--kh-s11); display: flex; flex-direction: column; align-items: flex-start; gap: var(--kh-s3); }
.notfound h1 { font-size: var(--kh-fs-h2); }
.notfound p { font-family: var(--kh-font-body); font-size: var(--kh-fs-body); color: var(--kh-slate); }
.legal { max-width: 760px; padding-block: var(--kh-s8) var(--kh-s11); }
.legal h1 { font-size: var(--kh-fs-h2); margin-bottom: var(--kh-s3); }
.legal h2 { font-size: 1.375rem; margin: var(--kh-s4) 0 var(--kh-s1); }
.legal p, .legal li { font-family: var(--kh-font-body); font-size: 1.0625rem; line-height: 1.85; color: var(--kh-slate); }
@media (max-width: 960px) {
.services > .service, .services > .service:nth-child(4), .services > .service:nth-child(5) { grid-column: span 3; }
.services > .service:nth-child(5) { grid-column: span 6; }
.hero__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
.hero__grid, .about__grid { gap: var(--kh-s6); }
}
@media (max-width: 820px) {
.menu-toggle { display: inline-flex; }
.header__cta { display: none; }
.nav {
position: absolute;
inset-inline: var(--kh-gutter);
top: calc(100% + 8px);
display: none;
padding: 8px 18px 18px;
background: var(--kh-white);
border: 1px solid var(--kh-line);
border-radius: 16px;
box-shadow: 0 16px 32px rgba(14, 26, 43, 0.12);
}
.nav.is-open { display: block; }
.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav__link { display: block; padding: 14px 4px; border-bottom: 1px solid var(--kh-line); }
.nav__cta { display: flex; margin-top: 14px; }
.section { padding-block: var(--kh-s8); }
.float-contact__label { display: none; }
.float-contact { padding: 16px; }
}
@media (min-width: 821px) {
.nav__cta { display: none; }
}
@media (max-width: 640px) {
.services > .service, .services > .service:nth-child(4), .services > .service:nth-child(5) { grid-column: span 6; }
.cta-band { padding: 28px; }
}
@media (max-width: 480px) {
:root { --kh-gutter: 20px; }
.algo-card, .form { padding: 24px; }
.origin-card { padding: 24px 24px 112px; }
.service { padding: 24px; }
.hero__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
.site-header, .float-contact, .form { display: none; }
body { background: #fff; }
}
.field__input::placeholder { color: var(--kh-slate); }
.updated-at { color: var(--kh-slate); font-size: 0.9375rem; line-height: 1.8; }
.site-footer :focus-visible, .hero :focus-visible { outline-color: var(--kh-amber-on-dark); }
.prose, .page-hero__inner, .footer__col { min-width: 0; overflow-wrap: anywhere; }
.service { position: relative; }
.service__more::after { content: ""; position: absolute; inset: 0; border-radius: var(--kh-r-card); cursor: pointer; }
.service:has(a:focus-visible) { outline: 3px solid var(--kh-signal); outline-offset: 3px; }