/*
 * The public website (the design of klinikrafa.com). Sizes, colours and
 * spacing follow the original site; the colours of the menu bar, buttons and
 * dark sections come from Website › Settings (--kr-nav, --kr-red, --kr-dark).
 * Breakpoints as on the original: 1119, 1023, 767 and 479 pixels.
 */
:root {
    --kr-nav: #880F0F;
    --kr-red: #810000;
    --kr-dark: #4C0909;
    --kr-bg: #F9FAFB;
    --kr-text: #374151;
    --kr-sys: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --kr-pop: "Poppins", sans-serif;
    --kr-mont: "Montserrat", sans-serif;
    --kr-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .145);
    --kr-btn-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .43);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.kr-body { margin: 0; background: var(--kr-bg); color: var(--kr-text); font-family: var(--kr-sys); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.kr-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; padding: 10px 16px; }
.kr-skip:focus { left: 10px; top: 10px; }
:focus-visible { outline: 2px solid var(--kr-red); outline-offset: 2px; }

.kr-container { width: 80%; margin: 0 auto; padding: 0 20px; }
.kr-section { padding: 100px 0; }

/* ------------------------------------------------------------- buttons */
.kr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--kr-pop); font-size: 14px; font-weight: 500; letter-spacing: .5px; line-height: 1;
    color: #fff; background: var(--kr-red); border: 2px solid #fff; border-radius: 25px;
    padding: 14px 24px; box-shadow: var(--kr-btn-shadow); text-align: center;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.kr-btn:hover { transform: translateY(-2px); }
.kr-btn--outline { color: var(--kr-red); background: #fff; border-color: var(--kr-red); }
.kr-btn--arrow::after { content: "\f30b"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; transition: transform .3s ease; }
.kr-btn--arrow:hover::after { transform: translateX(4px); }
.kr-btn--small { font-size: 12px; letter-spacing: 1px; padding: 8px 16px; }
.kr-btn--tiny { font-size: 12px; letter-spacing: 1px; padding: 8px 16px; border-width: 1px; box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, .17); white-space: nowrap; }
.kr-btn i { font-size: 12px; }
.kr-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 50px; }
.kr-buttons--center { justify-content: center; }
.kr-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kr-pop); font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--kr-red); }
.kr-more::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; transition: transform .3s ease; }
.kr-more:hover::after { transform: translateX(3px); }

.kr-arrows { display: flex; gap: 10px; }
.kr-arrows button {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #939393; border: 0; border-radius: 8px; font-size: 18px;
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, .145);
}
.kr-arrows button:hover { color: var(--kr-red); }

/* ---------------------------------------------------------------- titles */
.kr-title { font-family: var(--kr-mont); font-size: 55px; line-height: 1; text-transform: uppercase; color: #000; }
.kr-title span { display: block; }
.kr-title__light { font-weight: 100; }
.kr-title__bold { font-weight: 600; }
.kr-lead { font-family: var(--kr-pop); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; color: var(--kr-text); margin: 20px 0; }
.kr-redline { display: block; width: 45px; height: 3px; background: var(--kr-red); margin: 10px auto; }
.kr-redline--left { margin-left: 0; }

/* ---------------------------------------------------------------- header */
.kr-header { background: var(--kr-bg); position: relative; z-index: 50; }
.kr-topbar { background: #272727; padding: 12px 10vw; display: flex; justify-content: flex-end; }
.kr-share { display: flex; gap: 18px; align-items: center; }
.kr-share a { color: #fff; font-size: 16px; line-height: 1; display: inline-flex; }
.kr-share a:hover { opacity: .8; }
.kr-masthead { display: flex; align-items: center; justify-content: space-between; padding: 20px 9.5vw; min-height: 130px; }
.kr-logo { display: inline-block; flex: 0 0 auto; }
.kr-masthead .kr-logo { width: calc(30% * .45); min-width: 120px; margin-left: 0; }
.kr-masthead .kr-logo img { width: 100%; }
.kr-branches { display: flex; align-items: flex-start; }
.kr-branch { width: 16vw; padding-right: 10px; margin-bottom: 5px; }
.kr-branch + .kr-branch { width: 14vw; padding: 0 15px; border-left: 1.5px solid rgba(228, 228, 228, .83); }
.kr-branch + .kr-branch + .kr-branch { width: 15vw; padding: 0 0 0 10px; }
.kr-branch:nth-child(2):not(:last-child) { border-right: 1.5px solid rgba(228, 228, 228, .83); }
.kr-branch__name { display: block; color: var(--kr-red); font-size: 15px; font-weight: 700; letter-spacing: .2px; line-height: 18px; }
.kr-branch__phone { display: flex; align-items: center; gap: 8px; font-family: var(--kr-pop); font-size: 14px; font-weight: 600; letter-spacing: .5px; line-height: 20px; color: var(--kr-text); }
.kr-branch__phone i { font-size: 11px; color: rgba(179, 179, 179, .8); }
.kr-branch__address { font-size: 12px; font-weight: 300; font-style: italic; letter-spacing: .5px; color: #545454; line-height: 1.2; }
.kr-branch__reg { font-size: 11px; font-weight: 500; font-style: italic; letter-spacing: .2px; color: #545454; line-height: 1.2; margin-top: 5px; }

/* the red menu bar */
.kr-nav { background: var(--kr-nav); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: 5px 9vw 5px 8.5vw; }
.kr-menu { display: flex; align-items: center; }
.kr-menu--main { gap: 15px; }
.kr-menu__item { position: relative; display: flex; align-items: center; }
.kr-menu--main .kr-menu__link {
    display: block; background: none; border: 0; padding: 20px; font-family: var(--kr-pop); font-size: 16px; font-weight: 600;
    letter-spacing: 1px; line-height: 16px; text-transform: uppercase; color: #fff;
}
.kr-menu--main .has-children > .kr-menu__link { padding-right: 0; }
.kr-menu__arrow { background: none; border: 0; color: inherit; padding: 20px 20px 20px 10px; font-size: 12px; line-height: 16px; }
.kr-menu--main .kr-menu__arrow { color: #fff; }
.kr-menu__arrow i { transition: transform .3s ease; }
.kr-menu--main .kr-menu__item:hover,
.kr-menu--main .kr-menu__item.is-open { background: rgba(0, 0, 0, .12); }
.kr-menu__item.is-open > .kr-menu__arrow i,
.kr-menu--main .kr-menu__item:hover > .kr-menu__arrow i { transform: rotate(180deg); }
/* never squeezed onto two lines: like the original, it moves to a second row of the bar when the menu needs the room */
.kr-btn--nav { font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 14px 24px; white-space: nowrap; }

/* dropdowns */
.kr-dropdown {
    position: absolute; top: calc(100% + 15px); left: 0; z-index: 60; min-width: 300px;
    background: #fff; border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .2); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.kr-dropdown::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
.kr-menu--main .kr-dropdown::after,
.kr-menu--sticky .kr-dropdown::after { content: ""; position: absolute; top: -8px; left: 60px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; }
.kr-menu__item:hover > .kr-dropdown,
.kr-menu__item.is-open > .kr-dropdown,
.kr-menu__item:focus-within > .kr-dropdown { opacity: 1; visibility: visible; transform: none; }
.kr-dropdown__main { padding: 30px 30px 20px; }
.kr-dropdown__title { display: block; font-family: var(--kr-pop); font-size: 14px; font-weight: 600; color: #1D1D1D; letter-spacing: .3px; margin-bottom: 14px; }
.kr-dropdown__link { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; white-space: nowrap; font-family: var(--kr-pop); }
.kr-dropdown__link img { width: 25px; height: 25px; object-fit: contain; flex: 0 0 25px; margin-top: -2px; }
.kr-dropdown__link i { font-size: 22px; color: #1D1D1D; flex: 0 0 22px; margin-top: 2px; }
.kr-dropdown__link strong { display: block; font-size: 14px; font-weight: 400; letter-spacing: .5px; color: #2B2B2B; }
.kr-dropdown__link small { display: block; font-size: 12px; font-weight: 400; letter-spacing: .3px; color: #444; margin-top: 2px; }
.kr-dropdown__main ul:not(:has(img)) .kr-dropdown__link strong { color: var(--kr-red); font-weight: 500; font-size: 15px; }
.kr-dropdown__main ul:not(:has(img)) .kr-dropdown__link { padding: 10px 0; }
.kr-dropdown__link:hover strong { color: var(--kr-red); }
.kr-dropdown__extra { display: flex; justify-content: space-between; gap: 40px; padding: 25px 30px; background: #F3F4F6; }
.kr-dropdown__extra .kr-dropdown__link { padding: 0; }
.kr-dropdown__extra strong { color: var(--kr-red); font-weight: 500; font-size: 15px; }

/* the bar that slides in when scrolling back up */
.kr-sticky {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; gap: 0;
    padding: 10px 10vw 20px; background: var(--kr-bg); box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .54);
    transform: translateY(-110%); transition: transform .35s ease; visibility: hidden;
}
.kr-sticky.is-shown { transform: none; visibility: visible; }
.kr-sticky__logo { width: 15%; flex: 0 0 15%; }
.kr-sticky__logo img { width: 80%; }
.kr-menu--sticky { flex: 1; justify-content: space-evenly; margin-top: 10px; }
.kr-menu--sticky .kr-menu__link { display: block; background: none; border: 0; padding: 10px 0; font-family: var(--kr-pop); font-size: 16px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #1D1D1D; position: relative; }
.kr-menu--sticky .kr-menu__arrow { color: #1D1D1D; padding: 10px 0 10px 8px; }
.kr-menu--sticky .is-active > .kr-menu__link { color: var(--kr-red); }
.kr-menu--sticky .kr-menu__item { padding: 0 10px; }
.kr-menu--sticky .kr-menu__item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--kr-red); }
.kr-btn--sticky { margin-top: 10px; font-size: 14px; font-weight: 600; padding: 14px 24px; }
.kr-mobile-head { display: none; }

/* ------------------------------------------------------------------ hero */
.kr-hero { position: relative; background: #F7F7F7; padding-bottom: 48px; overflow: hidden; }
.kr-hero__track { position: relative; height: 540px; }
.kr-hero__slide { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.kr-hero__slide.is-active { opacity: 1; visibility: visible; }
/* sideways change, as the original's slider (1 s); the track is a transformed box like the original's, so the fixed background of an overlay slide moves with its slide */
.kr-hero--slide .kr-hero__track { transform: translateZ(0); }
.kr-hero--slide .kr-hero__slide { opacity: 1; visibility: visible; transform: translateX(100%); transition: transform 1s ease; }
.kr-hero--slide .kr-hero__slide.is-before { transform: translateX(-100%); }
.kr-hero--slide .kr-hero__slide.is-active { transform: none; }
.kr-hero__slide--split .kr-hero__image { width: 50%; height: 100%; }
.kr-hero__slide--split .kr-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.kr-hero__panel { width: 50%; height: 100%; background: #E8E8E8; display: flex; align-items: center; }
.kr-hero__content { padding-left: 100px; }
.kr-hero__tagline { font-family: var(--kr-pop); font-size: 14px; font-weight: 500; letter-spacing: .5px; line-height: 1.5; text-transform: uppercase; color: #080808; margin-bottom: 15px; }
.kr-hero__title { font-weight: normal; }
.kr-hero__highlight {
    display: inline-block; position: relative; z-index: 0; font-family: var(--kr-pop); font-size: 45px; font-weight: 700; line-height: 1.3;
    color: var(--kr-bg); padding: 0 2px; margin: -10px 0 12px;
}
.kr-hero__highlight::before { content: ""; position: absolute; z-index: -1; inset: 2px -3px 0 -3px; background: var(--kr-red); transform: rotate(-.6deg) skewX(-1deg); transform-origin: left center; clip-path: polygon(0 4%, 100% 0, 99.6% 100%, .4% 96%); }
/* the marker is drawn from left to right each time its slide comes in (rough-notation on the original) */
.kr-hero__slide.is-active .kr-hero__highlight::before { animation: kr-mark .8s ease-out .3s both; }
@keyframes kr-mark {
    from { transform: rotate(-.6deg) skewX(-1deg) scaleX(0); }
    to { transform: rotate(-.6deg) skewX(-1deg) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .kr-hero__slide.is-active .kr-hero__highlight::before { animation: none; } }
.kr-hero__rest { display: block; font-family: var(--kr-pop); font-size: 45px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #000; }
.kr-hero__slide--overlay { background-size: cover; background-position: center; background-attachment: fixed; justify-content: flex-end; align-items: center; padding: 30px 10% 50px 30px; }
.kr-hero__box { background: rgba(247, 247, 247, .75); padding: 50px 40px 50px 23px; text-align: right; }
.kr-hero__stack span { display: block; font-family: var(--kr-mont); font-size: 55px; line-height: 1; text-transform: uppercase; color: #000; font-weight: 600; }
.kr-hero__stack .kr-hero__thin { font-weight: 100; }
.kr-hero__stack .kr-hero__red { color: var(--kr-red); }
.kr-hero__box .kr-buttons { justify-content: flex-end; }
/* the original's hero buttons carry an 18 px arrow (4 px after it), which sets their height */
.kr-hero .kr-btn { line-height: 18px; }
.kr-hero .kr-btn--arrow::after { display: inline-block; width: 18px; margin-right: 4px; text-align: center; }
.kr-hero__arrows { position: absolute; right: 20px; bottom: 0; }
/* as on the original: the arrows keep their place on large screens but only show on tablets and phones */
.kr-hero__arrows--small { visibility: hidden; }
@media (max-width: 1119px) { .kr-hero__arrows--small { visibility: visible; } }

/* ----------------------------------------------------- framed image intro */
.kr-intro { background: #F7F7F7; text-align: center; }
/* a centred column as the original's section; the frame is as wide as its picture, 20 px left of the centre */
.kr-intro > .kr-container { display: flex; flex-direction: column; align-items: center; }
/* the original's framed picture: a red block and, 30 px lower and to the right, the picture zoomed 1.29 times in its box,
   45% of the screen's height (35% from 1023 px, 25% from 767 px) and as wide as the picture is at that height */
.kr-intro__frame { width: fit-content; max-width: 100%; margin-left: -20px; background: var(--kr-red); }
.kr-intro__clip { display: block; width: 100%; margin: 30px 0 -30px 30px; overflow: hidden; }
.kr-intro__clip img { width: 100%; height: 45vh; aspect-ratio: auto 4 / 3; object-fit: cover; transform: scale(1.29); }
.kr-intro__title { font-family: var(--kr-pop); font-size: 25px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; margin-top: 70px; }
.kr-intro__text { font-family: var(--kr-pop); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; margin: 20px auto 0; }
/* the original's buttons: an 18 px arrow box (4 px after it) sets their height, 50 px */
.kr-intro .kr-btn { line-height: 18px; }
.kr-intro .kr-btn--arrow::after { display: inline-block; width: 18px; margin-right: 4px; text-align: center; }

/* ----------------------------------------------------- services overview */
.kr-overview { background: #fff; }
/* the original's two columns: 62.66% and 37.34% less their share of the 50 px between them, 30 px below the top */
.kr-overview__grid { display: flex; column-gap: 50px; margin-top: 30px; }
.kr-overview__main { flex: 0 1 calc(62.66% - 25px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.kr-overview .kr-lead { margin: 20px 0; }
.kr-overview__lists { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; }
.kr-overview__lists .kr-iconlist { margin-top: 10px; }
.kr-iconlist li:last-child { margin-bottom: 0; }
.kr-overview .kr-buttons { margin-top: 50px; }
.kr-overview .kr-btn { line-height: 18px; }
.kr-overview .kr-btn--arrow::after { display: inline-block; width: 18px; margin-right: 4px; text-align: center; }
.kr-iconlist li { display: flex; gap: var(--kr-tick-gap, 18px); align-items: flex-start; font-family: var(--kr-pop); font-size: 15px; font-weight: 300; letter-spacing: 1px; line-height: 21px; color: #2B2B2B; text-transform: capitalize; margin-bottom: 16px; }
.kr-iconlist li::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex: 0 0 var(--kr-tick, 20px); width: var(--kr-tick, 20px); height: var(--kr-tick, 20px); border-radius: 2px; background: var(--kr-red); color: #fff; font-size: 8px; display: inline-flex; align-items: center; justify-content: center; }
.kr-iconlist a:hover { color: var(--kr-red); }
/* the cards beside the text, centred in its height; a card is 90% of the column wide and as tall as its own content */
.kr-overview__cards { flex: 0 0 calc(37.34% - 25px); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kr-cards-track { display: grid; width: 90%; margin-top: 30px; }
/* as the original's slides: each card centred in the slider's height, 20 px below it */
.kr-scard { grid-area: 1 / 1; align-self: center; margin-bottom: 20px; background: #fff; border: 1px solid #D4D4D4; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; display: flex; flex-direction: column; }
.kr-scard.is-active { opacity: 1; visibility: visible; }
.kr-scard img { width: 100%; height: 30vh; object-fit: cover; }
.kr-scard__body { padding: 0 15px 20px; text-align: left; }
.kr-scard__body h3 { font-family: var(--kr-mont); font-size: 18px; font-weight: 600; line-height: 1.2; color: #171717; margin: 20px 0 0; }
/* the original's link button: its arrow sets a 23 px line */
.kr-scard .kr-more { line-height: 23px; letter-spacing: 1px; }

/* ---------------------------------------------------- cards on dark red */
.kr-info { background: var(--kr-dark); }
/* a column of flex items, as the original's section: the margins of the title, the line under it and the cards add up */
.kr-info > .kr-container { display: flex; flex-direction: column; }
.kr-info__title { font-family: var(--kr-mont); font-size: 45px; font-weight: 600; line-height: 1; color: #fff; }
.kr-info__subtitle { font-family: var(--kr-pop); font-size: 15px; font-weight: 400; letter-spacing: 1px; line-height: 1; color: #E6E6E6; margin: 10px 0; }
.kr-info--center { text-align: center; }
.kr-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 50px; text-align: left; }
.kr-info--icons .kr-info__grid { margin-top: 30px; }
/* the link at the bottom of each card, the cards of a row as tall as the tallest (the original's icon box) */
.kr-icard { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border-radius: 18px; padding: 30px; }
.kr-icard__icon { display: inline-flex; width: 60px; height: 60px; border-radius: 12px; background: var(--kr-red); color: #fff; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 28px; }
.kr-icard h3 { font-family: var(--kr-pop); font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--kr-text); margin-bottom: 12px; }
.kr-icard p { font-size: 16px; line-height: 1.4; color: var(--kr-text); margin-bottom: auto; }
.kr-icard .kr-more { margin-top: 24px; font-size: 14px; letter-spacing: .2px; line-height: 1; }
.kr-pcard { display: flex; flex-direction: column; align-items: center; background: #CECECE; border: 1px solid rgba(197, 197, 197, .76); border-radius: 8px; box-shadow: var(--kr-shadow); padding-bottom: 30px; overflow: hidden; text-align: center; transition: background-color .3s ease; }
.kr-pcard:hover { background: #EAEAEA; }
/* the picture is a fifth of the screen's height, as on the original */
.kr-pcard img { width: 100%; height: 20vh; object-fit: cover; }
.kr-pcard h3 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; line-height: 1.2; color: #000; margin: 20px 0 10px; }
.kr-pcard .kr-ticks { align-self: stretch; text-align: left; padding: 0 20px; margin-top: 30px; }
.kr-pcard .kr-ticks li:last-child { margin-bottom: 0; }
.kr-pcard p { align-self: stretch; padding: 0 20px; margin-top: 10px; text-align: left; }

/* ticked list (red squares) */
.kr-ticks li { display: flex; gap: var(--kr-tick-gap, 18px); align-items: flex-start; font-family: var(--kr-pop); font-size: 15px; font-weight: 300; letter-spacing: 1px; line-height: 21px; color: #2B2B2B; text-transform: capitalize; margin-bottom: 16px; }
.kr-ticks li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex: 0 0 var(--kr-tick, 20px); width: var(--kr-tick, 20px); height: var(--kr-tick, 20px); border-radius: 2px; background: var(--kr-red); color: #fff; font-size: var(--kr-tick-font, 10px); display: inline-flex; align-items: center; justify-content: center; }

/* ----------------------------------------------------------- wide image */
.kr-banner { background: #fff; }
.kr-banner img { width: 100%; height: 25vh; object-fit: cover; }

/* -------------------------------------------- page title with side text */
.kr-heading { background: #fff; }
.kr-heading__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; }
.kr-heading__grid--single { grid-template-columns: 1fr; }
.kr-heading__side { font-family: var(--kr-pop); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; color: var(--kr-text); margin-top: 20px; }

/* ------------------------------------------ text with sidebar and form */
.kr-content { background: #fff; }
/* the text and the sidebar as the original's two columns: 60.1% and 39.9% with 10% between them, shrinking together */
.kr-content__grid { display: flex; align-items: flex-start; }
.kr-content__main { flex: 0 1 60.1%; min-width: 0; }
.kr-content__grid--single .kr-content__main { flex-basis: 100%; }
.kr-content__main.has-background { position: relative; }
.kr-content__main.has-background::before { content: ""; position: absolute; inset: 0; background: var(--kr-content-bg) center / cover no-repeat; opacity: .35; pointer-events: none; }
.kr-content__main.has-background > * { position: relative; }
.kr-content__images { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.kr-content__images img { width: 100%; height: 22vh; object-fit: cover; }
.kr-call { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; margin-top: 30px; }
.kr-note { background: #F3DBDB; border: 2px dashed rgba(165, 165, 165, .67); box-shadow: var(--kr-shadow); padding: 30px; margin: 30px 0 20px; }
.kr-note h3 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: 1px; line-height: 1.4; color: #000; }
.kr-note p { font-family: var(--kr-pop); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; color: #000; margin-top: 10px; }
.kr-content__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 30px; }
.kr-content__columns h3 { font-family: var(--kr-pop); font-size: 14px; font-weight: 600; line-height: 1; color: #3C3C3C; }
.kr-content__columns .kr-redline { margin: 10px 0 20px; }
/* as the original: 20 px under the note and 30 px above the columns add up; 50 px before the call line */
.kr-note + .kr-content__columns { margin-top: 50px; }
.kr-content__columns + .kr-call { margin-top: 50px; }
.kr-content__columns .kr-ticks li:last-child { margin-bottom: 0; }

/* the WhatsApp button */
.kr-wa {
    display: inline-flex; align-items: center; gap: 15px; margin-top: 20px; padding: 0 10px 0 15px; min-height: 62px;
    border: 2px solid #fff; border-radius: 50px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .145);
    background: linear-gradient(0deg, rgb(32, 142, 9) 0%, rgb(29, 168, 16) 100%); color: #fff; transition: transform .3s ease;
}
.kr-wa:hover { transform: translateY(-2px); }
/* the logo in a square box, as the original's icon */
.kr-wa__logo { font-size: 38px; width: 1em; text-align: center; }
.kr-wa__text { display: flex; flex-direction: column; font-family: var(--kr-pop); text-align: left; }
.kr-wa__text strong { font-size: 14px; font-weight: 500; letter-spacing: .5px; line-height: 1.2; }
.kr-wa__text small { font-size: 12px; font-weight: 300; letter-spacing: 1px; line-height: 1.2; }
.kr-wa__go { font-size: 22px; color: rgba(9, 125, 36, .82); background: #fff; border-radius: 50%; border: 3px solid #E6E4F3; padding: 2px; margin-left: 4px; }

/* sidebar */
.kr-side { flex: 0 1 39.9%; min-width: 0; margin: var(--kr-side-offset, 0) 0 0 10%; text-align: center; }
.kr-side__card { position: relative; }
/* the original's small corner picture: just above the card on large screens, over its top-left corner from 1119, centred from 1023 */
.kr-side__corner { position: absolute; left: -1px; top: -51px; width: 52px; z-index: 1; }
.kr-side__card { background: #F3F3F3; border: 1px solid #CCC; border-radius: 2px; box-shadow: var(--kr-shadow); }
.kr-side__image { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.kr-side__body { padding: 50px 40px 0; text-align: left; }
.kr-side__body h2 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; padding-bottom: 30px; border-bottom: 2px solid #4C4C4C; margin-bottom: 30px; }
.kr-side__body > p { font-family: var(--kr-pop); font-size: 15px; font-weight: 300; letter-spacing: 1px; line-height: 21px; color: var(--kr-text); margin-top: 20px; }
.kr-side__form { background: var(--kr-red); padding: 30px; margin-top: 30px; }
.kr-side__form h2 { font-family: var(--kr-pop); font-size: 14px; font-weight: 400; letter-spacing: .5px; line-height: 1.3; color: #fff; text-align: center; }
.kr-side__bottom-image { width: 100%; margin-top: 15px; }
/* the original's small picture under the form: 85 px (52 px on small phones) */
.kr-side__bottom-image.is-small { width: 85px; margin: 0; }
.kr-side__note { background: #F3F3F3; padding: 30px 20px; margin-top: 15px; text-align: left; }
.kr-side__note p { font-size: 14px; }
/* layout "wide" (the original's yellow fever page): text 60.1%, sidebar 37%, 30 px apart; the note in 13.5 px */
.kr-content--wide .kr-content__grid { justify-content: space-between; column-gap: 30px; }
.kr-content--wide .kr-side { flex-basis: 37%; margin-left: 0; }
.kr-content--wide .kr-side__body { padding-bottom: 30px; }
.kr-content--wide .kr-side__form { margin-top: 0; }
.kr-content--wide .kr-side__form h2 { font-size: 16px; }
.kr-content--wide .kr-side__note p { font-size: 13.5px; letter-spacing: 0; }
.kr-content--wide .kr-side__note > p:first-child { font-weight: 500; }
.kr-content--wide .kr-side__note p + p { margin-top: 15px; }
.kr-content--wide .kr-side__note a { font-size: 13.5px; font-weight: 400; }
/* sidebar position "bottom" (the original's urine test page) and "spread" (its offshore page) */
@media (min-width: 1024px) {
    .kr-content--side-bottom .kr-side { align-self: flex-end; }
    .kr-content--side-spread .kr-side { align-self: stretch; display: flex; flex-direction: column; }
    .kr-content--side-spread .kr-side__card { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
}
@media (min-width: 1120px) { .kr-content--side-spread .kr-side__form h2 { font-size: 16px; } }
@media (max-width: 1023px) {
    .kr-content--side-spread .kr-side__body { width: 57%; }
    .kr-content--side-spread .kr-side__form { width: 43%; margin-top: 30px; align-self: center; }
}
@media (max-width: 767px) {
    .kr-content--side-spread .kr-side__body, .kr-content--side-spread .kr-side__form { width: 100%; }
}
/* "Sidebar: space above it on landscape phones" 50 px (the original's general medical, diving, offshore and seafarers pages) */
@media (min-width: 480px) and (max-width: 767px) { .kr-content--side-space-50 .kr-side { margin-top: 50px; } }
.kr-content.kr-content--wide .kr-content__main .kr-richtext p + ul { margin-top: 30px; }
.kr-side__note.kr-richtext > :first-child { margin-top: 0; }

/* forms */
.kr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.kr-form > * { grid-column: span 2; }
.kr-form--short > .kr-input:not(.kr-input--wide) { grid-column: span 1; }
/* as the original's form: fields as tall as their text makes them, the button's line as tall as its letters */
.kr-form--short .kr-input:not(textarea) { min-height: 0; }
.kr-form--short .kr-form__submit { line-height: 1; }
.kr-input {
    width: 100%; font-family: var(--kr-pop); font-size: 12px; letter-spacing: .5px; color: #000; background: #fff;
    border: 1px solid #D1D5DB; border-radius: 3px; padding: 12px 16px; min-height: 44px;
}
.kr-input::placeholder { color: #787E8B; }
textarea.kr-input { resize: vertical; min-height: 80px; }
.kr-form__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--kr-pop); font-size: 12px; font-weight: 500; letter-spacing: .5px;
    color: #fff; background: #4C4C4C; border: 1px solid transparent; padding: 14px 24px; transition: background-color .3s ease;
}
.kr-form__submit:hover { background: #333; }
.kr-form__submit { white-space: nowrap; }
.kr-form__submit i { transition: transform .3s ease; }
.kr-form__submit:hover i { transform: translateX(4px); }
.kr-form__done { background: #E8F5E9; color: #1B5E20; font-family: var(--kr-pop); font-size: 13px; padding: 10px 12px; border-radius: 3px; text-align: left; }
.kr-form__errors { background: #FFF1F1; color: #8A1C1C; font-family: var(--kr-pop); font-size: 12px; padding: 10px 12px; border-radius: 3px; text-align: left; }
.kr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- rich text */
.kr-richtext { font-family: var(--kr-pop); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; color: var(--kr-text); }
.kr-richtext > * + * { margin-top: 20px; }
.kr-richtext p { margin-top: 20px; }
.kr-richtext > :first-child { margin-top: 20px; }
.kr-richtext strong, .kr-richtext b { font-weight: 600; }
/* bold words in the content block's text one step above the light text (400), as the original */
.kr-content__main .kr-richtext strong, .kr-content__main .kr-richtext b { font-weight: bolder; }
.kr-richtext a { color: var(--kr-red); text-decoration: underline; }
.kr-richtext h2, .kr-richtext h3 { font-family: var(--kr-pop); font-size: 20px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; margin-top: 30px; }
.kr-richtext h4 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; margin-top: 30px; }
.kr-richtext h5 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: #000; margin-top: 30px; }
.kr-richtext h4.kr-wavy + h5 { margin-top: 31px; }
/* a sub-heading in the content block's text is a line of the text in medium weight (the original's diving page) */
.kr-content__main .kr-richtext h4 { font-size: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; margin-top: 20px; }
/* as the diving page: 30 px under that line, 40 px between a list and the next text (both 20 / 30 px below 1120 px) */
.kr-content--standard .kr-content__main .kr-richtext h4 + p { margin-top: 30px; }
.kr-content--standard .kr-content__main .kr-richtext ul + p { margin-top: 40px; }
@media (max-width: 1119px) {
    .kr-content--standard .kr-content__main .kr-richtext h4 + p { margin-top: 20px; }
    .kr-content--standard .kr-content__main .kr-richtext ul + p { margin-top: 30px; }
}
.kr-richtext small { color: #000; letter-spacing: .2px; }
.kr-richtext > p:first-child:has(> small:only-child) { margin-top: 30px; }
/* a line in small print is as tall as its letters (the original's heading of 14 px, line 1.2) */
.kr-richtext p:has(> small:only-child) { font-size: 14px; line-height: 1.2; }
.kr-richtext small { font-size: inherit; }
.kr-richtext ul { margin-top: 30px; }
.kr-content .kr-richtext:not(.kr-richtext--squares) p + ul { margin-top: 10px; }
.kr-richtext ul li { position: relative; min-height: var(--kr-tick, 20px); padding-left: calc(var(--kr-tick, 20px) + var(--kr-tick-gap, 18px)); margin-bottom: 16px; color: #2B2B2B; text-transform: capitalize; }
.kr-richtext ul li::before { position: absolute; left: 0; top: 1px; width: var(--kr-tick, 20px); height: var(--kr-tick, 20px); border-radius: 2px; background: var(--kr-red); color: #fff; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: var(--kr-tick-font, 10px); display: flex; align-items: center; justify-content: center; content: "\f061"; }
.kr-richtext--checks ul li::before, .kr-richtext ul.kr-checks li::before { content: "\f00c"; }
.kr-richtext--squares ul, .kr-richtext ul.kr-squares { list-style: square; padding-left: 20px; }
.kr-richtext--squares ul li, .kr-richtext ul.kr-squares li { padding-left: 15px; margin-bottom: 10px; color: #000; text-transform: none; min-height: 0; }
.kr-richtext--squares ul li::before, .kr-richtext ul.kr-squares li::before { content: none; }
.kr-richtext ul.kr-arrows li { padding-left: calc(var(--kr-tick, 20px) + var(--kr-tick-gap, 18px)); margin-bottom: 16px; text-transform: capitalize; }
.kr-richtext ul.kr-arrows li::before { content: "\f061"; width: var(--kr-tick, 20px); height: var(--kr-tick, 20px); background: var(--kr-red); top: 1px; left: 0; border-radius: 2px; }
.kr-richtext ul.kr-cols-2 { columns: 2; column-gap: 30px; }
.kr-richtext ul.kr-cols-2 li { break-inside: avoid; }
.kr-richtext ol { padding-left: 22px; margin-top: 20px; }
.kr-richtext hr { border: 0; height: 2px; background: #ccc; margin: 30px 0; }
.kr-richtext hr.kr-line { width: 65%; height: 3px; background: var(--kr-red); margin: 30px 0 20px; }
/* no space after a sidebar list's last line (the original's icon list) */
.kr-side .kr-ticks li:last-child { margin-bottom: 0; }
.kr-richtext .kr-red { color: var(--kr-red); }
.kr-richtext .kr-wavy { text-decoration: underline wavy var(--kr-red); text-underline-offset: 10px; text-decoration-thickness: 1.5px; padding-bottom: 10px; }
.kr-richtext .kr-phone, .kr-richtext .kr-mail { font-size: 14px; margin-top: 4px; }
.kr-richtext .kr-phone::before { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; margin-right: 10px; color: #000; }
.kr-richtext .kr-mail::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; margin-right: 10px; color: #000; }
.kr-richtext .kr-red + .kr-phone { margin-top: 10px; }
/* the narrow text (terms, privacy) as the original's: the clinic's name 18 px 500, its lines 16 px grey, the closing line 500 */
.kr-text--narrow .kr-richtext .kr-red strong { font-size: 18px; font-weight: 500; letter-spacing: .2px; }
.kr-text--narrow .kr-richtext .kr-red { margin-top: 30px; }
.kr-text--narrow .kr-richtext .kr-phone, .kr-text--narrow .kr-richtext .kr-mail { font-size: inherit; color: #4C4C4C; }
.kr-text--narrow .kr-richtext .kr-phone::before, .kr-text--narrow .kr-richtext .kr-mail::before { font-size: 14px; color: #4C4C4C; }
.kr-text--narrow .kr-richtext > p:last-child { margin-top: 30px; color: #000; }
.kr-text--narrow .kr-richtext > p:last-child strong { font-weight: 500; }
.kr-richtext a.kr-button { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: var(--kr-red); border: 2px solid #fff; border-radius: 25px; padding: 12px 22px; font-size: 14px; font-weight: 500; letter-spacing: .5px; box-shadow: var(--kr-btn-shadow); }
.kr-richtext a.kr-button::after { content: "\f30b"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* ----------------------------------------------------------------- doctors */
.kr-doctors .kr-heading__grid { align-items: end; }
.kr-doctors__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.kr-doctor { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid rgba(197, 197, 197, .76); border-radius: 8px; padding: 20px; }
.kr-doctor img { width: 126px; height: 198px; object-fit: cover; flex: 0 0 126px; margin-left: 16px; }
.kr-doctor h3 { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; line-height: 1.2; color: #000; margin: 10px 0; }
.kr-doctor p { font-family: var(--kr-mont); font-size: 11px; font-weight: 500; line-height: 1.5; color: #333; margin-bottom: 10px; }
.kr-badge { display: inline-block; font-family: var(--kr-mont); font-size: 11px; font-weight: 500; line-height: 1.5; color: #fff; background: var(--kr-red); padding: 5px; }

/* ----------------------------------------------------------- icon cards */
.kr-features__title { font-family: var(--kr-mont); font-size: 25px; font-weight: 600; line-height: 1; color: var(--kr-red); }
.kr-features__subtitle { font-family: var(--kr-mont); font-size: 15px; font-weight: 500; letter-spacing: .5px; line-height: 1; color: #000; margin: 10px 0; }
.kr-features--center { text-align: center; }
/* a column of flex items, as the original's section and cards: the margins add up */
.kr-features > .kr-container { display: flex; flex-direction: column; }
.kr-features--center .kr-redline { margin: 10px auto; }
.kr-features--grey { background: #ECECEC; }
.kr-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 50px; }
.kr-features--centered .kr-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kr-feature { display: flex; flex-direction: column; padding: 50px 35px; border: 1px solid rgba(197, 197, 197, .76); border-radius: 8px; text-align: center; transition: background-color .3s ease; }
.kr-features--boxed .kr-feature { border-bottom: 3px solid var(--kr-red); border-right: 3px solid var(--kr-red); }
.kr-features--boxed .kr-feature:hover { background: #EAEAEA; border: 3px solid var(--kr-red); border-bottom-width: 0; border-right-width: 0; padding: 50px 38px 53px 33px; }
.kr-feature__title { display: flex; align-items: flex-start; justify-content: center; gap: 8px; font-family: var(--kr-pop); font-size: 18px; font-weight: 500; line-height: 1.2; color: #050506; text-align: left; }
.kr-feature__icon { color: var(--kr-red); font-size: 17px; margin-top: 2px; }
.kr-feature p { font-family: var(--kr-mont); font-size: 16px; font-weight: 400; line-height: 1.5; color: #333; text-align: left; margin: 20px 0 10px; }
.kr-features--centered .kr-feature { align-items: center; }
.kr-features--centered .kr-feature__title { flex-direction: column; align-items: center; text-align: center; color: #000; gap: 10px; margin-bottom: 10px; }
.kr-features--centered .kr-feature__img, .kr-features--centered .kr-feature__icon { width: 25%; height: auto; aspect-ratio: 1; padding: 10px; border-radius: 50%; background: #E8E8E8; border: 2px solid var(--kr-red); object-fit: contain; margin: 0 0 0; }
.kr-features--centered .kr-feature__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.kr-features--centered .kr-feature__title { align-self: stretch; }
.kr-features--centered .kr-feature p { align-self: stretch; text-align: center; margin: 0 0 10px; }
.kr-features--boxed .kr-feature__img { width: 20px; height: 20px; object-fit: contain; }
/* the original's icon list: a 20 px icon box, 8 px, then the text; a short title centred, a long one across the card */
.kr-features--boxed .kr-feature__icon { flex: 0 0 20px; width: 20px; height: 20px; line-height: 20px; text-align: center; margin-top: 0; }

/* ---------------------------------------- live blocks (data from the portal) */
.kr-doctors--live .kr-doctor { align-items: stretch; }
.kr-doctors--live .kr-doctor > div { display: flex; flex-direction: column; align-items: flex-start; }
.kr-doctor__meta { display: flex; gap: 6px; align-items: baseline; font-family: var(--kr-pop) !important; font-size: 12px !important; color: #4C4C4C !important; margin: 0 0 6px !important; }
.kr-doctor__meta i { color: var(--kr-red); font-size: 11px; }
.kr-doctors--live .kr-btn { margin-top: auto; }
.kr-branches-live { background: #fff; }
.kr-branch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 50px; align-items: start; }
.kr-branch-card { background: #fff; border: 1px solid rgba(204, 204, 204, .86); border-radius: 5px; box-shadow: var(--kr-shadow); overflow: hidden; }
.kr-branch-card > img { width: 100%; height: 190px; object-fit: cover; }
.kr-branch-card__body { padding: 18px; }
.kr-branch-card h3 { font-family: var(--kr-pop); font-size: 15px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--kr-red); line-height: 1.2; margin-bottom: 8px; }
.kr-branch-card__line { display: flex; gap: 8px; align-items: baseline; font-family: var(--kr-pop); font-size: 13px; font-weight: 300; letter-spacing: .3px; line-height: 1.4; color: #4C4C4C; margin-top: 6px; }
.kr-branch-card__line i { color: #222; font-size: 11px; width: 12px; }
.kr-branch-card__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kr-hours { width: 100%; border-collapse: collapse; margin-top: 14px; font-family: var(--kr-pop); font-size: 12px; color: #4C4C4C; }
.kr-hours caption { text-align: left; font-weight: 500; color: #1D1D1D; font-size: 13px; padding-bottom: 6px; caption-side: top; }
.kr-hours th, .kr-hours td { padding: 4px 0; border-top: 1px solid #EFEFEF; font-weight: 300; text-align: left; }
.kr-hours td { text-align: right; }
.kr-hours tr.is-today th, .kr-hours tr.is-today td { font-weight: 600; color: #111; }
.kr-hours tr.is-closed td { color: var(--kr-red); }
.kr-today { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--kr-pop); font-size: 12px !important; letter-spacing: .3px; margin: 0 0 6px !important; color: #4C4C4C !important; }
.kr-today strong { font-weight: 600; }
.kr-today__dot { width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; flex: 0 0 8px; }
.kr-today--open strong { color: #15803D; }
.kr-today--open .kr-today__dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.kr-today--break strong { color: #B45309; }
.kr-today--break .kr-today__dot { background: #F59E0B; }
.kr-today--closed strong, .kr-today--closed_today strong { color: var(--kr-red); }
.kr-today--closed .kr-today__dot, .kr-today--closed_today .kr-today__dot { background: var(--kr-red); }
.kr-services-live { background: #fff; }
.kr-service-cat { margin-top: 40px; }
.kr-service-cat__title { font-family: var(--kr-mont); font-size: 25px; font-weight: 600; line-height: 1.1; color: var(--kr-red); }
.kr-service-cat .kr-redline { margin: 10px 0 20px; }
.kr-service-count { font-size: 13px; font-weight: 400; color: #8A8A8A; margin-left: 6px; }
.kr-service-cat summary { justify-content: flex-start; gap: 4px; }
.kr-service-cat summary i { margin-left: auto; }
.kr-service-list { padding: 0 16px 14px; }
.kr-service-list li { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid #F0F0F0; font-family: var(--kr-pop); font-size: 14px; font-weight: 300; letter-spacing: .3px; color: #2B2B2B; }
.kr-service-list__name { flex: 1; }
.kr-service-list__price { font-weight: 500; color: #111; white-space: nowrap; }
.kr-service-list .kr-more { white-space: nowrap; }

/* --------------------------------------------------------- image cards */
.kr-cardgrid { background: #fff; }
.kr-cardgrid > .kr-container { padding-bottom: 50px; }
.kr-cardgrid__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; padding: 20px 0; position: relative; }
.kr-ccard { background: #fff; display: flex; flex-direction: column; }
.kr-ccard img { width: 100%; height: 35vh; object-fit: cover; }
.kr-ccard__body { padding: 0 15px 39px; }
.kr-ccard h3 { font-family: var(--kr-mont); font-size: 15px; font-weight: 600; line-height: 1.2; color: #171717; margin-top: 20px; }
/* the original's link button: its arrow sets a 23 px line */
.kr-ccard .kr-more { line-height: 23px; }
.kr-ccard h3 a:hover { color: var(--kr-red); }
.kr-ccard p { font-family: var(--kr-pop); font-size: 13px; font-weight: 300; letter-spacing: .5px; line-height: 1.4; color: #777; margin: 5px 0 10px; }

/* ---------------------------------------------------------------- contact */
.kr-contact { background: #fff; }
.kr-contact__image { width: 87.2%; }
.kr-contact__image img { width: 100%; height: 225px; object-fit: cover; }
.kr-contact__grid { display: grid; grid-template-columns: 445fr 597fr; gap: 70px; align-items: start; }
.kr-contact__places { padding-top: 50px; }
.kr-linetitle { display: flex; align-items: center; gap: 10px; font-family: var(--kr-mont); font-size: 30px; letter-spacing: 1.5px; line-height: 1.2; text-transform: uppercase; color: #020202; }
.kr-linetitle span { font-weight: 200; }
.kr-linetitle strong { font-weight: 600; }
.kr-linetitle::after { content: ""; width: 144px; height: 1px; background: #020202; margin-left: 0; }
.kr-place { display: flex; gap: 20px; background: #fff; border: 1px solid rgba(204, 204, 204, .86); border-radius: 5px; padding: 15px; margin: 20px 0; }
.kr-linetitle + .kr-place { margin-top: 30px; }
.kr-place + .kr-linetitle { margin-top: 50px; }
.kr-place img { width: 106px; height: 79px; object-fit: cover; flex: 0 0 106px; }
.kr-place h3 { font-family: var(--kr-pop); font-size: 14px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--kr-red); line-height: 1.2; }
.kr-place p { font-family: var(--kr-pop); font-size: 12px; font-weight: 300; letter-spacing: .5px; line-height: 1.4; color: #4C4C4C; margin: 5px 0 10px; }
.kr-place p.kr-phone, .kr-place p.kr-whatsapp, .kr-place p.kr-mail { margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; }
.kr-place .kr-phone::before { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: #222; }
.kr-place .kr-whatsapp::before { content: "\f232"; font-family: "Font Awesome 6 Brands"; font-weight: 400; font-size: 12px; color: #222; }
.kr-place .kr-mail::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: #222; }
.kr-place--hq { display: block; padding: 21px; margin-bottom: 50px; }
.kr-linetitle + .kr-place--hq { margin-top: 10px; }
.kr-place--hq p:first-child { margin-top: 5px; }
.kr-place .kr-btn { margin-top: 0; }
.kr-contact__form { background: #F3F3F3; box-shadow: var(--kr-shadow); padding: 70px; }
.kr-contact__form > p { font-family: var(--kr-pop); font-size: 14px; font-weight: 300; letter-spacing: 1px; line-height: 1.4; color: var(--kr-text); margin-top: 20px; }
.kr-contact__form .kr-linetitle::after { width: 72px; }
.kr-form--full { margin-top: 30px; gap: 16px; }
.kr-form--full .kr-input { font-size: 14px; min-height: 47px; }
.kr-form--full .kr-form__submit { grid-column: 2; justify-self: end; background: var(--kr-red); font-size: 13px; padding: 12px 24px; }

/* ------------------------------------------------------------ logo groups */
.kr-logos { background: #fff; }
.kr-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--kr-red); color: #fff; padding: 10px; font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: 1px; line-height: 1.4; box-shadow: var(--kr-shadow); margin-bottom: 20px; }
.kr-tag i { font-size: 15px; }
.kr-logos__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; padding-top: 20px; margin-bottom: 60px; }
.kr-logos__item { background: #fff; box-shadow: var(--kr-shadow); aspect-ratio: 122 / 124; display: flex; align-items: center; justify-content: center; padding: 8px; }
.kr-logos__item img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* ----------------------------------------------------------------- gallery */
.kr-gallery { background: #fff; }
.kr-gallery__title { font-family: var(--kr-mont); font-size: 25px; font-weight: 600; line-height: 1; color: #000; margin-bottom: 30px; }
.kr-gallery--tabs { background: var(--kr-bg); text-align: center; }
.kr-gallery--tabs .kr-gallery__title { color: var(--kr-red); margin-bottom: 0; }
.kr-gallery--tabs .kr-redline { margin: 10px auto 40px; }
.kr-tabs__list button { white-space: nowrap; }
.kr-albums { border: 2px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
.kr-album + .kr-album { border-top: 2px solid #E5E7EB; }
.kr-album summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; cursor: pointer; font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .5px; color: #111827; }
.kr-album summary::-webkit-details-marker { display: none; }
.kr-album summary i { font-size: 14px; color: #9CA3AF; transition: transform .3s ease; transform: rotate(-90deg); }
.kr-album[open] summary i { transform: none; }
.kr-album__body { padding: 20px 16px 16px; }
.kr-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kr-photos__item { display: block; aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, .19); }
.kr-photos__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kr-photos__item:hover img { transform: scale(1.05); }
.kr-gallery__caption { font-family: var(--kr-pop); font-size: 15px; font-weight: 300; font-style: italic; letter-spacing: .5px; color: #616161; margin: 10px 0; }
.kr-tabs { display: grid; grid-template-columns: 207px minmax(0, 1fr); gap: 24px; text-align: left; }
.kr-tabs__list { display: flex; flex-direction: column; border-left: 2px solid #E5E5E5; }
.kr-tabs__list button { background: none; border: 0; border-left: 2px solid transparent; margin-left: -2px; padding: 14px 18px 22px; text-align: left; font-family: var(--kr-pop); font-size: 16px; line-height: 1.15; color: #828282; }
.kr-tabs__list button[aria-selected="true"] { color: var(--kr-red); border-left-color: var(--kr-red); }
.kr-tabs__panel { background: #F0F0F0; padding: 30px 30px 20px; }
.kr-tabs__panel h3 { font-family: var(--kr-mont); font-size: 18px; font-weight: 600; line-height: 1; color: #3C3C3C; }
.kr-tabs__panel .kr-photos { margin: 10px 0 20px; gap: 15px; }
/* the original's tab photos: a quarter of the screen's height (15% on small phones) */
.kr-tabs__panel .kr-photos__item { aspect-ratio: auto; height: 25vh; }
.kr-tabs__panel .kr-gallery__caption { line-height: 1; }

/* ---------------------------------------------- FAQ and expandable lists */
.kr-faq { background: #fff; }

/* booking page: the portal's booking form in a frame (BookingController, booking.css inside the frame) */
.kr-booking { background: #fff; padding: 0 0 100px; }
.kr-booking .kr-container { width: 100%; max-width: 1120px; }
.kr-booking__frame { display: block; width: 100%; height: 640px; border: 0; background: #F3F3F3; box-shadow: var(--kr-shadow); }
@media (max-width: 767px) { .kr-booking .kr-container { padding: 0 8px; } }
.kr-accordion-block { background: #fff; }
.kr-accordion { display: flex; flex-direction: column; gap: 16px; }
.kr-accordion__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: #F3F4F6; border-radius: 999px; cursor: pointer; font-family: var(--kr-pop); font-size: 18px; font-weight: 400; letter-spacing: .5px; line-height: 1.5; color: #111827; }
.kr-accordion__item summary::-webkit-details-marker { display: none; }
.kr-accordion__item summary i { color: #9CA3AF; font-size: 18px; transition: transform .3s ease; }
.kr-accordion__item[open] summary i { transform: rotate(90deg); }
.kr-accordion__body { padding: 4px 24px 20px; }
.kr-accordion__body > :first-child { margin-top: 16px; }

/* ------------------------------------------------------------ WhatsApp CTA */
.kr-cta { background: #fff; text-align: center; }
.kr-cta .kr-call { margin-top: 0; }

/* -------------------------------------------------------------- testimonials */
.kr-testimonials { background: #fff; }
/* the original's two columns: 77.9% (with 10% inside on the right) and 22.1%, 50 px apart */
.kr-testimonials__head { display: flex; column-gap: 50px; }
.kr-testimonials__head .kr-title { flex: 0 1 calc(77.9% - 25px); min-width: 0; padding-right: 10%; align-self: flex-end; }
.kr-testimonials__badge { flex: 0 1 calc(22.1% - 25px); min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.kr-testimonials__rating { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.kr-testimonials__rating img { width: 55%; }
.kr-stars { display: flex; gap: 4px; color: #FBBF24; font-size: 19px; width: 116px; justify-content: space-between; }
.kr-testimonials__badge .kr-btn { align-self: flex-end; margin-top: 10px; font-size: 13px; font-weight: 400; border-width: 1px; }
/* the reviews 15 px apart, each in a 15 px frame, centred in its row (the original's grid) */
.kr-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 50px; }
.kr-reviews__item { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; background: #fff; box-shadow: var(--kr-shadow); }
/* a small review picture stays its own size, as on the original */
.kr-reviews__item img { width: auto; max-width: 100%; }

/* ---------------------------------------------------------------- text */
.kr-text { background: #fff; }
.kr-text--grey { background: #F7F7F7; }
.kr-title--solo .kr-title__bold { font-size: inherit; }
/* with a picture: the title and text 60.1%, the picture 39.9% (5% between them, at the bottom), as the original */
.kr-text__cols.has-image { display: flex; }
.kr-text__cols.has-image .kr-text__main { flex: 0 1 60.1%; min-width: 0; }
.kr-text__side { flex: 0 1 39.9%; min-width: 0; margin-left: 5%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.kr-text__image { height: 42vh; width: auto; max-width: 100%; object-fit: cover; margin-bottom: 10px; }

/* ------------------------------------------------------------------ footer */
/* a column of flex items, as the original's: the margins between the columns and the bar add up instead of collapsing */
.kr-footer { display: flex; flex-direction: column; background: var(--kr-bg); padding-top: 70px; }
/* the original's three columns: 33%, 38.44% and 28.56% of the row, each less its share of the two 32 px gaps */
.kr-footer__cols { display: grid; grid-template-columns: calc(33% - 64px / 3) calc(38.44% - 64px / 3) calc(28.56% - 64px / 3); column-gap: 32px; padding: 0 10vw; margin-bottom: 30px; }
.kr-footer__about { padding: 0 5vw 20px 0; }
.kr-footer__logo { display: block; width: 50%; }
.kr-footer__logo img { width: 100%; }
.kr-footer__about p { font-family: var(--kr-pop); font-size: 12px; font-weight: 500; letter-spacing: .2px; line-height: 1.4; color: #5D5D5D; margin: 20px 0 30px; }
.kr-footer__about .kr-btn { font-size: 12px; letter-spacing: 1px; padding: 8px 16px; gap: 0; }
/* the original's phone icon: a 15 px box with 4 px on each side, which sets the button's height (35 px) */
.kr-footer__about .kr-btn i { width: 15px; height: 15px; margin: 0 4px; font-size: 14px; line-height: 15px; text-align: center; }
.kr-footer__links { padding: 0 0 20px 5vw; }
.kr-footer__branches { padding: 0 0 20px 3vw; }
.kr-footer h2 { font-family: var(--kr-pop); font-size: 14px; font-weight: 500; letter-spacing: .5px; line-height: 1.4; text-transform: uppercase; color: #1D1D1D; margin-bottom: 12px; }
/* the links in two groups, the second against the right edge, as the original's two link boxes (--kr-rows: half the links, from the layout) */
.kr-footer__links ul { display: grid; grid-template-rows: repeat(var(--kr-rows, 4), auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; column-gap: 28px; width: 80%; }
.kr-footer li { display: flex; margin-bottom: 12px; }
.kr-footer li a { font-family: var(--kr-pop); font-size: 14px; font-weight: 400; letter-spacing: .2px; line-height: 1.4; color: #717171; text-decoration: underline; }
.kr-footer li a:hover { color: var(--kr-red); }
.kr-footer__bar { display: flex; justify-content: space-between; align-items: center; background: #231F20; padding: 12px 10vw; }
.kr-footer__bar p { font-family: var(--kr-pop); font-size: 12px; font-weight: 300; letter-spacing: 2px; line-height: 1.4; text-transform: uppercase; color: #fff; }

/* -------------------------------------------------- phone menu bar, pop-ups */
.kr-bottombar { display: none; }
.kr-pop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .75); }
.kr-pop__panel { position: relative; background: #F3F3F3; max-height: 100vh; overflow-y: auto; }
.kr-pop__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--kr-red); font-size: 20px; }
.kr-pop__title { font-family: var(--kr-pop); font-size: 18px; font-weight: 500; letter-spacing: .5px; color: #171717; }
.kr-pop--wa .kr-pop__panel { width: 30%; min-width: 320px; padding: 50px 20px; text-align: center; }
.kr-pop--wa .kr-wa { width: 240px; margin: 10px auto 0; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 8px 0 12px; }
.kr-pop--wa .kr-wa__text strong { white-space: nowrap; }
.kr-pop--wa .kr-pop__title { margin-bottom: 20px; }
.kr-pop--wa .kr-wa__logo { font-size: 27px; }
.kr-pop--wa .kr-wa__text { text-align: left; flex: 1; }
.kr-pop--wa .kr-wa__go { font-size: 16px; }
.kr-pop--menu { background: transparent; align-items: stretch; justify-content: stretch; }
.kr-pop--menu .kr-pop__panel { width: 100%; height: 100%; background: var(--kr-bg); padding: 50px 32px 40px; display: flex; flex-direction: column; }
.kr-pop--menu .kr-pop__close { color: #9A9A9A; top: 4px; right: 6px; }
.kr-pop__logo { display: block; width: 165px; margin: 0 auto 30px; }
.kr-menu--mobile { flex-direction: column; align-items: stretch; margin-bottom: 30px; }
.kr-menu--mobile .kr-menu__item { flex-wrap: wrap; justify-content: space-between; }
.kr-menu--mobile .kr-menu__link { display: block; padding: 18px 0; background: none; border: 0; font-family: var(--kr-pop); font-size: 17px; font-weight: 500; color: #111; text-align: left; flex: 1; }
.kr-menu--mobile .kr-menu__arrow { color: #111; padding: 18px 6px; }
.kr-menu--mobile .kr-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; width: 100%; background: transparent; min-width: 0; }
.kr-menu--mobile .kr-dropdown::before, .kr-menu--mobile .kr-dropdown::after { display: none; }
.kr-menu--mobile .is-open > .kr-dropdown { display: block; }
.kr-menu--mobile .kr-dropdown__main { padding: 0 0 10px 10px; }
.kr-menu--mobile .kr-dropdown__link { white-space: normal; }
.kr-pop--menu .kr-btn { align-self: center; }
.kr-pop--sheet { align-items: flex-end; background: rgba(0, 0, 0, .6); }
.kr-pop--sheet .kr-pop__panel { width: calc(100% - 20px); background: var(--kr-bg); padding: 20px 20px 10px; margin-bottom: 30px; max-height: calc(100vh - 80px); }
.kr-pop--sheet .kr-pop__close { color: #9A9A9A; }
.kr-pop--sheet .kr-pop__title { font-weight: 400; margin-bottom: 15px; }
.kr-pop-branch { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.kr-pop-branch .kr-branch__name { font-weight: 400; font-family: var(--kr-pop); font-size: 14px; }
.kr-pop-branch .kr-branch__address { font-size: 13px; color: #7A7A7A; margin-top: 2px; }
.kr-pop-branch .kr-btn { flex: 0 0 auto; margin-top: 4px; }

/* lightbox */
.kr-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; }
.kr-lightbox img { max-width: calc(100% - 140px); max-height: calc(100% - 80px); object-fit: contain; }
.kr-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 26px; width: 50px; height: 50px; }
.kr-lightbox__close { top: 10px; right: 10px; }
.kr-lightbox__prev { left: 10px; top: calc(50% - 25px); }
.kr-lightbox__next { right: 10px; top: calc(50% - 25px); }

/* entrance animations (only when the visitor allows motion) */
@media (prefers-reduced-motion: no-preference) {
    .kr-anim-ready [data-kr-anim] { opacity: 0; transition: opacity .8s ease, transform .8s ease; }
    .kr-anim-ready [data-kr-anim="up"] { transform: translateY(40px); }
    .kr-anim-ready [data-kr-anim="left"] { transform: translateX(40px); }
    .kr-anim-ready [data-kr-anim="zoom"] { transform: scale(.92); }
    .kr-anim-ready [data-kr-anim].is-in { opacity: 1; transform: none; }
}

/* ============================================================ tablet (landscape) */
@media (max-width: 1119px) {
    .kr-title, .kr-hero__stack span { font-size: 50px; }
    .kr-hero__highlight { font-size: 28px; font-weight: 600; margin-top: -25px; margin-bottom: 10px; }
    /* as the original: the slider half the screen's height, its arrows 28 px with 10 px above them */
    .kr-hero { padding-bottom: 38px; }
    .kr-hero__track { height: 50vh; }
    .kr-hero__box .kr-buttons { margin-top: 30px; }
    .kr-testimonials__head { column-gap: 0; }
    .kr-text .kr-richtext { font-size: 15px; }
    .kr-text--narrow .kr-richtext { color: #616161; }
    .kr-text--narrow .kr-richtext p:has(> small:only-child) { font-size: 16px; }
    .kr-text--narrow .kr-richtext h4, .kr-text--narrow .kr-richtext h5, .kr-text--narrow .kr-richtext .kr-red strong { font-size: 16px; }
    .kr-text--narrow .kr-richtext > p:last-child { margin-top: 20px; color: #060606; }
    .kr-text__side { margin-left: 20px; }
    .kr-text__image { height: 55vh; }
    .kr-text__after { text-align: left; }
    .kr-gallery--tabs .kr-gallery__title { font-size: 28px; letter-spacing: .5px; }
    .kr-album summary { font-size: 16px; }
    .kr-tabs__panel h3 { letter-spacing: .5px; }
    .kr-tabs__panel .kr-gallery__caption { font-size: 16px; }
    .kr-tabs__panel .kr-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kr-testimonials__head .kr-title { flex-basis: 77.9%; }
    .kr-testimonials__badge { flex-basis: 22.1%; justify-content: center; }
    .kr-testimonials__rating img { width: 45%; }
    .kr-testimonials__badge .kr-btn { font-size: 12px; font-weight: 500; }
    .kr-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the page heading as the original's from 1119 down: the text under the title, 15 px grey */
    .kr-heading__grid { grid-template-columns: 1fr; gap: 20px; }
    .kr-heading__side { font-size: 15px; color: #616161; margin-top: 0; }
    .kr-arrows button { width: 28px; height: 28px; font-size: 13px; }
    .kr-hero__rest { font-size: 28px; }
    .kr-hero__slide--split .kr-btn { font-size: 12px; font-weight: 500; }
    .kr-hero__tagline { font-size: 10px; }
    .kr-hero__content { padding-left: 50px; }
    .kr-hero__slide--overlay { padding: 30px 50px 50px 30px; align-items: flex-end; }
    .kr-hero__box { width: 73%; }
    .kr-intro__title { font-size: 22px; }
    .kr-intro__text { font-size: 15px; color: #616161; }
    /* header as the original's at 1024-1119: 2vw sides, logo column 30% (logo 60% of it), branches 70% */
    .kr-topbar { padding: 12px 2vw; }
    .kr-masthead { padding: 15px 2vw; min-height: 0; }
    .kr-masthead .kr-logo { width: calc((100vw - 4vw) * .18); min-width: 0; }
    .kr-masthead .kr-branches { width: 70%; justify-content: space-between; align-items: center; }
    .kr-masthead .kr-branch { width: 35%; }
    .kr-masthead .kr-branch + .kr-branch { width: 32%; padding: 0 20px; }
    .kr-masthead .kr-branch + .kr-branch + .kr-branch { width: 31%; padding: 0; }
    /* name and phone share the first line (17 px high), address and number below */
    .kr-masthead .kr-branch { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; }
    .kr-masthead .kr-branch__address, .kr-masthead .kr-branch__reg { flex: 0 0 100%; }
    .kr-masthead .kr-branch__name { margin-right: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 16px; }
    .kr-masthead .kr-branch__phone { font-size: 12px; line-height: 17px; letter-spacing: 0; }
    .kr-masthead .kr-branch__phone i { font-size: 8px; }
    .kr-masthead .kr-branch__address { font-size: 11px; letter-spacing: .2px; line-height: 13px; }
    .kr-masthead .kr-branch__reg { font-size: 10px; letter-spacing: .2px; line-height: 12px; }
    .kr-nav { padding: 5px 2vw 5px 0; gap: 0; }
    .kr-menu--main { gap: 5px; }
    .kr-btn--nav { font-size: 12px; font-weight: 500; }
    .kr-menu--main .kr-menu__link { font-size: 13px; padding: 20px; line-height: 13px; }
    .kr-menu--main .kr-menu__arrow { padding: 20px 13px; line-height: 13px; }
    .kr-info__title { font-size: 28px; letter-spacing: .5px; }
    .kr-info__subtitle { font-size: 16px; letter-spacing: .5px; }
    .kr-info--images .kr-info__grid { gap: 20px; margin-top: 20px; }
    .kr-pcard h3 { font-size: 16px; margin: 20px 20px 10px; }
    .kr-pcard .kr-ticks { margin-top: 10px; }
    /* the content block as the original's from 1119 down: 20 px beside the sidebar, 15 px text, 10 px after the red boxes */
    /* the sidebar's space above it is for large screens only (the original's column) */
    .kr-side { margin-left: 20px; margin-top: 0; }
    .kr-content { --kr-tick-gap: 10px; }
    .kr-content .kr-richtext { font-size: 15px; }
    .kr-side { --kr-tick-gap: 18px; }
    .kr-side__body { padding-left: 30px; }
    .kr-side__body h2 { font-size: 16px; }
    .kr-side__image + .kr-side__card .kr-side__body { padding-top: 30px; }
    .kr-side__form h2 { font-size: 15px; letter-spacing: 1px; }
    .kr-content--wide .kr-side { margin-left: 0; }
    .kr-note h3, .kr-note p { font-size: 15px; }
    .kr-content__columns { --kr-tick-gap: 18px; }
    .kr-side__corner { top: -1px; }
    .kr-content__columns h3 { font-size: 13px; font-weight: 500; letter-spacing: .2px; }
    .kr-content--wide .kr-side__body h2 { font-size: 15.5px; }
    .kr-content--wide .kr-side .kr-ticks li { font-size: 14px; line-height: 1.4; }
    .kr-content--wide .kr-call { width: 94%; }
    .kr-content--wide .kr-side__form h2 { font-size: 15px; }
    .kr-content--wide .kr-side__note { padding-left: 30px; }
    .kr-content--wide .kr-side__note p { font-size: 15px; }
    .kr-form--short .kr-input { font-size: 11px; }
    .kr-call { font-size: 16px; }
    .kr-wa { min-height: 56px; }
    .kr-wa__logo { font-size: 32px; }
    .kr-wa__go { font-size: 18px; }
    .kr-features--centered .kr-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kr-features__title { font-size: 28px; letter-spacing: .5px; }
    .kr-features__subtitle { font-size: 16px; letter-spacing: .5px; }
    .kr-feature { padding: 20px; }
    .kr-features--boxed .kr-feature:hover { padding: 20px 23px 23px 18px; }
    .kr-feature p { font-size: 14px; }
    .kr-features--centered .kr-feature__title { font-size: 16px; }
    /* footer as the original's from 1119 down: no gaps, 2vw on the left, the link columns 25 px lower, smaller type */
    .kr-footer { padding-top: 50px; }
    .kr-footer__cols { grid-template-columns: 33% 38.44% 28.56%; column-gap: 0; padding: 0 0 0 2vw; margin-bottom: 10px; }
    .kr-footer__links { padding: 25px 0 0; }
    .kr-footer__branches { padding: 25px 0 0 3vw; }
    .kr-footer h2 { font-size: 12px; }
    .kr-footer__links ul { width: 100%; padding-right: 5vw; }
    .kr-footer li a { font-size: 13px; letter-spacing: 1px; }
    .kr-footer__bar { padding: 12px 2vw; margin-top: 20px; }
    .kr-footer__bar p { font-size: 11px; letter-spacing: 1.5px; }
    .kr-overview__grid { column-gap: 0; }
    .kr-overview__main { flex-basis: 62.66%; }
    .kr-overview__cards { flex-basis: 37.34%; margin-left: 20px; }
    .kr-overview .kr-title { font-size: 50px; }
    .kr-overview .kr-lead { font-size: 15px; }
    .kr-overview__lists { column-gap: 0; }
    .kr-overview { --kr-tick-gap: 9px; }
    .kr-scard img { height: 32vh; }
    .kr-overview__cards .kr-arrows button { width: 28px; height: 28px; font-size: 13px; }
    .kr-ccard img { height: 32vh; }
    .kr-ccard h3 { font-size: 14px; }
    .kr-ccard p { font-size: 12px; }
    .kr-logos__grid { gap: 15px; }
    .kr-logos__item { aspect-ratio: 1 / 1.13; }
    .kr-tag { font-size: 15px; }
    .kr-doctors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-branch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ tablet (portrait) */
@media (max-width: 1023px) {
    .kr-container { width: 90%; }
    .kr-title, .kr-hero__stack span { font-size: 35px; }
    .kr-hero__highlight { font-size: 25px; }
    .kr-hero__track { height: 42vh; }
    .kr-hero__box .kr-btn { font-size: 11px; padding: 8px 16px; }
    .kr-hero__rest { font-size: 25px; letter-spacing: 1px; }
    .kr-hero__content { padding-left: 20px; }
    .kr-hero__slide--split .kr-btn { letter-spacing: .2px; padding: 8px 16px; }
    /* header as the original's at 768-1023: the logo centred on its own row, the branches (90%) below it */
    .kr-btn--nav { display: none; }
    .kr-nav { padding: 5px 0; justify-content: flex-start; }
    .kr-masthead { flex-direction: column; align-items: stretch; padding: 10px 2vw 5px; }
    .kr-masthead .kr-logo { width: calc((100vw - 4vw) * .2); align-self: center; margin-bottom: 20px; }
    .kr-masthead .kr-branches { width: 90%; margin-left: auto; }
    .kr-masthead .kr-branch__name { font-size: 14px; }
    .kr-masthead .kr-branch__reg { font-size: 9px; letter-spacing: .2px; }
    .kr-intro__clip img { width: auto; height: 35vh; }
    .kr-intro__text { margin-top: 10px; }
    .kr-intro .kr-btn { font-size: 12px; }
    .kr-footer__cols { padding-right: 1vw; }
    .kr-footer__about, .kr-footer__links { padding-right: 20px; }
    .kr-footer__links ul { padding-right: 0; column-gap: 0; }
    .kr-footer li a { font-size: 12px; }
    .kr-overview .kr-title { font-size: 40px; }
    .kr-overview__lists { grid-template-columns: minmax(0, 1fr); }
    .kr-overview__cards { margin-left: 0; padding-top: 20px; justify-content: flex-end; }
    /* the original's first slide has no space below its card from here down */
    .kr-scard:first-child { margin-bottom: 0; }
    .kr-scard__body { padding: 0 0 20px 20px; }
    .kr-scard__body h3 { font-size: 15px; }
    .kr-overview .kr-btn { font-size: 12px; }
    .kr-content .kr-title { font-size: 50px; }
    .kr-content__grid { flex-direction: column; align-items: stretch; }
    .kr-content__main, .kr-side { flex: none; width: 100%; }
    .kr-side { margin: 50px 0 0; }
    .kr-side__card { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .kr-side__image { margin-bottom: 30px; }
    .kr-side__body { width: 55%; padding: 30px; }
    .kr-side__form { width: 45%; margin-top: 0; }
    .kr-content__columns h3 { font-size: 15px; }
    .kr-side__corner { left: calc(50% - 26px); }
    .kr-side__bottom-image.is-small { margin: 0 auto; }
    .kr-content--wide .kr-side { margin-top: 50px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .kr-content--wide .kr-side__card { grid-column: 1 / -1; }
    .kr-content--wide .kr-side__body, .kr-content--wide .kr-side__form { width: 50%; }
    .kr-content--wide .kr-side__card { align-items: stretch; }
    .kr-content--wide .kr-side__form { padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; }
    .kr-content--wide .kr-side__form h2 { letter-spacing: .5px; }
    .kr-content--wide .kr-side__note { padding: 30px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
    .kr-text .kr-title { font-size: 50px; }
    .kr-text--narrow .kr-richtext > p:last-child { letter-spacing: .2px; }
    .kr-text__cols.has-image { flex-direction: column; }
    .kr-text__cols.has-image .kr-text__main, .kr-text__side { flex: none; width: 100%; }
    .kr-text__side { margin: 50px 0 0; }
    .kr-text__image { width: 100%; height: 25vh; }
    .kr-info--images .kr-info__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kr-pcard img { height: 25vh; }
    .kr-pcard h3 { font-size: 15px; }
    .kr-info--icons .kr-info__grid { gap: 20px; }
    .kr-icard h3 { font-size: 18px; }
    .kr-icard p { font-family: var(--kr-pop); font-size: 12px; letter-spacing: .5px; }
    .kr-icard .kr-more { font-size: 12px; }
    .kr-features__grid { gap: 10px; margin-top: 20px; }
    .kr-feature { padding: 20px 15px; }
    .kr-features--boxed .kr-feature:hover { padding: 20px 18px 23px 13px; }
    .kr-features--centered .kr-feature__title { font-size: 15px; }
    .kr-features--centered .kr-feature__img, .kr-features--centered .kr-feature__icon { width: 26%; }
    .kr-contact__grid { grid-template-columns: 1fr; gap: 40px; }
    .kr-heading .kr-title, .kr-cardgrid .kr-title { font-size: 50px; }
    .kr-cardgrid > .kr-container { padding-bottom: 30px; }
    .kr-cardgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 10px; }
    .kr-ccard__body { padding: 0 10px 39px; }
    /* as the original's services cards: the third and fourth keep 15 px at their sides */
    .kr-ccard:nth-child(3) .kr-ccard__body, .kr-ccard:nth-child(4) .kr-ccard__body { padding-left: 15px; padding-right: 15px; }
    .kr-ccard h3 { font-size: 13px; }
    .kr-testimonials__head { flex-direction: column; }
    .kr-accordion__item summary { font-size: 14px; }
    .kr-tabs__panel .kr-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-gallery--accordion .kr-gallery__title { font-size: 16px; letter-spacing: 1px; }
    .kr-albums .kr-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kr-album summary { font-size: 14px; }
    .kr-testimonials__head .kr-title, .kr-testimonials__badge { flex: none; width: 100%; }
    .kr-testimonials__rating { margin: 20px 0 0 10px; gap: 10px; justify-content: flex-start; flex-wrap: nowrap; }
    .kr-testimonials__rating img { width: 22%; }
    .kr-testimonials .kr-title { font-size: 50px; }
    .kr-reviews { margin-top: 30px; }
    /* six across. The original's logo boxes get their height from each logo's own padding; their average proportion per screen size is used here */
    .kr-logos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 10px; }
    .kr-logos__item { aspect-ratio: 1 / 1.05; }
}

/* ============================================================ phone (landscape) */
@media (max-width: 767px) {
    body.kr-body { padding-bottom: 69px; }
    .kr-header, .kr-sticky { display: none; }
    /* as on the old site, the phone header stays on top of the page, which starts under it */
    .kr-mobile-head { display: flex; justify-content: center; align-items: center; background: var(--kr-bg); height: 56px; position: fixed; top: 0; left: 0; right: 0; z-index: 80; }
    .kr-form { scroll-margin-top: 80px; }
    .kr-mobile-head .kr-logo { width: 150px; }
    .kr-container { width: 100%; padding: 0 30px; }
    .kr-section { padding: 50px 0; }
    .kr-title { font-size: 25px; letter-spacing: 1px; line-height: 1.2; }
    .kr-lead, .kr-heading__side, .kr-richtext, .kr-intro__text { font-size: 13px; line-height: 1.4; color: #000; }
    .kr-heading__side { color: #616161; }
    .kr-heading .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-richtext ul li { font-size: 13px; }
    .kr-btn { font-size: 11px; padding: 11px 16px; }
    .kr-btn--arrow::after { font-size: 12px; }
    .kr-buttons { margin-top: 30px; }

    .kr-hero { padding-bottom: 38px; }
    /* the slides share one grid cell: the hero is as tall as its tallest slide, the picture keeps 4:3 as on the original */
    .kr-hero__track { height: auto; display: grid; }
    .kr-hero__slide { position: relative; inset: auto; grid-area: 1 / 1; flex-direction: column; }
    .kr-hero__slide--split .kr-hero__image { width: 100%; height: auto; aspect-ratio: 4 / 3; flex: none; }
    .kr-hero__panel { width: 100%; height: auto; flex: 1; justify-content: center; align-items: flex-start; text-align: center; padding: 30px 15px; }
    .kr-hero .kr-buttons { margin-top: 20px; }
    .kr-hero__arrows { right: 20px; bottom: 0; }
    .kr-arrows button { width: 28px; height: 28px; font-size: 13px; }
    .kr-hero__content { padding: 0; }
    .kr-hero__tagline { font-size: 10px; letter-spacing: .2px; }
    .kr-hero__title { margin-top: -15px; }
    .kr-hero__highlight { font-size: 22px; margin: 0 0 5px; }
    .kr-hero__rest { font-size: 22px; letter-spacing: .5px; }
    .kr-hero__box .kr-btn { padding: 8px 16px; }
    .kr-hero .kr-buttons { justify-content: center; }
    .kr-hero__box .kr-buttons { margin-top: 30px; justify-content: flex-end; }
    .kr-hero__slide--overlay { padding: 30px 20px 20px 30px; justify-content: flex-end; align-items: flex-end; background-attachment: scroll; }
    .kr-hero__box { width: 87%; }
    .kr-hero__stack span { font-size: 25px; }

    .kr-intro__frame { width: 80%; }
    .kr-intro__clip img { height: 25vh; }
    .kr-intro__title { font-size: 18px; }
    .kr-intro__text { color: #616161; }
    .kr-intro .kr-btn { font-size: 12px; padding: 14px 24px; }
    .kr-intro .kr-buttons { margin-top: 50px; }

    .kr-overview__grid { flex-direction: column; }
    .kr-overview__main, .kr-overview__cards { flex: none; width: 100%; }
    .kr-overview__main { align-items: center; text-align: center; }
    .kr-overview .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-overview .kr-lead { text-align: justify; font-size: 13px; margin-bottom: 0; }
    .kr-overview__lists { margin-top: 0; text-align: left; }
    .kr-overview__lists .kr-iconlist { padding-left: 20px; margin-top: 20px; }
    .kr-overview .kr-iconlist li { font-size: 14px; line-height: 1.4; }
    .kr-overview .kr-buttons { margin-top: 50px; }
    .kr-overview .kr-btn { font-size: 12px; padding: 14px 24px; }
    .kr-scard img { height: 25vh; }
    .kr-scard__body h3 { font-size: 14px; }
    .kr-info__title { font-size: 25px; }
    .kr-info__subtitle { font-size: 14px; }
    .kr-info__grid, .kr-info--images .kr-info__grid { grid-template-columns: 1fr; }
    .kr-pcard h3 { font-size: 14px; letter-spacing: .5px; }
    .kr-pcard .kr-ticks { margin-top: 20px; }

    .kr-banner img { height: 15vh; }
    .kr-content__images { gap: 10px; }
    .kr-content__images img { width: auto; max-width: 100%; height: 15vh; }
    .kr-call { font-size: 14px; letter-spacing: .2px; line-height: 1.2; }
    .kr-wa { min-height: 52px; }
    .kr-wa__logo { font-size: 28px; }
    .kr-wa__go { font-size: 15px; }
    .kr-wa__text strong { font-size: 13px; }
    .kr-wa__text small { font-size: 11px; }
    .kr-content .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-content .kr-richtext { font-size: 13px; }
    .kr-content .kr-richtext ul li { font-size: 14px; }
    /* as the original's paragraphs: some 14 px (style "Paragraph: 14 px on landscape phones"), some without space under them */
    .kr-content__main .kr-richtext .kr-sm-14, .kr-content__main .kr-richtext h4 { font-size: 14px; }
    .kr-content__main .kr-richtext .kr-sm-tight { margin-bottom: -20px; }
    .kr-content .kr-richtext.kr-richtext--squares p + ul { margin-top: 10px; }
    .kr-richtext ul.kr-cols-2 li:last-child { margin-bottom: 0; }
    .kr-content--about-sizes .kr-side__body > p { font-size: 13px; }
    .kr-side { margin-top: 30px; }
    .kr-content--wide .kr-richtext, .kr-content--wide .kr-richtext ul li { font-size: 14px; }
    .kr-richtext hr.kr-line { margin-top: 20px; }
    .kr-content--wide .kr-side { display: block; margin-top: 50px; }
    .kr-content.kr-content--wide .kr-content__main .kr-richtext p + ul { margin-top: 20px; }
    .kr-content--wide .kr-side__body, .kr-content--wide .kr-side__form { width: 100%; }
    .kr-content--wide .kr-side__note p { font-size: 14px; }
    .kr-content--wide .kr-side__body h2 { font-size: 15px; }
    .kr-side__body, .kr-side__form { width: 100%; }
    .kr-side__body h2 { font-size: 15px; letter-spacing: .2px; padding-bottom: 20px; margin-bottom: 20px; }
    .kr-side .kr-ticks li { font-size: 14px; line-height: 1.4; }
    .kr-ticks li, .kr-iconlist li { font-size: 13px; line-height: 18.2px; }
    .kr-pcard .kr-ticks li { font-size: 14px; line-height: 1.4; }
    .kr-side__body > p { font-size: 14px; line-height: 1.4; color: #000; }
    .kr-side__form { margin-top: 0; }
    .kr-form--short > .kr-input:not(.kr-input--wide) { grid-column: span 2; }
    .kr-form--short .kr-form__submit { letter-spacing: 1px; }
    .kr-input { font-size: 11px; }
    .kr-note { padding: 20px; }
    .kr-note h3 { font-size: 14px; }
    .kr-note p { font-size: 13px; }
    .kr-content__columns h3 { font-size: 13px; }
    .kr-content__columns .kr-redline { margin-bottom: 30px; }
    .kr-content__columns .kr-ticks li { font-size: 14px; }

    .kr-features__title { font-size: 25px; }
    .kr-features--center .kr-features__title { font-size: 18px; }
    .kr-features__subtitle { font-size: 14px; }
    .kr-features__grid, .kr-features--centered .kr-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-feature p { font-size: 12px; }
    .kr-features--centered .kr-feature__title { font-size: 14px; letter-spacing: .5px; }

    .kr-doctors__grid { grid-template-columns: 1fr; }
    .kr-branch-cards { grid-template-columns: 1fr; margin-top: 30px; }
    .kr-service-cat__title { font-size: 18px; }
    .kr-service-list li { flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
    .kr-service-list__name { flex: 1 1 100%; }
    .kr-cardgrid .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-ccard img { height: 25vh; }
    .kr-ccard h3 { font-size: 14px; }
    .kr-ccard p { font-size: 11px; }
    .kr-contact__image { width: 100%; padding: 0; }
    .kr-contact__image img { height: 127px; }
    .kr-contact__grid { margin-top: 50px; }
    .kr-contact__form { order: -1; }
    .kr-form--full .kr-input { font-size: 12px; min-height: 43px; }
    /* branches two by two, picture on top, as on the old site */
    .kr-contact__places { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
    .kr-contact__places > .kr-linetitle, .kr-contact__places > .kr-place--hq { grid-column: 1 / -1; }
    .kr-contact__places > .kr-place:not(.kr-place--hq) { flex-direction: column; gap: 10px; margin: 0; padding: 10px; }
    .kr-contact__places > .kr-place:not(.kr-place--hq) img { width: 100%; height: 110px; flex: none; }
    .kr-contact__places > .kr-linetitle { margin: 30px 0 10px; }
    .kr-contact__form { padding: 30px 20px; }
    .kr-linetitle { font-size: 22px; }
    .kr-linetitle::after { width: 60px; }
    .kr-logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kr-logos__item { aspect-ratio: 1 / 1.02; }
    .kr-tag { font-size: 13px; }
    .kr-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-tabs { grid-template-columns: 1fr; }
    .kr-tabs__list { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 2px solid #E5E5E5; }
    .kr-tabs__list button { border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -2px; white-space: nowrap; }
    .kr-tabs__list button[aria-selected="true"] { border-bottom-color: var(--kr-red); }
    .kr-gallery--tabs .kr-gallery__title { font-size: 25px; }
    .kr-tabs__panel .kr-gallery__caption { font-size: 14px; }
    .kr-accordion__item summary { font-size: 14px; padding: 12px 18px; border-radius: 24px; }
    .kr-gallery--accordion .kr-gallery__title { font-size: 15px; }
    .kr-albums .kr-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kr-album summary { font-size: 13px; font-weight: 400; line-height: 1.5; }
    .kr-album summary i { font-size: 12px; }
    .kr-reviews { grid-template-columns: 1fr; }
    .kr-testimonials .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-testimonials__badge { flex-direction: row; align-items: center; justify-content: space-between; }
    .kr-testimonials__rating { align-self: auto; width: 55%; margin: 20px 0 0; align-items: flex-start; }
    .kr-testimonials__rating img { width: 32%; }
    .kr-testimonials .kr-stars { font-size: 17px; width: 106px; margin-top: 5px; }
    .kr-testimonials__badge .kr-btn { margin-top: 0; font-size: 10px; padding: 8px 16px; }
    .kr-text .kr-title { font-size: 25px; letter-spacing: 0; line-height: 1; }
    .kr-text .kr-richtext { font-size: 13px; }
    .kr-text--narrow .kr-richtext { color: #616161; }
    .kr-text--narrow .kr-richtext p:has(> small:only-child) { font-size: 14px; }
    .kr-text--narrow .kr-richtext h4, .kr-text--narrow .kr-richtext h5, .kr-text--narrow .kr-richtext .kr-red strong { font-size: 14px; }
    .kr-text__image { height: 15vh; }
    .kr-richtext ul.kr-cols-2 { columns: 1; }

    /* footer as the original's on phones: the about column centred on top, then the links (55%) beside the branches (45%) */
    .kr-footer { text-align: center; }
    .kr-footer__cols { grid-template-columns: 55% 45%; align-items: center; padding: 0 20px 20px; margin-bottom: 0; }
    .kr-footer__about { grid-column: 1 / -1; padding: 0 0 50px; display: flex; flex-direction: column; align-items: center; }
    .kr-footer__logo { width: 40%; }
    .kr-footer__links { padding: 0 20px 0 0; text-align: left; }
    .kr-footer__branches { padding: 0 0 20px 15px; text-align: left; }
    .kr-footer__links li a { letter-spacing: .3px; }
    .kr-footer__bar { flex-direction: column; justify-content: center; padding: 12px 0; }
    .kr-footer__bar .kr-share { display: none; }
    .kr-footer__bar p { letter-spacing: 1px; text-align: center; }

    .kr-bottombar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--kr-red); height: 69px; }
    .kr-bottombar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: none; border: 0; color: #fff; padding: 10px 0; }
    .kr-bottombar i { font-size: 22px; color: #fff; }
    .kr-bottombar span { font-family: var(--kr-pop); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #DEDEDE; }
    .kr-pop--wa .kr-pop__panel { width: 65%; min-width: 0; }
    .kr-lightbox img { max-width: calc(100% - 20px); }
}

/* ============================================================ phone (portrait) */
@media (max-width: 479px) {
    .kr-container { padding: 0 24px; }
    .kr-title { font-size: 20px; }
    .kr-hero__stack span { font-size: 20px; letter-spacing: 1px; line-height: 1.2; }
    .kr-hero__box { width: 95%; }
    .kr-hero__rest { font-size: 25px; letter-spacing: 0; line-height: 1.2; }
    .kr-hero__tagline { line-height: 1.2; letter-spacing: .5px; }
    .kr-hero__highlight { font-size: 25px; }
    .kr-hero__slide--split .kr-btn { letter-spacing: 1px; }
    .kr-pop--wa .kr-pop__panel { width: 80%; }
    .kr-cardgrid .kr-title { font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
    .kr-cardgrid__grid { padding-top: 0; }
    .kr-ccard img { height: 18vh; }
    .kr-ccard__body { padding-bottom: 15px; }
    .kr-ccard h3 { font-size: 13px; }
    .kr-ccard .kr-more { font-size: 11px; letter-spacing: .5px; line-height: 21px; }
    .kr-heading .kr-title { font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
    .kr-testimonials .kr-title { font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
    .kr-text .kr-title { font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
    .kr-text--narrow .kr-richtext p:has(> small:only-child) { font-size: 13px; letter-spacing: .5px; }
    .kr-text--narrow .kr-richtext h4, .kr-text--narrow .kr-richtext h5, .kr-text--narrow .kr-richtext .kr-red strong { font-size: 13px; letter-spacing: .5px; }
    .kr-text--narrow .kr-richtext .kr-phone::before, .kr-text--narrow .kr-richtext .kr-mail::before { font-size: 11px; }
    .kr-text__side { margin-top: 30px; }
    .kr-gallery--tabs .kr-gallery__title { font-size: 18px; line-height: 1.2; }
    .kr-gallery--accordion .kr-gallery__title { line-height: 1.2; }
    .kr-album summary { font-size: 12px; font-weight: 500; }
    .kr-albums .kr-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-gallery--tabs .kr-redline { margin-bottom: 20px; }
    .kr-tabs__list button { font-size: 15px; }
    .kr-tabs__panel { padding: 10px; }
    .kr-tabs__panel h3 { font-size: 16px; line-height: 1.2; }
    .kr-tabs__panel .kr-gallery__caption { font-size: 12px; line-height: 1.2; letter-spacing: 1px; }
    .kr-tabs__panel .kr-photos { gap: 5px; }
    .kr-tabs__panel .kr-photos__item { height: 15vh; }
    .kr-overview .kr-title { font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
    .kr-overview { --kr-tick: 18px; --kr-tick-gap: 11px; }
    .kr-overview .kr-iconlist li { font-size: 13px; }
    .kr-overview .kr-iconlist li::before { font-size: 12px; }
    .kr-scard img { height: 22vh; }
    .kr-scard__body { padding-bottom: 15px; }
    .kr-scard__body h3 { font-size: 13px; }
    .kr-scard .kr-more { font-size: 11px; letter-spacing: .5px; }
    .kr-intro__title { font-size: 15px; letter-spacing: 0; }
    .kr-intro .kr-btn { font-size: 11px; padding: 8px 16px; }
    .kr-intro .kr-buttons { margin-top: 30px; }
    .kr-features__title { font-size: 16px; line-height: 1.2; letter-spacing: .5px; }
    .kr-features--center .kr-features__title { font-size: 18px; }
    .kr-features__subtitle { font-size: 12px; line-height: 1.2; letter-spacing: 1px; }
    .kr-feature p { line-height: 1.2; letter-spacing: .2px; }
    .kr-features--centered .kr-feature__title { font-size: 13px; line-height: 1.2; letter-spacing: .2px; }
    .kr-features--centered .kr-feature__img, .kr-features--centered .kr-feature__icon { padding: 5px; }
    .kr-content .kr-title { font-size: 22px; line-height: 1.2; letter-spacing: 1px; }
    .kr-content--about-sizes .kr-title { font-size: 20px; }
    .kr-content__main .kr-richtext .kr-sm-14, .kr-content__main .kr-richtext h4 { font-size: 13px; }
    .kr-content, .kr-side { --kr-tick: 18px; --kr-tick-gap: 11px; --kr-tick-font: 12px; }
    .kr-content .kr-richtext ul li, .kr-side .kr-ticks li { font-size: 13px; }
    .kr-call { font-size: 13px; letter-spacing: .5px; }
    .kr-wa { min-height: 57px; }
    .kr-side__body { padding-bottom: 0; }
    .kr-side__body h2 { letter-spacing: 1px; }
    .kr-side__body > p { font-size: 13px; margin-bottom: 30px; }
    .kr-side__form h2 { font-size: 14px; line-height: 1.2; letter-spacing: .2px; }
    .kr-content--wide .kr-richtext, .kr-content--wide .kr-richtext ul li, .kr-content--wide .kr-side__note p { font-size: 13px; }
    .kr-content--wide .kr-side__note { padding-left: 20px; }
    .kr-content--wide .kr-side .kr-ticks li { font-size: 13px; }
    .kr-content--wide .kr-side__body { padding-bottom: 0; }
    .kr-note h3 { font-size: 13px; }
    .kr-content__columns { --kr-tick-gap: 11px; }
    .kr-content__columns h3 { font-size: 12px; line-height: 1.2; letter-spacing: 0; }
    .kr-content__columns .kr-ticks li { font-size: 13px; }
    .kr-side__bottom-image.is-small { width: 52px; }
    .kr-content--wide .kr-side__form h2 { font-size: 14px; line-height: 1.2; letter-spacing: .2px; }
    .kr-info__title { font-size: 22px; line-height: 1.2; letter-spacing: .5px; }
    .kr-info__subtitle { font-size: 12px; line-height: 1.2; letter-spacing: 1px; }
    .kr-pcard h3 { font-size: 13px; letter-spacing: .2px; }
    .kr-pcard .kr-ticks li { font-size: 13px; gap: 11px; }
    .kr-pcard .kr-ticks li::before { flex-basis: 18px; width: 18px; height: 18px; font-size: 12px; }
    .kr-logos__grid { padding-top: 0; }
    .kr-logos__item { aspect-ratio: 1 / 1.18; }
    /* the links and the branches one under the other */
    .kr-footer__cols { grid-template-columns: 100%; padding-bottom: 0; }
    .kr-footer__branches { padding: 20px 0; }
}

/* ================================================ width and spacing of each block's section */
/*
 * Site::frame gives each block's section, per screen size, the width of its content and the
 * space above and below it, as the sections of klinikrafa.com (Breakdance: --bde-section-width,
 * 20 px at the sides): the defaults of the block type (config) or the block's own values.
 * --kr-w, --kr-mw, --kr-pt and --kr-pb hold the values of the current screen size, for the parts
 * of a block that use them too. Last in the file, so they come after the rules of each type.
 */
[data-kr-frame] { --kr-w: var(--kr-w-xl); --kr-mw: var(--kr-mw-xl, none); --kr-pt: var(--kr-pt-xl); --kr-pb: var(--kr-pb-xl); padding-top: var(--kr-pt); padding-bottom: var(--kr-pb); }
[data-kr-frame] > .kr-container, .kr-cardgrid__band > .kr-container { width: var(--kr-w); max-width: var(--kr-mw); padding-left: var(--kr-gutter, 20px); padding-right: var(--kr-gutter, 20px); }
/* the contact page's wide picture: a section of its own on the original (90%, then 98%) */
.kr-contact[data-kr-frame] > .kr-contact__image { width: 90%; }
/* the services cards: a section of their own on the original, its grey from their top to the block's bottom */
.kr-cardgrid[data-kr-frame] { padding-bottom: 0; }
.kr-cardgrid__band { padding-bottom: var(--kr-pb); background: linear-gradient(#fff 0%, #EFEFEF 100%); }
@media (max-width: 1119px) {
    [data-kr-frame] { --kr-w: var(--kr-w-lg); --kr-mw: var(--kr-mw-lg, none); --kr-pt: var(--kr-pt-lg); --kr-pb: var(--kr-pb-lg); }
    .kr-contact[data-kr-frame] > .kr-contact__image { width: 98%; }
    /* the framed picture's text runs to the edges of its frame from here down */
    .kr-intro { --kr-gutter: 0px; }
}
/* parts wider than their block's frame at one screen size: sections of their own on the original */
@media (max-width: 1119px) and (min-width: 1024px) {
    .kr-cardgrid__band > .kr-cardgrid__wrap { width: 100%; }
}
@media (max-width: 1023px) and (min-width: 768px) {
    /* the original's services cards from the fifth on: shorter pictures on portrait tablets */
    .kr-ccard:nth-child(n+5) img { height: 22vh; }
    /* and no "Learn More" under them there */
    .kr-ccard .kr-more { display: none; }
    .kr-testimonials__badge .kr-btn { display: none; }
    .kr-testimonials[data-kr-frame] > .kr-testimonials__reviews { width: 100%; }
}
@media (max-width: 1023px) {
    [data-kr-frame] { --kr-w: var(--kr-w-md); --kr-mw: var(--kr-mw-md, none); --kr-pt: var(--kr-pt-md); --kr-pb: var(--kr-pb-md); }
}
@media (max-width: 767px) {
    [data-kr-frame] { --kr-w: var(--kr-w-sm); --kr-mw: var(--kr-mw-sm, none); --kr-pt: var(--kr-pt-sm); --kr-pb: var(--kr-pb-sm); }
    /* the first section starts below the fixed phone header */
    #kr-main > [data-kr-frame]:first-child { padding-top: max(70px, var(--kr-pt)); }
}
@media (max-width: 479px) {
    [data-kr-frame] { --kr-w: var(--kr-w-xs); --kr-mw: var(--kr-mw-xs, none); --kr-pt: var(--kr-pt-xs); --kr-pb: var(--kr-pb-xs); }
}

@media print {
    .kr-header, .kr-sticky, .kr-bottombar, .kr-pop, .kr-lightbox, .kr-footer__bar .kr-share { display: none !important; }
}