/* cyrillic-ext */ @font-face { font-family: 'OnestLocal'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/onest-cyrillic-ext-variable.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'OnestLocal'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/onest-cyrillic-variable.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'OnestLocal'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/onest-latin-ext-variable.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'OnestLocal'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/onest-latin-variable.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer foundation{@font-face{ font-family: 'Material Symbols Outlined'; src: url('./fonts/material-symbols-static.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: block; } :root{ color-scheme: light; --bg: #f4f7f5; --surface: #ffffff; --surface-2: #ecf4f1; --text: #152237; --muted: #4f637d; --primary: #2e7d6b; --primary-700: #1f5f52; --accent: #e3eeff; --accent-2: #e8f5f2; --border: #d2dde8; --danger: #b42318; --success: #027a48; --gold: #d8ab50; --gold-soft: #f0d99c; --service-surface: #d5dddf; --directions-wave-bg: #d5dddf; --control-radius: 12px; --control-height: 48px; --control-height-sm: 40px; --control-border: #c8d2d9; --control-bg: linear-gradient(180deg, #fbfdfd 0%, #f2f6f5 100%); --control-bg-hover: linear-gradient(180deg, #f4faf8 0%, #eaf2ef 100%); --control-text: #29493d; --control-shadow: 0 8px 20px rgba(23, 44, 66, 0.08); --focus-ring: rgba(46, 125, 107, 0.45); --shadow: 0 18px 44px rgba(17, 40, 73, 0.09); --radius-lg: 22px; --radius-md: 14px; --header-nav-font-size: 0.95rem; --header-nav-gap: 0.9rem; --header-nav-item-gap: 0.16rem; --bg-radial-left: #eef7f2; --bg-radial-right: #edf3fe; --header-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(244, 247, 251, 0.92) 100%); --header-border: #dbe3ee; --header-nav-link: #29493d; --header-nav-link-active: #1f4f42; --dropdown-bg: linear-gradient(180deg, rgba(252, 255, 254, 0.98) 0%, rgba(246, 251, 249, 0.98) 100%); --dropdown-border: #c8d8d2; --dropdown-link-bg: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%); --dropdown-link-hover-bg: linear-gradient(180deg, #fbfffd 0%, #edf7f3 100%); --dropdown-link-active-bg: linear-gradient(180deg, #e9f6f1 0%, #ddf0e9 100%); --dropdown-link-border: #d7e3de; --dropdown-link-text: #244e45; --dropdown-link-hover-border: #b7d0c7; --dropdown-link-active-border: #8ab8aa; --section-alt-bg: linear-gradient(180deg, rgba(228, 238, 252, 0.7) 0%, rgba(234, 244, 241, 0.65) 100%); --hero-overlay-home: linear-gradient( 90deg, rgba(248, 252, 251, 0.72) 0%, rgba(248, 252, 251, 0.52) 36%, rgba(248, 252, 251, 0.38) 62%, rgba(248, 252, 251, 0.48) 100% ), radial-gradient(circle at 82% 18%, rgba(216, 171, 80, 0.14) 0%, rgba(216, 171, 80, 0) 48%); --hero-overlay-inner: linear-gradient( 90deg, rgba(248, 252, 251, 0.68) 0%, rgba(248, 252, 251, 0.44) 44%, rgba(248, 252, 251, 0.58) 100% ); --hero-panel-bg: rgba(255, 255, 255, 0.5); --hero-panel-border: rgba(171, 196, 188, 0.56); --hero-panel-shadow: 0 16px 34px rgba(30, 66, 56, 0.18); --hero-chip-bg: rgba(241, 249, 246, 0.84); --hero-chip-border: rgba(83, 139, 125, 0.45); --hero-chip-text: #1f6658; --about-hero-next-bg: #dfe9e6; --footer-bg: #2d5f55; --footer-text: #e6f2ed; --footer-muted: #bfd8ce; } *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; font-family:var(--font-sans); background: radial-gradient(circle at 0 0, var(--bg-radial-left) 0, transparent 42%), radial-gradient(circle at 100% 0, var(--bg-radial-right) 0, transparent 40%), var(--bg); color: var(--text); line-height: 1.56; } h1, h2, h3, h4{ font-family:var(--font-sans); letter-spacing: 0.01em; line-height: 1.15; } a{ color: var(--primary); text-decoration: none; } a:hover{ text-decoration: underline; } ul{ margin: 0; padding-left: 1.1rem; } img{ max-width: 100%; height: auto; } .ms-icon{ font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.15em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; visibility: hidden; } .app-icon{ display: inline-block; width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: middle; color: currentColor; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-icon *{ vector-effect: non-scaling-stroke; } html.icons-ready .ms-icon{ visibility: visible; } .icon-inline{ margin-right: 0.28rem; } .container{ width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } .site-header .container{ width: min(1340px, calc(100% - 2rem)); } .section{ padding: 4.3rem 0; } .section-alt{ background: var(--section-alt-bg); } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.3rem; } .site-header{ position: sticky; top: 0; z-index: 90; backdrop-filter: blur(12px); background: var(--header-bg); border-bottom: 1px solid var(--header-border); } .site-header::before{ content: ''; display: block; height: 3px; background: linear-gradient(90deg, rgba(216, 171, 80, 0) 0%, rgba(216, 171, 80, 0.85) 25%, rgba(240, 217, 156, 0.95) 50%, rgba(216, 171, 80, 0.85) 75%, rgba(216, 171, 80, 0) 100%); } .header-inner{ min-height: 86px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; } .brand{ display: inline-flex; align-items: center; gap: 0; color: inherit; text-decoration: none; justify-self: start; } .brand-mark{ width: 2.45rem; height: 2.45rem; border-radius: 12px; display: inline-grid; place-items: center; background: linear-gradient(140deg, #2e7d6b, #4f9f89); color: #fff; font-weight: 700; } .brand-logo{ width: auto; height: clamp(40px, 4.4vw, 54px); max-width: min(300px, 26vw); border-radius: 0; object-fit: contain; border: none; background: transparent; display: block; } .brand-logo-dark{ display: none; } .main-nav{ display: flex; align-items: center; justify-content: center; gap: var(--header-nav-gap); min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; justify-self: center; overflow: visible; } .nav-link{ min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--header-nav-link); text-decoration: none; font-size: var(--header-nav-font-size); font-weight: 600; display: inline-flex; align-items: center; gap: var(--header-nav-item-gap); white-space: nowrap; flex-shrink: 0; transition: color 0.2s ease, opacity 0.2s ease; } .nav-link .ms-icon, .nav-link .app-icon{ font-size: 1em; } .nav-link-home{ justify-content: center; color: var(--header-nav-link); } .nav-link-home .ms-icon, .nav-link-home .app-icon{ font-size: 1.02rem; } .nav-link.active, .nav-link:hover{ background: transparent; border-color: transparent; color: var(--header-nav-link-active); opacity: 0.84; text-decoration: none; } .nav-link-home.active, .nav-link-home:hover{ color: var(--header-nav-link-active); opacity: 0.84; } .main-nav .nav-link:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .main-nav .nav-link:focus:not(:focus-visible){ outline: none; } .nav-dropdown{ position: relative; display: inline-flex; align-items: center; isolation: isolate; } .nav-dropdown::after{ content: ''; position: absolute; left: -10px; right: -10px; top: calc(100% - 2px); height: 18px; z-index: 139; } .nav-dropdown-trigger{ appearance: none; -webkit-appearance: none; cursor: pointer; font-family:var(--font-sans); font-size: var(--header-nav-font-size); font-weight: 600; line-height: 1.56; color: var(--header-nav-link); letter-spacing: normal; text-transform: none; background: transparent; } @media (min-width: 1680px){:root{ --header-nav-font-size: 1.1rem; --header-nav-gap: 1.22rem; --header-nav-item-gap: 0.22rem; }} @media (min-width: 1400px) and (max-width: 1679px){:root{ --header-nav-font-size: 1.02rem; --header-nav-gap: 1.05rem; --header-nav-item-gap: 0.18rem; }} @media (min-width: 1200px) and (max-width: 1399px){:root{ --header-nav-font-size: 0.93rem; --header-nav-gap: 0.74rem; --header-nav-item-gap: 0.14rem; }} @media (min-width: 981px) and (max-width: 1199px){:root{ --header-nav-font-size: 0.84rem; --header-nav-gap: 0.5rem; --header-nav-item-gap: 0.1rem; }} @media (min-width: 981px) and (max-width: 1060px){:root{ --header-nav-font-size: 0.8rem; --header-nav-gap: 0.36rem; --header-nav-item-gap: 0.09rem; }} .nav-dropdown-chevron{ font-size: 1.06em; margin-left: -0.04rem; transition: transform 0.2s ease; } .nav-dropdown.is-open .nav-dropdown-chevron, .nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown:focus-within .nav-dropdown-chevron{ transform: rotate(180deg); } .nav-dropdown-menu{ position: absolute; top: calc(100% + 0.16rem); left: 50%; transform: translateX(-50%); min-width: 278px; width: max-content; max-width: 360px; padding: 0.52rem; border-radius: 14px; border: 1px solid var(--dropdown-border); background: var(--dropdown-bg); box-shadow: 0 16px 34px rgba(19, 55, 49, 0.16); display: grid; gap: 0.34rem; opacity: 0; visibility: hidden; pointer-events: none; z-index: 140; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; } .nav-dropdown-menu-doctors{ min-width: 320px; max-width: 380px; } .nav-dropdown-menu::before{ content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border-top: 1px solid var(--dropdown-border); border-left: 1px solid var(--dropdown-border); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.is-open .nav-dropdown-menu{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-link{ min-height: 38px; padding: 0 0.62rem; border: 1px solid var(--dropdown-link-border); border-radius: 9px; background: var(--dropdown-link-bg); color: var(--dropdown-link-text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.84rem; font-weight: 620; white-space: nowrap; } .nav-dropdown-link-doctor{ align-items: flex-start; min-height: auto; padding-top: 0.48rem; padding-bottom: 0.48rem; white-space: normal; } .nav-dropdown-avatar{ width: 2rem; height: 2rem; flex: 0 0 2rem; margin-top: 0.04rem; border-radius: 999px; overflow: hidden; border: 1px solid rgba(86, 127, 115, 0.22); box-shadow: 0 4px 10px rgba(19, 55, 49, 0.08); background: linear-gradient(180deg, #f5fbf8 0%, #e8f2ee 100%); } .nav-dropdown-avatar img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; } .nav-dropdown-link .ms-icon, .nav-dropdown-link .app-icon{ color: #2f7f6d; font-size: 1.08em; flex: 0 0 auto; margin-top: 0.08rem; } .nav-dropdown-link-body{ min-width: 0; display: grid; gap: 0.08rem; } .nav-dropdown-link-title{ color: inherit; font-size: 0.82rem; line-height: 1.2; font-weight: 650; } .nav-dropdown-link-meta{ color: #6a7c77; font-size: 0.7rem; line-height: 1.18; text-transform: none; white-space: normal; } .nav-dropdown-link:hover{ border-color: var(--dropdown-link-hover-border); background: var(--dropdown-link-hover-bg); text-decoration: none; color: var(--header-nav-link-active); } .nav-dropdown-link.active{ border-color: var(--dropdown-link-active-border); background: var(--dropdown-link-active-bg); color: var(--header-nav-link-active); } .nav-dropdown-link:hover .nav-dropdown-link-meta, .nav-dropdown-link.active .nav-dropdown-link-meta{ color: #55706a; } .main-nav .nav-dropdown-trigger:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .main-nav .nav-dropdown-trigger:focus:not(:focus-visible){ outline: none; } .main-nav .nav-dropdown-link:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .main-nav .nav-dropdown-link:focus:not(:focus-visible){ outline: none; } .header-cta{ display: flex; align-items: center; justify-content: flex-end; gap: 0.62rem; justify-self: end; position: relative; min-height: 58px; padding-right: 0; } .header-cta > .header-contact-dropdown{ order: 1; } .header-contact-dropdown{ position: relative; width: 254px; } .phone-card{ display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.18rem 0.62rem; min-width: 194px; min-height: 54px; padding: 0 0.78rem 0 0.56rem; border-radius: 12px; border: 1px solid #d6bc7f; background: linear-gradient(180deg, #fffef8 0%, #fff7e3 100%); text-decoration: none; box-shadow: 0 8px 18px rgba(131, 97, 23, 0.12); } .phone-card-toggle{ appearance: none; -webkit-appearance: none; cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; } .phone-card-icon{ width: 2.05rem; height: 2.05rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.94rem; font-weight: 700; color: #61451b; background: linear-gradient(150deg, #f3dfaa 0%, #fff3cf 100%); border: 1px solid rgba(190, 147, 58, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .phone-card-icon .ms-icon, .phone-card-icon .app-icon{ font-size: 1rem; } .phone-card-meta{ display: grid; justify-items: start; } .phone-card-label{ font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: #87682f; font-weight: 700; line-height: 1.15; } .phone-card-number{ font-size: 0.95rem; font-weight: 700; color: #21354e; white-space: nowrap; line-height: 1.2; } .phone-card-caret{ font-size: 1.14rem; color: #87682f; transition: transform 0.2s ease; } .phone-card:hover{ text-decoration: none; border-color: #caa358; background: linear-gradient(180deg, #fffefb 0%, #fff3d8 100%); } .header-contact-dropdown.is-open .phone-card{ border-color: #caa358; background: linear-gradient(180deg, #fffefb 0%, #fff0d2 100%); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 8px 16px rgba(131, 97, 23, 0.14); } .header-contact-dropdown.is-open .phone-card-caret{ transform: rotate(180deg); } .header-contact-panel{ position: absolute; top: calc(100% - 1px); right: 0; width: 100%; border: 0; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #fffef9 0%, #fff8e7 100%); box-shadow: none; padding: 0 0.72rem; display: grid; gap: 0.58rem; z-index: 170; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: max-height 0.28s ease, opacity 0.18s ease, padding 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, visibility 0.24s ease; } .header-contact-dropdown.is-open .header-contact-panel{ border: 1px solid #d6bc7f; border-top: 0; box-shadow: 0 16px 30px rgba(131, 97, 23, 0.15); padding: 0.62rem 0.72rem 0.72rem; max-height: 560px; opacity: 1; pointer-events: auto; visibility: visible; } .header-contact-agent{ position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; min-height: 176px; padding: 0.15rem 0.25rem 0; border: 1px solid #dccca3; border-radius: 10px; background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.35) 44%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fffef9 0%, #fff8e7 100%); overflow: hidden; } .header-contact-agent::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, rgba(255, 248, 231, 0) 0%, #fff8e7 100%); pointer-events: none; } .header-contact-agent img{ display: block; width: min(100%, 250px); height: 182px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 14px rgba(63, 45, 15, 0.17)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%); } .header-contact-links{ display: grid; grid-template-columns: 1fr; gap: 0.42rem; } .header-contact-item{ min-height: 42px; padding: 0.36rem 0.58rem; border: 1px solid #dccca3; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #fffdf4 100%); color: #2b4d42; text-decoration: none; display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.82rem; line-height: 1.3; } .header-contact-item .ms-icon, .header-contact-item .app-icon{ color: #8a6a2f; font-size: 1.06rem; flex-shrink: 0; } .custom-color-icon{ display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; background-color: currentColor; -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .header-contact-item-icon{ width: 1.06rem; height: 1.06rem; color: #8a6a2f; flex-shrink: 0; } .header-contact-item-icon-image{ width: 1.06rem; height: 1.06rem; object-fit: contain; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1469%) hue-rotate(11deg) brightness(94%) contrast(89%); } .header-contact-item:hover{ text-decoration: none; border-color: #ccb27b; background: linear-gradient(180deg, #fffefb 0%, #fff8e7 100%); } .header-contact-item:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .header-contact-item:focus:not(:focus-visible){ outline: none; } .header-contact-item-static{ cursor: default; } .header-contact-item-static:hover{ border-color: #dccca3; background: linear-gradient(180deg, #ffffff 0%, #fffdf4 100%); } .header-contact-panel .header-book-btn{ width: 100%; justify-content: center; } .btn.header-book-btn{ display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.2rem 0.62rem; min-width: 194px; min-height: 54px; padding: 0 0.78rem 0 0.56rem; border-radius: 12px; border: 1px solid #2d8b74; background: linear-gradient(155deg, #2f8a74 0%, #2e7d6b 55%, #276a5b 100%); color: #f6fffb; box-shadow: 0 10px 24px rgba(26, 102, 85, 0.3); } .header-book-btn-icon{ width: 2.05rem; height: 2.05rem; border-radius: 999px; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; line-height: 1; color: #ffffff; background: linear-gradient(150deg, #43ac92 0%, #328a75 100%); border: 1px solid rgba(201, 246, 233, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34); } .header-book-btn-icon .ms-icon, .header-book-btn-icon .app-icon{ font-size: 1.16rem; } .header-book-btn-text{ font-size: 0.95rem; font-weight: 700; white-space: nowrap; line-height: 1.2; } .btn.header-book-btn:hover{ border-color: #3ea48c; background: linear-gradient(155deg, #2c816b 0%, #276f5e 100%); color: #ffffff; text-decoration: none; } .header-book-btn:hover .header-book-btn-icon{ background: linear-gradient(150deg, #4ab69b 0%, #358f7a 100%); } .phone-card:focus, .phone-card-toggle:focus, .btn.header-book-btn:focus, .mobile-menu-toggle:focus, .mobile-menu-close:focus, .mobile-menu-group summary:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .phone-card:focus:not(:focus-visible), .phone-card-toggle:focus:not(:focus-visible), .btn.header-book-btn:focus:not(:focus-visible), .mobile-menu-toggle:focus:not(:focus-visible), .mobile-menu-close:focus:not(:focus-visible), .mobile-menu-group summary:focus:not(:focus-visible){ outline: none; } .mobile-menu{ display: none; position: relative; z-index: 220; } .mobile-menu-toggle{ appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 54px; padding: 0 0.9rem; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-bg); color: var(--control-text); font-weight: 650; display: inline-flex; align-items: center; gap: 0.32rem; box-shadow: var(--control-shadow); font: inherit; } .mobile-menu-backdrop{ position: fixed; inset: 0; background: rgba(12, 22, 34, 0.3); backdrop-filter: blur(4px); z-index: 219; } .mobile-menu-panel{ position: fixed; top: calc(env(safe-area-inset-top, 0px) + 84px); right: 0.5rem; width: min(380px, calc(100vw - 1rem)); max-height: calc(100dvh - 102px); background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 48px rgba(17, 40, 73, 0.2); padding: 0.72rem; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.72rem; z-index: 220; overflow: hidden; } .mobile-menu-panel-header{ display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .mobile-menu-panel-actions{ display: inline-flex; align-items: center; gap: 0.5rem; } .mobile-menu-close{ appearance: none; -webkit-appearance: none; width: 2.5rem; height: 2.5rem; border: 1px solid #d3dde4; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f5faf8 100%); color: #31574e; display: inline-grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px rgba(20, 45, 39, 0.08); padding: 0; } .mobile-menu-close-glyph{ display: inline-block; font-size: 1.6rem; line-height: 1; font-weight: 400; transform: translateY(-1px); } .mobile-menu-scroll{ min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 0.12rem; display: grid; gap: 0.72rem; } .mobile-menu-primary{ display: grid; gap: 0.45rem; } .mobile-menu-link, .mobile-menu-sublink{ min-height: var(--control-height-sm); padding: 0 0.7rem; border: 1px solid #d3dde4; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%); display: inline-flex; align-items: center; gap: 0.38rem; text-decoration: none; color: var(--text); font-weight: 620; } .mobile-menu-link.active, .mobile-menu-sublink.active{ border-color: #9dc8bc; background: linear-gradient(180deg, #eef8f4 0%, #e2f2ec 100%); color: #20453d; } .mobile-menu-link .ms-icon, .mobile-menu-link .app-icon, .mobile-menu-sublink .ms-icon, .mobile-menu-sublink .app-icon{ font-size: 1.12em; color: #2e6b5f; } .mobile-menu-link:hover, .mobile-menu-sublink:hover, .mobile-menu-close:hover{ background: var(--control-bg-hover); border-color: #bed0c7; text-decoration: none; } .mobile-menu-group{ margin: 0; display: grid; gap: 0.45rem; } .mobile-menu-group summary{ list-style: none; } .mobile-menu-group summary::-webkit-details-marker{ display: none; } .mobile-menu-group-summary{ width: 100%; justify-content: space-between; cursor: pointer; } .mobile-menu-link-main{ display: inline-flex; align-items: center; gap: 0.38rem; } .mobile-menu-group-chevron{ transition: transform 0.2s ease; } .mobile-menu-group[open] .mobile-menu-group-chevron{ transform: rotate(180deg); } .mobile-menu-submenu{ display: grid; gap: 0.38rem; padding-left: 0.7rem; } .mobile-menu-sublink{ min-height: 38px; font-size: 0.95rem; background: linear-gradient(180deg, #fbfefd 0%, #f0f7f4 100%); } html.mobile-menu-open, body.mobile-menu-open{ overflow: hidden; } .has-video-bg .eyebrow{ display: block; margin: 0 0 0.7rem; padding: 0; color: #1f6658; background: transparent; border-radius: 0; letter-spacing: 0.08em; box-shadow: none; } .has-video-bg h1{ color: #163b34; text-shadow: none; line-height: 1.15; } .has-video-bg .hero-text, .has-video-bg .hero-points li{ color: #244b45; text-shadow: none; } .has-video-bg .hero-line-chip{ display: inline; background: transparent; color: inherit; border-radius: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .has-video-bg .eyebrow .hero-line-chip{ padding: 0; } .has-video-bg h1 .hero-line-chip{ padding: 0; background: transparent; color: inherit; } .has-video-bg .hero-text .hero-line-chip{ padding: 0; } .has-video-bg .hero-points .hero-line-chip{ padding: 0; } .home-main-hero .eyebrow .hero-line-chip{ display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 1.06rem; border-radius: 999px; border: 1px solid var(--hero-chip-border); background: var(--hero-chip-bg); color: var(--hero-chip-text); letter-spacing: 0.14em; font-size: 0.79rem; font-weight: 700; } .home-main-hero h1 .hero-line-chip{ color: #0f3f35; font-weight: 760; padding: 0; background: transparent; text-shadow: none; } .home-main-hero h1{ line-height: 1.18; margin-bottom: 0.72rem; } .home-main-hero .hero-text .hero-line-chip{ color: #2a4f48; font-size: clamp(1.1rem, 1.65vw, 1.28rem); line-height: 1.42; padding: 0; background: transparent; text-shadow: none; } .has-video-bg .hero-actions{ justify-content: center; } .has-video-bg .hero-points{ width: fit-content; max-width: min(92%, 42rem); margin-left: auto; margin-right: auto; justify-items: start; } .has-video-bg .hero-points li{ width: 100%; justify-content: flex-start; text-align: left; } .has-video-bg .hero-points li::before{ display: none; } .has-video-bg .btn-light{ background: rgba(255, 255, 255, 0.9); border-color: rgba(176, 204, 194, 0.9); color: #1f4f42; box-shadow: 0 8px 16px rgba(21, 54, 45, 0.12); } .has-video-bg .btn-light:hover{ background: rgba(245, 251, 248, 0.96); border-color: rgba(149, 188, 176, 0.95); color: #184b3e; } .eyebrow{ letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); font-size: 0.79rem; font-weight: 700; } .hero-text{ color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.14rem); max-width: none; } .hero-actions{ display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.3rem; } .hero-points{ margin-top: 1.1rem; padding: 0; list-style: none; display: grid; gap: 0.56rem; max-width: none; } .hero-points li{ display: flex; align-items: flex-start; gap: 0.32rem; padding-left: 0; color: #2f415d; } .hero-points li::before{ display: none; } .hero-points li .ms-icon, .hero-points li .app-icon{ color: var(--primary); font-size: 1rem; margin-top: 0.1rem; } .has-video-bg .hero-points li .ms-icon, .has-video-bg .hero-points li .app-icon{ color: #2e7d6b; } .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; min-height: calc(var(--control-height) - 4px); padding: 0 0.82rem; border-radius: var(--control-radius); font-weight: 650; text-decoration: none; border: 1px solid var(--control-border); background: var(--control-bg); color: var(--control-text); box-shadow: var(--control-shadow); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .btn .ms-icon, .btn .app-icon{ font-size: 1.15em; } .btn:hover{ background: var(--control-bg-hover); border-color: #b6cac0; color: #1f4f42; text-decoration: none; } .btn-primary{ border-color: #2d8b74; background: linear-gradient(155deg, #2f8a74 0%, #2e7d6b 55%, #276a5b 100%); color: #f6fffb; box-shadow: 0 10px 24px rgba(26, 102, 85, 0.26); } .btn-primary:hover{ border-color: #3ea48c; background: linear-gradient(155deg, #2c816b 0%, #276f5e 100%); color: #ffffff; text-decoration: none; } .btn-light{ border-color: var(--control-border); background: var(--control-bg); color: var(--control-text); box-shadow: var(--control-shadow); } .btn-light:hover{ background: var(--control-bg-hover); border-color: #b7c8c0; color: #1f4f42; text-decoration: none; } .btn-gold{ border-color: #d6bc7f; background: linear-gradient(180deg, #fffef8 0%, #fff7e3 100%); color: #21354e; box-shadow: 0 8px 18px rgba(131, 97, 23, 0.12); } .btn-gold .ms-icon, .btn-gold .app-icon{ color: #826328; } .btn-gold:hover{ background: linear-gradient(180deg, #fffefb 0%, #fff3d8 100%); border-color: #caa358; color: #21354e; text-decoration: none; } .section-heading{ margin-bottom: 1.3rem; } .section-heading h2{ margin: 0; font-size: clamp(1.45rem, 2.7vw, 2.05rem); } .section-heading p{ margin-top: 0.35rem; color: var(--muted); } .section-heading-center{ text-align: center; } .directions-section{ --directions-wave-gap: 50px; padding: 2.3rem 0 calc(2.9rem + var(--directions-wave-gap)); background: var(--directions-wave-bg); position: relative; z-index: 1; --directions-next-color: #0d3f46; } .directions-section::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4.8vw, 56px); z-index: 2; pointer-events: none; background: var(--directions-next-color); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .directions-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(-150px, calc(-78px - 3.8vw), -104px); position: relative; z-index: 6; } .direction-card{ --direction-card-surface: #ffffff; background: var(--direction-card-surface); border: 1px solid #d6e0dc; border-radius: 22px; padding: 0; overflow: hidden; box-shadow: 0 10px 24px rgba(19, 47, 70, 0.09); } .direction-media{ position: relative; aspect-ratio: 16 / 6.7; background: #d6e1e3; } .direction-media::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 34, 49, 0.05) 0%, rgba(11, 34, 49, 0.18) 100%); pointer-events: none; } .direction-media video{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .direction-media .video-step-cut{ display: none; } .direction-media .video-wave-cut{ position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; z-index: 2; pointer-events: none; background: var(--direction-card-surface); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; } .direction-body{ padding: 1.15rem 1.2rem 1.2rem; background: var(--direction-card-surface); } .direction-heading{ display: inline-flex; flex-direction: column; gap: 0.48rem; align-items: flex-start; margin-bottom: 0.86rem; color: #2f655d; text-decoration: none; } .direction-heading:hover{ text-decoration: none; } .direction-icon{ width: 2.7rem; height: 2.7rem; display: inline-flex; color: #5f9f95; } .direction-icon svg{ width: 100%; height: 100%; } .direction-heading h2{ margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-family:var(--font-sans); font-weight: 600; letter-spacing: 0.01em; line-height: 1.12; color: #224640; } .direction-chips{ display: flex; flex-wrap: wrap; gap: 0.56rem; } .direction-chip{ min-height: 40px; padding: 0.42rem 0.8rem 0.45rem 0.88rem; border: 1px solid var(--control-border); border-radius: 12px; background: var(--control-bg); color: var(--control-text); box-shadow: 0 7px 16px rgba(22, 46, 68, 0.09); font-size: 0.95rem; font-weight: 560; line-height: 1.2; display: inline-flex; align-items: center; gap: 0.42rem; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .direction-chip::after{ content: "↗"; font-size: 0.78rem; color: #2e7d6b; opacity: 0.78; transform: translateY(-1px); } .direction-chip:hover{ background: var(--control-bg-hover); border-color: #a8c0b7; color: #234b3f; box-shadow: 0 10px 20px rgba(20, 43, 66, 0.11); transform: translateY(-1px); text-decoration: none; } .direction-chip:hover::after{ opacity: 1; transform: translate(1px, -1px); } .direction-chip:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 8px 16px rgba(20, 43, 66, 0.11); } .service-topics-section{ padding-top: 2.1rem; padding-bottom: 1.9rem; } .what-we-treat-section{ padding-top: 2.9rem; padding-bottom: 3.15rem; background: var(--service-surface); } .what-we-treat-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.15rem; row-gap: 2.65rem; } .what-we-treat-grid.what-we-treat-grid-tail-center .what-we-treat-card:last-child{ grid-column: 2; } .what-we-treat-card{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.82rem; row-gap: 0; padding: 0.2rem 0; } .what-we-treat-card-icon{ grid-column: 1; grid-row: 1; align-self: start; width: 3.15rem; height: 3.15rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #2f8a76; background: #ffffff; border: 1px solid rgba(86, 129, 120, 0.22); box-shadow: 0 8px 18px rgba(27, 63, 54, 0.06); } .what-we-treat-card-icon svg{ width: 1.6rem; height: 1.6rem; } .what-we-treat-card-content{ grid-column: 2; grid-row: 1; min-width: 0; } .what-we-treat-card-title{ margin: 0 0 0.9rem; color: #264844; font-family:var(--font-sans); font-size: clamp(1.16rem, 1.1vw, 1.36rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; } .what-we-treat-list{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.62rem; } .what-we-treat-list li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.72rem; color: #3a5354; line-height: 1.34; font-size: clamp(0.91rem, 1vw, 0.99rem); } .what-we-treat-term{ position: relative; padding-left: 1rem; } .what-we-treat-term::before{ content: ''; position: absolute; left: 0; top: 0.53em; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: #35a689; } .what-we-treat-tip{ position: relative; display: inline-flex; align-items: center; justify-self: end; padding-top: 0.1rem; } .what-we-treat-help{ width: 1.2rem; height: 1.2rem; border-radius: 999px; border: 1px solid #87bbae; background: #ffffff; color: #77ab9d; display: inline-flex; align-items: center; justify-content: center; cursor: help; padding: 0; box-shadow: 0 4px 10px rgba(27, 63, 54, 0.08); font-family:var(--font-sans); font-size: 0.75rem; font-weight: 700; line-height: 1; } .what-we-treat-help:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .what-we-treat-help:focus:not(:focus-visible){ outline: none; } .what-we-treat-tooltip{ position: absolute; left: 50%; bottom: calc(100% + 0.45rem); transform: translate(-50%, 6px); width: min(21rem, 74vw); padding: 0.7rem 0.78rem; border-radius: 12px; border: 1px solid #adcfc5; background: rgba(240, 250, 246, 0.985); color: #294853; font-size: 0.84rem; line-height: 1.4; box-shadow: 0 12px 24px rgba(17, 42, 59, 0.16); z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .what-we-treat-tooltip::after{ content: ''; position: absolute; left: 50%; top: 100%; width: 0.62rem; height: 0.62rem; transform: translateX(-50%) rotate(45deg); background: rgba(240, 250, 246, 0.985); border-right: 1px solid #adcfc5; border-bottom: 1px solid #adcfc5; } .what-we-treat-tip:hover .what-we-treat-tooltip, .what-we-treat-tip:focus-within .what-we-treat-tooltip{ opacity: 1; visibility: visible; transform: translate(-50%, 0); } .what-we-treat-tip[data-tip-position='left'] .what-we-treat-tooltip{ left: auto; right: calc(100% + 0.5rem); bottom: 50%; transform: translate(-6px, 50%); width: min(20.5rem, 68vw); } .what-we-treat-tip[data-tip-position='left'] .what-we-treat-tooltip::after{ left: auto; right: -0.35rem; top: 50%; transform: translateY(-50%) rotate(45deg); } .what-we-treat-tip[data-tip-position='left']:hover .what-we-treat-tooltip, .what-we-treat-tip[data-tip-position='left']:focus-within .what-we-treat-tooltip{ transform: translate(0, 50%); } .what-we-treat-tip[data-tip-position='right'] .what-we-treat-tooltip{ left: calc(100% + 0.5rem); right: auto; bottom: 50%; transform: translate(6px, 50%); width: min(20.5rem, 68vw); } .what-we-treat-tip[data-tip-position='right'] .what-we-treat-tooltip::after{ left: -0.35rem; right: auto; top: 50%; transform: translateY(-50%) rotate(45deg); } .what-we-treat-tip[data-tip-position='right']:hover .what-we-treat-tooltip, .what-we-treat-tip[data-tip-position='right']:focus-within .what-we-treat-tooltip{ transform: translate(0, 50%); } .what-we-treat-section .section-heading{ margin: 0 auto 2.3rem; max-width: 56rem; text-align: center; } .what-we-treat-section .section-heading h2{ color: #244e47; font-family:var(--font-sans); font-size: clamp(1.84rem, 2.35vw, 2.3rem); font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; } .what-we-treat-section .section-heading p{ margin: 0.95rem auto 0; max-width: 46rem; color: #5c7470; font-size: clamp(0.98rem, 1.16vw, 1.25rem); line-height: 1.35; } .our-services-section{ position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(2rem, 3vw, 2.8rem); padding-bottom: calc(clamp(3rem, 4.2vw, 3.5rem) + 3.125rem); background: linear-gradient(180deg, #d9e8e3 0%, #dfede8 100%); } .our-services-section::before, .our-services-section::after{ content: ''; position: absolute; left: 0; right: 0; height: clamp(30px, 4.8vw, 64px); pointer-events: none; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .our-services-section::before{ top: -1px; background: var(--service-surface); transform: scaleY(-1); } .our-services-section::after{ bottom: -1px; background: var(--bg); } .our-services-section .container{ position: relative; z-index: 2; } .our-services-section .section-heading{ margin: 3.125rem auto 1.85rem; max-width: 56rem; text-align: center; } .our-services-section .section-heading h2{ color: #244e47; font-family:var(--font-sans); font-size: clamp(1.52rem, 1.95vw, 1.96rem); font-weight: 700; line-height: 1.12; letter-spacing: 0.01em; } .our-services-section .section-heading p{ margin: 0.68rem auto 0; max-width: 46rem; color: #5c7470; font-size: clamp(0.94rem, 1.04vw, 1.06rem); line-height: 1.4; } .our-services-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .our-services-grid.our-services-grid-tail-center .our-service-card:last-child{ grid-column: 2; } .our-services-grid.our-services-grid-tail-two-center{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .our-services-grid.our-services-grid-tail-two-center .our-service-card{ flex: 0 0 calc((100% - 2rem) / 3); max-width: calc((100% - 2rem) / 3); } .our-service-card{ border-radius: 18px; padding: 1rem 1.05rem; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(122, 161, 151, 0.34); display: grid; gap: 0.68rem; box-shadow: 0 8px 22px rgba(33, 73, 84, 0.05); } .our-service-card-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.66rem; } .our-service-icon{ width: 2.35rem; height: 2.35rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #2b876f; background: #d4e5df; border: 1px solid rgba(86, 129, 120, 0.14); flex-shrink: 0; } .our-service-icon svg{ width: 1.23rem; height: 1.23rem; } .our-service-card h3{ margin: 0; color: #264844; font-family:var(--font-sans); font-size: clamp(1.04rem, 1vw, 1.18rem); line-height: 1.18; letter-spacing: 0.01em; } .our-service-card p{ margin: 0; color: #3d5958; font-size: 0.93rem; line-height: 1.4; } .our-service-list{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.58rem; } .our-service-list li{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.56rem; padding: 0.6rem 0.66rem; border-radius: 12px; border: 1px solid rgba(127, 173, 161, 0.35); background: linear-gradient(180deg, rgba(245, 251, 248, 0.95) 0%, rgba(235, 246, 241, 0.92) 100%); color: #3a5354; font-size: 0.89rem; line-height: 1.34; } .our-service-list-icon{ width: 1.2rem; height: 1.2rem; margin-top: 0.08rem; color: #2f8a76; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .our-service-list-icon svg{ width: 1rem; height: 1rem; } .our-service-list-copy{ display: grid; gap: 0.14rem; min-width: 0; } .our-service-list li strong{ color: #274843; font-weight: 600; } .our-service-list li span{ color: #4b6869; } .our-service-accordion{ display: block; } .our-service-accordion-item + .our-service-accordion-item{ margin-top: 15px; } .our-service-accordion-item{ display: block; border-radius: 16px; border: 1px solid rgba(122, 161, 151, 0.34); background: rgba(255, 255, 255, 0.72); overflow: hidden; box-shadow: 0 6px 18px rgba(33, 73, 84, 0.04); } .our-service-accordion-item summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.66rem; padding: 0.9rem 1rem; transition: background-color 0.2s ease; } .our-service-accordion-item summary::-webkit-details-marker{ display: none; } .our-service-accordion-item summary::after{ content: '›'; width: 1.85rem; height: 1.85rem; border-radius: 999px; border: 1px solid #87bbae; color: #2f7f6b; background: #edf6f2; display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; line-height: 1; font-weight: 600; transform: rotate(0deg); transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .our-service-summary-title{ color: #264844; font-family:var(--font-sans); font-size: clamp(1.06rem, 1vw, 1.18rem); line-height: 1.15; } .our-service-accordion-item summary:hover{ background: rgba(227, 240, 235, 0.55); } .our-service-accordion-item[open] summary{ border-bottom: 1px solid rgba(122, 161, 151, 0.24); } .our-service-accordion-item[open] summary::after{ background: #e2f1ec; border-color: #6fafa0; color: #235f50; transform: rotate(90deg); } .our-service-body{ padding: 0.86rem 1rem 0.98rem; display: grid; gap: 0.66rem; } .our-service-body p{ margin: 0; color: #3d5958; font-size: 0.93rem; line-height: 1.4; } .our-service-lead{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.62rem; padding: 0.64rem 0.72rem; border-radius: 12px; border: 1px solid rgba(127, 173, 161, 0.35); background: linear-gradient(180deg, rgba(244, 250, 247, 0.94) 0%, rgba(233, 244, 239, 0.9) 100%); } .our-service-lead-icon{ width: 1.28rem; height: 1.28rem; color: #27836e; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.04rem; } .our-service-lead-icon svg{ width: 1.02rem; height: 1.02rem; } .our-service-lead-text{ color: #3d5958; font-size: 0.93rem; line-height: 1.4; } .service-topics-card h2{ margin-top: 0; margin-bottom: 0.75rem; } .diagnostics-extra-section{ padding-top: 0; } .trust-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .trust-item{ background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%); } .trust-item h3{ margin: 0; font-size: 1.45rem; } .trust-item p{ margin: 0.32rem 0 0; color: var(--muted); } .split-block{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center; } .split-media{ border-radius: 22px; overflow: hidden; border: 1px solid #cfdae6; background: #fff; box-shadow: var(--shadow); } .split-media img{ width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; } .split-copy{ background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 1.4rem; box-shadow: var(--shadow); } .split-copy h2{ margin-top: 0; margin-bottom: 0.65rem; } .split-copy p{ color: var(--muted); } .split-copy ul{ margin: 0.8rem 0 1rem; } .home-wave-section{ position: relative; isolation: isolate; overflow: hidden; --section-bg: var(--bg); --wave-next-color: var(--bg); background: var(--section-bg); } .home-wave-section.section{ padding-top: clamp(4.7rem, 7.6vw, 6rem); padding-bottom: clamp(4.7rem, 7.6vw, 6rem); } .home-wave-section::before, .home-wave-section::after{ content: ''; position: absolute; left: 0; right: 0; height: clamp(28px, 4.8vw, 56px); pointer-events: none; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C32 C120%2C98 240%2C102 360%2C58 C470%2C20 590%2C16 720%2C55 C850%2C94 980%2C102 1100%2C66 C1220%2C30 1330%2C26 1440%2C74 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .home-wave-section::before{ display: none; } .home-wave-section::after{ bottom: -1px; background: var(--wave-next-color); } .home-wave-section > .container{ position: relative; z-index: 2; } .home-section-head{ margin: 0 auto 1.45rem; max-width: 62rem; text-align: center; } .home-section-head h2{ margin: 0; font-family:var(--font-sans); font-size: clamp(1.55rem, 2.35vw, 2.18rem); font-weight: 700; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: #204741; } .home-section-head p{ margin: 0.72rem auto 0; color: #54706b; max-width: 46rem; font-size: clamp(0.95rem, 1.08vw, 1.1rem); } .home-about-section{ --section-bg: #dfe9e6; --wave-next-color: #2d5f55; } .home-about-lead{ margin: 0.82rem auto 0; max-width: 65rem; color: #2f5750; font-size: clamp(0.98rem, 1.08vw, 1.14rem); line-height: 1.56; } .home-about-features{ margin-top: 1.25rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.95rem; } .home-about-feature{ border-radius: 18px; padding: 1rem 1.02rem; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(123, 163, 152, 0.32); box-shadow: 0 10px 26px rgba(33, 65, 72, 0.08); min-height: 238px; display: flex; flex-direction: column; align-items: center; text-align: center; } .home-about-feature-top{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .home-about-feature-badge{ font-family:var(--font-sans); font-size: 1.08rem; font-weight: 700; line-height: 1; color: #2d6f62; } .home-about-feature-icon-box{ width: auto; height: auto; border: 0; background: transparent; display: grid; place-items: center; } .home-about-feature-icon-box img{ width: clamp(4.4rem, 5.1vw, 5.2rem); height: clamp(4.4rem, 5.1vw, 5.2rem); display: block; } .home-about-feature h3{ margin: 0.74rem 0 0; color: #2f5750; font-family:var(--font-sans); font-size: clamp(1.04rem, 1.34vw, 1.28rem); font-weight: 700; line-height: 1.2; width: 100%; } .home-about-feature p{ margin: 0.52rem 0 0; color: #496965; font-size: 0.9rem; line-height: 1.46; width: 100%; max-width: 27ch; } .home-slogan-section{ --section-bg: #2d5f55; --wave-next-color: #e7eef0; } .home-slogan-wrap{ text-align: center; max-width: 58rem; margin: 0 auto; } .home-slogan-wrap h2{ margin: 0; color: #f3fbf8; font-family:var(--font-sans); font-size: clamp(1.55rem, 2.7vw, 2.6rem); font-weight: 700; line-height: 1.13; } .home-slogan-wrap h2 span{ color: #d4e7dc; } .home-slogan-wrap .btn{ margin-top: 1.1rem; } .home-doctors-section{ --section-bg: #e7eef0; --wave-next-color: #dbe6e2; } .home-doctors-section .doctors-grid{ margin-top: 0.88rem; } .home-center-action{ margin-top: 1rem; display: flex; justify-content: center; } .home-principles-section{ --section-bg: #dbe6e2; --wave-next-color: #edf3f0; } .home-principles-top{ margin: 0 auto; max-width: 64rem; text-align: center; } .home-principles-top p{ margin: 0.7rem auto 0; max-width: 50rem; color: #446761; font-size: clamp(0.95rem, 1.08vw, 1.12rem); } .home-principles-grid{ margin-top: 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; } .home-principle-card{ border-radius: 18px; padding: 1.02rem 1.08rem; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(118, 161, 150, 0.32); box-shadow: 0 10px 24px rgba(31, 63, 75, 0.08); } .home-principle-num{ margin: 0 0 0.26rem; color: #2e7d6b; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.06em; } .home-principle-card h3{ margin: 0; color: #2c544f; font-family:var(--font-sans); font-size: clamp(1.14rem, 1.65vw, 1.36rem); } .home-principle-card p{ margin: 0.48rem 0 0; color: #4f6965; font-size: 0.95rem; line-height: 1.48; } .home-faq-section{ --section-bg: #edf3f0; --wave-next-color: #dbe6e2; } .home-reviews-section{ --section-bg: #dbe6e2; --wave-next-color: var(--footer-bg); } .home-reviews-section .home-section-head h2{ color: #204741; } .home-reviews-section .home-section-head p{ color: #54706b; } .home-reviews-platforms{ margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.95rem; } .home-review-platform{ border-radius: 20px; border: 1px solid rgba(142, 176, 169, 0.26); background: radial-gradient(circle at top right, rgba(113, 160, 145, 0.18), rgba(113, 160, 145, 0) 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 246, 0.96) 100%); box-shadow: 0 14px 34px rgba(33, 65, 72, 0.1); display: grid; gap: 0.85rem; } .home-review-platform-head{ display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center; } .home-review-platform-icon{ width: 3.25rem; height: 3.25rem; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 247, 244, 0.98) 100%); border: 1px solid rgba(184, 207, 199, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); overflow: hidden; } .home-review-platform-icon img{ width: 100%; height: 100%; display: block; } .home-review-platform-head h3{ margin: 0; color: #214842; font-size: clamp(1.05rem, 1.5vw, 1.24rem); } .home-review-platform-head p{ margin: 0.18rem 0 0; color: #5a7a75; font-size: 0.86rem; } .home-review-platform-text{ margin: 0; color: #4b6762; line-height: 1.52; } .home-review-platform .btn{ justify-self: start; } .home-reviews-doctors-head{ margin: 1.3rem auto 0; max-width: 54rem; text-align: center; } .home-reviews-doctors-head h3{ margin: 0; color: #214842; font-size: clamp(1.18rem, 1.85vw, 1.5rem); } .home-reviews-doctors-head p{ margin: 0.52rem auto 0; max-width: 42rem; color: #54706b; } .home-reviews-doctors{ margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; } .home-review-doctor{ border-radius: 18px; border: 1px solid rgba(142, 176, 169, 0.22); background: rgba(245, 250, 248, 0.96); box-shadow: 0 12px 28px rgba(33, 65, 72, 0.1); display: grid; gap: 0.8rem; align-content: start; } .home-review-doctor-top h4{ margin: 0.22rem 0 0; color: #214842; font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.3; } .home-review-doctor-specialty{ margin: 0; color: #2e7d6b; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .home-review-doctor-note{ margin: 0; color: #59726e; font-size: 0.92rem; } .about-hero-section{ position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 74vh, 760px); display: flex; align-items: center; padding: clamp(4.2rem, 8vw, 6.2rem) 0; background: #dce8e4; } .about-hero-section::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(36px, 5vw, 62px); background: #dfe9e6; pointer-events: none; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C40 C114%2C96 238%2C100 360%2C62 C488%2C22 612%2C18 740%2C55 C864%2C90 976%2C100 1110%2C68 C1242%2C36 1348%2C30 1440%2C54 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C40 C114%2C96 238%2C100 360%2C62 C488%2C22 612%2C18 740%2C55 C864%2C90 976%2C100 1110%2C68 C1242%2C36 1348%2C30 1440%2C54 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .about-hero-section::before{ content: ''; position: absolute; left: 0; right: 0; bottom: calc(clamp(36px, 5vw, 62px) - 46px); height: clamp(42px, 7vw, 82px); z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(236, 245, 242, 0) 0 18%, rgba(236, 245, 242, 0.18) 18% 36%, rgba(236, 245, 242, 0.3) 36% 54%, rgba(236, 245, 242, 0.42) 54% 72%, rgba(236, 245, 242, 0.58) 72% 100% ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.2) 0 8%, rgba(220, 236, 230, 0.18) 8% 16% ); } .about-hero-media, .about-hero-overlay{ position: absolute; inset: 0; } .about-hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .about-hero-overlay{ z-index: 0; background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 0 2px, rgba(227, 241, 236, 0.15) 2px 7px ), radial-gradient(circle at 12% 16%, rgba(247, 253, 250, 0.26) 0%, rgba(247, 253, 250, 0.05) 52%, transparent 78%), linear-gradient(110deg, rgba(235, 246, 242, 0.12) 0%, rgba(235, 246, 242, 0.06) 45%, rgba(235, 246, 242, 0.1) 100%), linear-gradient(180deg, rgba(245, 252, 250, 0.06) 0%, rgba(245, 252, 250, 0.14) 100%); } .about-hero-content{ position: relative; z-index: 2; max-width: 56rem; margin-left: auto; margin-right: auto; text-align: center; display: grid; justify-items: center; } .about-hero-kicker{ margin: 0; color: #2d7868; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 12px rgba(255, 255, 255, 0.34), 0 0 20px rgba(255, 255, 255, 0.2); } .about-hero-content h1{ margin: 0.52rem 0 0.62rem; color: #1f4f45; font-family:var(--font-sans); font-size: clamp(1.78rem, 3.3vw, 2.95rem); line-height: 1.08; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.42), 0 0 28px rgba(255, 255, 255, 0.25); } .about-hero-lead{ margin: 0; max-width: 62ch; color: #355f57; font-size: clamp(1rem, 1.22vw, 1.16rem); line-height: 1.5; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 13px rgba(255, 255, 255, 0.32), 0 0 22px rgba(255, 255, 255, 0.18); } .about-hero-points{ margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.42rem; justify-items: center; } .about-hero-points li{ color: #355f57; font-size: 0.96rem; display: inline-flex; align-items: center; gap: 0.33rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66), 0 0 11px rgba(255, 255, 255, 0.3), 0 0 18px rgba(255, 255, 255, 0.16); } .about-hero-points .ms-icon{ color: #2e7d6b; } .about-hero-actions{ margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; } .about-story-section{ --section-bg: #dfe9e6; --wave-next-color: #edf3f0; } .about-story-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .about-story-card{ border-radius: 20px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(129, 168, 158, 0.34); box-shadow: 0 12px 30px rgba(33, 65, 72, 0.08); } .about-story-card-main{ grid-column: 1; background: radial-gradient(circle at 88% 12%, rgba(220, 240, 233, 0.5) 0, rgba(220, 240, 233, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 250, 247, 0.9) 100%); } .about-story-card-mission{ grid-column: 2; background: radial-gradient(circle at 14% 14%, rgba(215, 238, 229, 0.56) 0, rgba(215, 238, 229, 0) 56%), linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(242, 249, 246, 0.9) 100%); } .about-card-kicker{ margin: 0; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.2rem; } .about-story-card h2{ margin: 0.38rem 0 0.58rem; color: #244f47; font-family:var(--font-sans); font-size: clamp(1.24rem, 1.86vw, 1.62rem); line-height: 1.15; } .about-story-lead{ font-size: 1rem; color: #365e56; } .about-story-card p{ margin: 0; color: #4b6964; line-height: 1.56; } .about-story-card p + p{ margin-top: 0.58rem; } .about-story-pill-row{ margin-top: 0.72rem; display: flex; flex-wrap: wrap; gap: 0.44rem; } .about-story-pill{ display: inline-flex; align-items: center; gap: 0.26rem; min-height: 30px; padding: 0 0.6rem; border-radius: 999px; border: 1px solid #bad8ce; background: linear-gradient(180deg, #fbfefc 0%, #eef8f4 100%); color: #2d5e54; font-size: 0.8rem; font-weight: 620; } .about-story-pill .ms-icon{ font-size: 1.02em; color: #2f7d6c; } .about-story-checklist{ margin: 0.82rem 0 0.76rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; } .about-story-checklist li{ display: grid; grid-template-columns: auto 1fr; gap: 0.38rem; align-items: start; color: #355d56; line-height: 1.5; } .about-story-checklist li .ms-icon{ color: #2f7d6c; font-size: 1.02rem; margin-top: 0.14rem; } .about-story-note{ margin-top: 0.56rem; padding: 0.7rem 0.78rem; border-radius: 12px; border: 1px solid rgba(148, 190, 177, 0.45); background: rgba(231, 244, 239, 0.76); color: #2d5c53; display: inline-flex; align-items: flex-start; gap: 0.3rem; } .about-story-note .ms-icon{ color: #2e7d6b; margin-top: 0.12rem; } .about-story-mission-grid{ margin-top: 0.8rem; display: grid; gap: 0.58rem; } .about-story-mission-item{ padding: 0.7rem 0.76rem; border: 1px solid rgba(156, 194, 183, 0.45); border-radius: 12px; background: rgba(238, 247, 243, 0.76); display: grid; grid-template-columns: auto 1fr; gap: 0.42rem; align-items: start; } .about-story-mission-item .ms-icon{ font-size: 1.06rem; color: #2f7d6c; margin-top: 0.12rem; } .about-story-mission-item p{ margin: 0; color: #365d56; line-height: 1.45; } .about-story-media{ grid-column: 1 / -1; grid-row: 2; border-radius: 20px; border: 1px solid rgba(129, 168, 158, 0.36); padding: 0; overflow: hidden; background: #d7e4e0; box-shadow: 0 12px 30px rgba(33, 65, 72, 0.08); min-height: clamp(220px, 28vw, 360px); } .about-story-media img{ width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center center; display: block; } .about-why-section{ --section-bg: #edf3f0; --wave-next-color: #dce8e4; } .about-why-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; } .about-why-card{ border-radius: 18px; padding: 1.02rem 1.08rem; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(123, 163, 152, 0.32); box-shadow: 0 10px 26px rgba(33, 65, 72, 0.08); } .about-why-card h3{ margin: 0; color: #295249; font-size: clamp(1.05rem, 1.55vw, 1.26rem); font-family:var(--font-sans); line-height: 1.16; display: inline-flex; align-items: center; gap: 0.34rem; } .about-why-card h3 .ms-icon{ color: #2e7d6b; font-size: 1.1em; } .about-why-card p{ margin: 0.56rem 0 0; color: #4f6965; font-size: 0.95rem; line-height: 1.48; } .about-principles-section{ --section-bg: #dce8e4; --wave-next-color: #2d5f55; } .about-principles-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; } .about-principle-card{ border-radius: 18px; padding: 1.02rem 1.08rem; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(118, 161, 150, 0.32); box-shadow: 0 10px 24px rgba(31, 63, 75, 0.08); } .about-principle-num{ margin: 0 0 0.28rem; color: #2e7d6b; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.06em; } .about-principle-card h3{ margin: 0; color: #2c544f; font-family:var(--font-sans); font-size: clamp(1.14rem, 1.65vw, 1.36rem); } .about-principle-card p{ margin: 0.48rem 0 0; color: #4f6965; font-size: 0.95rem; line-height: 1.48; } .about-slogan-section{ --section-bg: #2d5f55; --wave-next-color: #e7eef0; } .about-slogan-wrap{ max-width: 66rem; margin: 0 auto; text-align: center; } .about-slogan-wrap h2{ margin: 0; color: #f0fbf8; font-family:var(--font-sans); font-size: clamp(1.4rem, 2.4vw, 2.22rem); line-height: 1.2; } .about-team-section{ --section-bg: #e7eef0; --wave-next-color: #13263e; } .about-team-photo{ margin: 0.88rem 0 0; border-radius: 24px; padding: 0; overflow: hidden; border: 1px solid rgba(118, 161, 150, 0.28); box-shadow: 0 14px 34px rgba(33, 65, 72, 0.12); } .about-team-photo img{ width: 100%; height: clamp(260px, 41vw, 540px); object-fit: cover; display: block; } .home-health-check-section{ --section-bg: #0d3f46; --wave-next-color: #dfe9e6; background: var(--section-bg); } .home-health-check-card{ display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; border-radius: 22px; border: 1px solid rgba(111, 154, 144, 0.34); background: linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 247, 244, 0.92) 100%); box-shadow: 0 14px 32px rgba(32, 65, 74, 0.09); } .home-health-check-kicker{ margin: 0; color: #2e7d6b; font-weight: 700; font-size: 0.83rem; letter-spacing: 0.07em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; } .home-health-check-copy h2{ margin: 0.44rem 0 0.48rem; color: #1f4742; font-size: clamp(1.42rem, 2.1vw, 1.95rem); } .home-health-check-copy p{ margin: 0; color: #4f6a66; } .home-health-check-copy ul{ margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.42rem; } .home-health-check-copy li{ display: inline-flex; align-items: center; gap: 0.35rem; color: #2f4f4a; font-size: 0.94rem; } .home-health-check-copy li .ms-icon{ color: #2e7d6b; } .home-health-check-actions{ display: grid; gap: 0.65rem; justify-items: stretch; } .home-health-check-actions .btn{ min-width: 245px; } .health-check-section{ padding-top: 3.3rem; } .health-check-shell{ border-radius: 24px; border: 1px solid #c7d8d2; background: radial-gradient(circle at 92% 4%, rgba(216, 238, 230, 0.75) 0, rgba(216, 238, 230, 0.18) 34%, transparent 70%), linear-gradient(180deg, #f8fcfb 0%, #f0f6f3 100%); } .health-check-hero{ max-width: 55rem; } .health-check-kicker{ margin: 0; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; } .health-check-hero h1{ margin: 0.45rem 0 0.62rem; color: #1f4742; font-size: clamp(1.76rem, 2.8vw, 2.34rem); } .health-check-lead{ margin: 0; color: #4d6765; font-size: clamp(1rem, 1.2vw, 1.14rem); max-width: 62ch; } .health-check-disclaimer{ margin: 0.72rem 0 0; color: #355b54; font-size: 0.91rem; display: inline-flex; align-items: flex-start; gap: 0.3rem; } .health-check-disclaimer .ms-icon{ margin-top: 0.1rem; } .hc-progress-wrap{ margin-top: 1rem; } .hc-progress-track{ width: 100%; height: 0.54rem; border-radius: 999px; background: #dce8e4; overflow: hidden; } .hc-progress-bar{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, #37a588 0%, #2e7d6b 100%); transition: width 0.28s ease; } .hc-progress-text{ margin: 0.48rem 0 0; color: #416862; font-size: 0.9rem; font-weight: 600; } .health-check-form{ margin-top: 0.82rem; } .hc-screen{ margin-top: 0.8rem; } .hc-js .hc-screen{ display: none; } .hc-js .hc-screen.is-active{ display: block; animation: hcStepIn 0.28s ease; } @keyframes hcStepIn{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hc-start-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .hc-start-card{ border: 1px solid #c8dad4; border-radius: 16px; background: rgba(255, 255, 255, 0.86); padding: 0.94rem 1rem; } .hc-start-card h2{ margin: 0; color: #264844; font-size: clamp(1.18rem, 1.45vw, 1.34rem); } .hc-start-card p, .hc-start-card li{ color: #496463; } .hc-start-card ol{ margin-top: 0.58rem; margin-bottom: 0; display: grid; gap: 0.38rem; } .hc-start-time{ margin-top: 0.52rem; margin-bottom: 0.36rem; color: #25564b !important; font-weight: 650; display: inline-flex; align-items: center; gap: 0.3rem; } .hc-step-head{ margin-bottom: 0.9rem; } .hc-step-kicker{ margin: 0; color: #468275; font-size: 0.81rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .hc-step-head h2{ margin: 0.34rem 0 0.3rem; color: #204741; font-size: clamp(1.34rem, 2vw, 1.72rem); } .hc-step-head p{ margin: 0; color: #57716d; } .hc-question-stack{ display: grid; gap: 0.9rem; } .hc-question{ margin: 0; border: 1px solid #c9d9d4; border-radius: 16px; padding: 0.84rem 0.9rem 0.9rem; background: rgba(255, 255, 255, 0.88); min-width: 0; } .hc-question-title{ padding: 0; margin: 0 0 0.72rem; color: #2f5851; font-family:var(--font-sans); font-size: clamp(1.08rem, 1.4vw, 1.24rem); line-height: 1.2; width: 100%; max-width: 100%; display: block; overflow-wrap: anywhere; } .hc-question-title span{ display: block; } .hc-question-title small{ display: block; margin-top: 0.26rem; color: #607b77; font-family:var(--font-sans); font-size: 0.86rem; line-height: 1.3; } .hc-options{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.56rem; } .hc-option{ min-width: 0; position: relative; } .hc-option-main{ min-height: 44px; border: 1px solid #c5d8d1; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%); color: #345652; font-size: 0.92rem; line-height: 1.25; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.52rem 2.35rem 0.52rem 0.64rem; width: 100%; cursor: pointer; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .hc-option-main input{ width: 1rem; height: 1rem; margin: 0; accent-color: #2e7d6b; flex-shrink: 0; } .hc-option-label{ min-width: 0; overflow-wrap: anywhere; } .hc-option-main:hover{ border-color: #9fc5b8; background: linear-gradient(180deg, #ffffff 0%, #ebf5f0 100%); } .hc-option-main:has(input:checked){ border-color: #4da08c; background: linear-gradient(180deg, #f3fcf9 0%, #e4f3ed 100%); box-shadow: 0 8px 16px rgba(43, 112, 94, 0.1); } .hc-option.is-exclusive .hc-option-main{ border-style: dashed; } .hc-option-tip{ display: inline-grid; align-items: center; justify-content: center; position: absolute; top: 50%; right: 0.64rem; transform: translateY(-50%); z-index: 3; } .hc-option-help{ width: 1.24rem; height: 1.24rem; border-radius: 999px; border: 1px solid #87bbae; background: #ffffff; color: #77ab9d; display: inline-flex; align-items: center; justify-content: center; cursor: help; padding: 0; box-shadow: 0 4px 10px rgba(27, 63, 54, 0.08); font-family:var(--font-sans); font-size: 0.76rem; font-weight: 700; line-height: 1; } .hc-option-help:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } .hc-option-help:focus:not(:focus-visible){ outline: none; } .hc-option-tooltip{ position: absolute; right: -0.2rem; bottom: calc(100% + 0.45rem); width: min(22rem, 76vw); padding: 0.7rem 0.78rem; border-radius: 12px; border: 1px solid #adcfc5; background: rgba(240, 250, 246, 0.985); color: #294853; font-size: 0.84rem; line-height: 1.4; box-shadow: 0 12px 24px rgba(17, 42, 59, 0.16); z-index: 28; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; } .hc-option-tooltip::after{ content: ''; position: absolute; right: 0.34rem; top: 100%; width: 0.62rem; height: 0.62rem; transform: rotate(45deg); background: rgba(240, 250, 246, 0.985); border-right: 1px solid #adcfc5; border-bottom: 1px solid #adcfc5; } .hc-option-tip:hover .hc-option-tooltip, .hc-option-tip:focus-within .hc-option-tooltip{ opacity: 1; visibility: visible; transform: translateY(0); } .hc-question-error{ margin: 0.54rem 0 0; color: #9b2c1c; font-size: 0.82rem; } .hc-actions{ margin-top: 0.95rem; display: flex; justify-content: space-between; gap: 0.64rem; flex-wrap: wrap; } .hc-toast{ position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 120; max-width: min(92vw, 34rem); min-height: 44px; padding: 0.58rem 0.9rem; border-radius: 12px; border: 1px solid #e2ae9f; background: linear-gradient(180deg, #fffaf8 0%, #ffede7 100%); color: #8d2e1c; font-size: 0.92rem; font-weight: 600; box-shadow: 0 14px 30px rgba(66, 25, 17, 0.22); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } .hc-toast.is-visible{ opacity: 1; } .health-check-faq-section{ --section-bg: #eef4f1; --wave-next-color: #13263e; } .health-check-result-section{ padding-top: 3.1rem; } .questionnaire-section{ padding-top: 3.3rem; } .questionnaire-shell{ border-radius: 24px; border: 1px solid #c7d8d2; background: radial-gradient(circle at 92% 4%, rgba(216, 238, 230, 0.75) 0, rgba(216, 238, 230, 0.18) 34%, transparent 70%), linear-gradient(180deg, #f8fcfb 0%, #f0f6f3 100%); } .questionnaire-hero{ max-width: 58rem; } .questionnaire-kicker{ margin: 0; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; } .questionnaire-hero h1{ margin: 0.45rem 0 0.62rem; color: #1f4742; font-size: clamp(1.72rem, 2.7vw, 2.3rem); } .questionnaire-lead{ margin: 0; color: #4d6765; font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 64ch; } .questionnaire-disclaimer{ margin: 0.72rem 0 0; color: #355b54; font-size: 0.91rem; display: inline-flex; align-items: flex-start; gap: 0.3rem; } .questionnaire-progress{ margin-top: 1rem; } .questionnaire-progress-track{ width: 100%; height: 0.54rem; border-radius: 999px; background: #dce8e4; overflow: hidden; } .questionnaire-progress-bar{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, #37a588 0%, #2e7d6b 100%); transition: width 0.28s ease; } .questionnaire-progress-text{ margin: 0.48rem 0 0; color: #416862; font-size: 0.9rem; font-weight: 600; } .questionnaire-screen{ display: none; margin-top: 0.95rem; } .questionnaire-screen.is-active{ display: block; animation: hcStepIn 0.28s ease; } .questionnaire-intro-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .questionnaire-intro-card, .questionnaire-result-card{ border: 1px solid #c8dad4; border-radius: 18px; background: rgba(255, 255, 255, 0.88); padding: 1rem 1.05rem; } .questionnaire-intro-card h2, .questionnaire-step-head h2, .questionnaire-result-card h2{ margin: 0; color: #264844; font-size: clamp(1.18rem, 1.7vw, 1.48rem); } .questionnaire-intro-card ol{ margin: 0.7rem 0 0; display: grid; gap: 0.44rem; color: #496463; } .questionnaire-intro-points{ display: grid; gap: 0.56rem; margin-top: 0.9rem; } .questionnaire-intro-point{ display: flex; align-items: flex-start; gap: 0.4rem; color: #496463; } .questionnaire-intro-point .ms-icon{ color: #2e7d6b; } .questionnaire-band-list{ display: grid; gap: 0.66rem; margin-top: 0.7rem; } .questionnaire-band-list-compact{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .questionnaire-band-card{ border: 1px solid #c5d8d1; border-radius: 14px; padding: 0.76rem 0.82rem; background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%); color: #496463; opacity: 0.6; filter: saturate(0.8); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease; } .questionnaire-band-card p, .questionnaire-band-card h3, .questionnaire-step-head p, .questionnaire-result-summary, .questionnaire-result-note{ margin: 0; } .questionnaire-band-card h3{ margin-top: 0.22rem; color: #264844; font-size: 1rem; } .questionnaire-band-card.is-active{ border-color: #1f5e50; background: linear-gradient(180deg, #255f52 0%, #18463c 100%); box-shadow: 0 14px 28px rgba(24, 70, 60, 0.24); color: #ddf1eb; transform: translateY(-2px); opacity: 1; filter: none; } .questionnaire-band-card.is-active h3, .questionnaire-band-card.is-active p{ color: inherit; } .questionnaire-result-band-list:has(.questionnaire-band-card.is-active) .questionnaire-band-card:not(.is-active){ opacity: 0.38; filter: saturate(0.55); } .questionnaire-step-head{ margin-bottom: 0.9rem; } .questionnaire-step-kicker, .questionnaire-result-kicker{ margin: 0 0 0.34rem; color: #468275; font-size: 0.81rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .questionnaire-step-head p{ margin-top: 0.3rem; color: #57716d; } .questionnaire-step-help{ margin-top: 0.62rem; padding: 0.72rem 0.78rem; border-radius: 14px; border: 1px solid #d5e4df; background: rgba(248, 252, 250, 0.92); color: #3f5f59; font-size: 0.92rem; line-height: 1.5; display: flex; align-items: flex-start; gap: 0.44rem; } .questionnaire-step-help .ms-icon{ color: #2e7d6b; font-size: 1rem; flex: 0 0 auto; margin-top: 0.06rem; } .questionnaire-fieldset{ margin: 0; border: 1px solid #c9d9d4; border-radius: 18px; padding: 0.95rem; background: rgba(255, 255, 255, 0.86); } .questionnaire-scale-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; } .questionnaire-scale-option{ min-height: 88px; border: 1px solid #c5d8d1; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%); padding: 0.78rem 0.84rem; display: grid; align-content: start; gap: 0.3rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .questionnaire-scale-option:hover{ border-color: #9fc5b8; transform: translateY(-1px); } .questionnaire-scale-option:has(input:checked){ border-color: #4da08c; box-shadow: 0 12px 24px rgba(43, 112, 94, 0.12); background: linear-gradient(180deg, #f3fcf9 0%, #e4f3ed 100%); } .questionnaire-scale-option input{ position: absolute; opacity: 0; pointer-events: none; } .questionnaire-scale-value{ color: #2e7d6b; font-size: 1.3rem; font-weight: 700; line-height: 1; } .questionnaire-scale-label{ color: #496463; font-size: 0.92rem; line-height: 1.3; } .questionnaire-field-error{ margin: 0.62rem 0 0; color: #9b2c1c; font-size: 0.84rem; } .questionnaire-actions{ margin-top: 0.95rem; display: flex; justify-content: space-between; gap: 0.64rem; flex-wrap: wrap; } .questionnaire-result-label{ margin: 0; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; } .questionnaire-result-summary{ margin-top: 0.22rem; color: #345652; font-size: clamp(1.28rem, 1.7vw, 1.64rem); line-height: 1.16; } .questionnaire-result-note{ margin-top: 0.38rem; color: #57716d; } .questionnaire-result-alert{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.88rem; align-items: start; padding: 1rem; border-radius: 18px; border: 1px solid #c9d9d4; background: linear-gradient(180deg, #f8fcfb 0%, #eef6f3 100%); } .questionnaire-result-alert-icon{ width: 3rem; height: 3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 18px rgba(17, 42, 59, 0.08); } .questionnaire-result-alert-icon .ms-icon{ font-size: 1.5rem; } .questionnaire-result-alert-body{ min-width: 0; } .questionnaire-result-alert.is-good{ border-color: #7cc6af; background: linear-gradient(180deg, #ebfaf4 0%, #dcf2e8 100%); } .questionnaire-result-alert.is-good .questionnaire-result-label, .questionnaire-result-alert.is-good .questionnaire-result-alert-icon .ms-icon{ color: #1f7a61; } .questionnaire-result-alert.is-warning{ border-color: #e5c36b; background: linear-gradient(180deg, #fff8e6 0%, #f8efcf 100%); } .questionnaire-result-alert.is-warning .questionnaire-result-label, .questionnaire-result-alert.is-warning .questionnaire-result-alert-icon .ms-icon{ color: #a87400; } .questionnaire-result-alert.is-danger{ border-color: #e1a095; background: linear-gradient(180deg, #fff2ef 0%, #f9e0da 100%); } .questionnaire-result-alert.is-danger .questionnaire-result-label, .questionnaire-result-alert.is-danger .questionnaire-result-alert-icon .ms-icon{ color: #b54634; } .questionnaire-result-meta-note{ margin-top: 0.72rem; color: #57716d; } .questionnaire-result-score, .questionnaire-result-range-note, .questionnaire-result-reference-title{ margin: 0; } .questionnaire-result-score{ color: #355b54; font-weight: 700; } .questionnaire-result-range-note{ margin-top: 0.18rem; font-size: 0.9rem; } .questionnaire-result-reference-title{ color: #57716d; font-size: 0.9rem; } .questionnaire-result-band-list{ display: grid; gap: 0.7rem; margin-top: 1rem; } .questionnaire-result-band-list-reference{ gap: 0.56rem; } .questionnaire-result-band-list-reference .questionnaire-band-card{ padding: 0.68rem 0.76rem; opacity: 0.72; } .questionnaire-result-reference{ margin-top: 1rem; } .questionnaire-result-reference-title, .questionnaire-result-reference-line{ margin: 0; } .questionnaire-result-reference-title{ color: #355b54; font-weight: 700; } .questionnaire-result-reference-line{ margin-top: 0.24rem; color: #1f1f1f; font-size: 0.95rem; line-height: 1.45; } .questionnaire-result-reference-line strong{ color: #1f1f1f; } .questionnaire-print-modal-dialog{ align-items: stretch; justify-content: stretch; } .questionnaire-print-modal-body{ width: min(1120px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0.9rem; overflow: auto; display: grid; gap: 0.8rem; background: radial-gradient(circle at top right, rgba(194, 229, 216, 0.28), transparent 34%), linear-gradient(180deg, #f6fbf9 0%, #edf5f2 100%); } .questionnaire-print-modal-head h2, .questionnaire-print-preview-sheet h3, .questionnaire-print-preview-section h4, .questionnaire-print-preview-card h4{ margin: 0; } .questionnaire-print-modal-kicker{ margin: 0 0 0.4rem; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; } .questionnaire-print-modal-head p{ margin: 0.42rem 0 0; color: #56706a; } .questionnaire-print-preview{ min-height: 0; } .questionnaire-print-preview-sheet{ border: 1px solid #d4e1dc; border-radius: 18px; background: #fff; box-shadow: 0 18px 42px rgba(22, 54, 48, 0.12); padding: 0.8rem 0.85rem; } .questionnaire-print-preview-head{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr); gap: 0.8rem; align-items: start; padding-bottom: 0.65rem; margin-bottom: 0.65rem; border-bottom: 1px solid #e3ece8; } .questionnaire-print-preview-clinic{ margin: 0 0 0.3rem; color: #2f7f6d; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; } .questionnaire-print-preview-sheet h3{ color: #1f4742; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.1; } .questionnaire-print-preview-disclaimer{ margin: 0; color: #617771; font-size: 0.74rem; line-height: 1.32; } .questionnaire-print-preview-summary{ display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.72fr); gap: 0.55rem; margin-bottom: 0.65rem; } .questionnaire-print-preview-card{ border: 1px solid #d8e4df; border-radius: 12px; padding: 0.6rem 0.7rem; background: #fbfdfc; } .questionnaire-print-preview-card p{ margin: 0.18rem 0 0; color: #546b66; line-height: 1.3; font-size: 0.76rem; } .questionnaire-print-preview-label{ margin: 0 0 0.35rem !important; color: #2f7f6d !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; font-weight: 700; } .questionnaire-print-preview-card h4{ font-size: 0.95rem; line-height: 1.22; } .questionnaire-print-preview-score{ align-content: start; } .questionnaire-print-preview-score strong{ color: #315650; font-size: 0.76rem; } .questionnaire-print-preview-score-value{ margin-top: 0.22rem; color: #1f4742; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1; font-weight: 800; } .questionnaire-print-preview-score span{ display: block; margin-top: 0.2rem; color: #607670; font-size: 0.72rem; } .questionnaire-print-preview-section{ margin-top: 0.65rem; } .questionnaire-print-preview-section-head{ display: flex; justify-content: space-between; gap: 0.65rem; align-items: end; margin-bottom: 0.45rem; } .questionnaire-print-preview-section-head span{ color: #607670; font-size: 0.72rem; } .questionnaire-print-preview-columns{ display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px; gap: 0.45rem; padding: 0 0 0.3rem; border-bottom: 1px solid #d8e4df; color: #607670; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .questionnaire-print-preview-columns span:last-child{ text-align: right; } .questionnaire-print-preview-answer-list{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.08rem; margin-top: 0.2rem; } .questionnaire-print-preview-answer{ display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px; gap: 0.45rem; align-items: start; border-bottom: 1px solid #e1ebe7; border-radius: 0; padding: 0.26rem 0; background: #fff; } .questionnaire-print-preview-answer-index{ width: 22px; height: auto; border-radius: 0; background: transparent; color: #2f7f6d; display: block; font-weight: 700; font-size: 0.66rem; line-height: 1.25; padding-top: 0.06rem; } .questionnaire-print-preview-answer-body h4{ color: #223c38; font-size: 0.74rem; line-height: 1.22; } .questionnaire-print-preview-answer-body p, .questionnaire-print-preview-answer-meta{ margin: 0.04rem 0 0; } .questionnaire-print-preview-answer-body p{ color: #223c38; font-size: 0.74rem; font-weight: 600; line-height: 1.2; } .questionnaire-print-preview-answer-meta{ color: #6b817b; font-size: 0.64rem; line-height: 1.14; } .questionnaire-print-preview-answer-score{ padding-top: 0.04rem; color: #2f7f6d; font-size: 0.74rem; font-weight: 800; text-align: right; white-space: nowrap; } .questionnaire-print-preview-reference{ padding-top: 0.65rem; border-top: 1px solid #e3ece8; } .questionnaire-print-preview-reference ul{ margin: 0.35rem 0 0; padding-left: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.16rem 0.75rem; color: #2b3e3a; font-size: 0.68rem; line-height: 1.18; } .questionnaire-print-modal-actions{ display: flex; justify-content: flex-end; gap: 0.7rem; flex-wrap: wrap; } @media (max-width: 900px){.questionnaire-print-preview-head, .questionnaire-print-preview-summary{ grid-template-columns: 1fr; } .questionnaire-print-preview-answer-score{ text-align: left; padding-top: 0; } .questionnaire-print-preview-sheet{ padding: 0.85rem; }} @media (max-width: 640px){.questionnaire-print-modal-body{ width: min(100vw, calc(100vw - 1rem)); padding: 0.75rem; } .questionnaire-print-modal-actions .btn{ width: 100%; } .questionnaire-print-preview-section-head{ display: grid; gap: 0.32rem; } .questionnaire-print-preview-columns, .questionnaire-print-preview-answer{ grid-template-columns: 22px minmax(0, 1fr); } .questionnaire-print-preview-columns span:last-child, .questionnaire-print-preview-answer-score{ text-align: left; } .questionnaire-print-preview-answer-score{ grid-column: 2; }} .questionnaires-catalog-section{ padding-top: 3.3rem; } .questionnaires-catalog-kicker{ margin: 0; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; } .questionnaires-catalog-head h1{ margin: 0.45rem 0 0.62rem; color: #1f4742; font-size: clamp(1.8rem, 2.8vw, 2.34rem); } .questionnaires-catalog-lead{ margin: 0; max-width: 64ch; color: #4d6765; font-size: clamp(1rem, 1.2vw, 1.12rem); } .questionnaires-featured-card{ margin-top: 1rem; } .questionnaires-catalog-list-head{ margin-top: 1.1rem; } .questionnaires-catalog-list-head h2{ margin: 0; color: #1f4742; font-size: clamp(1.28rem, 1.7vw, 1.56rem); } .questionnaires-catalog-list-head p{ margin: 0.36rem 0 0; color: #57716d; } .articles-grid.questionnaires-catalog-grid{ margin-top: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } .questionnaires-catalog-card{ min-height: 100%; width: 100%; max-width: 280px; justify-self: start; display: grid; grid-template-rows: auto 1fr; } .questionnaires-catalog-card .article-card-media{ aspect-ratio: 16 / 8.2; } .questionnaires-catalog-card .article-card-body{ height: 100%; gap: 0.36rem; padding: 0.72rem; grid-template-rows: auto auto auto minmax(6em, 1fr) auto auto; } .questionnaires-catalog-title{ margin: 0; color: #204741; font-size: clamp(1rem, 1.1vw, 1.14rem); line-height: 1.2; } .questionnaires-catalog-badge{ margin: 0; display: inline-flex; align-items: center; padding: 0.28rem 0.62rem; border-radius: 999px; background: #e7f3ee; color: #2e7d6b; font-size: 0.8rem; font-weight: 700; } .questionnaires-catalog-subtitle{ margin: 0.08rem 0 0; color: #57716d; font-size: 0.82rem; line-height: 1.3; min-height: 0; } .questionnaires-catalog-subtitle.is-empty{ visibility: hidden; } .questionnaires-catalog-description{ margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 6em; line-height: 1.5; } .questionnaires-catalog-meta{ display: flex; flex-wrap: nowrap; gap: 0.42rem; margin-top: 0.2rem; color: #416862; font-size: 0.74rem; font-weight: 600; } .questionnaires-catalog-meta span{ display: inline-flex; align-items: center; gap: 0.18rem; white-space: nowrap; min-width: 0; } .questionnaires-catalog-meta .ms-icon{ font-size: 1rem; } .questionnaires-catalog-actions{ margin-top: auto; align-self: end; } .questionnaires-catalog-actions .btn{ min-height: 40px; padding: 0.62rem 0.9rem; font-size: 0.92rem; } @media (max-width: 1100px){.articles-grid.questionnaires-catalog-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }} @media (max-width: 900px){.questionnaire-intro-grid, .questionnaire-band-list-compact, .questionnaire-scale-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .articles-grid.questionnaires-catalog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} @media (max-width: 640px){.questionnaire-intro-grid, .questionnaire-band-list-compact, .questionnaire-scale-grid{ grid-template-columns: minmax(0, 1fr); } .articles-grid.questionnaires-catalog-grid{ grid-template-columns: minmax(0, 1fr); } .questionnaires-catalog-card{ max-width: none; justify-self: stretch; } .questionnaire-actions .btn{ width: 100%; justify-content: center; } .questionnaires-catalog-actions .btn{ width: 100%; justify-content: center; }} .health-check-result-card{ border-radius: 24px; border: 1px solid #c5d7d1; background: radial-gradient(circle at 95% 8%, rgba(213, 236, 228, 0.72) 0, rgba(213, 236, 228, 0.2) 34%, transparent 70%), linear-gradient(180deg, #f8fcfb 0%, #eff7f4 100%); } .health-result-badge{ margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 34px; border-radius: 999px; padding: 0.2rem 0.72rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #95c6ba; background: #ebf7f3; color: #1d6150; } .health-result-badge.is-high{ border-color: #e2ae9f; background: #fff1ed; color: #8e3220; } .health-check-result-card h1{ margin: 0.68rem 0 0.52rem; color: #1e4640; font-size: clamp(1.56rem, 2.45vw, 2.2rem); } .health-result-disclaimer{ margin: 0; color: #4f6c68; } .health-result-emergency{ margin-top: 1rem; border: 1px solid #efc1b6; border-radius: 16px; background: linear-gradient(180deg, #fffaf8 0%, #ffefea 100%); padding: 0.85rem 0.92rem; } .health-result-emergency h2{ margin: 0; color: #8f3120; font-size: clamp(1.16rem, 1.5vw, 1.3rem); } .health-result-emergency ul{ margin: 0.64rem 0 0; padding-left: 1rem; color: #8f3120; display: grid; gap: 0.42rem; } .health-result-emergency-actions{ margin-top: 0.74rem; display: flex; gap: 0.55rem; flex-wrap: wrap; } .health-result-emergency-note{ margin: 0.62rem 0 0; color: #7f463a; font-size: 0.9rem; line-height: 1.4; } .health-result-emergency-note strong{ color: #8f3120; } .health-result-grid{ margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .health-result-block{ border: 1px solid #c7d8d2; border-radius: 16px; background: rgba(255, 255, 255, 0.86); padding: 0.88rem 0.92rem; } .health-result-block h2{ margin: 0; color: #244943; font-size: clamp(1.15rem, 1.5vw, 1.3rem); } .health-route-stack{ margin-top: 0.7rem; display: grid; gap: 0.54rem; } .health-route-item{ display: grid; gap: 0.1rem; border: 1px solid #c4d7d0; border-radius: 12px; padding: 0.58rem 0.66rem; background: linear-gradient(180deg, #ffffff 0%, #f4faf8 100%); text-decoration: none; } .health-route-item.is-secondary{ border-style: dashed; } .health-route-label{ color: #5a7d77; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; } .health-route-title{ color: #274a44; font-family:var(--font-sans); font-size: 1.1rem; } .health-recommended-doctor{ margin-top: 0.72rem; } .health-recommended-doctor a{ color: #1d5f51; font-weight: 700; text-decoration: none; } .health-recommended-doctor p{ margin: 0.22rem 0 0; color: #4f6b68; } .health-reason-list{ margin: 0.74rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; } .health-reason-list li{ display: inline-flex; align-items: flex-start; gap: 0.3rem; color: #355955; } .health-reason-list .ms-icon{ color: #2f8a76; margin-top: 0.14rem; } .health-symptom-tags{ margin-top: 0.78rem; display: flex; flex-wrap: wrap; gap: 0.44rem; } .health-tag{ min-height: 32px; padding: 0.28rem 0.6rem; border: 1px solid #d9b765; border-radius: 999px; background: linear-gradient(180deg, #e3bf6e 0%, #d3a44a 100%); color: #fff; font-size: 0.84rem; display: inline-flex; align-items: center; } .health-result-actions{ margin-top: 0.95rem; display: flex; gap: 0.62rem; flex-wrap: wrap; } .health-result-extra{ margin-top: 0.82rem; border-radius: 18px; } .health-result-extra h2{ margin: 0; color: #244943; font-size: clamp(1.2rem, 1.55vw, 1.36rem); } .health-articles-grid{ margin-top: 0.72rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; } .health-article-item{ border: 1px solid #c8dad4; border-radius: 14px; background: rgba(255, 255, 255, 0.86); padding: 0.72rem 0.74rem; } .health-article-item h3{ margin: 0; color: #254843; font-size: 1.06rem; } .health-article-item p{ margin: 0.45rem 0 0; color: #587371; font-size: 0.89rem; } .health-article-item a{ margin-top: 0.5rem; display: inline-flex; align-items: center; font-weight: 650; } .health-tip-list{ margin: 0.72rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.42rem; } .health-tip-list li{ display: inline-flex; align-items: flex-start; gap: 0.3rem; color: #355a56; } .health-tip-list .ms-icon{ margin-top: 0.1rem; color: #2e7d6b; } .services-grid, .doctors-grid{ display: grid; gap: 1rem; } .services-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .doctor-services-grid{ grid-template-columns: repeat(auto-fit, minmax(230px, 290px)); justify-content: center; gap: 0.8rem; } .doctors-grid{ grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .doctors-grid-compact{ grid-template-columns: repeat(auto-fit, minmax(270px, 320px)); justify-content: center; } .service-doctors-grid{ grid-template-columns: minmax(0, 980px); justify-content: center; } .service-card, .doctor-card{ transition: transform 0.2s ease, box-shadow 0.2s ease; } .service-card:hover, .doctor-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 38px rgba(20, 42, 73, 0.13); } .service-thumb{ aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden; background: #eaf1f8; margin-bottom: 0.75rem; } .service-thumb img{ width: 100%; height: 100%; object-fit: cover; } .service-card-compact{ padding: 0.72rem; border-radius: 16px; } .service-card-compact .service-thumb{ aspect-ratio: 16 / 7; margin-bottom: 0.52rem; border-radius: 12px; } .service-card-compact h3{ margin-bottom: 0.32rem; font-size: clamp(1.02rem, 1.28vw, 1.2rem); line-height: 1.2; } .service-card-compact .link-arrow{ margin-top: 0.34rem; } .service-card h3, .doctor-card h3{ margin: 0 0 0.45rem; } .service-card p, .doctor-card p{ color: var(--muted); } .link-arrow{ display: inline-flex; align-items: center; gap: 0.26rem; margin-top: 0.5rem; font-weight: 700; } .link-arrow::after{ display: none; } .link-arrow .ms-icon{ font-size: 1.08em; } .doctor-photo-wrap{ display: block; aspect-ratio: 5 / 6; border-radius: 14px; overflow: hidden; background: #edf3f9; margin-bottom: 0.9rem; border: 1px solid #cfddda; } .doctor-photo-wrap img{ width: 100%; height: 100%; object-fit: cover; object-position: center top; } .doctor-card-modern{ display: grid; grid-template-rows: auto 1fr auto; gap: 0; padding: 1rem; background: linear-gradient(180deg, #ffffff 0%, #f5faf8 100%); height: 100%; } .doctor-card-horizontal{ grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); grid-template-areas: "photo body" "photo footer"; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.68rem; align-items: stretch; } .doctor-card-horizontal .doctor-photo-wrap{ grid-area: photo; margin-bottom: 0; min-height: 100%; aspect-ratio: auto; } .doctor-card-horizontal .doctor-card-body{ grid-area: body; } .doctor-card-horizontal .doctor-card-footer{ grid-area: footer; margin-top: 0; align-items: center; } .doctor-card-horizontal .doctor-card-role, .doctor-card-horizontal h3, .doctor-card-horizontal .doctor-card-degree, .doctor-card-horizontal .doctor-card-bio, .doctor-card-horizontal .doctor-card-tags{ min-height: 0; } .doctor-card-horizontal .doctor-card-bio{ -webkit-line-clamp: 5; } .doctor-card-horizontal .doctor-card-link{ width: auto; min-width: 172px; } .doctor-card-body{ display: grid; gap: 0.46rem; } .doctor-card-role{ margin: 0; color: #2f6f5e; font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.28; min-height: calc(1.28em * 2); } .doctor-card h3 a{ color: #1f4038; text-decoration: none; } .doctor-card h3{ min-height: calc(1.16em * 2); } .doctor-card-degree{ margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.3rem; color: #3c5f57; font-size: 0.92rem; line-height: 1.35; min-height: calc(1.35em * 2); } .doctor-card-degree .ms-icon{ color: #d4a84d; margin-top: 0.08rem; } .doctor-card-bio{ margin: 0; color: #536f6b; line-height: 1.4; min-height: calc(1.4em * 4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .doctor-card-tags{ margin: 0.14rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.36rem; align-content: start; min-height: 62px; } .doctor-card-tags li{ padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid #bfd4cd; background: #f2f8f5; color: #2f6253; font-size: 0.8rem; line-height: 1.35; } .doctor-card-footer{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.6rem; margin-top: 0.82rem; } .doctor-card-exp{ margin: 0; color: #365754; font-size: 0.9rem; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.26rem; line-height: 1.3; } .doctor-card-exp .ms-icon{ color: #2e7d6b; margin-top: 0.08rem; } .doctor-card-link{ min-height: 42px; padding: 0 0.8rem; border-radius: 11px; gap: 0.2rem; width: 164px; justify-content: center; align-items: center; } .doctor-card-link span:last-child{ white-space: nowrap; } .doctor-profile-main{ display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 1.5rem; padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); } .doctor-profile-main img{ width: 100%; border-radius: 16px; object-fit: cover; object-position: center top; border: 1px solid var(--border); } .doctor-profile-main h1{ margin-top: 0; margin-bottom: 0.5rem; } .doctor-profile-summary{ display: grid; align-content: start; } .doctor-profile-specialty{ margin: 0; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: #2e6f5f; font-weight: 700; } .doctor-profile-degree{ margin: 0 0 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem; color: #335852; font-size: 0.94rem; font-weight: 600; } .doctor-profile-degree .ms-icon{ color: #d4a84d; } .doctor-profile-text{ margin: 0.52rem 0 0; color: #3f5d59; } .doctor-profile-actions{ margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.52rem; } .doctor-profile-actions .btn{ min-height: 42px; } .doctor-details{ margin-top: 1.15rem; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1rem 1.15rem; } .doctor-details-modern{ display: grid; gap: 0.95rem; } .doctor-details-group{ background: linear-gradient(180deg, #ffffff 0%, #f5faf8 100%); border: 1px solid #cfddd9; border-radius: 16px; padding: 0.9rem 1rem; } .doctor-details-group h2{ margin: 0 0 0.58rem; display: inline-flex; align-items: center; gap: 0.34rem; font-size: clamp(1.2rem, 1.7vw, 1.46rem); } .doctor-details-group h2 .ms-icon{ color: #2d7b68; } .doctor-feature-list, .doctor-education-list{ margin: 0; display: grid; gap: 0.54rem; } .doctor-feature-list{ padding: 0.12rem 0 0 1.28rem; } .doctor-feature-list li{ padding-left: 0.06rem; } .doctor-feature-list li::marker{ color: #2f7d6a; } .doctor-education-list{ padding: 0; } .doctor-feature-list li, .doctor-education-list li{ color: #3b5856; line-height: 1.52; } .doctor-education-list, .doctor-achievements-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.58rem; } .doctor-timeline-item{ display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 0.46rem; padding: 0.62rem 0.72rem; border-radius: 12px; border: 1px solid #d3e1dc; background: rgba(247, 251, 249, 0.9); } .doctor-timeline-item.no-period{ grid-template-columns: 1fr; } .doctor-timeline-year{ display: inline-flex; align-self: start; justify-self: start; padding: 0.2rem 0.5rem; border-radius: 999px; background: #e4f1ec; border: 1px solid #c4ddd3; color: #1f6658; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.18; white-space: normal; } .doctor-timeline-text{ color: #345a54; line-height: 1.5; } .doctor-achievements-list{ gap: 0.62rem; } .doctor-achievement-item{ grid-template-columns: auto minmax(0, 1fr); column-gap: 0.58rem; } .doctor-achievement-item.no-period{ grid-template-columns: auto minmax(0, 1fr); } .doctor-achievement-icon{ color: #2e7d6b; font-size: 1.12rem; margin-top: 0.1rem; } .doctor-achievement-content{ display: grid; gap: 0.3rem; } .doctor-grid-meta{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.8rem; } .meta-pill{ border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 0.65rem; font-size: 0.9rem; } .meta-pill .label{ display: block; color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; } .price-layout{ display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 1rem; align-items: start; } .price-sticky{ position: sticky; top: 96px; } .price-tags{ display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; } .price-tag{ min-height: 34px; border: 1px solid #bfd3c9; background: linear-gradient(180deg, #f8fcfb 0%, #eef5f2 100%); color: #2d5447; border-radius: 10px; padding: 0 0.66rem; font-size: 0.84rem; font-weight: 600; display: inline-flex; align-items: center; } .price-table-wrap{ overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); } .price-table{ width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; } .price-table th, .price-table td{ padding: 0.78rem 0.72rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .price-table thead th{ background: #edf4ff; font-size: 0.83rem; text-transform: uppercase; color: #385a84; letter-spacing: 0.05em; } .price-page-section{ --section-bg: #dfe9e6; --wave-next-color: #e8efed; background: var(--section-bg); } .price-page-shell{ width: min(1360px, calc(100% - 2rem)); } .price-page-head{ max-width: 60rem; margin: 0 auto; text-align: center; } .price-page-head h1{ margin: 0; color: #204741; font-family:var(--font-sans); font-size: clamp(1.84rem, 2.8vw, 2.54rem); } .price-page-head p{ margin: 0.8rem auto 0; color: #55706c; font-size: clamp(0.98rem, 1.2vw, 1.15rem); max-width: 48rem; } .price-filter-row{ margin-top: 1.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.56rem; } .price-download-row{ margin-top: 0.9rem; display: flex; justify-content: center; } .price-download-btn{ min-height: 42px; } .price-filter-btn{ min-height: 42px; padding: 0 1.04rem; border-radius: 12px; border: 1px solid #c4d7d1; background: linear-gradient(180deg, #ffffff 0%, #f2f7f5 100%); color: #335651; font-size: 0.94rem; font-weight: 620; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .price-filter-btn:hover{ border-color: #a8c9bf; background: linear-gradient(180deg, #ffffff 0%, #eaf4f0 100%); color: #234c43; } .price-filter-btn.is-active{ border-color: #2f8a75; background: linear-gradient(155deg, #2f8a74 0%, #2e7d6b 55%, #276a5b 100%); color: #f4fffb; box-shadow: 0 10px 22px rgba(26, 102, 85, 0.24); } .price-table-area{ margin-top: 30px; } .price-table-modern{ border: 1px solid #c5d8d2; border-radius: 20px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 26px rgba(31, 63, 75, 0.08); } .price-table-modern .price-table{ border-radius: 0; background: transparent; table-layout: fixed; } .price-table-modern .price-table th{ background: #e8f1ed; color: #2b7465; border-bottom: 1px solid #c9dbd4; font-size: 0.8rem; font-weight: 700; padding-top: 0.88rem; padding-bottom: 0.88rem; } .price-table-modern .price-table td{ border-bottom: 1px solid #d8e5df; color: #2f5d54; font-size: 0.96rem; vertical-align: middle; padding-top: 0.88rem; padding-bottom: 0.88rem; } .price-table-modern .price-table tr:hover td{ background: rgba(244, 251, 248, 0.78); } .price-table-modern .price-table tr.is-unavailable td{ background: rgba(239, 243, 245, 0.88); } .price-table-modern .price-table tr.is-unavailable:hover td{ background: rgba(236, 241, 243, 0.94); } .price-table-modern .price-table th:nth-child(1), .price-table-modern .price-table td:nth-child(1){ width: 22%; } .price-table-modern .price-table th:nth-child(2), .price-table-modern .price-table td:nth-child(2){ width: 47%; } .price-table-modern .price-table th:nth-child(3), .price-table-modern .price-table td:nth-child(3){ width: 12%; } .price-table-modern .price-table th:nth-child(3){ text-align: right; padding-right: 0.75rem; } .price-table-modern .price-table th:nth-child(4), .price-table-modern .price-table td:nth-child(4){ width: 19%; } .price-col-category, .price-col-service, .price-col-price, .price-col-action{ vertical-align: middle; } .price-col-price{ text-align: right; padding-right: 0.75rem; } .price-category-item{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.46rem; width: 100%; min-width: 0; } .price-category-content{ display: grid; gap: 0.18rem; min-width: 0; } .price-category-icon{ width: 1.78rem; height: 1.78rem; border-radius: 10px; border: 1px solid rgba(83, 133, 123, 0.28); background: linear-gradient(180deg, #f4fbf8 0%, #e9f4f0 100%); color: #2d8a74; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 10px rgba(22, 63, 55, 0.08); } .price-category-title{ color: #215247; font-family:var(--font-sans); font-size: clamp(1rem, 1.03vw, 1.12rem); line-height: 1.12; letter-spacing: 0.01em; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .price-category-code{ display: inline-flex; align-items: center; gap: 0.2rem; color: #3f7065; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.015em; line-height: 1.2; } .price-category-code .ms-icon{ font-size: 0.95em; color: #3e8a78; } .price-category-code.is-muted{ color: #74878d; } .price-service-item{ display: block; } .price-service-title{ color: #24544a; font-family:var(--font-sans); font-size: clamp(0.98rem, 1.02vw, 1.16rem); line-height: 1.26; letter-spacing: 0.005em; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .price-value{ color: #1f6b59; font-family:var(--font-sans); font-weight: 730; font-size: clamp(1.08rem, 1.14vw, 1.24rem); line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; } .price-data-row.is-unavailable .price-value{ color: #63767b; } .price-data-row.is-unavailable .price-category-title, .price-data-row.is-unavailable .price-service-title{ color: #5c7075; } .price-data-row.is-unavailable .price-category-icon{ border-color: rgba(138, 152, 160, 0.35); background: linear-gradient(180deg, #f3f6f7 0%, #ebf0f1 100%); color: #6d8790; } .price-data-row.is-unavailable .price-category-code{ color: #70858b; } .price-data-row.is-unavailable .price-category-code .ms-icon{ color: #7d9198; } .price-section-row td{ padding: 0.52rem 0.7rem; border-bottom: 1px solid #d2e1db; background: linear-gradient(180deg, #2f7e6c 0%, #2a705f 100%); } .price-section-row td:hover{ background: linear-gradient(180deg, #2f7e6c 0%, #2a705f 100%); } .price-table-modern .price-table tr.price-section-row:hover td{ background: linear-gradient(180deg, #2f7e6c 0%, #2a705f 100%); } .price-section-badge{ display: inline-flex; align-items: center; gap: 0.34rem; color: #f4fffb; font-family:var(--font-sans); font-size: clamp(1rem, 1.04vw, 1.14rem); font-weight: 600; letter-spacing: 0.008em; } .price-section-badge .ms-icon{ color: #dcf6ef; font-size: 1.02em; } .price-col-action{ text-align: right; padding-right: 0.4rem; } .price-row-action{ min-height: 42px; padding: 0 0.82rem; border-radius: 999px; font-weight: 620; white-space: nowrap; width: 100%; max-width: 196px; margin-left: auto; justify-content: center; } .price-row-action .ms-icon{ font-size: 1.08em; } .price-row-disabled{ display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 0.72rem; border-radius: 999px; border: 1px dashed #c4d3d7; background: #f0f4f5; color: #667b81; font-size: 0.82rem; font-weight: 650; white-space: nowrap; } .price-table-modern .price-table td.price-col-action, .price-table-modern .price-table th:nth-child(4){ padding-right: 0.4rem; } .price-empty-row td{ text-align: center; padding: 1.2rem 0.8rem; color: #607974; background: rgba(255, 255, 255, 0.45); } .price-disclaimer{ margin: 0.8rem 0 0; text-align: center; } .price-page-actions{ margin-top: 0.86rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.62rem; } .service-clinical-section{ padding-top: 2.35rem; padding-bottom: 2.6rem; } .service-symptoms-showcase{ border-radius: 24px; border: 1px solid #c7d8d2; background: radial-gradient(circle at 95% 8%, rgba(222, 239, 233, 0.9) 0, rgba(222, 239, 233, 0.25) 36%, transparent 68%), linear-gradient(180deg, #f4faf8 0%, #edf6f2 100%); box-shadow: 0 16px 30px rgba(30, 68, 74, 0.08); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head media" "chips chips"; } .service-symptoms-head{ grid-area: head; padding: 1.25rem 1.3rem 0.85rem; } .service-symptoms-kicker{ margin: 0 0 0.36rem; color: #4a7f73; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; } .service-symptoms-head h2{ margin: 0; color: #204841; font-family:var(--font-sans); font-size: clamp(1.34rem, 1.8vw, 1.74rem); line-height: 1.16; } .service-symptoms-lead{ margin: 0.56rem 0 0; color: #4d6966; font-size: 0.95rem; line-height: 1.42; max-width: 50ch; } .service-symptoms-media{ grid-area: media; align-self: end; padding: 0.9rem 1rem 0.7rem 0; } .service-symptoms-media img{ width: 100%; height: 100%; min-height: 210px; max-height: 230px; object-fit: cover; object-position: center; border-radius: 18px; border: 1px solid rgba(117, 158, 148, 0.35); box-shadow: 0 12px 24px rgba(31, 67, 58, 0.12); filter: saturate(0.88) contrast(1.02); } .service-symptom-chips{ grid-area: chips; margin: 0; padding: 0.35rem 1.3rem 1.25rem; list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; } .service-symptom-chips li{ min-height: 38px; padding: 0.47rem 0.76rem; border-radius: 999px; border: 1px solid #ddbd73; background: linear-gradient(180deg, #e2bd69 0%, #d6a94b 100%); color: #fff; font-size: 0.95rem; line-height: 1.15; display: inline-flex; align-items: center; gap: 0.48rem; box-shadow: 0 5px 14px rgba(153, 112, 36, 0.21); } .service-symptom-chip-icon{ width: 0.43rem; height: 0.43rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); } .service-questionnaires-section{ padding-top: 0; } .service-questionnaires-head{ margin-bottom: 1.35rem; max-width: 42rem; } .service-questionnaires-kicker{ margin: 0 0 0.65rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(44, 127, 103, 0.88); } .service-questionnaires-head h2{ margin: 0; font-size: clamp(1.85rem, 2.8vw, 2.5rem); color: #214e46; } .service-questionnaires-head p{ margin: 0.85rem 0 0; max-width: 42rem; font-size: 1.02rem; line-height: 1.7; color: rgba(44, 66, 62, 0.78); } .articles-grid.service-questionnaires-grid{ align-items: start; } .service-questionnaire-card{ justify-self: start; } .service-guides-grid{ margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .service-guide-card{ border-radius: 20px; border: 1px solid #c9d9d3; background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%); padding: 1.02rem 1.05rem 1.08rem; box-shadow: 0 10px 24px rgba(30, 68, 74, 0.07); } .service-guide-card h3{ margin: 0 0 0.64rem; color: #244742; font-family:var(--font-sans); font-size: clamp(1.14rem, 1.2vw, 1.36rem); line-height: 1.18; } .service-guide-list{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.54rem; } .service-guide-list li{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.52rem; color: #476465; font-size: 0.93rem; line-height: 1.35; } .service-guide-list-icon{ width: 1.14rem; height: 1.14rem; border-radius: 999px; margin-top: 0.08rem; background: linear-gradient(180deg, #4a9d87 0%, #2b8770 100%); display: inline-flex; align-items: center; justify-content: center; } .service-guide-list-icon::before{ content: ''; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: #fff; } .service-info-sections{ padding-top: 0.4rem; padding-bottom: 2.2rem; } .service-info-stack{ display: grid; gap: 0.95rem; } .service-info-card{ background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%); border: 1px solid #c9d9d3; } .service-info-card h2{ margin-top: 0; margin-bottom: 0.45rem; color: #244742; font-family:var(--font-sans); font-size: clamp(1.28rem, 1.55vw, 1.62rem); line-height: 1.18; } .service-info-card h3{ margin: 0.8rem 0 0.45rem; color: #2f564f; font-size: 1.02rem; } .service-info-subtitle{ margin: 0; color: #38645d; font-weight: 650; } .service-info-meta{ margin: 0.2rem 0 0; color: #34504b; font-weight: 600; } .service-info-text{ margin: 0.65rem 0 0; color: #4a6562; } .service-info-list{ margin: 0; padding-left: 1.1rem; color: #425e5c; display: grid; gap: 0.34rem; } .service-info-note{ margin: 0.82rem 0 0; padding: 0.58rem 0.72rem; border-radius: 12px; background: #eef7f3; border: 1px solid #c6ddd5; color: #365e57; font-weight: 530; } .service-info-actions{ margin-top: 0.85rem; } .faq-list{ display: block; } .faq-item + .faq-item{ margin-top: 15px; } .faq-item summary{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.66rem; padding: 0.9rem 1rem; } .faq-icon .ms-icon{ font-size: 1.08rem; color: #2b876f; } .faq-summary-title{ font-size: clamp(1.02rem, 1.02vw, 1.14rem); } .faq-body{ padding: 0.86rem 1rem 0.98rem; display: block; } .faq-body p{ margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.45; } .faq-item-static .faq-static-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.66rem; padding: 0.9rem 1rem; border-bottom: 1px solid rgba(122, 161, 151, 0.24); background: rgba(227, 240, 235, 0.55); } .faq-item-static .faq-body{ padding-top: 0.9rem; } .appointment-page .container.appointment-page-container{ width: min(1360px, calc(100% - 2rem)); } .appointment-page-container{ display: grid; gap: 1.2rem; } .appointment-hero-card{ display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); gap: 1rem; padding: 1.1rem; border-radius: 20px; } .appointment-hero-copy h1{ margin: 0 0 0.5rem; } .appointment-hero-copy .muted{ margin: 0; max-width: 56ch; } .appointment-hero-points{ margin: 0.92rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.52rem; } .appointment-hero-points li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.42rem; align-items: start; color: #2e475f; font-size: 0.95rem; } .appointment-hero-points .ms-icon{ color: #2b876f; margin-top: 0.02rem; } .appointment-hero-stats{ display: grid; gap: 0.66rem; align-content: start; } .appointment-hero-stat{ border: 1px solid #d4e1dc; border-radius: 16px; padding: 0.76rem 0.84rem; background: linear-gradient(180deg, #f7fcfa 0%, #edf5f2 100%); } .appointment-hero-stat .ms-icon{ color: #2e7d6b; font-size: 1.2rem; } .appointment-hero-stat strong{ display: block; margin-top: 0.24rem; color: #1f4f42; font-size: 1.02rem; font-family:var(--font-sans); } .appointment-hero-stat p{ margin: 0.18rem 0 0; color: #4f637d; font-size: 0.9rem; } .appointment-layout{ display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.64fr); gap: 1.2rem; align-items: start; } .appointment-form-wrap, .appointment-aside{ min-width: 0; } .appointment-aside{ display: grid; gap: 1rem; } .appointment-form{ background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.15rem; display: grid; gap: 0.95rem; box-shadow: var(--shadow); } .appointment-page, .appointment-page-container, .appointment-layout, .appointment-form-wrap, .appointment-form, .field-grid, .field-grid > *, .appointment-form > *, .appointment-form .form-field, .appointment-form .consent, .appointment-form .custom-select, .appointment-form .custom-picker{ min-width: 0; max-width: 100%; } .appointment-form .btn[type="submit"].is-loading, .appointment-form .btn[type="submit"]:disabled{ opacity: 0.86; cursor: wait; pointer-events: none; } .field-grid{ display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field{ display: grid; gap: 0.38rem; } .form-label{ font-weight: 600; } label{ display: grid; gap: 0.35rem; font-weight: 600; } input, select, textarea, button{ font: inherit; } input, select, textarea{ border: 1px solid #b9c7d6; border-radius: 11px; padding: 0.64rem 0.68rem; background: #fff; } .appointment-form input[type="date"], .appointment-form input[type="time"], .appointment-form input[type="text"], .appointment-form input[type="tel"], .appointment-form textarea, .appointment-form button, .appointment-form select{ display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; } .appointment-form textarea{ resize: vertical; min-height: 112px; } .form-field-file input[type="file"]{ display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 0.58rem 0.64rem; border-radius: 12px; border: 1px dashed #9ebcb2; background: linear-gradient(180deg, #fbfdfd 0%, #f1f6f5 100%); color: #1f3d56; overflow: hidden; text-overflow: ellipsis; } .form-field-file input[type="file"]::file-selector-button{ margin-right: 0.6rem; border: 1px solid #c0d3cc; border-radius: 10px; background: #ffffff; color: #1f4f42; padding: 0.34rem 0.68rem; font-weight: 600; cursor: pointer; } .form-field-file input[type="file"]::file-selector-button:hover{ background: #eff7f4; border-color: #9dbeb2; } .form-field-file .muted{ margin-top: 0.06rem; color: #5d7470; font-size: 0.83rem; line-height: 1.34; } .custom-select{ position: relative; min-width: 0; } .custom-select-trigger{ max-width: 100%; min-width: 0; width: 100%; min-height: 48px; border: 1px solid #b9c7d6; border-radius: 12px; padding: 0.55rem 0.72rem; background: linear-gradient(180deg, #fbfdfd 0%, #f1f6f5 100%); color: #1f3d56; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.46rem; align-items: center; text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .custom-select-trigger:hover{ border-color: #8fb7ab; } .custom-select-trigger.is-empty .custom-select-value{ color: #7a8e9d; } .custom-select-value{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; } .custom-select-chevron{ color: #2b876f; transition: transform 0.18s ease; } .custom-select.is-open .custom-select-chevron{ transform: rotate(180deg); } .custom-select-menu{ position: absolute; top: calc(100% + 0.32rem); left: 0; right: 0; z-index: 24; border: 1px solid #c2d3cb; border-radius: 12px; background: #fff; box-shadow: 0 16px 28px rgba(18, 46, 38, 0.15); padding: 0.34rem; max-height: 300px; overflow: auto; } .custom-select-option{ width: 100%; border: 0; border-radius: 10px; padding: 0.48rem 0.54rem; background: transparent; color: #1f3d56; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.46rem; align-items: center; text-align: left; cursor: pointer; transition: background-color 0.16s ease; } .custom-select-option:hover{ background: #edf5f2; } .custom-select-option.is-selected{ background: #e6f2ed; color: #1e5a4c; } .custom-select-check{ opacity: 0; color: #2b876f; transition: opacity 0.16s ease; } .custom-select-option.is-selected .custom-select-check{ opacity: 1; } .custom-select-option-text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-select.is-invalid .custom-select-trigger{ border-color: #cf3e32; } .custom-select-error{ margin-top: 0.16rem; } .custom-picker{ position: relative; min-width: 0; } .custom-picker-trigger{ max-width: 100%; min-width: 0; width: 100%; min-height: 48px; border: 1px solid #b9c7d6; border-radius: 12px; padding: 0.52rem 0.68rem; background: linear-gradient(180deg, #fbfdfd 0%, #f1f6f5 100%); color: #1f3d56; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.44rem; align-items: center; text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .custom-picker-trigger:hover{ border-color: #8fb7ab; } .custom-picker-trigger.is-empty .custom-picker-value{ color: #7a8e9d; } .custom-picker-leading{ color: #2b876f; font-size: 1.05em; } .custom-picker-value{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; } .custom-picker-chevron{ color: #2b876f; transition: transform 0.18s ease; } .custom-picker.is-open .custom-picker-chevron{ transform: rotate(180deg); } .custom-picker-panel{ position: absolute; top: calc(100% + 0.34rem); left: 0; right: 0; z-index: 26; border: 1px solid #c2d3cb; border-radius: 12px; background: #fff; box-shadow: 0 16px 28px rgba(18, 46, 38, 0.15); } .custom-date-panel{ padding: 0.58rem; } .custom-date-head{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin-bottom: 0.46rem; column-gap: 0.38rem; } .custom-date-head strong{ text-align: center; color: #1f4f42; font-family:var(--font-sans); font-size: 0.98rem; } .custom-date-nav{ width: 34px; height: 34px; border-radius: 10px; border: 1px solid #c7d7d1; background: #f8fbfa; color: #2b876f; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .custom-date-nav:hover{ background: #edf5f2; } .custom-date-weekdays{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 0.34rem; } .custom-date-weekdays span{ text-align: center; color: #708292; font-size: 0.75rem; font-weight: 600; } .custom-date-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.24rem; } .custom-date-day{ min-height: 34px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #1f3d56; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.86rem; font-weight: 560; } .custom-date-day:hover{ background: #edf5f2; } .custom-date-day.is-outside{ color: #95a4af; } .custom-date-day.is-today{ border-color: #a5c8bd; } .custom-date-day.is-selected{ background: #2f7d6b; color: #fff; border-color: #2f7d6b; } .custom-time-panel{ padding: 0.56rem; } .custom-time-head{ margin-bottom: 0.4rem; } .custom-time-head strong{ display: block; color: #1f4f42; font-size: 0.9rem; font-family:var(--font-sans); } .custom-time-head p{ margin: 0.14rem 0 0; color: #708292; font-size: 0.79rem; } .custom-time-list{ max-height: 218px; overflow: auto; display: grid; gap: 0.22rem; padding-right: 0.1rem; } .custom-time-option{ width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 0.42rem 0.54rem; background: transparent; color: #1f3d56; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; text-align: left; cursor: pointer; } .custom-time-option:hover{ background: #edf5f2; } .custom-time-option.is-selected{ background: #e6f2ed; color: #1e5a4c; } .custom-time-check{ opacity: 0; color: #2b876f; } .custom-time-option.is-selected .custom-time-check{ opacity: 1; } .custom-picker.is-invalid .custom-picker-trigger{ border-color: #cf3e32; } .custom-picker-error{ margin-top: 0.16rem; } @supports (-webkit-touch-callout: none){.appointment-form input[type="date"], .appointment-form input[type="time"], .appointment-form input[type="text"], .appointment-form input[type="tel"], .appointment-form textarea, .appointment-form .custom-select-trigger, .appointment-form .custom-picker-trigger{ font-size: 16px; }} .appointment-disclosures h2{ margin-top: 0; margin-bottom: 0.7rem; } .appointment-disclosure{ border: 1px solid #cbdbd4; border-radius: 14px; background: #fdfefe; overflow: hidden; } .appointment-disclosure + .appointment-disclosure{ margin-top: 0.72rem; } .appointment-disclosure summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; padding: 0.84rem 0.9rem; color: #1f4f42; font-weight: 600; } .appointment-disclosure summary::-webkit-details-marker{ display: none; } .appointment-disclosure-chevron{ transition: transform 0.2s ease; } .appointment-disclosure[open] .appointment-disclosure-chevron{ transform: rotate(180deg); } .appointment-disclosure-body{ border-top: 1px solid #d8e4df; padding: 0.76rem 0.9rem 0.88rem; color: #4f637d; font-size: 0.92rem; } .appointment-disclosure-body p{ margin: 0; } .appointment-contacts-card h2{ margin-top: 0; } .appointment-contacts-card p{ margin: 0 0 0.58rem; } .appointment-success-modal{ position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .appointment-success-modal.is-open{ opacity: 1; visibility: visible; } .appointment-success-backdrop{ position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: rgba(8, 26, 34, 0.42); backdrop-filter: blur(3px); cursor: pointer; } .appointment-success-card{ position: relative; z-index: 1; width: min(520px, calc(100% - 1rem)); text-align: center; border-radius: 18px; border: 1px solid #cfe0da; background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%); box-shadow: 0 22px 46px rgba(17, 44, 66, 0.18); padding: 1.25rem 1.15rem 1rem; } .appointment-success-kicker{ margin: 0; display: inline-flex; align-items: center; gap: 0.32rem; color: #2d7f6c; font-size: 0.83rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .appointment-success-kicker .ms-icon{ font-size: 1.08em; } .appointment-success-card h2{ margin: 0.5rem 0 0.4rem; color: #224b43; font-size: clamp(1.34rem, 2.4vw, 1.7rem); } .appointment-success-card p{ margin: 0 0 0.9rem; color: #4f6763; } .appointment-error-card{ border-color: #e8cec6; background: linear-gradient(180deg, #fffefe 0%, #fff6f4 100%); } .appointment-error-kicker{ color: #b34735; } .appointment-error-kicker .ms-icon{ font-size: 1.08em; } input:focus, select:focus, textarea:focus, button:focus, summary:focus, a:focus{ outline: 3px solid var(--focus-ring); outline-offset: 1px; } input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline: none; } .consent{ width: 100%; max-width: 100%; display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 500; } .consent input[type="checkbox"]{ flex: 0 0 18px; width: 18px; min-width: 18px; max-width: 18px; min-height: 18px; margin-top: 0.18rem; } .consent span{ min-width: 0; } .error{ color: var(--danger); font-size: 0.78rem; } .alert{ border-radius: 12px; padding: 0.8rem; margin-bottom: 0.8rem; } .alert.error{ background: #fdecea; color: #8f1e14; } .alert.success{ background: #e8f8ef; color: #0e6f42; } .alert.warning{ background: #fff4e0; color: #8a5a11; } .breadcrumbs{ margin-top: 0.9rem; } .breadcrumbs ol{ padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--muted); font-size: 0.92rem; } .breadcrumbs li + li::before{ content: '›'; margin-right: 0.45rem; color: #95a5b2; } .cta-section{ text-align: center; padding: 1.8rem 1.2rem; } .cta-section p{ color: var(--muted); max-width: 650px; margin: 0.5rem auto 1rem; } .cta-banner{ display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; background: linear-gradient(135deg, #22455b 0%, #2f7767 55%, #3b8d78 100%); color: #fff; } .cta-banner h2{ margin-top: 0; margin-bottom: 0.5rem; } .cta-banner p{ margin: 0; color: #e2f3ec; } .cta-banner-actions{ display: grid; gap: 0.65rem; justify-items: end; } .cta-banner .btn-primary{ border-color: rgba(255, 255, 255, 0.72); background: linear-gradient(180deg, #ffffff 0%, #eef8f4 100%); color: #225449; box-shadow: none; } .cta-banner .btn-primary:hover{ border-color: rgba(255, 255, 255, 0.84); background: linear-gradient(180deg, #ffffff 0%, #e7f4ee 100%); } .cta-banner .btn-light{ border-color: rgba(255, 255, 255, 0.52); background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .cta-banner .btn-light:hover{ background: rgba(255, 255, 255, 0.13); } .contacts-layout{ display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; align-items: start; } .contacts-column{ display: grid; gap: 1rem; align-content: start; } .contacts-layout .card{ border-radius: 18px; } .contact-entrance-card h2{ margin: 0 0 0.9rem; } .contact-entrance-media{ margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid #d4e2dd; background: #d8e6e1; aspect-ratio: 2292 / 2296; } .contact-entrance-media img{ width: 100%; height: 100%; display: block; object-fit: cover; } .contact-block p{ display: flex; align-items: center; gap: 0.36rem; margin: 0.35rem 0; } .contact-block p .ms-icon{ color: #2f7768; } .contact-actions{ display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.8rem; margin-bottom: 0.8rem; } .contact-social-icon{ width: 1rem; height: 1rem; color: currentColor; flex-shrink: 0; } .contact-social-icon-image{ width: 1rem; height: 1rem; object-fit: contain; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(30%) sepia(16%) saturate(1121%) hue-rotate(116deg) brightness(93%) contrast(89%); } .contacts-cta-card .contact-actions{ margin: 0; } .contacts-cta-card .btn{ min-height: 44px; } .quick-note h2{ margin-top: 0; } .quick-note p{ margin-bottom: 0; color: var(--muted); } .contact-route-note{ margin-top: 0.2rem; } .map-section h2{ margin-top: 0; } .map-frame iframe{ width: 100%; border: 0; min-height: 320px; border-radius: 12px; } .license-block p{ margin-bottom: 0; color: var(--muted); } .license-block-body > :first-child{ margin-top: 0; } .license-block-body > :last-child{ margin-bottom: 0; } .license-block-body h2, .license-block-body h3{ margin-top: 0.75rem; color: #1f4742; } .license-block-body p, .license-block-body li{ color: var(--muted); text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } .legal-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .legal-page-section{ padding-top: clamp(3.3rem, 5.6vw, 4.5rem); padding-bottom: clamp(3rem, 5.2vw, 4.2rem); } .legal-page-section-doc{ padding-top: 0; } .legal-page-head{ max-width: 64rem; margin-inline: auto; text-align: center; } .legal-page-kicker{ margin: 0; color: #2e7d6b; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; } .legal-page-head h1{ margin: 0.48rem 0 0.6rem; color: #224a43; font-family:var(--font-sans); font-size: clamp(1.72rem, 3vw, 2.42rem); line-height: 1.12; } .legal-page-head p{ margin: 0; color: #4d6764; font-size: clamp(0.98rem, 1.15vw, 1.12rem); line-height: 1.52; } .legal-page-shell{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); align-items: start; gap: 1rem; } .legal-doc-card{ background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%); border: 1px solid #cfe0da; border-radius: 22px; box-shadow: 0 14px 34px rgba(31, 63, 75, 0.09); } .legal-doc-body{ color: #345754; } .legal-doc-body h2{ margin: 1.25rem 0 0.65rem; color: #1f4f45; font-family:var(--font-sans); font-size: clamp(1.22rem, 1.9vw, 1.58rem); line-height: 1.2; } .legal-doc-body h3{ margin: 1rem 0 0.56rem; color: #2a5b51; font-size: clamp(1rem, 1.45vw, 1.16rem); font-weight: 700; line-height: 1.3; } .legal-doc-body p{ margin: 0.48rem 0; color: #456460; font-size: 0.96rem; line-height: 1.58; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } .legal-doc-body ul{ margin: 0.54rem 0 0.76rem; padding-left: 1.08rem; display: grid; gap: 0.38rem; } .legal-doc-body li{ color: #3f605b; line-height: 1.52; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } .legal-side-card{ position: sticky; top: 112px; border-radius: 18px; border: 1px solid #cde0d9; background: linear-gradient(180deg, #f8fcfb 0%, #eff6f4 100%); box-shadow: 0 12px 28px rgba(31, 63, 75, 0.08); } .legal-side-card h2{ margin: 0; color: #245047; font-size: 1.14rem; } .legal-side-card ul{ margin-top: 0.7rem; margin-bottom: 0.7rem; } .legal-side-card p{ margin-top: 0.68rem; } .legal-links{ margin-top: 0.85rem; display: grid; gap: 0.56rem; } .muted{ color: var(--muted); } .small{ font-size: 0.86rem; } .prose{ max-width: none; } .prose h1{ margin-top: 0; font-size: clamp(1.95rem, 3vw, 2.6rem); } .prose h2{ margin-top: 1.2rem; } .prose p, .prose li{ color: var(--muted); } .articles-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .articles-grid--compact{ grid-template-columns: repeat(auto-fit, minmax(250px, 360px)); justify-content: start; } .articles-split{ display: grid; gap: 1.8rem; } .articles-group{ display: grid; gap: 1rem; } .articles-group-head h1, .articles-group-head h2{ margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.9rem); } .articles-group-head p{ margin: 0.45rem 0 0; color: var(--muted); } .article-card{ display: grid; gap: 0.55rem; } .article-card--media{ overflow: hidden; gap: 0; min-height: 100%; } .article-card-media{ position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #d9e6e2; border-radius: 16px; border: 1px solid #c7d8d2; box-shadow: 0 8px 18px rgba(19, 62, 52, 0.12); } .article-card-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.45s ease; } .article-card--media:hover .article-card-media img{ transform: scale(1.035); } .article-card-chip{ position: absolute; right: 0.8rem; top: 0.8rem; background: rgba(20, 73, 63, 0.88); color: #fff; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; padding: 0.2rem 0.54rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .article-card-body{ display: grid; gap: 0.55rem; padding: 0.85rem; } .article-card h2{ margin: 0; font-size: 1.24rem; } .article-card h3{ margin: 0; font-size: 1.2rem; } .article-category{ margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #41786f; font-weight: 700; } .article-card p{ margin: 0; color: var(--muted); } .article-card-description{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; min-height: 6em; } .article-card-author{ margin-top: 0.28rem; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.55rem; } .article-card-author img{ width: 2.7rem; height: 2.7rem; border-radius: 999px; object-fit: cover; object-position: center top; border: 1px solid #c8d9d3; background: #edf5f1; } .article-author-label{ margin: 0; color: #5f7c77; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; } .article-author-name{ margin: 0.12rem 0 0; color: #244d43; font-size: 0.92rem; font-weight: 700; line-height: 1.2; } .article-card-actions{ display: flex; gap: 0.58rem; flex-wrap: wrap; margin-top: 0.55rem; } .article-card-actions .btn{ min-width: 118px; } .article-page h1{ margin-top: 0.18rem; } .article-page-rich{ display: grid; gap: 1rem; } .article-page-header{ display: grid; gap: 0.3rem; } .article-page-meta{ display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; } .article-page-meta p{ margin: 0; } .article-cover{ margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid #d4e2dd; background: #d8e6e1; } .article-cover img{ width: 100%; height: auto; display: block; } .article-lead{ font-size: 1.04rem; line-height: 1.62; color: #35564d; margin: 0; } .article-subsection{ border-top: 1px solid #d6e3de; padding-top: 0.8rem; } .article-subsection h2{ margin: 0 0 0.5rem; } .article-rich-content{ display: grid; gap: 0.95rem; } .article-page--plain .article-rich-content{ gap: 1.6rem; } .article-rich-block{ background: #f4faf7; border: 1px solid #d4e1dc; border-radius: 14px; padding: 0.9rem; } .article-inline-media{ margin: 0 auto; width: min(100%, 36rem); border-radius: 14px; overflow: hidden; border: 1px solid #d4e2dd; background: #fff; } .article-inline-media img{ width: 100%; height: auto; display: block; } .article-rich-block--plain{ background: transparent; border: 0; border-radius: 0; padding: 0; display: grid; gap: 0; } .article-rich-block--plain h2, .article-rich-block--plain h3, .article-rich-block--plain h4{ color: #21483f; margin: 2rem 0 0.8rem; line-height: 1.2; letter-spacing: -0.01em; } .article-rich-block--plain h3{ font-size: clamp(1.28rem, 2vw, 1.65rem); } .article-rich-block--plain p{ margin: 0; color: #435e58; line-height: 1.8; font-size: 1rem; } .article-rich-block--plain p + p{ margin-top: 0.95rem; } .article-rich-block--plain h2 + p, .article-rich-block--plain h3 + p, .article-rich-block--plain h4 + p{ margin-top: 0; } .article-rich-block--plain > :first-child{ margin-top: 0; } .article-rich-block--plain > :last-child{ margin-bottom: 0; } .article-rich-block > :first-child{ margin-top: 0; } .article-rich-block > :last-child{ margin-bottom: 0; } .article-gallery{ display: grid; gap: 0.85rem; } .article-gallery h2{ margin: 0; } .article-gallery-grid{ display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .article-gallery-item{ margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #ccddd7; background: #dce9e4; min-height: 120px; } .article-gallery-open{ width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; display: block; } .article-gallery-item img{ width: 100%; height: 100%; display: block; object-fit: cover; } .article-gallery-modal{ position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .article-gallery-modal.is-open{ opacity: 1; visibility: visible; } .article-gallery-modal-backdrop{ position: absolute; inset: 0; border: 0; background: rgba(8, 22, 32, 0.58); cursor: pointer; } .article-gallery-modal-dialog{ position: relative; z-index: 1; width: min(1240px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); background: #ffffff; border: 1px solid #c7d8d2; border-radius: 18px; box-shadow: 0 26px 52px rgba(13, 38, 54, 0.34); display: flex; align-items: center; justify-content: center; overflow: hidden; } .article-gallery-modal-close{ position: absolute; top: 0.62rem; right: 0.62rem; width: 38px; height: 38px; border: 1px solid #c6d8d2; border-radius: 10px; background: rgba(250, 254, 252, 0.95); color: #245349; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } .article-gallery-modal-close:hover{ background: #edf6f3; border-color: #9dbeb2; } .article-gallery-modal-media{ width: 100%; max-height: calc(100vh - 2rem); padding: 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .article-gallery-modal-media img{ width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 4rem); object-fit: contain; display: block; } body.modal-open{ overflow: hidden; } .article-tool{ display: grid; gap: 0.95rem; border: 1px solid #c8ddd6; background: linear-gradient(180deg, #f9fdfb 0%, #edf6f3 100%); } .article-tool-head h2{ margin: 0.1rem 0 0.28rem; } .article-tool-head p{ margin: 0; color: #4f6d67; } .article-tool-badge{ margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; font-weight: 700; color: #2b6d5f; } .article-tool-stage h3{ margin: 0.2rem 0; } .article-tool-stage p{ margin: 0.2rem 0; } .article-tool-gender{ margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.55rem; } .article-tool-progress-wrap{ display: grid; gap: 0.34rem; } .article-tool-progress{ height: 10px; border-radius: 999px; background: #ddebe5; overflow: hidden; } .article-tool-progress span{ display: block; width: 0; height: 100%; background: linear-gradient(90deg, #1f745f 0%, #2f8f79 100%); transition: width 0.28s ease; } .article-tool-question{ border: 1px solid #cadfd8; border-radius: 12px; background: #fff; padding: 0.85rem; } .article-tool-hint{ color: #55726b; } .article-tool-actions{ display: flex; flex-wrap: wrap; gap: 0.58rem; margin-top: 0.86rem; } .article-tool-matched{ margin: 0.6rem 0 0; padding-left: 1.2rem; } .article-tool-disclaimer{ margin: 0.4rem 0 0; color: #667f79; font-size: 0.84rem; } .article-tool-refs{ margin: 0; color: #5f7872; padding-left: 1.2rem; } .doctors-intro-card{ display: grid; gap: 0.62rem; width: 100%; justify-items: center; text-align: center; } .doctors-intro-card h1{ margin: 0 0 0.12rem; } .doctors-intro-card p{ margin: 0; color: var(--muted); } .doctors-intro-card ul{ margin: 0.12rem 0 0.24rem; width: fit-content; max-width: min(100%, 52rem); text-align: left; } .doctors-intro-card .doctors-intro-action{ justify-self: center; } .doctors-cta-lift{ margin-top: -80px; } .feature-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; list-style: none; padding: 0; } .feature-list li{ border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 0.7rem 0.8rem; color: #334b69; } .note-box{ border: 1px solid #bdd2e9; border-radius: 14px; background: #f3f8ff; padding: 0.85rem; color: #385980; } .main-content{ min-height: 60vh; } .hidden{ display: none !important; } [hidden]{ display: none !important; } .phone-nowrap{ white-space: nowrap; } .sticky-mobile-cta{ position: fixed; inset: auto 0 0; display: none; gap: 0.5rem; padding: 0.7rem 1rem; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--border); z-index: 98; } .sticky-mobile-cta .btn{ flex: 1; gap: 0.35rem; } .site-footer{ position: relative; background: var(--footer-bg); color: var(--footer-text); margin-top: 0; --footer-wave-height: clamp(38px, 5.6vw, 72px); padding: 3.4rem 0 5.4rem; isolation: isolate; overflow: visible; z-index: 3; } .site-footer::before{ content: ''; position: absolute; left: 0; right: 0; top: calc(var(--footer-wave-height) * -1); height: calc(var(--footer-wave-height) + 2px); background: var(--footer-bg); pointer-events: none; z-index: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C54 C120%2C74 244%2C76 366%2C62 C486%2C48 610%2C46 734%2C58 C858%2C70 982%2C74 1106%2C64 C1230%2C54 1342%2C50 1440%2C58 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0%2C54 C120%2C74 244%2C76 366%2C62 C486%2C48 610%2C46 734%2C58 C858%2C70 982%2C74 1106%2C64 C1230%2C54 1342%2C50 1440%2C58 L1440%2C120 L0%2C120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .site-footer::after{ content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--footer-bg); pointer-events: none; z-index: 0; } .footer-grid{ position: relative; z-index: 1; display: grid; gap: 1rem; grid-template-columns: 1.1fr 0.86fr 1fr; } .site-footer h3, .site-footer h4{ margin: 0.1rem 0 0.55rem; } .footer-brand{ display: inline-flex; align-items: center; margin: 0.1rem 0 0.65rem; padding: 0; border: 0; border-radius: 0; background: transparent; } .footer-logo{ display: block; width: auto; height: clamp(35px, 4.8vw, 50px); max-width: min(280px, 100%); filter: brightness(0) invert(1); } .footer-logo-dark{ display: none; filter: none; } .footer-brand-fallback{ color: var(--footer-text); font-weight: 760; font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1; } .site-footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; } .site-footer a{ color: var(--footer-text); } .footer-link{ display: inline-flex; align-items: center; gap: 0.36rem; } .footer-link .ms-icon{ font-size: 1.08em; } .site-footer .small{ color: var(--footer-muted); font-size: 0.84rem; } .footer-creator{ margin-top: 0.62rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--footer-muted); text-decoration: none; font-size: 0.78rem; line-height: 1; font-weight: 500; transition: color .2s ease; } .footer-creator img{ width: 18px; height: 18px; display: block; border-radius: 999px; filter: grayscale(1) brightness(1.15); transition: filter .2s ease, transform .2s ease; } .footer-creator:hover{ color: var(--footer-text); } .footer-creator:hover img{ filter: grayscale(0.7) brightness(1.2); transform: none; } .footer-creator-mobile-wrap{ display: none; } .btn.danger{ background: linear-gradient(180deg, #ca636c 0%, #b84d56 100%); border-color: #a63d47; color: #ffffff; } .btn.danger:hover{ color: #ffffff; filter: brightness(0.97); } .tabs{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; } .tab{ min-height: var(--control-height-sm); padding: 0 0.7rem; border: 1px solid var(--control-border); border-radius: 10px; background: var(--control-bg); text-decoration: none; color: var(--control-text); display: inline-flex; align-items: center; font-weight: 600; } .tab:hover{ background: var(--control-bg-hover); border-color: #b7c9c0; text-decoration: none; } .tab.active{ background: linear-gradient(180deg, #eaf7f2 0%, #e1f1eb 100%); border-color: #9fcabd; color: #1f4f42; } .it-service-view-grid{ margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem 0.95rem; } .it-service-view-grid dt{ color: #64748b; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.2rem; } .it-service-view-grid dd{ margin: 0; color: #233a57; line-height: 1.45; overflow-wrap: anywhere; } .it-service-view-block{ margin-top: 0.85rem; padding: 0.72rem 0.78rem; border: 1px solid #d5e0e9; border-radius: 10px; background: linear-gradient(180deg, #fcfefe 0%, #f6faf9 100%); } .it-service-view-block h4{ margin: 0 0 0.45rem; color: #1f3f66; font-size: 0.9rem; } .it-service-view-block p, .it-service-view-block pre{ margin: 0; color: #304d67; line-height: 1.48; white-space: pre-wrap; word-break: break-word; font-family: inherit; } .it-secret-value{ display: inline-block; min-width: 8ch; font: 700 0.85rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #1f4f42; } @media (max-width: 980px){.it-service-view-grid{ grid-template-columns: 1fr; }} @media (max-width: 1040px){.header-contact-dropdown{ width: 58px; } .phone-card{ width: 58px; min-width: 58px; min-height: 54px; padding: 0; grid-template-columns: 1fr; justify-items: center; gap: 0; position: relative; } .phone-card-meta{ display: none; } .phone-card-icon{ width: 2rem; height: 2rem; } .phone-card-caret{ position: absolute; top: 2px; right: 2px; font-size: 0.92rem; } .header-contact-panel{ top: calc(100% + 0.42rem); left: auto; right: 0; width: min(360px, calc(100vw - 1rem)); transform: none; border: 1px solid #d6bc7f; border-radius: 14px; box-shadow: 0 18px 32px rgba(131, 97, 23, 0.18); padding: 0 0.72rem; } .header-contact-dropdown.is-open .phone-card{ border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .header-contact-dropdown.is-open .header-contact-panel{ border: 1px solid #d6bc7f; border-top: 1px solid #d6bc7f; border-radius: 14px; box-shadow: 0 18px 32px rgba(131, 97, 23, 0.18); }} @media (max-width: 1080px){.appointment-layout, .price-layout, .service-guides-grid, .legal-grid{ grid-template-columns: 1fr; } .appointment-hero-card{ grid-template-columns: 1fr; } .cta-banner{ grid-template-columns: 1fr; } .cta-banner-actions{ justify-items: start; } .price-sticky{ position: static; }} @media (max-width: 1103px) and (min-width: 981px){.price-table-modern .price-table th:nth-child(1), .price-table-modern .price-table td:nth-child(1){ width: 22%; } .price-table-modern .price-table th:nth-child(2), .price-table-modern .price-table td:nth-child(2){ width: 42%; } .price-table-modern .price-table th:nth-child(3), .price-table-modern .price-table td:nth-child(3){ width: 12%; } .price-table-modern .price-table th:nth-child(4), .price-table-modern .price-table td:nth-child(4){ width: 24%; } .price-service-title{ font-size: clamp(0.92rem, 1.2vw, 1rem); line-height: 1.22; } .price-value{ font-size: clamp(1rem, 1.05vw, 1.12rem); } .price-col-action{ padding-right: 0.18rem; } .price-table-modern .price-table td.price-col-action, .price-table-modern .price-table th:nth-child(4){ padding-right: 0.18rem; } .price-row-action{ min-height: 40px; padding: 0 0.58rem; font-size: 0.86rem; gap: 0.18rem; max-width: 184px; } .price-row-action .ms-icon{ font-size: 0.98em; }} @media (max-width: 980px){.main-nav{ display: none; } .mobile-menu{ display: block; justify-self: end; z-index: 8; } .mobile-menu-panel{ top: calc(env(safe-area-inset-top, 0px) + 78px); max-height: calc(100dvh - 96px); } .header-inner{ grid-template-columns: 1fr auto; position: relative; } .header-cta{ display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; min-height: 0; padding-right: 0; } .header-contact-panel{ left: 50%; right: auto; transform: translateX(-50%); } .directions-grid{ margin-top: -90px; } .brand-logo{ height: clamp(40px, 9vw, 56px); max-width: min(300px, 68vw); } .price-page-shell{ width: min(1240px, calc(100% - 1.6rem)); } .appointment-page .container.appointment-page-container{ width: min(1240px, calc(100% - 1.6rem)); } .split-block, .doctor-profile-main, .contacts-layout, .footer-grid, .legal-page-shell, .directions-grid, .trust-grid, .about-story-grid, .about-why-grid, .about-principles-grid, .home-about-features, .home-principles-grid, .doctor-grid-meta, .feature-list{ grid-template-columns: 1fr; } .footer-creator-inline{ display: none; } .footer-creator-mobile-wrap{ display: block; position: relative; z-index: 1; margin-top: 0.9rem; } .footer-creator-mobile{ display: inline-flex; } .contacts-column-main{ order: 2; } .contacts-column-map{ order: 1; } .contacts-column-main .contacts-cta-card{ order: 1; } .contacts-column-main .contact-entrance-card{ order: 2; } .what-we-treat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.55rem; row-gap: 2rem; } .home-health-check-card, .hc-start-grid, .health-result-grid, .health-articles-grid{ grid-template-columns: 1fr; } .home-health-check-actions{ justify-items: start; } .home-about-features{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctor-card-footer{ grid-template-columns: 1fr; align-items: stretch; gap: 0.5rem; } .doctor-profile-main img{ max-height: 520px; } .legal-side-card{ position: static; } .about-story-card-main, .about-story-card-mission, .about-story-media{ grid-column: auto; grid-row: auto; } .about-story-media{ min-height: 320px; } .service-symptoms-showcase{ grid-template-columns: 1fr; grid-template-areas: "head" "media" "chips"; } .service-symptoms-head{ padding-bottom: 0.66rem; } .service-symptoms-media{ padding: 0 1.3rem; } .service-symptoms-media img{ min-height: 200px; max-height: 230px; } .service-info-card h2{ font-size: clamp(1.14rem, 2.2vw, 1.4rem); } .appointment-hero-card, .appointment-form{ padding: 0.95rem; } .our-services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .our-services-grid.our-services-grid-tail-two-center{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .our-services-grid.our-services-grid-tail-two-center .our-service-card{ flex: initial; max-width: none; } .our-services-grid.our-services-grid-tail-center .our-service-card:last-child{ grid-column: auto; } .what-we-treat-grid.what-we-treat-grid-tail-center .what-we-treat-card:last-child{ grid-column: auto; } .what-we-treat-section .section-heading h2{ font-size: clamp(1.62rem, 3.1vw, 2.02rem); } .what-we-treat-section .section-heading p{ font-size: clamp(0.94rem, 1.85vw, 1.08rem); } .what-we-treat-card-title{ font-size: clamp(1.06rem, 1.72vw, 1.2rem); } .our-services-section .section-heading h2{ font-size: clamp(1.36rem, 2.3vw, 1.72rem); } .split-media img{ min-height: 280px; }} @media (max-width: 760px){.section{ padding: 3rem 0; } .appointment-page .container.appointment-page-container{ width: min(1240px, calc(100% - 1.2rem)); } .appointment-hero-card, .appointment-form, .appointment-contacts-card, .appointment-disclosures{ border-radius: 16px; padding: 0.86rem; } .appointment-hero-stat{ border-radius: 14px; } .appointment-hero-copy h1{ font-size: clamp(1.34rem, 6.8vw, 1.9rem); } .appointment-hero-points li{ font-size: 0.89rem; } .custom-select-option-text{ white-space: normal; overflow: visible; text-overflow: initial; } .form-field-file input[type="file"]{ min-height: 0; padding-top: 0.7rem; padding-bottom: 0.7rem; white-space: normal; overflow-wrap: anywhere; } .form-field-file input[type="file"]::file-selector-button{ display: block; width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 0.55rem; } .custom-picker-trigger{ min-height: 46px; } .custom-picker-panel{ border-radius: 11px; } .custom-date-panel{ padding: 0.5rem; } .custom-date-day{ min-height: 32px; border-radius: 8px; font-size: 0.82rem; } .custom-time-list{ max-height: 200px; } .about-hero-section{ min-height: clamp(420px, 72vh, 620px); padding-top: clamp(3.8rem, 13vw, 5rem); padding-bottom: clamp(3.8rem, 13vw, 5rem); } .about-hero-section::after{ height: clamp(26px, 8vw, 38px); } .about-hero-section::before{ bottom: -22px; height: 52px; } .about-hero-content h1{ font-size: clamp(1.38rem, 7.2vw, 1.95rem); } .about-hero-lead, .about-hero-points li{ font-size: 0.9rem; } .about-hero-actions{ flex-direction: column; align-items: center; } .about-story-card, .about-why-card, .about-principle-card{ border-radius: 15px; padding: 0.88rem 0.86rem; } .about-story-card h2, .about-why-card h3, .about-principle-card h3{ font-size: clamp(1.02rem, 4.9vw, 1.24rem); } .about-story-card p, .about-story-card li, .about-why-card p, .about-principle-card p{ font-size: 0.9rem; } .about-story-media{ min-height: 230px; border-radius: 15px; } .about-slogan-wrap h2{ font-size: clamp(1.18rem, 6.1vw, 1.6rem); } .about-team-photo{ border-radius: 16px; } .about-team-photo img{ height: clamp(220px, 65vw, 320px); } .directions-grid{ margin-top: -56px; } .home-wave-section.section{ padding-top: clamp(3.7rem, 10vw, 4.4rem); padding-bottom: clamp(3.5rem, 9vw, 4.2rem); } .home-wave-section::before, .home-wave-section::after{ height: clamp(22px, 7.5vw, 34px); } .home-section-head h2{ font-size: clamp(1.26rem, 6vw, 1.54rem); } .home-section-head p, .home-about-lead, .home-principles-top p, .home-principle-card p{ font-size: 0.9rem; } .legal-page-head h1{ font-size: clamp(1.34rem, 6.7vw, 1.82rem); } .legal-page-head p, .legal-doc-body p, .legal-doc-body li{ font-size: 0.9rem; } .legal-doc-card, .legal-side-card{ border-radius: 15px; } .legal-doc-body h2{ font-size: clamp(1.06rem, 5vw, 1.26rem); } .legal-doc-body h3{ font-size: clamp(0.96rem, 4.2vw, 1.08rem); } .home-about-feature{ padding: 0.88rem 0.86rem; border-radius: 15px; min-height: 212px; } .home-about-feature h3{ font-size: 1rem; } .home-about-feature-icon-box img{ width: clamp(3.7rem, 13vw, 4.5rem); height: clamp(3.7rem, 13vw, 4.5rem); } .home-about-feature p{ font-size: 0.87rem; max-width: none; } .home-about-features{ grid-template-columns: 1fr; } .home-reviews-platforms, .home-reviews-doctors{ grid-template-columns: 1fr; } .home-review-platform, .home-review-doctor{ border-radius: 15px; padding: 0.88rem 0.86rem; } .home-review-platform .btn, .home-review-doctor .btn{ width: 100%; justify-content: center; } .doctors-grid{ grid-template-columns: 1fr; gap: 0.86rem; } .service-doctors-grid{ grid-template-columns: 1fr; } .doctor-card-modern{ padding: 0.86rem; border-radius: 15px; } .doctor-card-horizontal{ grid-template-columns: 1fr; grid-template-areas: "photo" "body" "footer"; row-gap: 0; } .doctor-card-horizontal .doctor-photo-wrap{ min-height: 0; aspect-ratio: 5 / 6; margin-bottom: 0.72rem; } .doctor-card-footer{ grid-template-columns: 1fr; align-items: stretch; gap: 0.5rem; } .doctor-card-link{ width: 100%; justify-content: center; } .doctor-profile-main{ padding: 0.88rem; gap: 0.88rem; } .doctor-profile-main img{ min-height: 300px; } .doctor-profile-actions{ display: grid; grid-template-columns: 1fr; } .doctor-profile-actions .btn{ width: 100%; justify-content: center; } .doctor-details-group{ padding: 0.8rem 0.86rem; border-radius: 14px; } .doctor-details-group h2{ font-size: clamp(1.02rem, 5vw, 1.2rem); } .doctor-services-grid{ grid-template-columns: 1fr; gap: 0.72rem; } .service-card-compact{ padding: 0.68rem; } .service-card-compact .service-thumb{ aspect-ratio: 16 / 8; } .doctor-timeline-item{ grid-template-columns: 1fr; gap: 0.42rem; } .doctor-achievement-item, .doctor-achievement-item.no-period{ grid-template-columns: auto minmax(0, 1fr); } .home-slogan-wrap h2{ font-size: clamp(1.26rem, 6.3vw, 1.72rem); } .home-principles-grid{ gap: 0.74rem; } .home-principle-card{ border-radius: 15px; padding: 0.88rem 0.86rem; } .field-grid{ grid-template-columns: 1fr; } .price-page-head h1{ font-size: clamp(1.4rem, 7.2vw, 1.76rem); } .price-page-head p{ font-size: 0.92rem; } .price-filter-row{ justify-content: flex-start; overflow-x: auto; padding-bottom: 0.25rem; margin-left: -0.1rem; margin-right: -0.1rem; padding-left: 0.1rem; } .price-filter-row::-webkit-scrollbar{ height: 6px; } .price-filter-btn{ white-space: nowrap; } .price-table-modern .price-table thead{ display: none; } .price-table-modern .price-table, .price-table-modern .price-table tbody, .price-table-modern .price-table tr, .price-table-modern .price-table td{ display: block; width: 100%; } .price-table-modern .price-table tr{ padding: 0.5rem 0.72rem; border-bottom: 1px solid #d7e5de; } .price-table-modern .price-table td{ border: 0; padding: 0.34rem 0; background: transparent !important; width: auto !important; } .price-table-modern .price-table td::before{ content: attr(data-label); display: block; color: #64817d; font-size: 0.73rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.08rem; } .price-table-modern .price-table .price-section-row td{ padding: 0.5rem 0.72rem; background: linear-gradient(180deg, #2f7e6c 0%, #2a705f 100%) !important; } .price-table-modern .price-table .price-section-row td::before{ display: none; } .price-row-action{ width: 100%; } .price-row-disabled{ width: 100%; } .price-category-item{ display: grid; } .price-category-icon{ width: 1.62rem; height: 1.62rem; } .price-category-title{ font-size: 1rem; } .price-service-title{ font-size: 0.98rem; } .price-value{ font-size: 1.05rem; } .price-col-action{ text-align: left; padding-right: 0; } .price-page-actions .btn{ width: 100%; } .sticky-mobile-cta{ display: flex; } .service-clinical-section{ padding-top: 1.65rem; padding-bottom: 2.15rem; } .articles-grid.service-questionnaires-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-symptoms-showcase{ border-radius: 20px; } .service-symptoms-head{ padding: 1rem 0.95rem 0.58rem; } .service-symptoms-kicker{ font-size: 0.74rem; } .service-symptoms-head h2{ font-size: clamp(1.14rem, 4.8vw, 1.42rem); } .service-symptoms-lead{ margin-top: 0.5rem; font-size: 0.88rem; } .service-symptoms-media{ padding: 0 0.95rem; } .service-symptoms-media img{ min-height: 170px; max-height: 185px; border-radius: 14px; } .service-symptom-chips{ padding: 0.52rem 0.95rem 0.95rem; gap: 0.45rem; } .service-symptom-chips li{ min-height: 34px; padding: 0.38rem 0.66rem; font-size: 0.86rem; } .service-guides-grid{ margin-top: 0.78rem; gap: 0.8rem; } .service-guide-card{ border-radius: 16px; padding: 0.88rem 0.9rem; } .service-guide-card h3{ font-size: 1.08rem; margin-bottom: 0.5rem; } .service-questionnaires-head h2{ font-size: 1.8rem; } .service-guide-list li{ font-size: 0.88rem; column-gap: 0.45rem; } .service-info-sections{ padding-top: 0.2rem; padding-bottom: 1.9rem; } .service-info-stack{ gap: 0.72rem; } .service-info-card h2{ font-size: clamp(1.05rem, 4.8vw, 1.28rem); } .service-info-card h3{ font-size: 0.96rem; } .service-info-text, .service-info-note, .service-info-list li, .service-info-subtitle, .service-info-meta{ font-size: 0.88rem; } .what-we-treat-section{ padding-top: 2.2rem; padding-bottom: 2.2rem; } .our-services-section{ padding-top: 1.65rem; padding-bottom: 3.35rem; } .our-services-section::before, .our-services-section::after{ height: clamp(24px, 8vw, 38px); } .what-we-treat-grid{ grid-template-columns: 1fr; row-gap: 1.4rem; } .hc-options{ grid-template-columns: 1fr; } .hc-question-title{ font-size: 1rem; } .hc-option-tooltip{ width: min(18rem, 78vw); right: -0.1rem; } .home-health-check-copy h2{ font-size: clamp(1.24rem, 6vw, 1.56rem); } .home-health-check-copy p, .home-health-check-copy li, .health-check-lead, .health-result-disclaimer{ font-size: 0.9rem; } .home-health-check-actions .btn{ min-width: 0; width: 100%; } .health-result-actions .btn, .health-result-emergency-actions .btn{ width: 100%; } .our-services-grid{ grid-template-columns: 1fr; } .our-services-grid.our-services-grid-tail-two-center{ display: grid; grid-template-columns: 1fr; } .what-we-treat-section .section-heading{ margin-bottom: 1.55rem; } .what-we-treat-section .section-heading h2{ font-size: clamp(1.46rem, 6.2vw, 1.78rem); } .what-we-treat-section .section-heading p{ font-size: clamp(0.9rem, 4vw, 1.02rem); } .our-services-section .section-heading{ margin: 2.4rem auto 1.3rem; } .our-services-section .section-heading h2{ font-size: clamp(1.28rem, 5.1vw, 1.56rem); } .our-services-section .section-heading p{ font-size: clamp(0.86rem, 3.7vw, 0.98rem); } .what-we-treat-card-icon{ width: 2.8rem; height: 2.8rem; } .what-we-treat-card{ column-gap: 0.68rem; } .what-we-treat-card-title{ font-size: clamp(1rem, 4.5vw, 1.14rem); margin-bottom: 0.72rem; } .our-service-card{ padding: 0.88rem 0.9rem; gap: 0.58rem; } .our-service-card h3, .our-service-summary-title{ font-size: 1.02rem; } .our-service-card p, .our-service-body p, .our-service-lead-text{ font-size: 0.89rem; } .our-service-list li{ font-size: 0.84rem; padding: 0.52rem 0.58rem; column-gap: 0.5rem; } .our-service-lead{ padding: 0.56rem 0.62rem; column-gap: 0.52rem; } .our-service-list-icon{ width: 1.08rem; height: 1.08rem; } .our-service-list-icon svg{ width: 0.9rem; height: 0.9rem; } .what-we-treat-list li{ font-size: 0.93rem; } .what-we-treat-tooltip{ width: min(18rem, 82vw); left: auto; right: 0; transform: translate(0, 6px); } .what-we-treat-tooltip::after{ left: auto; right: 0.4rem; transform: rotate(45deg); } .what-we-treat-tip:hover .what-we-treat-tooltip, .what-we-treat-tip:focus-within .what-we-treat-tooltip{ transform: translate(0, 0); } .direction-media .video-step-cut{ bottom: -30px; height: 24px; } .direction-media .video-wave-cut{ height: 28px; }} .patient-page-section{ padding-bottom: 2.6rem; } .patient-page-head{ max-width: 52rem; } .patient-page-highlights{ margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .patient-page-highlight{ min-height: 52px; border-radius: 14px; border: 1px solid #c7ddd5; background: linear-gradient(180deg, rgba(246, 252, 249, 0.96) 0%, rgba(238, 247, 243, 0.98) 100%); color: #1d4a40; display: inline-flex; align-items: center; gap: 0.42rem; padding: 0 0.82rem; font-weight: 620; font-size: 0.93rem; box-shadow: 0 10px 22px rgba(30, 64, 58, 0.08); } .patient-page-highlight .ms-icon{ color: #2f816f; } .patient-docs-section{ background: linear-gradient(180deg, #eaf4f1 0%, #e3efeb 100%); } .patient-section-heading{ margin-bottom: 1rem; } .patient-docs-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .patient-doc-card{ display: grid; grid-template-rows: auto 1fr auto; gap: 0.72rem; min-height: 100%; } .patient-doc-preview{ border-radius: 14px; border: 1px solid #d3e2dc; background: #f5f9f7; overflow: hidden; min-height: 220px; display: grid; place-items: center; } .patient-doc-preview img{ width: 100%; height: 100%; object-fit: contain; background: #f2f6f4; } .patient-doc-placeholder{ min-height: 220px; display: grid; place-items: center; color: #2f816f; } .patient-doc-placeholder .ms-icon{ font-size: 2rem; } .patient-doc-body h3{ margin: 0; color: #1f4f45; font-size: 1.05rem; line-height: 1.28; } .patient-doc-body p{ margin: 0.45rem 0 0; color: #4b6761; font-size: 0.93rem; } .patient-doc-link{ min-height: 42px; width: fit-content; } .patient-additional-docs{ margin-top: 1rem; border-color: #ccdcd6; box-shadow: 0 12px 28px rgba(31, 63, 75, 0.08); } .patient-additional-docs h3{ margin: 0 0 0.65rem; color: #1f4f45; font-size: 1.02rem; } .patient-additional-docs ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; } .patient-additional-docs li{ padding: 0.65rem 0.72rem; border: 1px solid #d6e2de; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f7fcfa 100%); } .patient-additional-docs li a{ display: inline-flex; align-items: center; gap: 0.35rem; color: #245248; font-weight: 650; text-decoration: none; } .patient-additional-docs li a .ms-icon{ color: #2f7f6d; } .patient-additional-docs li p{ margin: 0.35rem 0 0; color: #54716a; font-size: 0.9rem; } .patient-control-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .patient-control-card{ border-color: #caded6; box-shadow: 0 12px 28px rgba(31, 63, 75, 0.08); } .patient-control-card h3{ margin: 0; color: #1f4f45; font-size: 1.08rem; } .patient-control-card p{ margin: 0.55rem 0 0.7rem; color: #4f6a65; font-size: 0.93rem; } .patient-control-card ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0.48rem; } .patient-control-card li{ display: inline-flex; align-items: flex-start; gap: 0.32rem; color: #315953; font-size: 0.92rem; line-height: 1.42; } .patient-control-card li .ms-icon{ color: #2f7f6d; margin-top: 0.1rem; } .patient-control-card li a{ color: #245248; text-decoration: none; } .patient-control-card li a:hover{ text-decoration: underline; } .patient-control-card .patient-control-address{ color: #4c6661; } .patient-rules-section .card h2{ margin-top: 0; } .patient-rules-section .service-columns{ display: grid; gap: 15px; } .patient-rules-section .card ul{ margin-top: 0.7rem; display: grid; gap: 0.42rem; } @media (max-width: 980px){.patient-page-highlights, .patient-control-grid, .patient-docs-grid{ grid-template-columns: 1fr; }} @media (max-width: 640px){.patient-page-highlight{ min-height: 46px; font-size: 0.88rem; } .patient-doc-body h3{ font-size: 0.98rem; } .patient-doc-body p, .patient-control-card p, .patient-control-card li{ font-size: 0.88rem; } .doctors-cta-lift{ margin-top: -36px; } .articles-grid.service-questionnaires-grid{ grid-template-columns: 1fr; }} .btn, .home-health-check-actions .btn, .health-result-actions .btn, .health-result-emergency-actions .btn, .price-page-actions .btn, .doctor-profile-actions .btn, .contacts-cta-card .btn, .article-card-actions .btn, .sticky-mobile-cta .btn{ border-radius: 12px !important; } .cookie-consent{ position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1150; pointer-events: none; } .cookie-consent.is-visible{ pointer-events: auto; } .cookie-consent__panel{ width: min(720px, 100%); margin-left: auto; margin-right: auto; border-radius: 18px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(16, 35, 40, 0.18); backdrop-filter: blur(8px); padding: 18px 20px; } .cookie-consent__title{ margin: 0; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 760; color: var(--text); } .cookie-consent__text{ margin: 10px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.45; } .cookie-consent__links{ margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; } .cookie-consent__links a{ color: var(--primary-700); text-decoration: none; } .cookie-consent__links a:hover{ text-decoration: underline; } .cookie-consent__actions{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 768px){.cookie-consent{ left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .cookie-consent__panel{ border-radius: 14px; padding: 14px; } .cookie-consent__actions .btn{ width: 100%; justify-content: center; }} .pearl-home{--im-ink:#253c38;--im-green:#123831;--im-pale:#edf5f1;--im-line:#dbe5e1;--im-muted:#5b6e68;--im-gold:#d8ab50;--im-duration:460ms;--im-radius:22px;position:relative;background:#fff;color:var(--im-ink);font-family:var(--font-sans);color-scheme:light;isolation:isolate;overflow:clip} .pearl-home *{box-sizing:border-box} .pearl-home [hidden]{display:none!important} .pearl-home button,.pearl-home input{font:inherit} .pearl-home button{touch-action:manipulation} .pearl-home h1,.pearl-home h2,.pearl-home p{margin:0} .pearl-home .im-header{padding:24px 34px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--im-line)} .pearl-home .im-logo{width:142px;height:43px;object-fit:contain;display:block} .pearl-home .im-nav{display:flex;align-items:center;gap:24px;margin-left:auto} .pearl-home .im-nav button{border:0;padding:10px 0;background:transparent;color:var(--im-muted);font-size:13px;font-weight:550;position:relative} .pearl-home .im-nav button:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--im-green);transform:scaleX(0);transform-origin:left;transition:transform 230ms} .pearl-home .im-nav button:hover:after,.pearl-home .im-nav button[aria-current="page"]:after{transform:scaleX(1)} .pearl-home .im-header-actions{display:flex;align-items:center;gap:17px;padding-right:36px} .pearl-home .im-phone{color:var(--im-ink);text-decoration:none;font-size:12px;white-space:nowrap;font-weight:600} .pearl-home .im-motion{width:32px;height:20px;position:relative;border:0;border-radius:20px;background:var(--im-green);padding:3px} .pearl-home .im-motion:before{content:'';position:absolute;left:15px;top:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform 200ms} .pearl-home .im-motion[aria-pressed="false"]{background:#879991} .pearl-home .im-motion[aria-pressed="false"]:before{transform:translateX(-12px)} .pearl-home .im-main{padding:42px 34px 28px} .pearl-home .im-location{display:flex;align-items:center;gap:8px;color:var(--im-muted);font-size:12px;font-weight:500;letter-spacing:.02em} .pearl-home .im-location i{width:14px;height:14px} .pearl-home .im-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:42px;align-items:center;margin-top:26px} .pearl-home .im-copy{min-width:0;padding:6px 0 20px} .pearl-home .im-copy h1{font-size:clamp(36px,4.7vw,53px);line-height:1.11;letter-spacing:-.065em;font-weight:600;max-width:480px} .pearl-home .im-copy .im-lead{margin-top:23px;max-width:375px;font-size:15px;line-height:1.7;color:var(--im-muted)} .pearl-home .im-copy .im-context{font-size:12px;color:var(--im-muted);margin-top:27px;line-height:1.6;max-width:330px} .pearl-home .im-textlink{display:inline-flex;gap:13px;align-items:center;border:0;background:transparent;padding:9px 0;color:var(--im-green);font-size:13px;font-weight:600;text-decoration:none} .pearl-home .im-textlink i{width:16px;height:16px;transition:transform 250ms} .pearl-home .im-textlink:hover i{transform:translateX(5px)} .pearl-home .im-deck{position:relative;min-height:485px;perspective:1300px;align-self:start;transform:rotateX(var(--im-rx,0deg)) rotateY(var(--im-ry,0deg));transition:transform 200ms ease-out;border-radius:var(--im-radius);background:var(--im-pale)} .pearl-home .im-panel{position:relative;min-height:485px;overflow:clip;border:1px solid var(--im-line);border-radius:var(--im-radius);background:#fff;transform-origin:50% 80%;backface-visibility:hidden} .pearl-home .im-bridge{position:absolute;inset:0;z-index:8;border-radius:var(--im-radius);transform-origin:0 0;background:var(--im-green);pointer-events:none;will-change:transform,opacity} .pearl-home .im-portrait-area{position:relative;height:303px;overflow:hidden;background:#dddcd3} .pearl-home .im-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;transform:translate(var(--im-photo-x,0px),var(--im-photo-y,0px)) scale(1.025);transition:transform 250ms ease-out} .pearl-home .im-portrait-label{position:absolute;left:18px;top:17px;display:inline-flex;align-items:center;gap:7px;background:#fff;padding:7px 12px;border-radius:30px;font-size:11px;color:var(--im-ink)} .pearl-home .im-portrait-label:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--im-green)} .pearl-home .im-doctor-info{padding:20px 22px 19px} .pearl-home .im-name{font-size:18px;line-height:1.4;letter-spacing:-.02em;font-weight:600} .pearl-home .im-qualification{font-size:11px;line-height:1.65;color:var(--im-muted);margin-top:5px;max-width:350px} .pearl-home .im-booking-row{border-top:1px solid var(--im-line);margin-top:17px;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:14px} .pearl-home .im-price-label{font-size:10px;color:var(--im-muted);margin-bottom:3px} .pearl-home .im-price{font-size:23px;letter-spacing:-.045em;font-weight:600;white-space:nowrap} .pearl-home .im-price.im-price-text{font-size:13px;line-height:1.4;letter-spacing:0;white-space:normal;max-width:150px} .pearl-home .im-action{border:0;background:var(--im-green);color:#fff;border-radius:12px;min-height:46px;display:inline-flex;align-items:center;justify-content:space-between;gap:17px;padding:9px 11px 9px 19px;font-size:12px;font-weight:600;transform:translate(var(--im-button-x,0px),var(--im-button-y,0px));transition:transform 170ms ease-out,background 200ms;overflow:hidden;position:relative;flex-shrink:0} .pearl-home .im-action:active{scale:.97} .pearl-home .im-action .im-rolling{position:relative;display:block;height:18px;overflow:hidden;line-height:18px} .pearl-home .im-action .im-rolling span{display:block;transition:transform 330ms cubic-bezier(.16,1,.3,1)} .pearl-home .im-action:hover .im-rolling span{transform:translateY(-18px)} .pearl-home .im-action .im-disc{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:#ffffff18;transition:background 230ms,transform 330ms} .pearl-home .im-action .im-disc i{width:16px;height:16px} .pearl-home .im-action:hover .im-disc{background:#fff;color:var(--im-green);transform:rotate(-45deg)} .pearl-home .im-directions{position:relative;margin-top:33px;padding:5px;display:grid;grid-template-columns:1.2fr 1.25fr 1fr 1.1fr;gap:4px;border:1px solid var(--im-line);border-radius:15px;background:#fafcfb} .pearl-home .im-direction{position:relative;z-index:1;min-height:47px;border:0;border-radius:10px;background:transparent;color:var(--im-muted);font-size:12px;font-weight:500;padding:10px 8px;transition:color 180ms} .pearl-home .im-direction[aria-pressed="true"]{color:#fff;font-weight:600} .pearl-home .im-direction:hover:not([aria-pressed="true"]){color:var(--im-green)} .pearl-home .im-indicator{position:absolute;z-index:0;top:0;left:0;width:var(--im-tab-w,0px);height:var(--im-tab-h,0px);transform:translate(var(--im-tab-x,5px),var(--im-tab-y,5px));border-radius:10px;background:var(--im-green);transition:transform 420ms cubic-bezier(.22,1,.36,1),width 420ms cubic-bezier(.22,1,.36,1),height 250ms;pointer-events:none} .pearl-home .im-bottom{margin-top:33px;padding-top:28px;border-top:1px solid var(--im-line);display:grid;grid-template-columns:1.08fr 1fr;gap:48px} .pearl-home .im-bottom h2{font-size:25px;letter-spacing:-.04em;font-weight:550;line-height:1.35} .pearl-home .im-bottom p{font-size:13px;line-height:1.8;color:var(--im-muted);margin-top:13px;max-width:430px} .pearl-home .im-topic-list{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:14px;color:var(--im-ink);font-size:12px} .pearl-home .im-topic-list span{display:inline-flex;align-items:center;gap:7px} .pearl-home .im-topic-list span:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--im-gold)} .pearl-home .im-secondary-heading{color:var(--im-muted);font-size:11px;font-weight:500} .pearl-home .im-visit{display:grid;grid-template-columns:23px 1fr;gap:9px;margin-top:15px;align-items:start} .pearl-home .im-visit i{width:18px;height:18px;color:var(--im-green);margin-top:3px} .pearl-home .im-visit strong{font-weight:600;font-size:12px} .pearl-home .im-visit p{font-size:11px;line-height:1.7;margin-top:4px} .pearl-home .im-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--im-line);padding:19px 34px;font-size:10px;color:var(--im-muted);line-height:1.8} .pearl-home .im-sheet{padding:27px 25px;min-height:485px} .pearl-home .im-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:var(--im-muted);margin-bottom:28px} .pearl-home .im-back{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--im-green);font-size:11px;padding:6px 0} .pearl-home .im-back i{width:15px;height:15px} .pearl-home .im-sheet h2{font-size:30px;font-weight:600;letter-spacing:-.05em;line-height:1.2} .pearl-home .im-form-description{font-size:12px;line-height:1.8;color:var(--im-muted);margin:13px 0 23px} .pearl-home .im-form{display:grid;gap:16px} .pearl-home .im-field{display:grid;gap:6px;font-size:11px;color:var(--im-muted)} .pearl-home .im-field input{width:100%;min-height:43px;padding:10px 12px;border:1px solid #cddbd4;border-radius:9px;background:#fafcfb;color:var(--im-ink);font-size:14px} .pearl-home .im-consent{display:flex;align-items:flex-start;gap:9px;font-size:10px;line-height:1.7;color:var(--im-muted)} .pearl-home .im-consent input{width:15px;height:15px;flex-shrink:0;accent-color:var(--im-green);margin-top:2px} .pearl-home .im-demo-note{font-size:10px;color:var(--im-muted);line-height:1.6;margin-top:14px} .pearl-home .im-success{min-height:320px;display:grid;align-content:center;gap:18px} .pearl-home .im-success i{width:40px;height:40px;color:var(--im-green)} .pearl-home .im-success p{color:var(--im-muted);font-size:13px;line-height:1.8} .pearl-home .im-costs{margin-top:18px;display:grid;gap:9px} .pearl-home .im-costs div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--im-line);padding-top:9px;font-size:11px;line-height:1.6} .pearl-home .im-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .pearl-home.im-static *,.pearl-home.im-static *:before,.pearl-home.im-static *:after{transition-duration:0ms!important;animation:none!important} .pearl-home.im-static .im-deck,.pearl-home.im-static .im-action,.pearl-home.im-static .im-portrait{transform:none!important} .pearl-home.im-static .im-action:hover .im-rolling span{transform:none} .pearl-home.im-static .im-action:hover .im-disc{transform:none} @media(max-width:830px){.pearl-home .im-header{gap:20px;padding:20px 24px} .pearl-home .im-header-actions{padding-right:0} .pearl-home .im-phone{display:none} .pearl-home .im-main{padding:30px 24px 24px} .pearl-home .im-hero{gap:28px} .pearl-home .im-copy h1{font-size:41px} .pearl-home .im-nav{gap:15px} .pearl-home .im-nav button{font-size:12px} .pearl-home .im-footer{padding:17px 24px}} @media(max-width:640px){.pearl-home .im-header{padding:19px 20px;gap:15px;flex-wrap:wrap} .pearl-home .im-logo{width:119px;height:37px} .pearl-home .im-nav{gap:15px;order:3;width:100%;justify-content:flex-start} .pearl-home .im-header-actions{margin-left:auto;padding-right:40px} .pearl-home .im-main{padding:27px 20px 23px} .pearl-home .im-hero{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:22px} .pearl-home .im-copy{padding-bottom:0} .pearl-home .im-copy h1{font-size:clamp(32px,8.5vw,44px);max-width:430px} .pearl-home .im-copy .im-lead{font-size:14px;margin-top:17px} .pearl-home .im-copy .im-context{margin-top:15px} .pearl-home .im-deck,.pearl-home .im-panel{min-height:465px} .pearl-home .im-portrait-area{height:280px} .pearl-home .im-sheet{min-height:465px;padding:23px 20px} .pearl-home .im-directions{grid-template-columns:1fr 1fr;margin-top:25px} .pearl-home .im-direction{font-size:11px;padding:10px 5px;min-height:46px} .pearl-home .im-bottom{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:26px;padding-top:23px} .pearl-home .im-bottom h2{font-size:24px} .pearl-home .im-footer{padding:16px 20px} .pearl-home .im-name{font-size:17px} .pearl-home .im-booking-row{gap:9px} .pearl-home .im-action{padding-left:14px;gap:10px} .pearl-home .im-field input{font-size:16px}} @media(prefers-reduced-motion:reduce){.pearl-home *,.pearl-home *:before,.pearl-home *:after{transition-duration:0ms!important;animation:none!important} .pearl-home .im-deck,.pearl-home .im-action,.pearl-home .im-portrait{transform:none!important}} .pearl-home{--im-depth:.68;--im-light-strength:.65;--im-green:#123831;--im-green-light:#1e4a40;--im-green-deep:#0b2924;--im-ink:#303735;--im-muted:#626864;--im-line:#dddcd5;--im-pale:#efefeb;--im-gold:#d8ab50;--im-brass:#9d7b41;--im-action-surface:#d4b373;--im-sheet-surface:#fcfcf9;--im-radius:14px;background:linear-gradient(120deg,#fafaf8 0%,#f6f6f3 46%,#ebeae5 100%)} .pearl-home:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(113deg,#7a776005 0 1px,transparent 1px 5px);opacity:.65} .pearl-home .im-ambient{position:absolute;z-index:-1;inset:-130px -170px auto;height:780px;pointer-events:none;background:radial-gradient(ellipse at 27% 23%,#ffffffec 0%,#fffffff0 12%,#ffffff00 50%),radial-gradient(ellipse at 82% 28%,#dedfdb90 0%,#dedfdb00 54%),radial-gradient(ellipse at 67% 69%,#e9dbba75 0%,#e9dbba00 38%);opacity:var(--im-light-strength);transform:translate(var(--im-light-x,0px),var(--im-light-y,0px));transition:transform 600ms cubic-bezier(.16,1,.3,1);will-change:transform} .pearl-home .im-header{position:relative;background:#fdfdfb;border-bottom-color:#d4c6a7;box-shadow:0 1px 0 #fff;padding-top:22px;padding-bottom:22px} .pearl-home .im-nav button:after{background:var(--im-gold);height:2px} .pearl-home .im-nav button[aria-current="page"]{color:var(--im-ink)} .pearl-home .im-motion{background:var(--im-green);box-shadow:inset 0 0 0 1px #1b282426} .pearl-home .im-motion:before{background:#e4c998} .pearl-home .im-motion[aria-pressed="false"]{background:#969a96} .pearl-home .im-main{position:relative;padding-top:33px} .pearl-home .im-location{font-size:11px;letter-spacing:.035em;color:var(--im-muted)} .pearl-home .im-location i,.pearl-home .im-location svg{color:var(--im-brass)} .pearl-home .im-hero{gap:44px;margin-top:24px} .pearl-home .im-copy h1{letter-spacing:-.055em;font-weight:600;line-height:1.13;color:var(--im-ink)} .pearl-home .im-copy h1:before{content:'';display:block;width:49px;height:3px;margin-bottom:23px;background:linear-gradient(90deg,#98763c,#d8ab50 68%,#ead8ae)} .pearl-home .im-copy .im-lead{color:var(--im-muted);max-width:380px} .pearl-home .im-copy .im-context{color:var(--im-muted);max-width:345px;margin-top:20px} .pearl-home .im-copy .im-textlink{margin-top:3px;padding-bottom:7px;border-bottom:1px solid #c6a467;color:var(--im-ink)} .pearl-home .im-textlink svg{color:var(--im-brass)} .pearl-home .im-textlink svg{width:16px;height:16px;transition:transform 250ms} .pearl-home .im-textlink:hover svg{transform:translateX(4px)} .pearl-home .im-team{margin-top:27px;padding-top:19px;border-top:1px solid #d8d5ca;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:390px} .pearl-home .im-team-portraits{display:flex;gap:6px} .pearl-home .im-team button{height:44px;width:44px;padding:3px;border:1px solid #dbdad2;border-radius:9px;background:#f9f9f5;box-shadow:0 3px 8px #37362e0d;transition:transform 260ms cubic-bezier(.16,1,.3,1),border-color 200ms,background 200ms} .pearl-home .im-team button:hover{transform:translateY(-3px);border-color:#a58750} .pearl-home .im-team button[aria-pressed="true"]{border-color:#ad8c50;background:linear-gradient(135deg,#ecd9b0,#bd9858)} .pearl-home .im-team img{width:100%;height:100%;border-radius:5px;object-fit:cover;object-position:50% 0%;display:block} .pearl-home .im-team-caption{font-size:11px;line-height:1.7;color:var(--im-muted)} .pearl-home .im-team-caption strong{font-size:12px;font-weight:600;color:var(--im-ink);display:block} .pearl-home .im-deck{background:linear-gradient(135deg,#f7eddb 0%,#be9c60 30%,#ece0c8 55%,#b89b65 83%,#eee6d3 100%);border-radius:calc(var(--im-radius) + 4px);padding:4px;box-shadow:0 26px 48px rgb(47 46 35 / calc(.13 * var(--im-depth))),0 6px 18px rgb(45 50 46 / calc(.07 * var(--im-depth))),inset 0 1px 0 #fff5e2,inset 0 0 0 1px #ba9c6259} .pearl-home .im-deck:before{content:'';position:absolute;inset:1px;border-radius:calc(var(--im-radius) + 3px);border:1px solid #fff8e8bf;pointer-events:none;z-index:4} .pearl-home .im-panel{border:1px solid #d9d6cc;background:#fdfdfb;box-shadow:0 1px 0 #ffffffa6;isolation:isolate} .pearl-home .im-panel:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:linear-gradient(115deg,transparent 28%,#fff9e332 43%,#fffffff0 48%,#ffffff25 52%,transparent 62%);opacity:0;transform:translateX(-20%);transition:opacity 350ms,transform 900ms cubic-bezier(.16,1,.3,1);mix-blend-mode:soft-light} .pearl-home .im-deck:hover .im-panel:after{opacity:calc(.3 * var(--im-light-strength));transform:translateX(12%)} .pearl-home .im-portrait-area{height:303px;background:#dfdfd9} .pearl-home .im-portrait-area:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#ffffff0c 0%,transparent 65%,#31373112 100%);box-shadow:inset 0 1px 1px #ffffff91,inset 0 -1px 0 #8a755028} .pearl-home .im-portrait-label{top:17px;left:17px;font-size:11px;background:#fffdf7;border:1px solid #d0b57f;border-radius:5px;box-shadow:0 4px 12px #39372c10;color:#42483e;padding:8px 12px} .pearl-home .im-portrait-label:before{width:5px;height:5px;border-radius:1px;background:var(--im-gold)} .pearl-home .im-doctor-info{padding:20px 22px 19px;background:linear-gradient(175deg,#fff 0%,#f7f7f3 100%)} .pearl-home .im-name{font-size:19px;font-weight:600;letter-spacing:-.025em} .pearl-home .im-qualification{font-size:11px;color:var(--im-muted);line-height:1.75} .pearl-home .im-booking-row{border-top-color:#d7cfbd;padding-top:16px;margin-top:18px} .pearl-home .im-price-label{font-size:11px;color:var(--im-muted);margin-bottom:2px} .pearl-home .im-price{font-size:25px;color:var(--im-ink);font-weight:550} .pearl-home .im-action{position:relative;background:linear-gradient(115deg,#e4c88f 0%,#ddbf83 35%,#ccaa68 72%,#dab97d 100%);color:#30362e;border:1px solid #b89451;box-shadow:0 5px 13px rgb(93 72 34 / calc(.16 * var(--im-depth))),inset 0 1px 0 #fff7d89c,inset 0 -1px 0 #8b6d3747;border-radius:8px;min-height:47px;font-weight:650} .pearl-home .im-action:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#fffbed61 42%,#ffffff14 52%,transparent 70%);transform:translateX(-110%);transition:transform 650ms cubic-bezier(.16,1,.3,1)} .pearl-home .im-action:hover:before{transform:translateX(110%)} .pearl-home .im-action:active{box-shadow:0 2px 6px #5441251a,inset 0 2px 4px #77603f24;scale:.975} .pearl-home .im-action .im-disc{background:var(--im-green);border:1px solid #0b29244d;color:#f0dcb2} .pearl-home .im-action .im-disc svg{width:16px;height:16px} .pearl-home .im-action:hover .im-disc{background:var(--im-green-deep);border-color:var(--im-green-deep);color:#fff3d9} .pearl-home .im-directions{margin-top:29px;padding:6px;gap:3px;border:1px solid #d8d4c9;background:linear-gradient(180deg,#fff,#eeeee8);box-shadow:inset 0 1px 0 #fff,0 6px 16px #363d3209;border-radius:10px} .pearl-home .im-direction{min-height:47px;font-size:12px;color:#5c645e;border-radius:6px} .pearl-home .im-direction[aria-pressed="true"]{color:#fffdf6} .pearl-home .im-indicator{background:linear-gradient(135deg,var(--im-green-light),var(--im-green));box-shadow:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #d8ab50,0 3px 7px #0b29241c;border:1px solid #2d5447;border-radius:6px} .pearl-home .im-bottom{position:relative;border:1px solid #dedbd2;border-radius:10px;background:linear-gradient(135deg,#fff,#f9f8f3);padding:26px 25px;margin-top:28px;box-shadow:inset 0 1px 0 #fff,0 7px 25px #302b2005;gap:38px} .pearl-home .im-bottom:before{content:'';position:absolute;top:-1px;left:25px;width:56px;height:2px;background:var(--im-gold)} .pearl-home .im-bottom h2{font-size:25px;color:var(--im-ink)} .pearl-home .im-bottom p{color:var(--im-muted)} .pearl-home .im-secondary-heading{font-size:12px;color:#656b63} .pearl-home .im-visit i,.pearl-home .im-visit svg{color:var(--im-brass)} .pearl-home .im-visit p{font-size:12px;color:var(--im-muted)} .pearl-home .im-costs div{font-size:12px} .pearl-home .im-clinic{margin-top:27px;display:grid;grid-template-columns:1.35fr 1fr;min-height:233px;border:1px solid #d2c8b2;border-radius:12px;overflow:clip;background:#f5f3ed;box-shadow:0 12px 28px rgb(44 41 29 / calc(.09 * var(--im-depth))),inset 0 1px 0 #ffffffc4} .pearl-home .im-clinic-photo{position:relative;overflow:clip;min-height:233px} .pearl-home .im-clinic-photo img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:50% 48%;display:block;transform:scale(1.015);transition:transform 1.2s cubic-bezier(.16,1,.3,1)} .pearl-home .im-clinic:hover .im-clinic-photo img{transform:scale(1.065)} .pearl-home .im-clinic-photo:after{content:'';position:absolute;inset:0;box-shadow:inset -1px 0 0 #c6a467;background:linear-gradient(90deg,transparent 80%,#30372e12);pointer-events:none} .pearl-home .im-clinic-info{position:relative;padding:26px 26px 25px;min-width:0;color:var(--im-ink);background:linear-gradient(125deg,#fdfcf8,#eeece4);border-left:2px solid #c6a467} .pearl-home .im-clinic-caption{font-size:11px;color:var(--im-muted);display:flex;gap:8px;align-items:center;margin-bottom:14px} .pearl-home .im-clinic-caption i,.pearl-home .im-clinic-caption svg{width:14px;height:14px;color:var(--im-brass)} .pearl-home .im-clinic-info h2{font-size:26px;line-height:1.25;font-weight:550;letter-spacing:-.035em} .pearl-home .im-clinic-info p{font-size:11px;color:var(--im-muted);line-height:1.8;margin-top:12px} .pearl-home .im-clinic-details{margin-top:15px;padding-top:12px;border-top:1px solid #c9b997;font-size:11px;color:#485248} .pearl-home .im-clinic-details summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:4px 0;min-height:32px;list-style:none} .pearl-home .im-clinic-details summary::-webkit-details-marker{display:none} .pearl-home .im-clinic-details summary i,.pearl-home .im-clinic-details summary svg{width:14px;height:14px;transition:transform 260ms;color:var(--im-brass)} .pearl-home .im-clinic-details[open] summary i,.pearl-home .im-clinic-details[open] summary svg{transform:rotate(180deg)} .pearl-home .im-clinic-details a{display:block;color:var(--im-green);text-decoration:none;margin-top:12px;font-size:13px;font-weight:600} .pearl-home .im-clinic-details p{font-size:11px;line-height:1.8;margin-top:5px} .pearl-home .im-sheet{background:linear-gradient(145deg,#fcfcf9 0%,#fff 60%,#f5f1e7 100%)} .pearl-home .im-sheet-top{padding-bottom:14px;border-bottom:1px solid #ccba95;margin-bottom:22px;color:var(--im-muted)} .pearl-home .im-form-description{color:var(--im-muted)} .pearl-home .im-field{font-size:12px;color:var(--im-muted)} .pearl-home .im-field input{border-color:#d0cdc1;background:#fff;box-shadow:inset 0 1px 3px #39342506,0 1px 0 #fff;min-height:45px;border-radius:6px} .pearl-home .im-consent,.pearl-home .im-demo-note{font-size:11px;color:var(--im-muted)} .pearl-home .im-footer{border-top-color:#d4c6a8;background:#eeeee8;font-size:11px;color:#666b62} .pearl-home.im-static .im-ambient,.pearl-home.im-static .im-clinic-photo img{transform:none!important} .pearl-home.im-static .im-panel:after,.pearl-home.im-static .im-action:before{display:none} .pearl-home.im-static .im-team button:hover{transform:none} .pearl-home.im-static .im-textlink:hover svg{transform:none} @media(max-width:830px){.pearl-home .im-header{padding-left:24px;padding-right:24px;gap:20px} .pearl-home .im-hero{gap:29px} .pearl-home .im-bottom{gap:27px;padding:23px 21px} .pearl-home .im-clinic-info{padding:24px 22px} .pearl-home .im-clinic-info h2{font-size:24px}} @media(max-width:640px){.pearl-home .im-header{padding:19px 20px;gap:15px} .pearl-home .im-nav{gap:11px} .pearl-home .im-nav button{font-size:11px;min-height:42px} .pearl-home .im-main{padding:25px 19px 24px} .pearl-home .im-hero{gap:25px;margin-top:20px} .pearl-home .im-copy h1:before{margin-bottom:20px;width:42px} .pearl-home .im-team{margin-top:22px;padding-top:17px;gap:11px} .pearl-home .im-team-caption{font-size:11px} .pearl-home .im-team-caption strong{font-size:11px} .pearl-home .im-deck{padding:4px} .pearl-home .im-portrait-area{height:280px} .pearl-home .im-doctor-info{padding:18px 18px} .pearl-home .im-name{font-size:17px} .pearl-home .im-price{font-size:23px} .pearl-home .im-booking-row{gap:8px;flex-wrap:wrap} .pearl-home .im-action{padding-left:14px;font-size:12px} .pearl-home .im-directions{margin-top:23px;padding:5px} .pearl-home .im-direction{font-size:11px} .pearl-home .im-bottom{padding:21px 18px;gap:23px;border-radius:10px;margin-top:24px} .pearl-home .im-bottom:before{left:18px} .pearl-home .im-bottom h2{font-size:23px} .pearl-home .im-clinic{grid-template-columns:minmax(0,1fr);border-radius:10px;margin-top:24px} .pearl-home .im-clinic-photo{height:205px;min-height:205px} .pearl-home .im-clinic-info{padding:24px 23px;border-left:0;border-top:2px solid #c6a467} .pearl-home .im-clinic-info h2{font-size:28px} .pearl-home .im-clinic-info p,.pearl-home .im-clinic-details,.pearl-home .im-clinic-details p{font-size:12px} .pearl-home .im-clinic-photo:after{background:linear-gradient(180deg,transparent 80%,#30372e12)} .pearl-home .im-sheet{padding:23px 19px} .pearl-home .im-consent,.pearl-home .im-demo-note{font-size:11px} .pearl-home .im-footer{padding:17px 19px;font-size:11px}} @media(prefers-reduced-motion:reduce){.pearl-home .im-ambient,.pearl-home .im-clinic-photo img{transform:none!important} .pearl-home .im-panel:after,.pearl-home .im-action:before{display:none}} :root, :root[data-theme=light]{--bg:#f8f8f5;--surface:#fdfdfb;--surface-2:#efefeb;--text:#303735;--muted:#626864;--primary:#123831;--primary-700:#0b2924;--accent:#f2ede2;--accent-2:#f0f0ea;--border:#dddcd5;--gold:#d8ab50;--gold-soft:#e9d7ae;--service-surface:#f6f6f2;--directions-wave-bg:#f6f6f2;--control-radius:9px;--radius-lg:16px;--radius-md:12px;--control-border:#d3d1c8;--control-bg:#fdfdfb;--control-bg-hover:#f1efe8;--control-text:#303735;--control-shadow:0 4px 12px #30373508;--focus-ring:#9d7b41;--shadow:0 14px 34px #383b3010;--header-bg:#fdfdfb;--header-border:#d4c6a7;--header-nav-link:#626864;--header-nav-link-active:#123831;--dropdown-bg:#fdfdfb;--dropdown-border:#d8d5ca;--dropdown-link-bg:#fdfdfb;--dropdown-link-hover-bg:#f2efe7;--dropdown-link-active-bg:#f2ede2;--dropdown-link-border:#e5e1d7;--dropdown-link-text:#303735;--dropdown-link-hover-border:#bd9b60;--dropdown-link-active-border:#bd9b60;--section-alt-bg:#f0f0eb;--bg-radial-left:#fafaf8;--bg-radial-right:#f6f6f3} html{scroll-padding-top:110px} body.pearl-site{font-family:var(--font-sans);background:var(--bg);color:var(--text)} .pearl-site .container{max-width:1240px;width:calc(100% - 96px)} .pearl-site h1,.pearl-site h2,.pearl-site h3{font-family:var(--font-sans);color:var(--text);font-weight:600;letter-spacing:-.04em;text-wrap:balance} .pearl-site h1{font-size:clamp(34px,4.1vw,58px);line-height:1.12} .pearl-site h2{font-size:clamp(26px,2.5vw,36px);line-height:1.22} .pearl-site h3{font-size:21px;line-height:1.35;letter-spacing:-.025em} .pearl-site p{line-height:1.75} .pearl-site .section{padding:60px 0} .pearl-site .section-heading{margin-bottom:30px} .pearl-site .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b6e39;font-weight:600;margin-bottom:20px} .pearl-site .card{border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:none} .pearl-site .card:hover{box-shadow:0 12px 25px #31362909} .pearl-site :is(.btn,.header-book-btn){font:600 13px/1.4 var(--font-sans);min-height:46px;border-radius:9px;padding:13px 20px;box-shadow:none;transition:background .2s,box-shadow .2s,transform .25s;letter-spacing:0} .pearl-site .btn-primary{background:var(--primary);border:1px solid var(--primary);color:#fff} .pearl-site .btn-primary:hover{background:var(--primary-700);box-shadow:0 8px 20px #12383120;transform:translateY(-2px)} .pearl-site :is(.btn-gold,.header-book-btn){background:linear-gradient(115deg,#e4c88f,#ddbf83 45%,#ccaa68 85%,#dab97d);border:1px solid #c4a368;color:#30362e;box-shadow:inset 0 1px 0 #fff7df} .pearl-site :is(.btn-gold,.header-book-btn):hover{box-shadow:inset 0 1px 0 #fff7df,0 8px 18px #9d7b4129;transform:translateY(-2px)} .pearl-site .btn-light{background:var(--surface);border:1px solid var(--border);color:var(--text)} .pearl-site a:focus-visible,.pearl-site button:focus-visible,.pearl-site input:focus-visible,.pearl-site select:focus-visible{outline:2px solid #96753d;outline-offset:4px} .pearl-site .site-header{background:var(--surface);border-bottom:1px solid #d4c6a7;box-shadow:0 1px 0 #fff;backdrop-filter:none;position:sticky;top:0;z-index:50} .pearl-site .header-inner{min-height:92px;gap:26px;padding:14px 0} .pearl-site .brand{flex:0 0 auto} .pearl-site .brand-logo{width:154px;height:48px;max-height:none;object-fit:contain} .pearl-site .main-nav{gap:15px;margin-left:auto} .pearl-site .nav-link{font-size:12px;font-weight:550;padding:9px 0;border-radius:0;gap:5px;background:transparent;color:var(--muted);border:0;box-shadow:none;white-space:nowrap} .pearl-site .nav-link.active{color:var(--primary);background:transparent;box-shadow:0 2px 0 #c4a15f} .pearl-site .nav-link>.ms-icon:not(.nav-dropdown-chevron){display:none} .pearl-site .nav-link-home{display:none} .pearl-site .header-cta{gap:9px} .pearl-site .phone-card{background:transparent;border:0;box-shadow:none;padding:8px 0;gap:6px} .pearl-site .phone-card-icon,.pearl-site .phone-card-label{display:none} .pearl-site .phone-card-number{font-size:12px;white-space:nowrap;color:var(--text)} .pearl-site .phone-card-caret{font-size:16px} .pearl-motion-toggle{background:transparent;border:0;color:#8b6e39;display:grid;place-items:center;padding:5px;cursor:pointer} .pearl-motion-toggle[aria-pressed=false]{color:var(--muted);opacity:.65} .pearl-site .header-contact-panel{border:1px solid #d4c6a7;box-shadow:0 18px 40px #30373518;border-radius:14px;background:var(--surface)} .pearl-site .header-contact-agent{display:none} .pearl-site .header-contact-item{background:var(--surface);border-color:var(--border);color:var(--text)} .pearl-site .nav-dropdown-menu{border-radius:12px;box-shadow:0 18px 35px #30373514} .pearl-site .nav-dropdown-link{border-radius:7px} .skip-link{position:fixed;top:-80px;left:20px;background:var(--primary);color:white;z-index:999;padding:15px} .skip-link:focus{top:12px} .pearl-site .pearl-crumbs{padding-top:22px} .pearl-site .breadcrumbs{font-size:11px;margin:0} .pearl-site .breadcrumbs ol{gap:9px} .pearl-site .pearl-service-hero{background:linear-gradient(115deg,#fafaf8,#f6f6f3 55%,#eeece5);padding:42px 0 58px;border-bottom:1px solid var(--border)} .pearl-service-grid{display:grid;grid-template-columns:1fr .92fr;gap:62px;align-items:center} .pearl-service-copy h1{margin:0 0 24px} .pearl-service-lead{font-size:16px;color:var(--muted);max-width:540px} .pearl-service-media{padding:4px;background:linear-gradient(135deg,#f7eddb,#be9c60 30%,#ece0c8 55%,#b89b65 83%,#eee6d3);border-radius:18px;box-shadow:0 20px 35px #37362e12} .pearl-service-media :is(img,video){width:100%;aspect-ratio:1.25;object-fit:cover;display:block;border-radius:14px;background:var(--surface-2)} .pearl-hero-points{list-style:none;display:grid;gap:10px;padding:0;margin:28px 0 0;font-size:11px;line-height:1.6;color:var(--muted)} .pearl-hero-points li{display:flex;gap:10px;align-items:flex-start} .pearl-hero-points .ms-icon{font-size:15px;color:#9d7b41;flex-shrink:0;margin-top:2px} .pearl-site .pearl-home .container{padding:34px 0 42px} .pearl-home .im-hero{grid-template-columns:1.08fr 1fr;gap:70px} .pearl-home .im-copy h1{max-width:600px!important;font-size:clamp(34px,3.95vw,54px);line-height:1.12} .pearl-home .im-copy .im-lead{max-width:520px!important;font-size:14px} .pearl-home .im-name{font-size:19px} .pearl-home .im-name a{color:inherit;text-decoration:none} .pearl-home .im-qualification{font-size:12px} .pearl-home .im-location{flex-wrap:wrap} .im-location-separator{color:#c4a368;padding:0 8px} .pearl-home .im-portrait-area{height:330px} .pearl-home .im-team-caption{text-decoration:none} .pearl-home .im-team-caption .ms-icon{font-size:14px} .pearl-home .im-portrait-label{max-width:90%;line-height:1.5} .pearl-home .im-portrait-label:before{flex-shrink:0} .pearl-home .im-action{text-decoration:none!important;min-width:208px;color:#30362e!important} .pearl-home .im-action .im-disc .ms-icon{font-size:17px} .pearl-home .im-action:hover .im-disc{color:var(--primary)!important} .pearl-price-detail{font-size:10px;display:block;margin-top:4px;color:var(--muted)} .pearl-home .im-textlink .ms-icon{font-size:17px} .pearl-home .im-direction[aria-pressed=true]{background:linear-gradient(125deg,#1e4a40,#123831);box-shadow:inset 0 -2px 0 #d8ab50} .pearl-home .im-directions{margin-top:36px!important} .pearl-home .im-topic-list a{font-size:12px;line-height:1.5;color:var(--text);border-bottom:1px solid #c6a467;padding:4px 0} .pearl-home .im-bottom{min-height:160px} .pearl-home .im-panel{min-height:0!important} .pearl-home .im-deck{min-height:0!important;align-self:center!important} .pearl-home .im-location .ms-icon{font-size:16px;color:#9d7b41} .pearl-site .directions-section{background:var(--surface);border-top:1px solid var(--border);padding:30px 0 48px} .pearl-site .directions-section:before,.pearl-site .directions-section:after,.pearl-site .home-wave-section:before,.pearl-site .home-wave-section:after{display:none} .pearl-site .directions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .pearl-site .direction-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible} .pearl-site .direction-card:hover{transform:none;box-shadow:none} .pearl-site .direction-media{position:relative;width:100%;height:auto;aspect-ratio:1.65;border-radius:10px;overflow:hidden;opacity:1;filter:none;display:none} .pearl-site .direction-media video{width:100%;height:100%;object-fit:cover} .pearl-site .direction-body{padding:16px 0 0} .pearl-site .direction-heading{gap:8px;align-items:center;border-top:1px solid #d2bf97;padding-top:18px} .pearl-site .direction-heading h2{font-size:16px;letter-spacing:-.02em} .pearl-site .direction-icon{width:26px;height:26px;background:transparent;box-shadow:none;padding:0;border:0;color:#9d7b41} .pearl-site .direction-icon svg{width:24px;height:24px} .pearl-site .direction-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .pearl-site .direction-chip{padding:4px 0;margin-right:10px;background:transparent;color:var(--muted);border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;font-size:11px;line-height:1.55} .pearl-site .direction-chip:hover{color:var(--primary);border-color:#9d7b41;transform:none} .pearl-site .home-wave-section{background:var(--bg);isolation:auto} .pearl-site .home-health-check-card{background:var(--surface);border:1px solid #d4c6a7;border-left:4px solid #bd9b60;border-radius:14px;padding:34px 38px;box-shadow:0 14px 30px #363c3010} .pearl-site .home-health-check-kicker{color:#8b6e39;font-size:11px} .pearl-site .home-health-check-card h2{font-size:30px} .pearl-site .home-health-check-card p,.pearl-site .home-health-check-card li{color:var(--muted);font-size:13px} .pearl-site .home-about-section{background:var(--surface);border-block:1px solid var(--border)} .pearl-site .home-section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;text-align:left;margin-bottom:42px} .pearl-site .home-section-head h2{text-transform:none;font-size:32px;text-align:left} .pearl-site .home-about-lead{font-size:15px;text-align:left;max-width:none;margin:0;color:var(--muted)} .pearl-site .home-about-features{gap:25px} .pearl-site .home-about-feature{padding:24px 0;border:0;border-top:1px solid #d4c6a7;border-radius:0;background:transparent;text-align:left} .pearl-site .home-about-feature-icon-box{width:60px;height:60px;margin:0 0 22px;background:transparent;box-shadow:none;border:0} .pearl-site .home-about-feature-icon-box img{width:54px;height:54px} .pearl-site .home-about-feature h3{font-size:17px} .pearl-site .home-about-feature p{font-size:12px;color:var(--muted)} .pearl-site .home-slogan-section{background:var(--primary);border:0} .pearl-site .home-slogan-wrap{padding:0;display:flex;justify-content:space-between;align-items:center;gap:50px;background:none;box-shadow:none;border:0} .pearl-site .home-slogan-wrap h2{color:#fafaf5;max-width:790px;font-size:34px;text-align:left} .pearl-site .home-slogan-wrap h2 span{color:#ddbf83} .pearl-site .home-slogan-wrap .btn{background:linear-gradient(115deg,#e4c88f,#ccaa68);border-color:#c4a368;color:#30362e;flex-shrink:0} .pearl-site .home-principles-section{background:var(--surface)} .pearl-site .home-principle-card{background:transparent;border:0;border-top:1px solid #d4c6a7;border-radius:0;box-shadow:none;padding:24px 0} .pearl-site .home-principle-card h3{font-size:20px} .pearl-site .home-principle-card p{color:var(--muted);font-size:13px} .pearl-site .home-principle-num{color:#9d7b41;font-size:14px} .pearl-site .doctors-grid{gap:24px} .pearl-site .doctor-card-modern{overflow:hidden;border-radius:14px;border-color:#d4c6a7;padding:0;background:var(--surface);box-shadow:none} .pearl-site .doctor-photo-wrap{height:280px;aspect-ratio:auto;border:0;border-radius:0;background:#e5e4dc;overflow:hidden;display:block} .pearl-site .doctor-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:transform .6s cubic-bezier(.16,1,.3,1);border-radius:0} .pearl-site .doctor-card:hover .doctor-photo-wrap img{transform:scale(1.035)} .pearl-site .doctor-card-body{padding:22px} .pearl-site .doctor-card-body h3{font-size:20px;line-height:1.35} .pearl-site .doctor-card-role{font-size:10px;letter-spacing:.07em;color:#8b6e39;text-transform:uppercase} .pearl-site .doctor-card-degree{font-size:11px;color:var(--muted)} .pearl-site .doctor-card-bio{font-size:12px;color:var(--muted)} .pearl-site .doctor-card-tags li{background:var(--surface-2);border-color:var(--border);color:var(--muted);font-size:10px;border-radius:4px} .pearl-site .doctor-card-footer{padding:16px 22px;border-top:1px solid var(--border);background:transparent} .pearl-site .doctor-card-exp{font-size:11px} .pearl-site .doctor-card-link{font-size:11px;min-height:40px;padding:10px 12px} .pearl-site .doctor-photo-wrap-horizontal{height:100%;min-height:280px} .pearl-site .doctor-profile-modern{border:1px solid #d4c6a7;background:var(--surface);box-shadow:0 20px 35px #30373509;border-radius:16px} .pearl-site .doctor-profile-photo img{border-radius:12px} .pearl-site .doctor-profile h1{font-size:clamp(32px,3.7vw,50px)} .pearl-site .doctor-stat-card,.pearl-site .doctor-detail-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:none} .pearl-site :is(.service-topics-card,.service-info-card,.service-clinical-card,.what-we-treat-card,.our-services-card,.about-story-card,.about-why-card,.about-principle-card,.article-card,.questionnaire-card,.patient-doc-card,.patient-control-card,.legal-doc-card,.legal-side-card,.contact-block,.appointment-aside,.hc-result-card){background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:none} .pearl-site :is(.service-topics-section,.service-info-section,.service-clinical-section,.what-we-treat-section,.our-services-section,.service-questionnaires-section){background:var(--bg)} .pearl-site .service-topic,.pearl-site .service-questionnaire-card{border-color:var(--border);background:var(--surface)} .pearl-site .what-we-treat-grid{gap:24px} .pearl-site .what-we-treat-group{border-color:var(--border);background:var(--surface);box-shadow:none} .pearl-site .what-we-treat-group h3{font-size:18px} .pearl-site :is(.article-page-header,.legal-page-head,.doctors-intro-card,.health-check-hero,.questionnaire-hero){background:var(--surface);border-color:#d4c6a7;border-radius:14px;box-shadow:none} .pearl-site :is(.article-rich-content,.prose){color:var(--text);font-size:16px;line-height:1.85} .pearl-site .article-page-cover{border-radius:14px;overflow:hidden} .pearl-site .article-card{overflow:hidden} .pearl-site .article-card h3{font-size:22px} .pearl-site .article-card-media img{transition:transform .6s} .pearl-site .article-card:hover .article-card-media img{transform:scale(1.035)} .pearl-site .article-card-chip{color:#614b22;background:#f2e6cc;border-color:#d4c6a7} .pearl-site .article-tool{background:var(--surface);border:1px solid #d4c6a7;border-radius:14px} .pearl-site .article-tool-question,.pearl-site .hc-option,.pearl-site .questionnaire-option{border-color:var(--border);background:var(--surface)} .pearl-site .health-check-shell,.pearl-site .questionnaire-shell{max-width:1000px} .pearl-site .health-check-form,.pearl-site .questionnaire-form{background:var(--surface);border-color:var(--border);border-radius:14px} .pearl-site .faq-item{background:var(--surface);border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:18px 0} .pearl-site .faq-item summary{font-size:17px;font-weight:550} .pearl-site .faq-item p{font-size:14px} .pearl-site .table-wrap{border-radius:12px;border:1px solid var(--border);box-shadow:none} .pearl-site table th{background:var(--primary);color:#fff;font-weight:500} .pearl-site table td{border-color:var(--border);padding-top:18px;padding-bottom:18px} .pearl-site tr:nth-child(even) td{background:#f2f2ed} .pearl-site .price-filters .btn{border-radius:6px;font-size:12px} .pearl-site .price-filters .active{background:var(--primary);color:#fff} .pearl-site .cta-section{background:var(--surface-2);border-block:1px solid var(--border)} .pearl-site .cta-card{border:1px solid #d4c6a7;background:var(--surface);box-shadow:none} .pearl-site .about-story-card-media{overflow:hidden;border-radius:14px} .pearl-site .about-story-card-media img{width:100%;height:100%;object-fit:cover} .pearl-site .about-team-photo{border-radius:14px} .pearl-site .about-why-grid{gap:24px} .pearl-site .about-principles-grid{gap:24px} .pearl-site .legal-body{font-size:15px;line-height:1.85} .pearl-site :is(input,select,textarea){accent-color:var(--primary)} .pearl-site :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--control-border);border-radius:8px;background:var(--surface);color:var(--text)} .pearl-site .appointment-form-card{border:1px solid #d4c6a7;background:var(--surface);box-shadow:0 20px 40px #3037350a} .pearl-site .appointment-field-label{font-size:12px} .pearl-site .custom-select-trigger{background:var(--surface);border-color:var(--border)} .pearl-site .site-footer{background:var(--surface-2);border-top:1px solid #d4c6a7;color:var(--text)} .pearl-site .site-footer a{color:var(--text)} .pearl-site .footer-bottom{border-color:var(--border);color:var(--muted)} .pearl-site .footer-brand p{color:var(--muted)} .pearl-site .footer-links a:hover{color:#8b6e39} .pearl-site .cookie-consent{background:var(--surface);border:1px solid #d4c6a7;box-shadow:0 12px 40px #30373516;border-radius:12px} .pearl-site .sticky-mobile-cta{background:var(--surface);border-top:1px solid #d4c6a7;backdrop-filter:none} .pearl-book-dialog{width:min(610px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:30px;border:3px solid #c4a368;border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 30px 80px #132b2940;overflow:auto} .pearl-book-dialog::backdrop{background:#14282075;backdrop-filter:blur(5px)} .pearl-dialog-open{overflow:hidden} .pearl-dialog-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:15px;margin-bottom:20px} .pearl-dialog-top button{border:1px solid var(--border);border-radius:50%;width:34px;height:34px;background:var(--surface);color:var(--text);cursor:pointer} .pearl-book-dialog h2{font-size:30px;margin:0} .pearl-book-dialog>.muted{font-size:13px;margin:12px 0 20px} .pearl-preview-note{background:#f4ecd9;border:1px solid #d4c6a7;padding:10px 13px;border-radius:8px;font-size:11px;line-height:1.6;color:#614b22} .pearl-quick-form{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pearl-quick-form>label:not(.pearl-consent){display:grid;gap:6px;font-size:11px;color:var(--muted)} .pearl-quick-form :is(input:not([type=checkbox]),select,textarea){width:100%;min-height:44px;padding:10px 12px;font:14px var(--font-sans);border:1px solid var(--border)} .pearl-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important} .pearl-form-more{grid-column:1/-1;font-size:12px} .pearl-form-more summary{cursor:pointer;padding:5px 0;color:var(--primary)} .pearl-form-more label{display:grid;gap:7px;margin:12px 0} .pearl-consent{display:flex;align-items:flex-start;gap:10px;grid-column:1/-1;font-size:10px;line-height:1.7;color:var(--muted)} .pearl-consent input{margin:3px 0 0;flex-shrink:0;width:16px;height:16px} .pearl-consent a{color:inherit;text-decoration:underline} .pearl-submit{grid-column:1/-1} .pearl-submit:disabled{opacity:.65;cursor:wait} :root[data-theme=dark]{--bg:#192520;--surface:#22322b;--surface-2:#2a3b31;--text:#eceee6;--muted:#bfc6bb;--border:#425147;--primary:#a7c6b7;--primary-700:#bed5c9;--control-bg:#22322b;--control-border:#526156;--control-text:#eceee6;--service-surface:#192520;--directions-wave-bg:#192520} [data-theme=dark] .pearl-site :is(.pearl-home,.pearl-service-hero){background:#192520} [data-theme=dark] .pearl-home{--im-ink:#eceee6;--im-muted:#bfc6bb;--im-line:#425147;--im-sheet-surface:#22322b} [data-theme=dark] .pearl-home .im-panel,[data-theme=dark] .pearl-home .im-directions{background:#22322b} [data-theme=dark] .pearl-home .im-copy h1,[data-theme=dark] .pearl-home .im-name,[data-theme=dark] .pearl-home .im-price{color:#eceee6} [data-theme=dark] .pearl-home .im-ambient{display:none} [data-theme=dark] .pearl-site .btn-primary{background:#123831;color:#fff} [data-theme=dark] .pearl-site table td{background:var(--surface)} [hidden]{display:none!important} .motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .motion-off [data-motion-card]{transform:none!important} @media(max-width:1150px){.pearl-site .container{width:calc(100% - 56px)} .pearl-site .header-inner{gap:16px} .pearl-site .main-nav{gap:12px} .pearl-site .brand-logo{width:135px} .pearl-home .im-hero{gap:36px} .pearl-home .im-action{min-width:185px;font-size:11px} .pearl-site .doctor-card-footer{flex-wrap:wrap} .pearl-site .doctors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.pearl-site .main-nav{display:none} .pearl-site .header-cta{margin-left:auto} .pearl-site .mobile-menu{display:block} .pearl-site .header-inner{min-height:76px} .pearl-home .im-hero{gap:26px;grid-template-columns:1fr 1fr} .pearl-home .im-copy h1{font-size:36px} .pearl-home .im-portrait-area{height:290px} .pearl-home .im-booking-row{flex-wrap:wrap} .pearl-home .im-action{width:100%} .pearl-site .directions-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pearl-site .home-section-head{grid-template-columns:1fr;gap:20px} .pearl-service-grid{gap:30px} .pearl-site .home-slogan-wrap{flex-direction:column;align-items:flex-start;gap:24px} .pearl-site .home-slogan-wrap h2{font-size:30px} .pearl-site .home-health-check-card{padding:28px}} @media(max-width:640px){.pearl-site .container{width:calc(100% - 40px)} .pearl-site .section{padding:38px 0} .pearl-site h1{font-size:36px} .pearl-site h2{font-size:28px} .pearl-site .header-inner{gap:10px;min-height:70px;padding:10px 0} .pearl-site .brand-logo{width:128px;height:40px} .pearl-site .header-cta{gap:5px} .pearl-site .phone-card-number{font-size:10px} .pearl-site .phone-card-caret{display:none} .pearl-motion-toggle{padding:3px} .pearl-site .pearl-home .container{padding:25px 0 28px} .pearl-home .im-hero{grid-template-columns:1fr;gap:28px} .pearl-home .im-copy h1{font-size:clamp(33px,8.7vw,44px);max-width:500px!important} .pearl-home .im-location{font-size:9px} .pearl-home .im-location-separator{display:none} .pearl-home .im-location span:last-child{width:100%;padding-left:24px} .pearl-home .im-portrait-area{height:320px} .pearl-home .im-booking-row{flex-wrap:nowrap} .pearl-home .im-action{min-width:0;width:auto;gap:8px;font-size:10px} .pearl-home .im-team{margin-top:22px!important} .pearl-home .im-price{font-size:21px} .pearl-home .im-direction{font-size:10px} .pearl-home .im-bottom{min-height:0;gap:20px} .pearl-site .directions-grid{gap:20px 14px} .pearl-site .direction-heading h2{font-size:13px} .pearl-site .direction-icon{width:21px;height:21px} .pearl-site .direction-chip{font-size:10px} .pearl-site .home-about-features{grid-template-columns:1fr 1fr;gap:20px} .pearl-site .home-about-feature h3{font-size:15px} .pearl-site .home-health-check-card{padding:24px 20px} .pearl-site .home-health-check-card h2{font-size:26px} .pearl-site .home-slogan-wrap h2{font-size:26px} .pearl-site .doctors-grid{grid-template-columns:1fr;gap:24px} .pearl-site .doctor-photo-wrap{height:340px} .pearl-site .doctor-card-body h3{font-size:24px} .pearl-site .doctor-card-horizontal{display:flex;flex-direction:column} .pearl-site .doctor-photo-wrap-horizontal{height:320px} .pearl-service-grid{grid-template-columns:1fr;gap:30px} .pearl-site .pearl-service-hero{padding:28px 0 38px} .pearl-service-media :is(img,video){aspect-ratio:1.5} .pearl-service-lead{font-size:14px} .pearl-hero-points{font-size:10px;gap:8px} .pearl-book-dialog{padding:22px 18px;max-height:calc(100dvh - 24px)} .pearl-book-dialog h2{font-size:27px} .pearl-quick-form{gap:14px} .pearl-quick-form :is(input:not([type=checkbox]),select,textarea){font-size:16px;padding:10px 8px} .pearl-quick-form>label:nth-of-type(3),.pearl-quick-form>label:nth-of-type(4){grid-column:1/-1} .pearl-site :is(.article-rich-content,.prose){font-size:15px} .pearl-site .table-wrap{overflow-x:auto} .pearl-site table td{font-size:12px} .pearl-site .header-contact-panel{right:-40px;width:min(330px,calc(100vw - 32px))}} @media(max-width:370px){.pearl-site .container{width:calc(100% - 28px)} .pearl-site .brand-logo{width:110px} .pearl-site .phone-card-number{font-size:9px} .pearl-home .im-booking-row{flex-wrap:wrap} .pearl-home .im-action{width:100%} .pearl-site .home-about-features{grid-template-columns:1fr} .pearl-site .direction-icon{display:none} .pearl-quick-form{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} [data-motion-card]{transform:none!important}} .pearl-site .directions-grid{margin-top:0} .pearl-site .direction-body{background:transparent} .pearl-site .cookie-consent{background:transparent;border:0;box-shadow:none} .pearl-site .cookie-consent__panel{width:min(530px,100%);margin-left:auto;margin-right:0;border-radius:12px;border-color:#d4c6a7;background:var(--surface);padding:20px;backdrop-filter:none;box-shadow:0 12px 35px #30373518} .pearl-site .cookie-consent__title{font-size:17px} .pearl-site .cookie-consent__text{font-size:12px;margin-top:8px} .pearl-site .cookie-consent__links{font-size:10px} .pearl-site .cookie-consent__actions .btn{font-size:11px;padding:10px 14px;min-height:39px} .pearl-site .nav-link>.icon-inline{display:none} .pearl-site .home-section-head:has(>h2:only-child){display:block} .pearl-site .home-principles-grid{gap:32px} .pearl-site .home-review-platform,.pearl-site .home-review-doctor{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:none} .pearl-site .home-reviews-section{background:var(--surface-2)} .pearl-site .home-reviews-section .home-section-head h2,.pearl-site .home-reviews-section .home-section-head p{color:var(--text)} .pearl-site .home-review-platform h3,.pearl-site .home-review-doctor h4{color:var(--text)} .pearl-site .home-review-platform p,.pearl-site .home-review-doctor p{color:var(--muted)} .pearl-place{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid #d4c6a7;border-radius:16px;overflow:hidden;background:var(--surface)} .pearl-place>img{width:100%;height:100%;object-fit:cover;min-height:330px} .pearl-place .contact-block{border:0!important;border-left:4px solid #c4a368!important;border-radius:0!important;padding:35px!important;background:var(--surface)!important} .pearl-place .contact-block h2{font-size:30px} .pearl-place .contact-block p{font-size:13px} .pearl-page-intro{padding:42px 0 0} .pearl-page-intro h1{margin:0} .pearl-site .doctors-cta-lift{margin-top:0} .pearl-site .appointment-hero-card{background:var(--surface);border:1px solid #d4c6a7;box-shadow:none} .pearl-site .appointment-hero-stat{background:var(--surface-2);border-color:var(--border)} .pearl-site .appointment-hero-stat strong{color:var(--primary)} @media(max-width:640px){.pearl-place{grid-template-columns:1fr} .pearl-place>img{min-height:0;height:250px} .pearl-place .contact-block{padding:24px!important} .pearl-page-intro{padding-top:28px}} .pearl-site .what-we-treat-card{padding:24px;gap:16px} .pearl-site .what-we-treat-card-icon{width:34px;height:34px;background:transparent;box-shadow:none;border:0;color:#9d7b41} .pearl-site .what-we-treat-card-title{font-size:18px;line-height:1.4} .pearl-site .what-we-treat-list{font-size:13px;line-height:1.6} .pearl-site .what-we-treat-list li:before{background:#b08d4d} .pearl-site .what-we-treat-help{color:#8b6e39;border-color:#cbbb9b;box-shadow:none;background:var(--surface)} .pearl-site .what-we-treat-tip:not(:hover):not(:focus-within) .what-we-treat-tooltip{display:none} .pearl-site .what-we-treat-tooltip{background:var(--surface);color:var(--text);border-color:#cbbb9b;font-size:12px} .pearl-site .what-we-treat-tooltip:after{background:var(--surface);border-color:#cbbb9b} .pearl-site .our-services-section:before,.pearl-site .our-services-section:after{display:none} .pearl-site .what-we-treat-section .section-heading,.pearl-site .our-services-section .section-heading{margin:0 0 34px;max-width:none;text-align:left} .pearl-site .what-we-treat-section .section-heading h2,.pearl-site .our-services-section .section-heading h2{font-size:32px;font-weight:600;letter-spacing:-.04em;color:var(--text)} .pearl-site .what-we-treat-section .section-heading p,.pearl-site .our-services-section .section-heading p{max-width:680px;margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.7} .pearl-site .our-service-card,.pearl-site .our-service-accordion-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:none} .pearl-site .our-service-icon{background:transparent;color:#9d7b41;box-shadow:none} .pearl-site .our-service-card h3{font-size:20px} .pearl-site .our-service-lead{font-size:14px} .pearl-site .our-service-list{font-size:13px} .pearl-site .our-service-list-icon{color:#9d7b41} .pearl-site .what-we-treat-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1000px){.pearl-site .what-we-treat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pearl-site .what-we-treat-grid-tail-center .what-we-treat-card:last-child{grid-column:auto}} @media(max-width:640px){.pearl-site .what-we-treat-grid{grid-template-columns:1fr} .pearl-site .what-we-treat-card{padding:20px} .pearl-site .our-service-card{padding:22px} .pearl-site .what-we-treat-section .section-heading h2,.pearl-site .our-services-section .section-heading h2{font-size:28px}} html.icons-ready .ms-icon{color:inherit} .pearl-dialog-top button .ms-icon{font-size:18px} .pearl-site .price-page-section{background:var(--bg)} .pearl-site .price-page-head{text-align:left;max-width:none;margin:0 0 30px} .pearl-site .price-page-head h1{text-align:left;margin-top:0} .pearl-site .price-page-head>p{margin:20px 0;max-width:780px;text-align:left;font-size:14px;color:var(--muted)} .pearl-site .price-filter-row{justify-content:flex-start;gap:8px;margin:28px 0 18px} .pearl-site .price-filter-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:none;color:var(--text);font-size:12px;font-weight:500;min-height:42px} .pearl-site .price-filter-btn.is-active{background:#123831;border-color:#123831;color:#fff;box-shadow:inset 0 -2px 0 #c4a368} .pearl-site .price-download-row{justify-content:flex-start} .pearl-site .price-table-wrap{border:1px solid #d4c6a7;border-radius:12px;box-shadow:none;background:var(--surface)} .pearl-site .price-table-modern .price-table thead th{background:#123831;color:#fff;font-size:10px;font-weight:500;letter-spacing:.08em;padding:16px} .pearl-site .price-table-modern .price-table td{background:var(--surface);border-color:var(--border);padding:19px 16px;font-size:13px;color:var(--text)} .pearl-site .price-table-modern .price-table tr:nth-child(even) td{background:#f2f2ed} .pearl-site .price-table-modern .price-category-icon{display:none} .pearl-site .price-table-modern .price-col-value{color:var(--text);font-weight:600} .pearl-site .price-table-modern .price-section-row td{background:#e9e7dd!important;color:var(--text)} .pearl-site .price-section-badge{background:transparent;box-shadow:none;border:0;color:var(--text)} .pearl-site .price-table-modern .btn{min-height:40px;padding:10px 15px;font-size:11px} .pearl-site .article-page-rich{padding:38px;border:0;background:transparent;box-shadow:none;max-width:980px;margin-inline:auto} .pearl-site .article-page-rich .article-page-header{border:0;background:transparent;padding:0;margin-bottom:28px;box-shadow:none} .pearl-site .article-page-rich .article-page-header h1{font-size:clamp(32px,3.7vw,50px);max-width:950px;margin-top:18px} .pearl-site .article-category{font-size:11px;color:#8b6e39;letter-spacing:.09em} .pearl-site .article-cover{border-radius:12px;overflow:hidden;margin:28px 0} .pearl-site .article-cover img{width:100%;max-height:440px;object-fit:cover} .pearl-site .article-page-rich .article-subsection h2{font-size:29px} .pearl-site .article-page-rich .article-subsection{padding:28px 0;border-top:1px solid var(--border)} .pearl-site .article-page-rich .article-lead{font-size:18px;line-height:1.8} .pearl-site .health-check-hero,.pearl-site .questionnaire-hero{background:var(--surface);box-shadow:none;border:0;border-bottom:1px solid #d4c6a7;border-radius:0;padding:28px 32px} .pearl-site .health-check-shell,.pearl-site .questionnaire-shell{margin-inline:auto;border:1px solid #d4c6a7;overflow:hidden;padding:0;border-radius:16px} .pearl-site .hc-start-card,.pearl-site .questionnaire-intro-card{border-color:var(--border);background:var(--surface);box-shadow:none} .pearl-site .hc-progress-bar,.pearl-site .questionnaire-progress-bar{background:#b89555} .pearl-site .hc-step-kicker,.pearl-site .questionnaire-kicker{color:#8b6e39} .pearl-site .hc-option:has(input:checked),.pearl-site .questionnaire-scale-option:has(input:checked){background:#edf0e9;border-color:#a38d61} .pearl-site .health-check-hero h1,.pearl-site .questionnaire-hero h1{font-size:clamp(30px,3.4vw,44px)} @media(max-width:640px){.pearl-site .article-page-rich{padding:0} .pearl-site .article-page-rich .article-page-header h1{font-size:32px} .pearl-site .article-page-rich .article-lead{font-size:16px} .pearl-site .article-cover img{height:250px} .pearl-site .price-table-modern .price-table td{padding:12px} .pearl-site .price-filter-row{gap:7px} .pearl-site .price-filter-btn{font-size:10px;padding:9px 11px} .pearl-site .health-check-hero,.pearl-site .questionnaire-hero{padding:24px 20px}} .pearl-site .legal-body{overflow-wrap:anywhere} .pearl-site .mobile-menu-panel{background:var(--surface);border-left:1px solid #d4c6a7} .pearl-site .mobile-menu-panel-header{background:var(--surface);border-color:var(--border)} .pearl-site .mobile-menu-link,.pearl-site .mobile-menu-sublink{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:none} .pearl-site .mobile-menu-link.active,.pearl-site .mobile-menu-sublink.active{background:var(--surface-2);border-color:#c4a368} .pearl-site .mobile-menu-toggle{background:var(--surface);border-color:var(--border);box-shadow:none;border-radius:8px;font-size:12px;padding:11px 14px} @media(max-width:900px){.pearl-site .header-cta{display:none!important} .pearl-site .mobile-menu{margin-left:auto}} .pearl-site .site-footer{--footer-bg:var(--surface-2);--footer-text:var(--text);--footer-muted:var(--muted);padding:48px 0 65px} .pearl-site .site-footer:before,.pearl-site .site-footer:after,.pearl-site .section:before,.pearl-site .section:after{display:none} .pearl-site .footer-logo{filter:none;width:160px;max-width:100%;height:50px;object-fit:contain} .pearl-site .footer-grid{gap:48px} .pearl-site .site-footer p,.pearl-site .site-footer .small{color:var(--muted);font-size:12px} .pearl-site .site-footer h4{font-size:13px;color:var(--text);font-weight:600} .pearl-site .site-footer li{font-size:12px;margin-bottom:10px} .pearl-site .footer-link .ms-icon{color:#9d7b41} .pearl-site .footer-creator img{filter:none} .pearl-site .footer-creator{color:var(--muted)} @media(max-width:640px){.pearl-site .footer-grid{gap:28px} .pearl-site .site-footer{padding-top:36px}} .pearl-site .health-check-result-card h1{font-size:clamp(26px,2.8vw,38px);line-height:1.28;max-width:980px} .pearl-site .price-table :is(td,strong,span){hyphens:none} .pearl-site .health-result-badge{color:#6c562b;border-color:#d4c6a7;background:#f4ecd9} .pearl-site .health-result-badge.is-high,.pearl-site .health-result-badge.is-emergency{color:#8d2828;border-color:#c98f88;background:#fbefeb} html[data-theme=dark] .pearl-home :is(.im-doctor-info,.im-bottom,.im-panel){background:var(--surface);border-color:var(--border)} html[data-theme=dark] .pearl-home .im-direction{color:var(--muted)} html[data-theme=dark] .pearl-home .im-direction[aria-pressed=true]{color:#fff} html[data-theme=dark] .pearl-home :is(.im-secondary-heading,.im-price-label,.pearl-price-detail){color:var(--muted)} html[data-theme=dark] .pearl-home .im-bottom p{color:var(--muted)} html[data-theme=dark] .pearl-site .price-table-modern .price-table td{background:var(--surface);color:var(--text)} html[data-theme=dark] .pearl-site .price-table-modern .price-table tr:nth-child(even) td{background:var(--surface-2)} html[data-theme=dark] .pearl-home .im-booking-row{border-color:var(--border)} html[data-theme=dark] .pearl-home .im-team-caption strong{color:var(--text)} html[data-theme=dark] .pearl-home .im-portrait-label{color:#303735} .pearl-site .legal-page-head{text-align:left;padding:28px} .pearl-site .legal-page-head h1{overflow-wrap:anywhere;hyphens:auto;text-align:left} .pearl-site .legal-page-head>p{text-align:left} .pearl-site .main-content :is(h1,h2,h3){overflow-wrap:break-word} .pearl-site .legal-page-shell>*{min-width:0} @media(max-width:640px){.pearl-site .legal-page-head{padding:20px} .pearl-site .legal-page-head h1{font-size:30px;line-height:1.2} .pearl-site .questionnaire-hero h1{font-size:28px;line-height:1.2}} .pearl-home .im-portrait-area{display:flex;flex-direction:column;gap:10px;padding:16px 18px 0;box-sizing:border-box;background:#fff} .pearl-home .im-portrait{flex:1 1 0;min-height:0;height:0;width:100%;object-fit:contain;object-position:center bottom;transform:none} .pearl-home .im-portrait-label{position:static;order:-1;align-self:flex-start;flex:0 0 auto;max-width:100%;margin:0}} /* Integra: the public design system. Legacy layout/state rules are in @layer foundation. Shared tokens, then components, then responsive changes. No page-specific tiny type. */ :root { --font-sans:OnestLocal,Arial,sans-serif; --text-body:1.125rem; --text-ui:1rem; --text-small:.875rem; --text-lead:1.25rem; --text-h1:clamp(2.125rem,4.2vw,3.5rem); --text-h2:clamp(1.75rem,3vw,2.5rem); --text-h3:clamp(1.375rem,2vw,1.625rem); --bg:#f7f7f4; --surface:#fff; --surface-2:#eeeee8; --text:#303735; --muted:#59625e; --primary:#123831; --primary-700:#0b2924; --gold:#c6a467; --gold-text:#80622f; --border:#deddd4; --line-gold:#d4c3a2; --radius:14px; --space-section:72px; --reading-width:72ch; --shadow-soft:0 14px 40px #3037350a; --gold-action:linear-gradient(115deg,#e7cc98,#ddbf83 55%,#d1ae6d); } html { font-size:100%; scroll-padding-top:120px; } body.pearl-site { font-family:var(--font-sans); font-size:var(--text-body); line-height:1.65; background:var(--bg); color:var(--text); } .pearl-site :where(div,span,a,em,strong,small,time) { font-size:inherit; } .pearl-site :where(p,ul,ol,li,td,dd,blockquote) { font-size:var(--text-body); line-height:1.7; } .pearl-site :where(p) { color:var(--text); } .pearl-site :where(button,input,textarea,select,label,summary) { font-size:var(--text-ui); line-height:1.5; } .pearl-site :where(h1,h2,h3,h4) { font-family:var(--font-sans); color:var(--text); font-weight:600; text-align:left; letter-spacing:-.035em; text-transform:none; } .pearl-site h1 { hyphens:auto; font-size:var(--text-h1); line-height:1.13; } .pearl-site h2 { font-size:var(--text-h2); line-height:1.23; } .pearl-site h3 { font-size:var(--text-h3); line-height:1.35; } .pearl-site h4 { font-size:1.25rem; line-height:1.4; } .pearl-site :where(.small,.muted) { color:var(--muted); } .pearl-site :where(.small,small) { font-size:var(--text-small); } /* Restore the icon font above the inline loading placeholder, independently of text sizing. */ .pearl-site .ms-icon { font:normal 1.2em/1 'Material Symbols Outlined'; display:inline-flex; align-items:center; justify-content:center; width:1.2em; height:1.2em; letter-spacing:normal; text-transform:none; flex-shrink:0; } html.icons-ready .pearl-site .ms-icon { color:inherit; } .pearl-site .container { width:calc(100% - 80px); max-width:1280px; } .pearl-site .section { padding:var(--space-section) 0; } .pearl-site .section-alt { background:#f0f0eb; } .pearl-site :where(.card) { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:none; } .pearl-site :where(.card:hover) { box-shadow:none; } .pearl-site :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--gold-text); outline-offset:4px; } .pearl-site :where(.btn,.header-book-btn) { font:600 var(--text-ui)/1.4 var(--font-sans); min-height:52px; padding:14px 22px; border-radius:9px; white-space:normal; text-align:center; letter-spacing:0; } .pearl-site :where(.btn-primary,.btn-gold,.header-book-btn) { color:var(--text); background:var(--gold-action); border:1px solid #b99756; box-shadow:inset 0 1px 0 #fff4d8,0 5px 14px #80622f0e; } .pearl-site :where(.btn-primary,.btn-gold,.header-book-btn):hover { color:var(--text); background:linear-gradient(115deg,#edd6ac,#ddbf83); box-shadow:0 8px 20px #80622f20; transform:translateY(-2px); } .pearl-site .btn-light { background:var(--surface); border:1px solid var(--border); color:var(--text); } .pearl-site :where(.eyebrow,.article-category,.legal-page-kicker,.about-card-kicker,.service-symptoms-kicker,.questionnaire-kicker,.health-check-kicker,.home-health-check-kicker) { font-size:var(--text-small); color:var(--gold-text); letter-spacing:0; text-transform:none; font-weight:600; } .pearl-site :where(.section-heading,.home-section-head) { text-align:left; margin-bottom:36px; } .pearl-site :where(.section-heading h2,.home-section-head h2) { font-size:var(--text-h2); } .pearl-site :where(.section-heading p,.home-section-head p) { font-size:var(--text-body); max-width:var(--reading-width); color:var(--muted); margin-top:16px; } .pearl-site :where(.pearl-page-intro,.price-page-head,.legal-page-head,.articles-group-head,.questionnaire-hero,.health-check-hero) { text-align:left; background:none; border:0; border-radius:0; box-shadow:none; max-width:none; padding:0; } .pearl-site :where(.pearl-page-intro h1,.price-page-head h1,.legal-page-head h1,.articles-group-head h1,.questionnaire-hero h1,.health-check-hero h1) { margin:0 0 24px; } .pearl-site :where(.price-page-head>p,.legal-page-head>p,.articles-group-head>p,.questionnaire-lead,.health-check-lead) { font-size:var(--text-lead); line-height:1.65; max-width:var(--reading-width); color:var(--muted); } .pearl-site .pearl-crumbs { padding-top:24px; } .pearl-site :where(.breadcrumbs,.breadcrumbs li,.breadcrumbs a) { font-size:var(--text-small); color:var(--muted); } .pearl-site .breadcrumbs ol { flex-wrap:wrap; row-gap:5px; } /* Navigation stays readable; it becomes the full mobile menu before it becomes cramped. */ .pearl-site .header-inner { min-height:96px; gap:24px; } .pearl-site .brand-logo { width:160px; height:52px; } .pearl-site .main-nav { gap:22px; } .pearl-site .nav-link { font-size:var(--text-ui); line-height:1.5; padding:12px 0; font-weight:600; color:var(--text); } .pearl-site .phone-card-number { font-size:var(--text-ui); font-weight:650; } .pearl-site .phone-card { min-height:48px; } .pearl-site .pearl-motion-toggle { min-width:44px; min-height:44px; } /* Shared navigation surfaces: one panel, quiet rows, no nested cards. */ :root { --nav-surface:linear-gradient(145deg,#fff,#f7f7f2); --nav-row-hover:#eeeee7; --nav-panel-radius:16px; --nav-panel-shadow:0 18px 48px #12383118; } .pearl-site .nav-dropdown-menu, .pearl-site .header-contact-panel, .pearl-site .mobile-menu-panel { background:var(--nav-surface); border:1px solid var(--border); border-radius:var(--nav-panel-radius); box-shadow:var(--nav-panel-shadow); } .pearl-site .nav-dropdown-menu { min-width:320px; max-width:380px; padding:12px; gap:0; top:calc(100% + 8px); max-height:calc(100dvh - 120px); overflow:auto; } .pearl-site .nav-dropdown-menu::before { content:none; } .pearl-site .nav-dropdown-menu-doctors { width:440px; max-width:440px; } .pearl-site .nav-dropdown-link, .pearl-site .header-contact-item { font-size:var(--text-ui); line-height:1.5; font-weight:500; padding:16px 12px; min-height:56px; gap:14px; border:0; border-radius:0; background:transparent; color:var(--text); white-space:normal; } .pearl-site .nav-dropdown-link + .nav-dropdown-link, .pearl-site .header-contact-item + .header-contact-item { border-top:1px solid var(--border); } .pearl-site .nav-dropdown-link:hover, .pearl-site .nav-dropdown-link.active, .pearl-site .header-contact-item:hover { background:var(--nav-row-hover); color:var(--primary); } html.icons-ready .pearl-site .nav-dropdown-link > .ms-icon, html.icons-ready .pearl-site .header-contact-item > .ms-icon { color:var(--gold-text); font-size:24px; font-variation-settings:'FILL' 0,'wght' 300; } .pearl-site .nav-dropdown-link > .app-icon, .pearl-site .header-contact-item > .app-icon, .pearl-site :where(.mobile-menu-link,.mobile-menu-sublink) .app-icon { width:24px; height:24px; color:var(--gold-text); stroke-width:1.5; } .pearl-site .nav-dropdown:not(.is-open) .nav-dropdown-menu { opacity:0; visibility:hidden; pointer-events:none; } .pearl-site .nav-dropdown:not(.is-open) .nav-dropdown-chevron { transform:none; } .pearl-site .nav-dropdown-link-meta { font-size:var(--text-small); line-height:1.5; color:var(--muted); order:2; } .pearl-site .nav-dropdown-link-title { font-size:var(--text-ui); line-height:1.45; font-weight:600; } .pearl-site .nav-dropdown-link-body { gap:5px; } .pearl-site .nav-dropdown-link-doctor { align-items:center; } .pearl-site .nav-dropdown-avatar { width:52px; height:64px; flex:0 0 52px; border:0; border-radius:8px; box-shadow:none; background:var(--surface-2); } .pearl-site .nav-dropdown-avatar img { object-fit:contain; } .pearl-site .header-contact-panel { width:320px; top:calc(100% + 10px); padding:0 16px; } .pearl-site .header-contact-dropdown.is-open .header-contact-panel { border:1px solid var(--border); padding:16px; box-shadow:var(--nav-panel-shadow); max-height:calc(100dvh - 120px); overflow:auto; } .pearl-site .header-contact-links { gap:0; } .pearl-site .header-contact-agent { min-height:120px; border:0; background:var(--surface-2); border-radius:8px; } .pearl-site .header-contact-agent img { height:126px; filter:none; } .pearl-site .header-contact-agent::after { content:none; } .pearl-site .header-contact-item { overflow-wrap:anywhere; } .pearl-site .mobile-menu-panel { width:min(440px,calc(100vw - 16px)); padding:16px; } .pearl-site .mobile-menu-primary { gap:0; } .pearl-site :where(.mobile-menu-link,.mobile-menu-sublink) { font-size:var(--text-body); min-height:56px; padding:14px 12px; color:var(--text); background:transparent; border:0; border-radius:0; line-height:1.5; gap:12px; font-weight:500; } .pearl-site .mobile-menu-primary > .mobile-menu-link, .pearl-site .mobile-menu-group { border-bottom:1px solid var(--border); } .pearl-site .mobile-menu-link-main { gap:12px; } .pearl-site .mobile-menu-group { gap:0; } .pearl-site .mobile-menu-submenu { padding:4px 0 12px 12px; gap:0; } .pearl-site .mobile-menu-sublink { font-size:var(--text-ui); } .pearl-site :where(.mobile-menu-link.active,.mobile-menu-sublink.active,.mobile-menu-link:hover,.mobile-menu-sublink:hover) { background:var(--nav-row-hover); color:var(--primary); } html.icons-ready .pearl-site :where(.mobile-menu-link,.mobile-menu-sublink) .ms-icon { color:var(--gold-text); font-variation-settings:'FILL' 0,'wght' 300; } .pearl-site .mobile-menu-toggle { min-height:48px; font-size:var(--text-ui); background:var(--surface); border-color:var(--line-gold); } .pearl-site .mobile-menu-close { min-width:44px; min-height:44px; } .pearl-site .mobile-menu-close-glyph { font-size:28px; } /* Approved home: same composition, more readable details and full portraits. */ .pearl-home .im-hero { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; } .pearl-site .pearl-home .im-copy h1 { font-size:clamp(2.25rem,4.1vw,3.5rem); line-height:1.12; } .pearl-site .pearl-home .im-copy .im-lead { font-size:var(--text-body); line-height:1.7; max-width:560px; } .pearl-site .pearl-home .im-location { font-size:var(--text-small); line-height:1.5; letter-spacing:0; } .pearl-site .pearl-home .im-textlink { font-size:var(--text-ui); min-height:44px; } .pearl-site .pearl-home .im-name { font-size:1.5rem; line-height:1.35; } .pearl-site .pearl-home .im-qualification { font-size:var(--text-ui); line-height:1.6; max-width:none; margin-top:10px; } .pearl-site .pearl-home .im-portrait-label { font-size:var(--text-small); line-height:1.5; max-width:100%; } .pearl-site .pearl-home .im-doctor-info { padding:24px; } .pearl-site .pearl-home .im-price-label { font-size:var(--text-small); } .pearl-site .pearl-home .im-price { font-size:2rem; } .pearl-site .pearl-home .im-price-text { font-size:var(--text-ui); } .pearl-site .pearl-home .pearl-price-detail { font-size:var(--text-small); padding-top:4px; } .pearl-site .pearl-home .im-booking-row { flex-wrap:wrap; gap:20px; } .pearl-site .pearl-home .im-action { font-size:var(--text-ui); min-height:54px; padding:12px 14px 12px 20px; min-width:0; gap:20px; } .pearl-home .im-action .im-rolling { height:24px; line-height:24px; } .pearl-home .im-action:hover .im-rolling span { transform:translateY(-24px); } .pearl-home .im-action .im-disc { width:32px; height:32px; } .pearl-site .pearl-home .im-team { max-width:none; gap:16px; } .pearl-site .pearl-home .im-team button { width:52px; height:56px; } .pearl-site .pearl-home .im-team-caption { font-size:var(--text-small); } .pearl-site .pearl-home .im-team-caption strong { font-size:var(--text-ui); } .pearl-site .pearl-hero-points { gap:12px; } .pearl-site .pearl-hero-points li { font-size:var(--text-ui); line-height:1.5; } .pearl-site .pearl-hero-points .ms-icon { font-size:20px; } .pearl-site .pearl-home .im-direction { font-size:var(--text-ui); min-height:56px; padding:12px 10px; } .pearl-site .pearl-home .im-bottom { grid-template-columns:1fr 1fr; gap:40px; padding:30px; } .pearl-site .pearl-home .im-bottom h2 { font-size:var(--text-h3); } .pearl-site .pearl-home .im-bottom p { font-size:var(--text-body); } .pearl-site .pearl-home .im-secondary-heading { font-size:var(--text-small); } .pearl-site .pearl-home .im-topic-list a { font-size:var(--text-ui); padding:7px 0; } /* Specialty navigation: one visual anchor and a full-width list for each department. SVG arrows never depend on an emoji or system-symbol font (including iOS). */ :root { --direction-image-size:160px; --direction-padding:28px; --link-row-height:56px; } .pearl-site .clinic-directions { background:var(--surface); border-top:1px solid var(--border); } .pearl-site .clinic-directions-title { margin:0 0 36px; } .pearl-site .clinic-directions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .pearl-site .clinic-direction { min-width:0; padding:var(--direction-padding); border:1px solid var(--line-gold); border-radius:var(--info-card-radius); background:var(--surface); } .pearl-site .clinic-direction-head { display:grid; grid-template-columns:minmax(0,1fr) var(--direction-image-size); gap:20px; align-items:center; margin:0 0 24px; } .pearl-site .clinic-direction-head h3 { margin:0; min-width:0; font-size:1.625rem; line-height:1.35; overflow-wrap:anywhere; text-wrap:balance; } .pearl-site .clinic-direction-head h3 a { color:var(--text); text-decoration:none; } .pearl-site .clinic-direction-head h3 a:hover { color:var(--primary); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:6px; } .pearl-site .clinic-direction-image { display:block; width:var(--direction-image-size); height:var(--direction-image-size); object-fit:contain; border-radius:10px; } .pearl-site .clinic-link-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--border); } .pearl-site .clinic-link-list>li { margin:0; padding:0; list-style:none; border-bottom:1px solid var(--border); } .pearl-site .clinic-link-list>li:last-child { border-bottom:0; } .pearl-site .clinic-list-link { display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:16px; min-height:var(--link-row-height); padding:14px 0; color:var(--text); font-size:var(--text-body); font-weight:500; line-height:1.5; text-decoration:none; transition:color .16s ease; } .pearl-site .clinic-list-link>span { min-width:0; overflow-wrap:anywhere; } .pearl-site .clinic-list-link::before,.pearl-site .clinic-list-link::after { content:none; } .pearl-site .clinic-link-arrow { display:block; width:24px; height:24px; color:var(--primary); stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; } .pearl-site .clinic-list-link:hover { color:var(--primary); } .pearl-site .clinic-list-link:hover>span { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; } .pearl-site .clinic-list-link:hover .clinic-link-arrow { transform:translateX(3px); } .pearl-site .clinic-list-link:focus-visible { outline:3px solid var(--gold-text); outline-offset:3px; border-radius:3px; } html.motion-off .clinic-link-arrow,html.motion-off .clinic-list-link { transition:none; } html.motion-off .clinic-list-link:hover .clinic-link-arrow { transform:none; } @media(prefers-reduced-motion:reduce) { .pearl-site .clinic-link-arrow,.pearl-site .clinic-list-link { transition:none; } .pearl-site .clinic-list-link:hover .clinic-link-arrow { transform:none; } } @media(max-width:1180px) { :root { --direction-image-size:128px; --direction-padding:24px; } .pearl-site .clinic-direction-head { gap:16px; } .pearl-site .clinic-direction-head h3 { font-size:1.5rem; } } @media(max-width:960px) { .pearl-site .clinic-directions-grid { grid-template-columns:1fr; gap:24px; } } @media(max-width:600px) { .pearl-site .clinic-direction-head { grid-template-columns:minmax(0,1fr); gap:20px; } .pearl-site .clinic-direction-image { grid-row:1; width:100%; height:144px; object-position:left center; } .pearl-site .clinic-direction-head h3 { font-size:1.5rem; text-wrap:pretty; } .pearl-site .clinic-direction-head { margin-bottom:20px; } } @media(max-width:360px) { :root { --direction-padding:20px; } } .pearl-site :where(.home-about-lead,.home-health-check-card p,.home-health-check-card li,.home-review-platform p,.home-review-doctor p,.pearl-place .contact-block p) { font-size:var(--text-body); line-height:1.7; } .pearl-site :where(.home-health-check-card,.questionnaires-featured-card) { background:linear-gradient(120deg,#fff,#f3f1e9); border:1px solid var(--line-gold); padding:40px; } .pearl-site .home-health-check-card h2 { font-size:var(--text-h2); } .pearl-site .home-slogan-section { background:var(--surface-2); border-block:1px solid var(--line-gold); } .pearl-site .home-slogan-wrap h2 { color:var(--primary); } .pearl-site .home-slogan-wrap h2 span { color:inherit; } .pearl-site :where(.home-review-doctor-specialty,.home-review-doctor-note,.home-principle-num) { font-size:var(--text-small); } /* Physician catalogue: two generous portrait cards, never four compressed columns. */ .pearl-site .doctors-page-intro { padding-bottom:40px; } .pearl-site .clinic-page-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; padding:16px 0 36px; border:0; border-bottom:1px solid var(--line-gold); background:none; border-radius:0; box-shadow:none; text-align:left; } .clinic-page-title h1 { margin:0 0 24px; } .clinic-page-title p { font-size:var(--text-lead); color:var(--muted); margin:0; max-width:62ch; } .clinic-page-aside { padding-top:8px; } .clinic-page-aside ul { margin:0 0 24px; padding-left:22px; } .clinic-page-aside li { font-size:var(--text-ui); margin-bottom:10px; color:var(--muted); } .pearl-site .doctors-catalog-section { padding-top:0; background:var(--bg); } .pearl-site :where(.doctors-grid,.doctors-grid-compact,.service-doctors-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:stretch; } .pearl-site .doctor-card-modern { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; padding:0; border:1px solid var(--line-gold); background:var(--surface); border-radius:16px; box-shadow:var(--shadow-soft); overflow:hidden; } .pearl-site .doctor-photo-wrap { height:360px; min-height:0; background:linear-gradient(#fff,#f4f4ef); border:0; border-bottom:1px solid var(--border); padding:18px 24px 0; } .pearl-site .doctor-photo-wrap img { object-fit:contain; object-position:center bottom; height:100%; width:100%; transform:none; border-radius:0; } .pearl-site .doctor-card:hover .doctor-photo-wrap img { transform:none; } .pearl-site .doctor-card-body { display:block; padding:28px 30px; } .pearl-site .doctor-card :where(h3,.doctor-card-role,.doctor-card-degree,.doctor-card-bio,.doctor-card-tags) { min-height:0; } .pearl-site .doctor-card h3 a { color:var(--text); } .pearl-site .doctor-card-bio { display:block; overflow:visible; -webkit-line-clamp:unset; } .pearl-site .doctor-card-role { font-size:var(--text-ui); text-transform:none; color:var(--gold-text); letter-spacing:0; line-height:1.5; margin:0 0 12px; } .pearl-site .doctor-card-body h3 { font-size:1.75rem; margin:0 0 16px; line-height:1.3; } .pearl-site .doctor-card-degree { font-size:var(--text-ui); color:var(--text); gap:10px; line-height:1.6; } .pearl-site .doctor-card-bio { font-size:var(--text-body); color:var(--muted); margin-top:18px; } .pearl-site .doctor-card-tags { gap:8px; padding:0; margin:20px 0 0; } .pearl-site .doctor-card-tags li { font-size:var(--text-small); background:#f5f3ec; color:var(--muted); border:1px solid #e4ddce; border-radius:5px; padding:5px 10px; } .pearl-site .doctor-card-footer { margin-top:0; display:block; padding:22px 30px 28px; background:#fbfbf8; border-top:1px solid var(--line-gold); } .pearl-site .doctor-card-exp { font-size:var(--text-ui); color:var(--text); margin:0 0 18px; line-height:1.5; } .doctor-card-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; } .pearl-site .doctor-card-link { display:inline-flex; gap:8px; align-items:center; color:var(--primary); font-size:var(--text-ui); min-height:44px; padding:4px 0; width:auto; border-bottom:1px solid var(--gold); border-radius:0; } /* Shared horizontal physician: explicit areas prevent legacy implicit columns. */ .pearl-site .service-doctors-grid { grid-template-columns:minmax(0,1fr); } .pearl-site .doctor-card-horizontal { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); grid-template-rows:1fr auto; grid-template-areas:"photo body" "photo footer"; gap:0; } .pearl-site .doctor-card-horizontal .doctor-photo-wrap { grid-area:photo; height:100%; min-height:400px; padding:24px 24px 0; border:0; background:#f4f4ef; } .pearl-site .doctor-card-horizontal .doctor-photo-wrap img { max-height:540px; } .pearl-site .doctor-card-horizontal .doctor-card-body { grid-area:body; padding:32px; } .pearl-site .doctor-card-horizontal .doctor-card-footer { grid-area:footer; padding:24px 32px 32px; } /* Profile: open biography, quiet fact strip, useful section index and readable timelines. */ .pearl-site .doctor-profile-modern { background:none; border:0; box-shadow:none; border-radius:0; padding:0; } .pearl-site .doctor-profile-hero { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:48px; padding:0 0 48px; background:none; border:0; border-radius:0; box-shadow:none; align-items:start; } .doctor-profile-portrait { padding:6px; background:linear-gradient(135deg,#ede1c8,#bd9b60 40%,#f7f1e7 72%,#c6a467); border-radius:16px; position:sticky; top:124px; } .pearl-site .doctor-profile-portrait img { display:block; width:100%; height:auto; max-height:620px; aspect-ratio:4/5; object-fit:contain; object-position:center bottom; background:#fff; border:0; border-radius:11px; } .pearl-site .doctor-profile-specialty { font-size:var(--text-ui); color:var(--gold-text); text-transform:none; letter-spacing:0; margin:0 0 16px; } .pearl-site .doctor-profile h1 { font-size:clamp(2rem,3.5vw,3rem); line-height:1.15; margin:0 0 20px; } .pearl-site .doctor-profile-degree { font-size:var(--text-body); color:var(--muted); margin-bottom:24px; } .pearl-site .doctor-grid-meta { display:grid; grid-template-columns:1fr; gap:0; padding:8px 0; margin:24px 0; border-block:1px solid var(--line-gold); } .pearl-site .meta-pill { display:grid; grid-template-columns:130px 1fr; gap:14px; border:0; background:none; border-radius:0; padding:10px 0; font-size:var(--text-ui); box-shadow:none; } .pearl-site .meta-pill .label { font-size:var(--text-small); text-transform:none; color:var(--muted); margin:0; } .pearl-site .doctor-profile-text { font-size:var(--text-body); line-height:1.75; margin:0 0 20px; } .pearl-site .doctor-profile-actions { margin-bottom:28px; gap:12px; flex-wrap:wrap; margin-top:28px; } .doctor-section-nav { display:flex; flex-wrap:wrap; gap:12px 28px; padding:22px 0; border-block:1px solid var(--line-gold); margin-bottom:24px; } .doctor-section-nav a { font-size:var(--text-ui); padding:8px 0; color:var(--primary); border-bottom:1px solid var(--gold); } .pearl-site .doctor-details-modern { display:block; border:0; background:none; padding:0; box-shadow:none; } .pearl-site .doctor-details-group { background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; padding:40px 0; display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:48px; } .pearl-site .doctor-details-group h2 { font-size:1.75rem; margin:0; align-items:flex-start; } .pearl-site .doctor-details-group h2 .ms-icon { color:var(--gold-text); font-size:26px; margin-top:5px; } .pearl-site :where(.doctor-feature-list,.doctor-education-list,.doctor-achievements-list) { padding:0; margin:0; } .pearl-site :where(.doctor-feature-list li,.doctor-timeline-item) { font-size:var(--text-body); padding:16px 0; background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; } .pearl-site .doctor-timeline-item { grid-template-columns:145px 1fr; gap:24px; } .pearl-site .doctor-timeline-year { font-size:var(--text-small); color:var(--gold-text); background:none; border:0; border-radius:0; padding:0; } .pearl-site .doctor-timeline-text { font-size:var(--text-body); line-height:1.7; } /* Direction pages and clinic story use the same wide headings and neutral sections. */ .pearl-site .pearl-service-lead { font-size:var(--text-lead); max-width:60ch; } .pearl-site .pearl-service-grid { gap:48px; } .pearl-site :where(.what-we-treat-grid,.our-services-grid,.about-why-grid,.about-principles-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .pearl-site :where(.what-we-treat-card,.our-service-card,.our-service-accordion-item,.service-guide-card) { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:none; } .pearl-site :where(.what-we-treat-card-title,.our-service-card h3,.service-guide-card h3) { font-size:var(--text-h3); } .pearl-site :where(.what-we-treat-list,.our-service-list,.service-guide-list,.service-info-list) li { font-size:var(--text-body); line-height:1.7; } .pearl-site :where(.what-we-treat-tooltip,.hc-option-tooltip) { font-size:var(--text-small); line-height:1.6; } .pearl-site :where(.our-service-lead,.service-info-text,.service-info-subtitle,.service-symptoms-lead) { font-size:var(--text-body); line-height:1.75; } .pearl-site :where(.service-info-note,.service-info-meta,.service-questionnaire-note) { font-size:var(--text-ui); } .pearl-site .service-info-card { padding:40px; border:0; border-top:1px solid var(--line-gold); border-radius:0; background:none; } .pearl-site .service-info-list { grid-template-columns:minmax(0,1fr); } .pearl-site .service-info-list li { min-width:0; overflow-wrap:anywhere; hyphens:auto; } .pearl-site .service-info-card :where(p,ul) { max-width:var(--reading-width); } .pearl-site :where(.service-symptoms-showcase,.service-topics-card) { border:1px solid var(--line-gold); background:linear-gradient(120deg,#fff,#f3f2ec); border-radius:var(--radius); padding:36px; box-shadow:none; } .pearl-site .service-symptom-chips li { font-size:var(--text-ui); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px; } .pearl-site :where(.service-guide-list-icon,.service-symptom-chip-icon) { color:var(--gold-text); } .pearl-site :where(.service-questionnaire-card,.service-card) { border-color:var(--line-gold); background:var(--surface); box-shadow:none; } .pearl-site :where(.about-story-section,.about-why-section,.about-principles-section,.about-team-section,.about-slogan-section) { background:var(--bg); } .pearl-site :where(.about-story-card,.about-why-card,.about-principle-card) { padding:32px; background:var(--surface); border-color:var(--border); } .pearl-site .about-story-grid { gap:28px; } .pearl-site :where(.about-story-lead,.about-story-mission-item p,.about-story-checklist li,.about-why-card p,.about-principle-card p) { font-size:var(--text-body); line-height:1.7; } .pearl-site :where(.about-story-pill,.about-story-note,.about-principle-num) { font-size:var(--text-ui); background:#f4f1e9; color:var(--text); border-color:var(--line-gold); box-shadow:none; } .pearl-site .about-slogan-wrap { border-block:1px solid var(--line-gold); background:none; box-shadow:none; border-radius:0; padding:48px 0; } .pearl-site .about-slogan-wrap h2 { color:var(--primary); } .pearl-site main :where(section,article,div,header,figure) { min-width:0; } .pearl-site :where(.legal-doc-body,.patient-control-card,.article-rich-content) { overflow-wrap:anywhere; } .pearl-site .patient-control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pearl-site .about-story-mission-item { background:none; border:0; border-top:1px solid var(--line-gold); border-radius:0; padding:20px 0; } .pearl-site :where(.article-card-media,.contact-entrance-media) { background:var(--surface-2); } /* Editorial content: a reading column instead of nested green cards. */ .pearl-site .articles-split { display:block; } .pearl-site .articles-group + .articles-group { margin-top:72px; padding-top:48px; border-top:1px solid var(--line-gold); } .pearl-site .articles-group-head { margin-bottom:36px; } .pearl-site :where(.articles-grid,.articles-grid--compact,.questionnaires-catalog-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } .pearl-site .articles-grid--compact:has(>.article-card:only-child) { grid-template-columns:1fr; } .pearl-site .articles-grid--compact>.article-card:only-child { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px; } .pearl-site .articles-grid--compact>.article-card:only-child .article-card-media { height:100%; margin:0; } .pearl-site .articles-grid--compact>.article-card:only-child .article-card-media img { height:100%; min-height:320px; object-fit:cover; } .pearl-site .article-card-body { padding:28px; } .pearl-site .article-card h3 { font-size:var(--text-h3); } .pearl-site .article-card-description { display:block; overflow:visible; -webkit-line-clamp:unset; font-size:var(--text-body); line-height:1.7; } .pearl-site .article-card-author { padding-block:18px; } .pearl-site :where(.article-author-label,.article-card-chip,.questionnaires-catalog-meta) { font-size:var(--text-small); } .pearl-site .article-author-name { font-size:var(--text-ui); } .pearl-site .article-page-rich { display:block; max-width:1000px; padding:0; margin-inline:auto; background:none; border:0; } .pearl-site .article-page-header { max-width:var(--reading-width); padding:0; margin:0 auto 36px; border:0; background:none; } .pearl-site .article-page-header h1 { font-size:var(--text-h1); margin:20px 0 24px; } .pearl-site .article-page-meta p { font-size:var(--text-small); } .pearl-site .article-cover { margin:0 0 40px; } .pearl-site .article-cover img { max-height:520px; object-fit:cover; border-radius:var(--radius); } .pearl-site :where(.article-rich-content,.article-subsection,.article-lead,.article-tool-disclaimer,.article-page-rich>.contact-actions) { max-width:var(--reading-width); margin-inline:auto; } .pearl-site .article-lead { font-size:var(--text-lead); line-height:1.7; margin-bottom:36px; } .pearl-site :where(.article-rich-block,.article-rich-block--plain,.article-subsection) { font-size:var(--text-body); background:none; border:0; box-shadow:none; border-radius:0; padding:24px 0; } .pearl-site :where(.article-rich-content,.article-subsection,.legal-doc-body) :where(p,li) { font-size:var(--text-body); line-height:1.8; } .pearl-site :where(.article-rich-content,.article-subsection) :where(h2,h3) { margin:28px 0 20px; } .pearl-site .article-tool { max-width:840px; margin-inline:auto; padding:36px; border-color:var(--line-gold); } .pearl-site :where(.article-tool-head,.article-tool-question) { background:none; border:0; box-shadow:none; padding:0; } .pearl-site .article-tool-badge { font-size:var(--text-small); color:var(--gold-text); } /* Price list: bright table, large service names, tabular amounts; stacked rows on phones. */ .pearl-site .price-page-head { margin-bottom:40px; } .pearl-site .price-filter-row { gap:10px; margin:28px 0 20px; flex-wrap:wrap; } .pearl-site .price-filter-btn { font-size:var(--text-ui); line-height:1.45; padding:12px 18px; min-height:48px; } .pearl-site .price-table-modern .price-table thead th { background:#ede9dd; color:var(--text); font-size:var(--text-small); letter-spacing:0; text-transform:none; padding:20px; } .pearl-site .price-table-modern .price-table td { font-size:var(--text-ui); line-height:1.55; padding:24px 20px; background:#fff; } .pearl-site .price-table-modern .price-table tr:nth-child(even) td { background:#fafaf7; } .pearl-site .price-category-title { font-size:var(--text-ui); color:var(--muted); } .pearl-site .price-category-code { font-size:var(--text-small); color:var(--muted); margin-top:7px; } .pearl-site .price-service-title { font-size:var(--text-body); line-height:1.55; color:var(--text); font-weight:550; } .pearl-site .price-value { font-size:1.25rem; color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; } .pearl-site .price-table-modern .btn { font-size:var(--text-ui); min-height:48px; padding:12px 16px; } .pearl-site .price-disclaimer { font-size:var(--text-small); margin-top:24px; } /* Appointments, questionnaires, documents and contacts: one form and surface language. */ .pearl-site .appointment-page-container { width:calc(100% - 80px); max-width:1280px; } .pearl-site .appointment-hero-card { display:block; padding:0 0 36px; background:none; border:0; border-bottom:1px solid var(--line-gold); border-radius:0; margin-bottom:32px; } .pearl-site .appointment-hero-copy { display:grid; grid-template-columns:1.25fr 1fr; gap:0 48px; } .pearl-site .appointment-hero-copy h1 { grid-column:1/-1; margin:0 0 24px; } .pearl-site .appointment-hero-points { margin-top:0; } .pearl-site .appointment-hero-copy>p { font-size:var(--text-lead); line-height:1.65; } .pearl-site .appointment-hero-points li { font-size:var(--text-ui); } .pearl-site .appointment-hero-stat { background:transparent; border:0; padding:12px 22px; border-radius:0; } .pearl-site .appointment-hero-stat p { font-size:var(--text-ui); } .pearl-site .appointment-layout { grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:32px; } .pearl-site :where(.appointment-form-card,.appointment-form) { padding:32px; background:var(--surface); border:1px solid var(--line-gold); border-radius:var(--radius); box-shadow:none; } .pearl-site :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea,.custom-select-trigger,.form-select-trigger,.form-date-trigger,.form-time-trigger,.custom-picker-trigger) { font:400 var(--text-ui)/1.5 var(--font-sans); min-height:54px; padding:14px 16px; border:1px solid #c9ccc5; border-radius:8px; background:var(--surface); color:var(--text); } .pearl-site :where(label,.appointment-field-label,.form-label) { font-size:var(--text-ui); font-weight:550; } .pearl-site .custom-select-option { font-size:var(--text-ui); padding:14px 16px; min-height:48px; } .pearl-site :where(.form-hint,.form-note,.field-error,.form-error,.pearl-preview-note,.note-box,.form-consent,.checkbox-label) { font-size:var(--text-small); line-height:1.6; } .pearl-site :where(.appointment-contacts-card,.appointment-disclosures,.contacts-cta-card,.contact-block,.contact-entrance-card) { padding:28px; background:var(--surface); border:1px solid var(--line-gold); border-radius:var(--radius); box-shadow:none; } .pearl-site .appointment-contacts-card h2 { font-size:var(--text-h3); } .pearl-site :where(.appointment-contacts-card p,.appointment-disclosure-body p,.contact-block p) { font-size:var(--text-ui); line-height:1.7; } .pearl-site :where(.appointment-disclosure summary,.appointment-disclosure-body li) { font-size:var(--text-ui); } .pearl-site .pearl-preview-note { padding:14px 18px; } .pearl-site .pearl-book-dialog { width:min(680px,calc(100% - 32px)); padding:32px; } .pearl-site :where(.pearl-dialog-top,.pearl-book-dialog>.muted,.pearl-consent) { font-size:var(--text-small); line-height:1.6; } .pearl-site .pearl-dialog-top button { width:44px; height:44px; } .pearl-site .pearl-quick-form>label:not(.pearl-consent) { font-size:var(--text-ui); } .pearl-site .pearl-form-more { font-size:var(--text-ui); } .pearl-site :where(.health-check-shell,.questionnaire-shell) { border:0; background:none; padding:0; box-shadow:none; } .pearl-site :where(.health-check-hero,.questionnaire-hero) { padding-bottom:32px; border-bottom:1px solid var(--line-gold); margin-bottom:32px; } .pearl-site :where(.health-check-form,.questionnaire-form,.questionnaire-intro-card,.questionnaire-result-card,.health-check-result-card) { background:var(--surface); border:1px solid var(--line-gold); border-radius:var(--radius); padding:32px; box-shadow:none; } .pearl-site :where(.hc-start-card,.questionnaire-band-card,.questionnaire-intro-point,.health-route-item,.health-result-extra) { background:#f5f4ee; border:1px solid var(--border); border-radius:10px; box-shadow:none; } .pearl-site :where(.hc-option,.questionnaire-option) { padding:16px 18px; min-height:56px; border:1px solid var(--border); background:var(--surface); box-shadow:none; } .pearl-site :where(.hc-option.is-selected,.questionnaire-option:has(input:checked)) { background:#f3edde; border-color:var(--gold); color:var(--primary); } .pearl-site :where(.hc-option-label,.questionnaire-option-label,.hc-question-title) { font-size:var(--text-body); color:var(--text); } .pearl-site :where(.hc-progress-text,.hc-step-kicker,.hc-option-help,.questionnaire-progress-text,.questionnaire-step-help,.questionnaire-disclaimer,.health-check-disclaimer,.health-result-disclaimer) { font-size:var(--text-small); line-height:1.65; } .pearl-site :where(.patient-page-section,.patient-docs-section,.patient-rules-section,.patient-control-section,.legal-page-section) { background:var(--bg); } .pearl-site .patient-page-head { max-width:none; } .pearl-site .patient-page-highlights { display:flex; flex-wrap:wrap; gap:20px; margin-top:30px; padding-top:20px; border-top:1px solid var(--line-gold); } .pearl-site .patient-page-highlight { background:none; border:0; border-radius:0; box-shadow:none; padding:0; font-size:var(--text-ui); } .pearl-site :where(.patient-doc-card,.patient-control-card,.patient-additional-docs) { padding:28px; } .pearl-site .patient-doc-body p { font-size:var(--text-ui); } .pearl-site .legal-page-shell { grid-template-columns:minmax(0,1fr) 300px; gap:40px; } .pearl-site .legal-doc-card { padding:36px; } .pearl-site .legal-doc-body { max-width:var(--reading-width); font-size:var(--text-body); line-height:1.8; } .pearl-site .legal-side-card { padding:26px; } .pearl-site .legal-side-card p { font-size:var(--text-ui); } .pearl-site .cta-section { display:flex; gap:40px; justify-content:space-between; align-items:center; padding:40px; border:1px solid var(--line-gold); border-radius:var(--radius); background:linear-gradient(120deg,#fff,#f3f1e9); text-align:left; } .pearl-site .cta-section h2 { font-size:var(--text-h2); text-align:left; } .pearl-site .cta-section p { max-width:65ch; color:var(--muted); font-size:var(--text-body); margin:18px 0 0; } .pearl-site .cta-section>.btn { flex-shrink:0; } .pearl-site .cta-banner { padding:40px; border-color:var(--line-gold); background:linear-gradient(120deg,#fff,#f3f1e9); } .pearl-site .cta-banner h2 { color:var(--text); } .pearl-site .cta-banner p { color:var(--muted); } .pearl-site :where(.footer-links a,.site-footer li) { font-size:var(--text-ui); line-height:1.8; } .pearl-site :where(.footer-brand p,.footer-bottom,.footer-bottom p,.footer-legal,.footer-disclaimer,.site-footer small) { font-size:var(--text-small); line-height:1.7; } .pearl-site .cookie-consent__title { font-size:var(--text-body); } .pearl-site :where(.cookie-consent__text,.cookie-consent__links) { font-size:var(--text-small); line-height:1.6; } .pearl-site .cookie-consent__actions .btn { font-size:var(--text-ui); min-height:46px; } /* Shared clinic cards. Use ClinicInfoCard for short copy; clinic-panel for rich content. The same tokens cover principles, advantages, clinic story and clinical information. */ :root { --info-card-padding:32px; --info-card-gap:24px; --info-card-radius:16px; --info-card-surface:linear-gradient(135deg,#fff 35%,#f7f6f0); --info-card-title:1.5rem; --info-card-marker:80px; } .pearl-site .clinic-section-head { display:grid; grid-template-columns:.75fr 1.25fr; gap:60px; align-items:start; margin:0 0 40px; text-align:left; max-width:none; } .pearl-site .clinic-section-head h2 { margin:0; text-transform:none; } .pearl-site .clinic-section-head p { margin:0; max-width:var(--reading-width); font-size:var(--text-body); line-height:1.7; color:var(--muted); text-align:left; } .pearl-site .clinic-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--info-card-gap); align-items:stretch; margin:0; } .pearl-site .clinic-info-grid>* { grid-column:auto; min-width:0; width:auto; max-width:none; } .pearl-site .clinic-panel { min-width:0; min-height:0; padding:var(--info-card-padding); border:1px solid var(--line-gold); border-radius:var(--info-card-radius); background:var(--info-card-surface); box-shadow:inset 0 1px 0 #fff; text-align:left; } .pearl-site .clinic-panel:hover { box-shadow:inset 0 1px 0 #fff; transform:none; } .pearl-site .clinic-panel h3 { font-size:var(--info-card-title); line-height:1.4; font-weight:600; color:var(--text); text-align:left; text-wrap:pretty; overflow-wrap:break-word; } .pearl-site .clinic-panel>h3:first-child { margin-top:0; } .pearl-site .clinic-panel :where(p,li) { font-size:var(--text-body); line-height:1.7; } .pearl-site .clinic-panel :where(p,li,h2,h3,span,strong) { overflow-wrap:anywhere; } .pearl-site .clinic-panel .about-story-pill { white-space:normal; } .pearl-site .clinic-panel .what-we-treat-term { min-width:0; hyphens:auto; } .pearl-site .clinic-info-card { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; align-items:start; gap:var(--info-card-gap); } .pearl-site .clinic-info-card--marked { grid-template-columns:var(--info-card-marker) minmax(0,1fr); } .pearl-site .clinic-info-mark { display:grid; place-items:center; width:var(--info-card-marker); height:var(--info-card-marker); margin:0; padding:0; } .pearl-site .clinic-info-mark img { display:block; width:100%; height:100%; object-fit:contain; } .pearl-site .clinic-info-mark--number { border:1px solid var(--line-gold); border-radius:50%; background:#f5f3eb; color:var(--primary); font-size:2rem; line-height:1; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .pearl-site .clinic-info-body { min-width:0; } .pearl-site .clinic-info-body h3 { margin:0; } .pearl-site .clinic-info-body p { margin:14px 0 0; max-width:none; color:var(--muted); } /* Long clinical cards retain lists, hints and anchors, with the same surface and rhythm. */ .pearl-site .clinic-info-grid.service-guides-grid { margin-top:24px; } .pearl-site .clinic-panel :is(.what-we-treat-card-icon,.our-service-icon) { color:var(--primary); background:#f5f3eb; border:1px solid var(--line-gold); box-shadow:none; } .pearl-site .clinic-panel .our-service-card-head { align-items:start; } .pearl-site .clinic-panel .our-service-lead { display:block; margin:14px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--muted); } .pearl-site .clinic-panel .our-service-lead-icon { display:none; } .pearl-site .clinic-panel .service-guide-list-icon { width:8px; height:8px; flex:0 0 8px; margin-top:11px; border:0; background:var(--gold); box-shadow:none; } .pearl-site .clinic-panel .service-guide-list-icon::before,.pearl-site .clinic-panel .service-guide-list-icon::after { content:none; } /* Native disclosures: one surface, spacing and SVG plus/minus for every content opener. Navigation menus keep their dedicated navigation component. */ :root { --disclosure-title-size:1.25rem; --disclosure-gap:12px; --disclosure-toggle-size:40px; --disclosure-padding:32px; } .pearl-site :is(.clinic-faq,.our-services-accordion) { display:grid; gap:var(--disclosure-gap); margin:0; padding:0; list-style:none; } .pearl-site .clinic-faq-row { margin:0; padding:0; list-style:none; min-width:0; } .pearl-site .clinic-disclosure { margin:0; padding:0; min-width:0; overflow:visible; border:1px solid var(--line-gold); border-radius:var(--info-card-radius); background:var(--surface); color:var(--text); box-shadow:none; } .pearl-site .clinic-disclosure + .clinic-disclosure { margin-top:0; } .pearl-site .clinic-disclosure[open],.pearl-site .clinic-faq-item--static { background:var(--info-card-surface); } .pearl-site .clinic-disclosure-summary { display:grid; grid-template-columns:minmax(0,1fr) var(--disclosure-toggle-size); align-items:center; gap:24px; margin:0; padding:24px var(--disclosure-padding); min-height:88px; border:0; border-radius:var(--info-card-radius); background:none; font:600 var(--disclosure-title-size)/1.5 var(--font-sans); letter-spacing:-.02em; color:var(--text); list-style:none; text-align:left; overflow-wrap:anywhere; } .pearl-site summary.clinic-disclosure-summary { cursor:pointer; } .pearl-site summary.clinic-disclosure-summary::-webkit-details-marker { display:none; } .pearl-site summary.clinic-disclosure-summary::marker { content:''; } .pearl-site summary.clinic-disclosure-summary::after { content:none; } .pearl-site .clinic-disclosure[open] > .clinic-disclosure-summary,.pearl-site .clinic-disclosure-summary:hover { border:0; background:none; } .pearl-site .clinic-disclosure-summary:hover .clinic-disclosure-toggle { background:#eee6d5; border-color:var(--gold); } .pearl-site .clinic-disclosure-summary:focus-visible { outline:3px solid var(--gold-text); outline-offset:3px; } .pearl-site .clinic-disclosure-toggle { display:grid; place-items:center; width:var(--disclosure-toggle-size); height:var(--disclosure-toggle-size); border:1px solid var(--line-gold); border-radius:50%; color:var(--primary); background:#f5f3eb; } .pearl-site .clinic-disclosure-toggle svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; } .pearl-site .clinic-disclosure-toggle-vertical { transform-origin:12px 12px; transition:transform .16s ease; } .pearl-site .clinic-disclosure[open] > summary .clinic-disclosure-toggle-vertical { transform:scaleY(0); } .pearl-site .clinic-disclosure-body { display:block; margin:0; padding:0 var(--disclosure-padding) 28px; border:0; color:var(--muted); } .pearl-site .clinic-disclosure-body p { margin:0; max-width:var(--reading-width); font-size:var(--text-body); line-height:1.75; color:var(--muted); overflow-wrap:anywhere; } .pearl-site .clinic-faq-answer { padding-right:calc(var(--disclosure-padding) + var(--disclosure-toggle-size) + 24px); } .pearl-site .clinic-faq-item--static .clinic-disclosure-summary { display:block; min-height:0; padding-bottom:16px; } .pearl-site .clinic-faq-item--static .clinic-disclosure-body { padding-right:var(--disclosure-padding); } .pearl-site .clinic-faq-actions { display:flex; justify-content:flex-end; margin-top:24px; } /* Compact form/visit disclosures use the same control, at the available width. */ .pearl-site .clinic-disclosure--compact { --disclosure-padding:20px; --disclosure-title-size:1.125rem; } .pearl-site .clinic-disclosure--compact > summary { min-height:76px; padding-block:16px; gap:16px; } .pearl-site .appointment-disclosures h2 { margin:0 0 24px; font-size:var(--text-h3); } .pearl-site .appointment-disclosures .clinic-disclosure { margin-top:12px; } .pearl-site .pearl-form-more .clinic-disclosure-body > label:first-child { margin-top:0; } /* Rich service lists: calm divided rows instead of nested green cards. */ .pearl-site .our-service-summary-title { font:inherit; color:inherit; } .pearl-site .our-service-lead { display:block; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; } .pearl-site .our-service-lead-text { font-size:var(--text-body); line-height:1.75; color:var(--muted); } .pearl-site :is(.our-service-lead-icon,.our-service-list-icon) { display:none; } .pearl-site .our-service-list { display:grid; gap:0; margin:24px 0 0; padding:0; list-style:none; } .pearl-site .our-service-list > li { display:block; padding:20px 0; border:0; border-top:1px solid var(--border); border-radius:0; background:none; box-shadow:none; font-size:var(--text-body); line-height:1.7; } .pearl-site .our-service-list > li:last-child { padding-bottom:0; } .pearl-site .our-service-list-copy { display:grid; gap:8px; } .pearl-site .our-service-list-copy > strong { font-weight:600; color:var(--text); } .pearl-site .our-service-list-copy > span { color:var(--muted); } @media(min-width:900px) { .pearl-site .our-service-body .our-service-list-copy:has(> strong + span) { grid-template-columns:minmax(240px,.8fr) minmax(0,1.8fr); column-gap:40px; } } html.motion-off .clinic-disclosure-toggle-vertical { transition:none; } @media(prefers-reduced-motion:reduce) { .pearl-site .clinic-disclosure-toggle-vertical { transition:none; } } @media(max-width:700px) { .pearl-site .clinic-disclosure { --disclosure-padding:20px; } .pearl-site .clinic-disclosure-summary { gap:16px; padding:20px var(--disclosure-padding); } .pearl-site .clinic-disclosure-body { padding:0 var(--disclosure-padding) 24px; } .pearl-site .clinic-faq-actions .btn { width:100%; } } /* Layout changes happen before readable content becomes squeezed. */ @media(max-width:1180px) { .pearl-site .container,.pearl-site .appointment-page-container { width:calc(100% - 56px); } .pearl-site .main-nav { display:none; } .pearl-site .mobile-menu { display:block; } .pearl-site .header-cta { margin-left:auto; } .pearl-site .header-inner { gap:18px; } .pearl-home .im-hero { gap:32px; } .pearl-site .pearl-home .im-action { width:100%; } .pearl-site .doctor-profile-hero { gap:32px; } .pearl-site .doctor-details-group { gap:32px; } .pearl-site .price-table-modern .price-table td { padding:20px 14px; } } @media(max-width:960px) { .pearl-home .im-hero { grid-template-columns:1fr; gap:36px; } .pearl-site .pearl-home .im-copy h1 { max-width:800px!important; } .pearl-site .pearl-home .im-copy .im-lead { max-width:72ch!important; } .pearl-site .pearl-home .im-deck { width:min(620px,100%); margin-inline:auto; } .pearl-site .pearl-home .im-action { width:auto; } .pearl-site .pearl-home .im-directions { grid-template-columns:repeat(2,minmax(0,1fr)); } .pearl-site .pearl-home .im-bottom { grid-template-columns:1fr; gap:24px; } .pearl-site .clinic-page-intro { grid-template-columns:1fr; gap:24px; } .pearl-site .doctor-card-actions { flex-direction:column; align-items:stretch; } .pearl-site .doctor-card-actions .doctor-card-link { align-self:flex-start; } .pearl-site .doctor-photo-wrap { height:320px; } .pearl-site .doctor-profile-hero { grid-template-columns:1fr; } .pearl-site .doctor-profile-portrait { position:static; width:min(440px,100%); margin-inline:auto; } .pearl-site .doctor-details-group { grid-template-columns:1fr; gap:24px; } .pearl-site .appointment-layout,.pearl-site .legal-page-shell { grid-template-columns:1fr; } .pearl-site .appointment-aside { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0; border:0; background:none; } .pearl-site .cta-section { align-items:flex-start; flex-direction:column; gap:26px; } .pearl-site .pearl-service-grid { grid-template-columns:1fr; gap:32px; } .pearl-site .pearl-service-media { max-width:720px; } /* Stack prices before the action column becomes too narrow for readable labels. */ .pearl-site .price-table-wrap { overflow:visible; border:0; background:none; } .pearl-site .price-table,.pearl-site .price-table tbody { display:block; width:100%; min-width:0; } .pearl-site .price-table thead { display:none; } .pearl-site .price-table tr { display:grid; grid-template-columns:1fr; border:1px solid var(--line-gold); border-radius:12px; overflow:hidden; margin-bottom:16px; background:var(--surface); } .pearl-site .price-table-modern .price-table td { display:block; width:100%; text-align:left; padding:12px 20px; border:0; background:var(--surface); } .pearl-site .price-table-modern .price-table tr:nth-child(even) td { background:var(--surface); } .pearl-site .price-table td::before { display:none; } .pearl-site .price-table .price-col-category { padding-top:20px; } .pearl-site .price-table .price-col-action { padding-bottom:20px; } .pearl-site .price-row-action { width:100%; } .pearl-site .price-col-price .price-value { font-size:1.5rem; } } @media(max-width:700px) { :root { --space-section:48px; --text-lead:1.125rem; --text-h1:clamp(2rem,8.5vw,2.75rem); --text-h2:1.875rem; } .pearl-site .container,.pearl-site .appointment-page-container { width:calc(100% - 40px); } .pearl-site .header-inner { min-height:80px; padding:12px 0; gap:12px; } .pearl-site .brand-logo { width:135px; height:44px; } .pearl-site .header-cta>.pearl-motion-toggle { display:none; } .pearl-site .phone-card-number { display:none; } .pearl-site .phone-card-icon { display:inline-flex; width:40px; height:40px; padding:0; background:none; color:var(--primary); } .pearl-site .phone-card-caret { display:none; } .pearl-site .header-contact-panel { width:min(360px,calc(100vw - 40px)); right:-88px; } .pearl-site .mobile-menu-toggle { padding:10px; gap:6px; } .pearl-site .pearl-home .im-copy h1 { font-size:var(--text-h1); } .pearl-site .pearl-home .im-hero { margin-top:28px; } .pearl-site .pearl-home .im-doctor-info { padding:22px; } .pearl-site .pearl-home .im-name { font-size:1.5rem; } .pearl-site .pearl-home .im-action { width:100%; justify-content:space-between; } .pearl-site .pearl-home .im-team { gap:12px; } .pearl-site .pearl-home .im-direction { font-size:var(--text-ui); padding:12px 4px; } .pearl-site .pearl-home .im-bottom { padding:24px 20px; } .pearl-site :is(.directions-grid,.doctors-grid,.doctors-grid-compact,.service-doctors-grid,.articles-grid,.questionnaires-catalog-grid,.home-about-features,.home-principles-grid,.what-we-treat-grid,.our-services-grid,.about-why-grid,.about-principles-grid,.patient-control-grid) { grid-template-columns:1fr; gap:26px; } .pearl-site :is(.home-section-head,.appointment-aside,.appointment-hero-copy) { grid-template-columns:1fr; gap:20px; } .pearl-site .doctor-photo-wrap { height:340px; } .pearl-site .doctor-card-body { padding:24px; } .pearl-site .doctor-card-body h3 { font-size:1.625rem; } .pearl-site .doctor-card-footer { padding:22px 24px 26px; } .pearl-site .doctor-profile-hero { padding-bottom:32px; } .pearl-site .doctor-profile h1 { font-size:var(--text-h1); } .pearl-site .doctor-profile-actions { flex-direction:column; align-items:stretch; } .pearl-site .doctor-details-group { padding:32px 0; } .pearl-site .doctor-timeline-item { grid-template-columns:1fr; gap:12px; } .pearl-site .meta-pill { grid-template-columns:100px 1fr; gap:12px; } .pearl-site .doctor-section-nav { gap:8px 20px; } .pearl-site :is(.home-health-check-card,.questionnaires-featured-card,.about-story-card,.about-why-card,.about-principle-card,.service-info-card,.service-symptoms-showcase,.service-topics-card,.what-we-treat-card,.our-service-card,.service-guide-card,.article-tool,.health-check-form,.questionnaire-form,.questionnaire-intro-card,.questionnaire-result-card,.health-check-result-card,.legal-doc-card,.patient-doc-card,.patient-control-card,.appointment-form-card,.appointment-form,.cta-section,.cta-banner) { padding:24px; } .pearl-site .articles-grid--compact>.article-card:only-child { grid-template-columns:1fr; gap:0; padding:0; } .pearl-site .article-card-body { padding:24px; } .pearl-site .article-page-header h1 { font-size:var(--text-h1); } .pearl-site .article-rich-block { padding:20px 0; } .pearl-site .price-filter-btn { padding:12px 14px; } .pearl-site .pearl-book-dialog { padding:24px 20px; } .pearl-site .pearl-quick-form { grid-template-columns:1fr; } .pearl-site .pearl-quick-form>label { grid-column:1/-1; } .pearl-site .pearl-place { grid-template-columns:1fr; } .pearl-site .pearl-place>img { height:260px; min-height:0; } } @media(max-width:370px) { .pearl-site .container,.pearl-site .appointment-page-container { width:calc(100% - 32px); } .pearl-site .brand-logo { width:120px; } .pearl-site .header-inner { gap:6px; } .pearl-site .mobile-menu-toggle { padding:10px 8px; } .pearl-site .pearl-home .im-directions { grid-template-columns:1fr; } .pearl-site .meta-pill { grid-template-columns:1fr; gap:3px; } } /* Shared card breakpoints: no per-page spacing copies. */ @media(max-width:1080px) { :root { --info-card-padding:24px; --info-card-title:1.375rem; --info-card-marker:64px; } } @media(max-width:960px) { .pearl-site .clinic-info-grid { grid-template-columns:minmax(0,1fr); } .pearl-site .clinic-section-head { grid-template-columns:minmax(0,1fr); gap:20px; margin-bottom:32px; } } @media(max-width:700px) { :root { --info-card-marker:72px; } .pearl-site .clinic-info-card--marked { grid-template-columns:minmax(0,1fr); gap:20px; } .pearl-site .clinic-info-body p { margin-top:12px; } } /* Review destinations: recognizable brands, quiet external actions, a shared person directory. */ :root { --review-brand-size:52px; --person-photo-width:80px; --person-row-gap:24px; } .pearl-site .clinic-reviews { background:var(--bg); } .pearl-site .clinic-review-platforms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--info-card-gap); } .pearl-site .clinic-review-platform { display:flex; flex-direction:column; gap:24px; } .pearl-site .clinic-review-brand { display:grid; grid-template-columns:var(--review-brand-size) minmax(0,1fr); align-items:center; gap:16px; } .pearl-site .clinic-review-brand img { width:var(--review-brand-size); height:var(--review-brand-size); object-fit:contain; } .pearl-site .clinic-review-brand h3 { margin:0; font-size:1.5rem; letter-spacing:-.025em; } .pearl-site .clinic-review-brand p { margin:4px 0 0; font-size:var(--text-ui); color:var(--muted); } .pearl-site .clinic-review-description { margin:0; flex:1; } .pearl-site .clinic-external-link { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; width:fit-content; max-width:100%; padding:8px 0; color:var(--primary); font-size:var(--text-ui); line-height:1.5; font-weight:550; text-decoration:none; border:0; background:none; border-radius:2px; } .pearl-site .clinic-external-link span { min-width:0; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:var(--line-gold); } .pearl-site .clinic-external-link svg { width:24px; height:24px; flex:0 0 24px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms ease; } .pearl-site .clinic-external-link:hover span { text-decoration-color:currentColor; } .pearl-site .clinic-external-link:hover svg { transform:translate(2px,-2px); } .pearl-site .clinic-review-platform>.clinic-external-link { width:100%; border-top:1px solid var(--border); padding-top:20px; } .pearl-site .clinic-review-doctors { margin-top:48px; padding-top:40px; border-top:1px solid var(--border); } .pearl-site .clinic-review-intro { margin-bottom:28px; max-width:760px; } .pearl-site .clinic-review-intro h3 { margin:0; font-size:var(--text-h3); line-height:1.35; } .pearl-site .clinic-review-intro p { color:var(--muted); margin:12px 0 0; } .pearl-site .clinic-person-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .pearl-site .clinic-person-row { display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:24px; row-gap:20px; align-items:center; padding:28px; min-width:0; } .pearl-site .clinic-person-photo { width:96px; height:120px; object-fit:cover; object-position:center top; background:var(--surface); border:1px solid var(--border); border-radius:9px; } .pearl-site .clinic-person-body { min-width:0; } .pearl-site .clinic-person-body h4 { margin:0; font-size:1.375rem; line-height:1.35; letter-spacing:-.025em; overflow-wrap:normal; } .pearl-site .clinic-person-body .clinic-person-specialty { margin:10px 0 0; font-size:var(--text-ui); line-height:1.55; color:var(--muted); text-transform:none; } .pearl-site .clinic-person-action { grid-column:1 / -1; min-width:0; padding-top:14px; border-top:1px solid var(--border); } .pearl-site .clinic-person-action .clinic-external-link { width:100%; padding:4px 0; min-height:44px; } .pearl-site .clinic-person-note { margin:0; font-size:var(--text-ui); color:var(--muted); } @media(max-width:1080px) { .pearl-site .clinic-review-platforms { gap:16px; } .pearl-site .clinic-review-platform { padding:24px; } .pearl-site .clinic-person-row { padding:24px; column-gap:20px; } } @media(max-width:960px) { .pearl-site .clinic-review-platforms { grid-template-columns:1fr; } .pearl-site .clinic-review-platform { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 32px; } .pearl-site .clinic-review-platform>.clinic-external-link { grid-column:2; } .pearl-site .clinic-review-description { grid-column:2; grid-row:1; } .pearl-site .clinic-person-directory { gap:16px; } .pearl-site .clinic-person-row { grid-template-columns:72px minmax(0,1fr); } .pearl-site .clinic-person-photo { width:72px; height:90px; } .pearl-site .clinic-person-body h4 { font-size:1.25rem; } } @media(max-width:680px) { .pearl-site .clinic-person-directory { grid-template-columns:1fr; } .pearl-site .clinic-review-doctors { margin-top:32px; padding-top:32px; } .pearl-site .clinic-person-row { grid-template-columns:80px minmax(0,1fr); gap:20px; } .pearl-site .clinic-person-photo { width:80px; height:100px; } } @media(max-width:600px) { .pearl-site .clinic-review-platform { display:flex; gap:20px; } } @media(prefers-reduced-motion:reduce) { .pearl-site .clinic-external-link svg,.pearl-site .clinic-external-link:hover svg { transition:none; transform:none; } } html.motion-off .pearl-site .clinic-external-link svg { transition:none; transform:none; } /* Service collection: large porcelain objects and readable assessment cards. */ .pearl-site .pearl-service-media-porcelain { padding:0; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-soft); overflow:hidden; } /* Preserve each artwork’s native ratio: the frame follows the image without letterboxing. */ .pearl-site .pearl-service-media-porcelain img { height:auto; aspect-ratio:auto; object-fit:contain; border-radius:0; } .pearl-site .service-symptoms-media img { object-fit:contain; background:var(--bg); } /* Porcelain artwork remains whole even in the narrow physician-page service cards. */ .pearl-site .service-thumb:has(> img[src*="/assets/illustrations/"]) { background:var(--bg); } .pearl-site .service-thumb > img[src*="/assets/illustrations/"] { object-fit:contain; object-position:center top; } .pearl-site .our-services-grid > .our-service-card { grid-column:auto; } .pearl-site .our-services-grid.our-services-grid-tail-two-center { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .pearl-site .our-services-grid.our-services-grid-tail-two-center > .our-service-card { max-width:none; } .pearl-site .service-questionnaires-head { max-width:var(--reading-width); margin-bottom:32px; } .pearl-site .service-questionnaires-head .service-questionnaires-kicker { color:var(--gold-text); font-size:var(--text-small); letter-spacing:0; text-transform:none; } .pearl-site .questionnaires-catalog-grid { align-items:stretch; } .pearl-site .questionnaires-catalog-card { width:100%; max-width:none; min-height:0; justify-self:stretch; padding:0; overflow:hidden; } .pearl-site .questionnaires-catalog-card .article-card-media { margin:0; border:0; border-radius:0; } .pearl-site .questionnaires-catalog-card .article-card-body { display:flex; flex-direction:column; height:auto; padding:28px; gap:14px; } .pearl-site .questionnaires-catalog-card .article-category { margin:0; } .pearl-site .questionnaires-catalog-subtitle { font-size:var(--text-body); line-height:1.65; margin:0; } .pearl-site .questionnaires-catalog-subtitle.is-empty { display:none; } .pearl-site .questionnaires-catalog-description { min-height:0; margin:0; } .pearl-site .questionnaires-catalog-meta { margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--muted); font-size:var(--text-ui); } .pearl-site .questionnaires-catalog-meta > span { gap:8px; } .pearl-site .questionnaires-catalog-actions { margin:0; padding-top:6px; justify-content:flex-start; } .pearl-site .questionnaires-catalog-actions .btn { width:auto; max-width:100%; } .pearl-site .service-questionnaire-card { grid-template-rows:1fr; border-color:var(--border); } @media(max-width:800px) { .pearl-site .pearl-service-grid { grid-template-columns:minmax(0,1fr); gap:32px; } .pearl-site .doctor-card-horizontal { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; grid-template-areas:"photo" "body" "footer"; } .pearl-site .doctor-card-horizontal .doctor-photo-wrap { height:360px; min-height:0; } .pearl-site .doctor-card-horizontal .doctor-card-body { padding:24px; } .pearl-site .doctor-card-horizontal .doctor-card-footer { padding:24px; } } @media(max-width:700px) { .pearl-site :is(.questionnaires-catalog-grid,.our-services-grid.our-services-grid-tail-two-center) { grid-template-columns:minmax(0,1fr); } .pearl-site .questionnaires-catalog-card .article-card-body { padding:24px; } } .pearl-site .service-topic-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; } .pearl-site .service-topic-links > li:last-child { border-bottom:1px solid var(--border); } .pearl-site .service-symptoms-showcase { gap:24px; } .pearl-site .service-symptoms-head,.pearl-site .service-symptoms-media { padding:0; } .pearl-site .service-symptoms-media img { box-shadow:none; border:0; filter:none; } .pearl-site .service-symptom-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; padding:0; } .pearl-site .service-symptom-chips li { padding:14px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:none; box-shadow:none; align-items:flex-start; gap:12px; font-size:var(--text-body); } .pearl-site .service-symptom-chip-icon { flex:0 0 6px; width:6px; height:6px; margin-top:11px; background:var(--gold); box-shadow:none; } @media(max-width:700px) { .pearl-site .service-topic-links,.pearl-site .service-symptom-chips { grid-template-columns:minmax(0,1fr); } } /* Shared porcelain pictograms and accessible explanations. */ .pearl-site { --clinic-icon-size:72px; --clinic-icon-small:44px; --clinic-icon-compact:36px; --clinic-icon-large:80px; --clinic-hint-target:44px; --clinic-hint-mark:32px; } .pearl-site .clinic-icon { display:block; flex:none; width:var(--clinic-icon-size); height:var(--clinic-icon-size); max-width:none; object-fit:contain; object-position:center; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; } .pearl-site .clinic-icon--small { width:var(--clinic-icon-small); height:var(--clinic-icon-small); } .pearl-site .clinic-icon--compact { width:var(--clinic-icon-compact); height:var(--clinic-icon-compact); } .pearl-site .clinic-icon--large { width:var(--clinic-icon-large); height:var(--clinic-icon-large); } .pearl-site .clinic-topic-heading, .pearl-site .clinic-panel .our-service-card-head.clinic-topic-heading { display:grid; grid-template-columns:var(--clinic-icon-size) minmax(0,1fr); align-items:center; gap:18px; margin:0 0 20px; } .pearl-site .clinic-topic-heading h3 { margin:0; color:var(--text); line-height:1.35; letter-spacing:-.025em; overflow-wrap:break-word; } .pearl-site .what-we-treat-card { display:block; } .pearl-site .what-we-treat-card-content { display:block; } .pearl-site .what-we-treat-list { gap:0; } .pearl-site .what-we-treat-list li { min-height:54px; padding:5px 0; align-items:center; color:var(--text); gap:12px; } .pearl-site .what-we-treat-list li + li { border-top:1px solid var(--border); } .pearl-site .what-we-treat-term { padding:0; } .pearl-site .what-we-treat-term::before { content:none; } .pearl-site .service-card h3 { display:flex; align-items:center; gap:12px; } .pearl-site .service-card h3 > span { min-width:0; } .pearl-site :where(.about-story-pill,.about-card-kicker,.about-story-note) { align-items:center; gap:10px; } .pearl-site .about-story-mission-item { align-items:start; } .pearl-site :is(.doctor-card-degree,.doctor-profile-degree) { display:flex; align-items:center; gap:8px; } .pearl-site .doctor-details-group h2 { display:flex; align-items:flex-start; gap:12px; } .pearl-site .price-category-item { align-items:center; } .pearl-site .clinic-hint { display:inline-flex; align-items:center; justify-self:end; flex:none; } .pearl-site .clinic-hint-trigger, .pearl-site .clinic-hint-close { display:inline-grid; place-items:center; width:var(--clinic-hint-target); height:var(--clinic-hint-target); min-width:var(--clinic-hint-target); min-height:var(--clinic-hint-target); flex:none; padding:0; border:0; border-radius:50%; background:transparent; color:var(--primary); cursor:pointer; box-shadow:none; line-height:1; appearance:none; -webkit-tap-highlight-color:transparent; } .pearl-site .clinic-hint-symbol { width:var(--clinic-hint-mark); height:var(--clinic-hint-mark); overflow:visible; } .pearl-site .clinic-hint-rim { fill:#faf8f1; stroke:var(--gold); stroke-width:1; } .pearl-site .clinic-hint-trigger:hover .clinic-hint-rim, .pearl-site .clinic-hint-trigger[aria-expanded="true"] .clinic-hint-rim { fill:#eee8da; stroke:var(--gold-text); } .pearl-site :is(.clinic-hint-trigger,.clinic-hint-close):focus-visible { outline:2px solid var(--primary); outline-offset:2px; } .pearl-site .clinic-hint-panel { display:none; position:fixed; inset:auto; margin:0; z-index:10000; box-sizing:border-box; width:min(360px,calc(100vw - 24px)); padding:24px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line-gold); border-radius:16px; background:#fffefa; color:var(--text); box-shadow:0 12px 40px rgb(36 46 40 / .14); text-align:left; white-space:normal; font-family:var(--font-sans); font-size:var(--text-ui); font-weight:400; line-height:1.65; } .pearl-site .clinic-hint-panel.is-open { display:block; } .pearl-site .clinic-hint-panel:popover-open { display:block; } .pearl-site .clinic-hint-panel:focus { outline:none; } .pearl-site .clinic-hint-panel::backdrop { background:transparent; pointer-events:none; } .pearl-site .clinic-hint-title { display:block; padding-right:28px; margin:0 0 12px; font-size:var(--text-ui); font-weight:600; line-height:1.45; color:var(--primary); } .pearl-site .clinic-hint-copy { display:block; font-size:var(--text-ui); line-height:1.65; overflow-wrap:break-word; } .pearl-site .clinic-hint-close { position:absolute; top:8px; right:8px; } .pearl-site .clinic-hint-close svg { width:20px; height:20px; } .pearl-site .clinic-hint-close:hover { background:#f1eee5; } .pearl-site .hc-option { display:flex; align-items:center; gap:4px; padding:0; border-radius:10px; } .pearl-site .hc-option-main { flex:1; min-width:0; padding:14px 0 14px 12px; min-height:54px; border:0; border-radius:0; background:none; box-shadow:none; } .pearl-site .hc-option-main:hover, .pearl-site .hc-option-main:has(input:checked) { background:none; box-shadow:none; } .pearl-site .hc-option-label { overflow-wrap:normal; word-break:normal; hyphens:auto; } .pearl-site .hc-option > .clinic-hint { margin-right:4px; } @media (max-width:700px) { .pearl-site { --clinic-icon-size:64px; } .pearl-site .clinic-topic-heading, .pearl-site .clinic-panel .our-service-card-head.clinic-topic-heading { gap:12px; margin-bottom:16px; } .pearl-site .clinic-topic-heading h3 { font-size:1.375rem; } .pearl-site .what-we-treat-list li { gap:8px; } .pearl-site .clinic-hint-panel { padding:22px; } .pearl-site .about-story-pill { padding:8px 12px; } } @media (max-width:380px) { .pearl-site .clinic-topic-heading, .pearl-site .clinic-panel .our-service-card-head.clinic-topic-heading { grid-template-columns:1fr; gap:8px; } } /* Direction artwork is anatomical; functional symbols must not substitute it. */ .pearl-site :where(.nav-dropdown-link,.mobile-menu-sublink)>.clinic-icon { width:56px; height:56px; } .pearl-site .clinic-icon--anatomy { mix-blend-mode:multiply; border-radius:6px; } /* Short highlights read as a single editorial list, not cramped badge controls. */ .pearl-site .clinic-highlights { display:grid; gap:0; list-style:none; padding:0; margin:24px 0; border-block:1px solid var(--line-gold); } .pearl-site .clinic-highlight { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:16px; padding:14px 8px; min-width:0; background:none; border:0; border-radius:0; font-size:var(--text-ui); font-weight:550; line-height:1.5; color:var(--primary); } .pearl-site .clinic-highlight + .clinic-highlight { border-top:1px solid var(--border); } .pearl-site .clinic-highlight > .clinic-icon { width:36px; height:36px; } .pearl-site .clinic-highlight > span { min-width:0; overflow-wrap:break-word; } /* Creator attribution shares the footer fine-print scale; retain the brand icon. */ .pearl-site .site-footer .footer-creator { font-size:var(--text-small); font-weight:400; line-height:1.7; } .pearl-site .site-footer .footer-creator > span { font-size:inherit; font-weight:inherit; } /* Doctor photography: scene for wide frames; studio portrait for upright frames. */ .pearl-home .im-portrait-area { height:auto; padding:0; gap:0; display:block; background:var(--surface); } .pearl-home .im-portrait { display:block; width:100%; height:auto; min-height:0; aspect-ratio:3/2; object-fit:cover; transform:none; } .pearl-home .im-portrait-label { display:block; position:static; margin:0; padding:12px 22px; max-width:none; border:0; border-radius:0; box-shadow:none; background:var(--surface); } .pearl-site .doctor-photo-wrap { display:block; height:auto; aspect-ratio:3/2; padding:0; overflow:hidden; } .pearl-site .doctor-photo-wrap img { display:block; object-fit:cover; object-position:center; } .pearl-site .doctor-card-horizontal .doctor-photo-wrap { height:100%; min-height:0; aspect-ratio:auto; padding:0; } .pearl-site .doctor-card-horizontal .doctor-photo-wrap img { max-height:none; object-position:center top; } .pearl-site .doctor-profile-portrait img { max-height:none; object-fit:cover; } @media(max-width:760px) { .pearl-site .doctor-card-horizontal .doctor-photo-wrap { height:auto; aspect-ratio:4/5; } .pearl-home .im-portrait-label { padding:12px 18px; } } /* Keep the complete four-person composition visible at every breakpoint. */ .pearl-site .about-team-photo img { height:auto; width:100%; aspect-ratio:16/9; object-fit:contain; } /* Doctor timelines: undated entries are prose, not a date column. */ .pearl-site .doctor-timeline-item.no-period { grid-template-columns:minmax(0,1fr); } .pearl-site .doctor-timeline-item.doctor-achievement-item { grid-template-columns:36px minmax(0,1fr); gap:16px; } .pearl-site .doctor-timeline-year { line-height:1.5; } .pearl-site .doctor-timeline-text,.pearl-site .doctor-achievement-content { min-width:0; } .doctor-directions { display:grid; gap:16px; margin-top:32px; } .pearl-site .doctor-direction { display:grid; grid-template-columns:160px minmax(0,1fr) 40px; gap:28px; align-items:center; padding:24px; border:1px solid var(--line-gold); border-radius:16px; background:var(--surface); color:var(--text); text-decoration:none; } .doctor-direction-image { display:block; width:160px; height:128px; object-fit:contain; border-radius:10px; } .doctor-direction-copy { min-width:0; } .pearl-site .doctor-direction h3 { margin:0 0 10px; font-size:var(--text-h3); line-height:1.3; word-break:normal; overflow-wrap:normal; hyphens:none; } .pearl-site .doctor-direction p { margin:0; font-size:var(--text-body); color:var(--muted); line-height:1.65; } .doctor-direction-arrow { width:24px; height:24px; color:var(--primary); justify-self:end; } .pearl-site .doctor-direction:hover { border-color:var(--gold-text); background:#faf9f5; } .pearl-site .doctor-direction:focus-visible { outline:2px solid var(--primary); outline-offset:4px; } @media(max-width:700px) { .pearl-site .doctor-direction { grid-template-columns:minmax(0,1fr) 24px; gap:16px; padding:22px; } .doctor-direction-image { width:104px; height:88px; grid-column:1/-1; } .pearl-site .doctor-direction h3 { font-size:clamp(19px,5.6vw,25px); } .doctor-direction-arrow { align-self:center; } } /* Transparent avatar originals sit on white, including the selected doctor. */ .pearl-site .pearl-home .im-team button, .pearl-site .pearl-home .im-team button[aria-pressed="true"], .pearl-site .pearl-home .im-team img { background:#fff; } .pearl-site .pearl-home .im-team button[aria-pressed="true"] { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); } /* Survey artwork uses its native cover ratio without letterboxing or a tiny inset. */ .pearl-site .questionnaires-catalog-card .article-card-media { aspect-ratio:8/5; } .pearl-site .questionnaires-catalog-card .article-card-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* Questionnaire flow: porcelain introduction, one readable answer column. */ .pearl-site .questionnaire-shell { max-width:1180px; margin-inline:auto; } .pearl-site .questionnaire-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; align-items:center; padding-bottom:48px; margin-bottom:40px; } .pearl-site .questionnaire-hero-copy { min-width:0; } .pearl-site .questionnaire-hero h1 { font-size:clamp(30px,3.4vw,46px); line-height:1.15; margin:12px 0 24px; } .pearl-site .questionnaire-artwork { margin:0; border:1px solid var(--line-gold); border-radius:var(--radius); overflow:hidden; } .pearl-site .questionnaire-artwork img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; } .pearl-site .questionnaire-disclaimer { color:var(--muted); margin-top:24px; gap:12px; } .pearl-site .questionnaire-intro-grid { gap:32px; } .pearl-site .questionnaire-intro-card { padding:28px; } .pearl-site .questionnaire-intro-card h2 { font-size:26px; } .pearl-site .questionnaire-intro-card ol { color:var(--text); padding-left:24px; gap:18px; margin-top:24px; } .pearl-site .questionnaire-intro-card li { padding-left:8px; } .pearl-site .questionnaire-intro-card li::marker { color:var(--gold-text); font-weight:600; } .pearl-site .questionnaire-band-list-compact { grid-template-columns:1fr; gap:0; } .pearl-site .questionnaire-band-card { display:grid; grid-template-columns:minmax(90px,.4fr) 1fr; gap:16px; padding:16px 0; background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; opacity:1; filter:none; color:var(--text); } .pearl-site .questionnaire-band-card p { color:var(--gold-text); font-weight:600; } .pearl-site .questionnaire-intro-point { background:none; border:0; padding:8px 0; gap:12px; color:var(--muted); } .pearl-site .questionnaire-intro-points { margin-top:24px; } .pearl-site .questionnaire-progress { max-width:840px; margin:0 auto 24px; scroll-margin-top:120px; } .pearl-site .questionnaire-shell:has([data-questionnaire-screen="intro"].is-active) .questionnaire-progress { display:none; } .pearl-site .questionnaire-progress-track { background:#e7e3d9; height:4px; border-radius:0; } .pearl-site .questionnaire-progress-bar { background:var(--gold); } .pearl-site .questionnaire-progress-text { color:var(--muted); margin-top:12px; font-weight:500; } .pearl-site .questionnaire-screen { margin-top:0; } .pearl-site .questionnaire-screen[data-questionnaire-screen="question"], .pearl-site .questionnaire-screen[data-questionnaire-screen="result"] { max-width:840px; margin-inline:auto; } .pearl-site .questionnaire-step-head { margin-bottom:28px; } .pearl-site .questionnaire-step-kicker { display:none; } .pearl-site .questionnaire-step-head h2 { font-size:clamp(26px,3vw,36px); line-height:1.25; color:var(--text); outline:none; } .pearl-site .questionnaire-step-head p { color:var(--muted); margin-top:12px; } .pearl-site .questionnaire-step-help { background:#f1efe8; border-color:var(--border); padding:16px; } .pearl-site .questionnaire-fieldset { border:0; padding:0; background:none; border-radius:0; min-width:0; } .pearl-site .questionnaire-scale-grid { grid-template-columns:1fr; gap:10px; } .pearl-site .questionnaire-scale-option { position:relative; grid-template-columns:24px minmax(0,1fr); gap:4px 16px; min-height:64px; align-content:center; align-items:center; padding:16px 22px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:none; transform:none; } .pearl-site .questionnaire-scale-option:hover { border-color:var(--gold); background:#faf8f2; transform:none; } .pearl-site .questionnaire-scale-option:has(input:checked) { background:#f3edde; border-color:var(--gold-text); box-shadow:inset 0 0 0 1px var(--gold-text); } .pearl-site .questionnaire-scale-option:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:3px; } .pearl-site .questionnaire-scale-option input { position:static; opacity:1; pointer-events:auto; width:20px; height:20px; margin:0; grid-column:1; grid-row:1 / span 2; accent-color:var(--primary); } .pearl-site .questionnaire-scale-value { grid-column:2; color:var(--text); font-size:18px; line-height:1.4; font-weight:600; } .pearl-site .questionnaire-scale-label { grid-column:2; color:var(--muted); font-size:16px; line-height:1.45; } .pearl-site .questionnaire-actions { margin-top:28px; gap:12px; } .pearl-site .questionnaire-field-error { font-size:16px; margin-top:16px; } .pearl-site .questionnaire-result-card { padding:32px; } .pearl-site .questionnaire-result-kicker,.pearl-site .questionnaire-result-label { text-transform:none; letter-spacing:0; } .pearl-site .questionnaire-result-alert { background:#f5f3ed; border:1px solid var(--border); border-radius:12px; padding:24px; box-shadow:none; } .pearl-site .questionnaire-result-alert.is-good { background:#f5f3ed; border-color:var(--border); } .pearl-site .questionnaire-result-alert.is-warning { background:#f7f1e4; border-color:#c8aa6c; } .pearl-site .questionnaire-result-alert.is-danger { background:#faf0ed; border-color:#c48a7c; } .pearl-site .questionnaire-result-alert.is-good .questionnaire-result-label, .pearl-site .questionnaire-result-alert.is-good .ms-icon { color:var(--primary); } .pearl-site .questionnaire-result-alert-icon { background:#fff; box-shadow:none; border-color:var(--border); } .pearl-site .questionnaire-result-summary { color:var(--text); font-size:28px; line-height:1.3; outline:none; } .pearl-site .questionnaire-result-note,.pearl-site .questionnaire-result-meta-note { color:var(--muted); } .pearl-site .questionnaire-result-meta-note { padding:24px 0; border-bottom:1px solid var(--border); } .pearl-site .questionnaire-result-score { font-size:24px; color:var(--text); } .pearl-site .questionnaire-result-reference-line { padding:10px 0; border-bottom:1px solid var(--border); } @media(max-width:760px) { .pearl-site .questionnaire-hero { grid-template-columns:1fr; gap:24px; padding-bottom:28px; margin-bottom:28px; } .pearl-site .questionnaire-artwork { max-width:520px; width:100%; } .pearl-site .questionnaire-intro-grid { grid-template-columns:1fr; gap:20px; } .pearl-site .questionnaire-intro-card,.pearl-site .questionnaire-result-card { padding:20px; } .pearl-site .questionnaire-scale-option { padding:14px 16px; } .pearl-site .questionnaire-result-alert { padding:16px; grid-template-columns:1fr; } .pearl-site .questionnaire-progress { scroll-margin-top:96px; } .pearl-site .questionnaire-actions .btn { min-height:48px; } } @media(prefers-reduced-motion:reduce) { .pearl-site .questionnaire-screen.is-active { animation:none; } .pearl-site .questionnaire-progress-bar { transition:none; } } .pearl-site .questionnaire-scale-option.has-score { grid-template-columns:24px minmax(0,1fr) auto; } .pearl-site .questionnaire-scale-option.has-score input { grid-row:1; } .pearl-site .questionnaire-scale-option.has-score .questionnaire-scale-label { grid-column:2; grid-row:1; font-size:18px; font-weight:500; color:var(--text); } .pearl-site .questionnaire-scale-option.has-score .questionnaire-scale-value { grid-column:3; grid-row:1; font-size:15px; font-weight:400; color:var(--muted); } .pearl-site .questionnaire-print-modal-body { background:#f7f6f2; padding:24px; } .pearl-site .questionnaire-print-preview-sheet { border-color:var(--border); box-shadow:none; padding:24px; } .pearl-site .questionnaire-print-preview-card { background:#f7f6f2; border-color:var(--border); padding:16px; } .pearl-site .questionnaire-print-modal-kicker,.pearl-site .questionnaire-print-preview-clinic,.pearl-site .questionnaire-print-preview-label { color:var(--gold-text)!important; text-transform:none; letter-spacing:0; } .pearl-site .questionnaire-print-preview-sheet :is(h3,h4,p,strong,span) { color:var(--text); } .pearl-site .questionnaire-print-preview-sheet :is(p,span,strong),.pearl-site .questionnaire-print-preview-answer-body h4 { font-size:14px; line-height:1.5; } .pearl-site .questionnaire-print-preview-answer { padding:12px 0; border-color:var(--border); } @media(max-width:760px) { .pearl-site .questionnaire-print-modal-body,.pearl-site .questionnaire-print-preview-sheet { padding:16px; } .pearl-site .questionnaire-print-preview-head,.pearl-site .questionnaire-print-preview-summary { grid-template-columns:1fr; } } /* Health route uses the same artwork and composition at every entry point. */ .pearl-site .home-section-head { max-width:none; margin-left:0; margin-right:0; } .pearl-site .home-health-check-card { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 40px; background:#fff; border:1px solid var(--line-gold); box-shadow:none; } .pearl-site .home-health-check-copy { min-width:0; } .pearl-site .home-health-check-copy h2 { margin:12px 0 20px; } .pearl-site .home-health-check-actions { grid-column:1; display:flex; flex-wrap:wrap; gap:12px; } .pearl-site .home-health-check-actions .btn { min-width:0; } .pearl-site .health-route-art { margin:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); } .pearl-site .health-route-art img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; } .pearl-site .home-health-check-card>.health-route-art { grid-column:2; grid-row:1 / span 2; align-self:center; } .pearl-site .health-route-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; } .pearl-site .health-route-hero h1 { font-size:clamp(32px,3.5vw,48px); margin:12px 0 24px; } .pearl-site .nav-dropdown-link[href="/price"]>.clinic-icon, .pearl-site .mobile-menu-sublink[href="/price"]>.clinic-icon { background:#f5f4ef; border:1px solid var(--border); border-radius:6px; padding:0; box-sizing:border-box; } .pearl-site .articles-grid--compact>.article-card:only-child { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .pearl-site .article-card-media { min-width:0; overflow:hidden; } .pearl-site .article-card-media img { width:100%; max-width:100%; } .pearl-site .articles-grid--compact>.article-card:only-child .article-card-body { min-width:0; } .pearl-site .articles-grid--compact>.article-card:only-child .article-card-media { align-self:center; height:auto; aspect-ratio:8/5; } .pearl-site .articles-grid--compact>.article-card:only-child .article-card-media img { width:100%; height:100%; min-height:0; object-fit:cover; } @media(max-width:760px) { .pearl-site .home-health-check-card,.pearl-site .health-route-hero { grid-template-columns:1fr; gap:24px; } .pearl-site .home-health-check-card>.health-route-art { grid-column:1; grid-row:auto; } .pearl-site .home-health-check-actions { grid-row:3; } .pearl-site .articles-grid--compact>.article-card:only-child { grid-template-columns:minmax(0,1fr); } } .pearl-site .hc-progress-track { background:#e7e3d9; height:4px; } .pearl-site .hc-progress-bar { background:var(--gold); } .pearl-site .hc-option { padding:0; border:0; background:none; } .pearl-site .hc-option-main { min-height:60px; padding:16px 44px 16px 16px; background:#fff; border-color:var(--border); color:var(--text); } .pearl-site .hc-option-main:hover { background:#faf8f2; border-color:var(--gold); } .pearl-site .hc-option-main:has(input:checked) { background:#f3edde; border-color:var(--gold-text); box-shadow:inset 0 0 0 1px var(--gold-text); } .pearl-site .hc-option-main:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:3px; } .pearl-site .hc-option-main input { accent-color:var(--primary); } .pearl-site .hc-option-help { border-color:var(--line-gold); color:var(--gold-text); } .pearl-site .articles-split .article-card-media { aspect-ratio:8/5; height:auto; } .pearl-site .articles-split .article-card-media img { display:block; height:100%; width:100%; object-fit:cover; } .pearl-site .hc-question { border:0; padding:0; background:none; } .pearl-site .hc-option { border:1px solid var(--border); background:#fff; } .pearl-site .hc-option-main { padding:16px 10px 16px 16px; background:none; border:0; border-radius:10px; } .pearl-site .hc-option:has(input:checked) { background:#f3edde; border-color:var(--gold-text); } .pearl-site .hc-option-main:has(input:checked) { box-shadow:none; background:none; } @media(max-width:760px) { .pearl-site .hc-options { grid-template-columns:1fr; } .pearl-site .health-check-form { padding:20px 16px; } .pearl-site .hc-option-label { font-size:17px; hyphens:none; } } /* Shared editorial articles: cover story, chapter navigation, a calm reading column. */ .pearl-site .article-page-rich { max-width:1180px; } .pearl-site .editorial-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid var(--line-gold); } .pearl-site .editorial-hero .article-page-header { max-width:none; margin:0; } .pearl-site .editorial-hero h1 { font-size:clamp(30px,3.2vw,46px); line-height:1.16; letter-spacing:-.035em; overflow-wrap:normal; } .pearl-site .editorial-hero .article-cover { margin:0; border-color:var(--border); background:var(--surface); } .pearl-site .editorial-hero .article-cover img { width:100%; height:auto; max-height:none; aspect-ratio:8/5; object-fit:cover; } .pearl-site .editorial-layout { display:grid; grid-template-columns:240px minmax(0,760px); gap:64px; align-items:start; } .pearl-site .editorial-sidebar { position:sticky; top:120px; min-width:0; max-height:calc(100vh - 145px); overflow:auto; padding-right:12px; } .pearl-site .editorial-contents { border:0; padding:0; background:none; } .pearl-site .editorial-contents summary { font-size:18px; color:var(--text); font-weight:600; cursor:pointer; padding:0 0 18px; } .pearl-site .editorial-contents nav { display:grid; gap:0; } .pearl-site .editorial-contents a { color:var(--muted); display:block; font-size:15px; line-height:1.5; padding:12px 0; border-bottom:1px solid var(--border); text-decoration:none; } .pearl-site .editorial-contents a:hover { color:var(--primary); text-decoration:underline; text-underline-offset:4px; } .pearl-site .editorial-author { display:flex; gap:12px; align-items:center; padding-top:28px; } .pearl-site .editorial-author img { width:56px; height:64px; object-fit:cover; object-position:top; border-radius:8px; background:#fff; } .pearl-site .editorial-author p { margin:0; } .pearl-site .editorial-author span { display:block; color:var(--muted); font-size:13px; margin-bottom:4px; } .pearl-site .editorial-author strong { display:block; font-size:15px; line-height:1.45; } .pearl-site .editorial-reading { min-width:0; } .pearl-site .editorial-reading :is(.article-rich-content,.article-subsection,.article-lead,.article-tool,.contact-actions) { max-width:none; margin-inline:0; } .pearl-site .editorial-reading .article-lead { font-size:22px; line-height:1.65; color:var(--text); margin:0 0 40px; } .pearl-site .editorial-reading .article-rich-content { gap:0; } .pearl-site .editorial-reading .article-rich-block { padding:32px 0; border-bottom:1px solid var(--border); } .pearl-site .editorial-reading .article-rich-block:first-child { padding-top:0; } .pearl-site .editorial-reading :is(h2,h3,h4) { color:var(--text); scroll-margin-top:125px; line-height:1.3; } .pearl-site .editorial-reading .editorial-chapter-title { font-size:clamp(25px,2.4vw,32px); margin:12px 0 24px; } .pearl-site .editorial-reading .article-rich-block h2 { font-size:30px; } .pearl-site .editorial-reading .article-rich-block h3:not(.editorial-chapter-title) { font-size:24px; } .pearl-site .editorial-reading .article-rich-block h4:not(.editorial-chapter-title) { font-size:21px; margin:28px 0 16px; } .pearl-site .editorial-reading :is(p,li) { font-size:18px; line-height:1.85; color:var(--text); } .pearl-site .editorial-reading .article-rich-block p { margin:0 0 20px; } .pearl-site .editorial-reading .article-rich-block strong { font-weight:650; } .pearl-site .editorial-reading :is(ul,ol) { padding-left:24px; margin:20px 0 28px; } .pearl-site .editorial-reading li { padding-left:8px; margin-bottom:12px; } .pearl-site .editorial-reading li::marker { color:var(--gold-text); font-weight:600; } .pearl-site .editorial-reading li p { margin:0 0 8px; } .pearl-site .editorial-reading a { overflow-wrap:anywhere; } .pearl-site .editorial-reading .editorial-takeaway { padding:24px 28px; margin:24px 0; background:#f0ede3; border:1px solid var(--line-gold); border-radius:12px; font-size:21px; line-height:1.6; } .pearl-site .editorial-key-points { padding:28px 32px; margin:0 0 28px; background:#fff; border:1px solid var(--border); border-radius:16px; } .pearl-site .editorial-doctor-advice { padding:28px 32px; margin:0 0 36px; background:#f1eee4; border:1px solid var(--line-gold); border-radius:16px; } .pearl-site :is(.editorial-key-points,.editorial-doctor-advice) h2 { font-size:26px; margin:0 0 20px; } .pearl-site :is(.editorial-key-points,.editorial-doctor-advice) ul { margin-bottom:0; } .pearl-site :is(#article-key-points,#article-doctor-advice,#article-test,#article-materials) { scroll-margin-top:125px; } .pearl-site .editorial-reading .article-gallery { margin-top:44px; } .pearl-site .editorial-reading .article-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .pearl-site .editorial-reading .contact-actions { margin-top:40px; padding-top:28px; border-top:1px solid var(--line-gold); } @media(max-width:960px) { .pearl-site .editorial-hero { gap:28px; } .pearl-site .editorial-layout { grid-template-columns:1fr; gap:32px; max-width:760px; margin-inline:auto; } .pearl-site .editorial-sidebar { position:static; max-height:none; overflow:visible; padding:0; } .pearl-site .editorial-contents { padding:20px 24px; border:1px solid var(--border); border-radius:12px; background:#fff; } .pearl-site .editorial-contents nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; } } @media(max-width:620px) { .pearl-site .editorial-hero { grid-template-columns:1fr; margin-bottom:28px; padding-bottom:28px; } .pearl-site .editorial-contents nav { grid-template-columns:1fr; } .pearl-site .editorial-reading .article-lead { font-size:20px; } .pearl-site .editorial-reading :is(p,li) { font-size:17px; line-height:1.75; } .pearl-site :is(.editorial-key-points,.editorial-doctor-advice) { padding:22px; } .pearl-site .editorial-reading .editorial-takeaway { padding:20px; font-size:19px; } .pearl-site .editorial-reading .article-gallery-grid { gap:12px; } } /* Shared appointment controls: pearl surfaces, stable chevrons, touch targets. */ .appointment-form .custom-select-trigger,.appointment-form .custom-picker-trigger{background:#fff;border:1px solid #d5d3c9;border-radius:10px;min-height:54px;padding:12px 16px;color:#303835;font:inherit;gap:12px} .appointment-form .custom-select-trigger:hover,.appointment-form .custom-picker-trigger:hover{border-color:#b49559} .appointment-form .custom-select-value,.appointment-form .custom-picker-value{color:#303835;font-weight:400} .appointment-form .custom-select-chevron,.appointment-form .custom-picker-chevron{font-size:0;width:8px;height:8px;border-right:1.5px solid #123831;border-bottom:1.5px solid #123831;transform:rotate(45deg);margin:0 4px 4px 0} .appointment-form .is-open .custom-select-chevron,.appointment-form .is-open .custom-picker-chevron{transform:rotate(225deg);margin-top:6px} .appointment-form .custom-select-menu,.appointment-form .custom-picker-panel{border:1px solid #d7c6a6;border-radius:12px;background:#fffefa;box-shadow:0 12px 32px #26332b18;padding:8px;z-index:50;max-height:min(360px,55vh);overflow:auto} .appointment-form .custom-select-option{min-height:46px;padding:10px 12px;color:#303835;border-radius:6px;font:inherit;font-size:15px} .appointment-form .custom-select-option-text{white-space:normal;line-height:1.45} .appointment-form .custom-select-option:hover,.appointment-form .custom-time-option:hover,.appointment-form .custom-date-day:not(:disabled):hover{background:#f1eee5} .appointment-form .custom-select-option.is-selected,.appointment-form .custom-time-option.is-selected,.appointment-form .custom-date-day.is-selected{background:#123831;color:white} .appointment-form .custom-select-check,.appointment-form .custom-time-check{color:currentColor} .appointment-form button:disabled{opacity:.35;cursor:not-allowed} .appointment-form .custom-picker-leading{color:#8d713e} .appointment-form .custom-date-head strong{font-family:inherit;color:#303835} .appointment-form .custom-date-nav{background:#f6f4ed;border-color:#ddd5c4;color:#123831;min-width:40px;min-height:40px} .appointment-form .custom-date-day{min-height:40px;color:#303835;border-radius:6px} .appointment-form .custom-date-day.is-today{border-color:#b49559} .appointment-form .custom-time-option{min-height:44px;background:white;color:#303835;border-color:#ddd5c4} .appointment-form :is(button,input,textarea):focus-visible{outline:2px solid #9c7d40;outline-offset:3px} .appointment-form .is-invalid :is(.custom-select-trigger,.custom-picker-trigger),.appointment-form [aria-invalid=true]{border-color:#a94638} .pearl-book-dialog .appointment-form{display:grid;gap:18px;background:transparent;padding:0;border:0;box-shadow:none} .pearl-book-dialog .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .pearl-book-dialog .form-field{min-width:0;margin:0;font-size:14px} .pearl-book-dialog .consent{font-size:13px;line-height:1.6} .pearl-book-dialog .appointment-form>.btn{justify-self:start} @media(max-width:620px){.pearl-book-dialog .field-grid{grid-template-columns:minmax(0,1fr)}.appointment-form .custom-date-day{min-height:42px}.appointment-form .custom-select-menu,.appointment-form .custom-picker-panel{position:relative;top:auto;margin-top:8px;max-height:320px}.pearl-book-dialog .appointment-form>.btn{width:100%}} .appointment-form .custom-select-trigger{display:grid;grid-template-columns:minmax(0,1fr) 12px} .appointment-form .custom-picker-trigger{display:grid;grid-template-columns:22px minmax(0,1fr) 12px} .appointment-form .custom-select-value,.appointment-form .custom-picker-value{display:block;text-align:left} @media(max-width:620px){.appointment-form .custom-date-panel{max-height:none;overflow:visible}} /* Real-clinic gallery: manual photo strip and full-frame viewer. */ .pearl-site .clinic-gallery{background:#efeee7;overflow:hidden} .clinic-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px} .clinic-gallery-head h2{margin:8px 0 16px;font-size:clamp(30px,3vw,42px)} .clinic-gallery-head p{margin:0;max-width:660px;color:#626b66} .clinic-gallery-head .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8c703d} .clinic-gallery-controls{display:flex;align-items:center;gap:10px;flex-shrink:0} .clinic-gallery-controls[hidden]{display:none} .clinic-gallery-controls>span{font-size:14px;margin-right:16px;color:#626b66;font-variant-numeric:tabular-nums} .clinic-gallery button{display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #c9bea6;border-radius:50%;color:#123831;background:#fffefa;font:24px/1 var(--font-sans);cursor:pointer} .clinic-gallery button:hover{background:#e4decf}.clinic-gallery button:disabled{opacity:.3;cursor:default} .clinic-gallery :is(button,a):focus-visible,.clinic-gallery-track:focus-visible{outline:2px solid #98783d;outline-offset:4px} .clinic-gallery-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b7a47e transparent;padding:4px 0 16px;position:relative;overscroll-behavior-x:contain} .clinic-gallery-slide{flex:0 0 76%;min-width:0;margin:0;scroll-snap-align:start} .clinic-gallery-slide:last-child{margin-right:24%} .clinic-gallery-slide>a{display:block;border-radius:14px;overflow:hidden;cursor:zoom-in;background:#e6e2d8} .clinic-gallery-slide img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover} .clinic-gallery-slide figcaption{display:flex;align-items:center;gap:18px;padding:20px 0 12px;border-bottom:1px solid #d4cdbd} .clinic-gallery-slide figcaption>span:first-child{font-size:13px;color:#8c703d} .clinic-gallery-slide h3{font-size:20px;margin:0;font-weight:550} .clinic-gallery-enlarge{margin-left:auto;font-size:13px;color:#626b66} .clinic-gallery-note{font-size:12px;line-height:1.6;color:#73796f;margin:16px 0 0;max-width:680px} .clinic-gallery-open{overflow:hidden} .clinic-gallery-viewer{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:18px;border:1px solid #c9bea6;border-radius:16px;background:#f7f6f1;color:#303835;overflow:auto} .clinic-gallery-viewer::backdrop{background:#12231de0;backdrop-filter:blur(5px)} .clinic-gallery-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px} .clinic-gallery-viewer-head p{margin:0;font-size:18px} .clinic-gallery-viewer>img{display:block;width:100%;height:min(68dvh,780px);object-fit:contain} .clinic-gallery-viewer-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px;font-size:14px} @media(max-width:620px){.clinic-gallery-head{display:block;margin-bottom:22px}.clinic-gallery-controls{margin-top:22px;justify-content:flex-end}.clinic-gallery-controls>span{margin-right:auto}.clinic-gallery-track{gap:16px}.clinic-gallery-slide{flex-basis:92%}.clinic-gallery-slide:last-child{margin-right:8%}.clinic-gallery-slide h3{font-size:17px}.clinic-gallery-slide figcaption{gap:10px;padding:14px 0}.clinic-gallery-enlarge{display:none}.clinic-gallery-viewer{padding:12px}.clinic-gallery-viewer-head p{font-size:16px}.clinic-gallery-viewer>img{height:auto;max-height:68dvh}} /* Laboratory partnership: retain the partner's original mark and clinic typography. */ .lab-partner{background:#fff;border-block:1px solid var(--border,#dedbd2);padding:36px 0} .lab-partner-inner{display:grid;grid-template-columns:240px minmax(0,1fr) auto;align-items:center;gap:40px} .lab-partner-brand img{display:block;width:210px;max-width:100%;height:auto} .lab-partner-brand span{display:block;font-size:13px;color:var(--muted,#626b67);margin-top:12px} .lab-partner-copy h2{font-size:clamp(24px,2.2vw,34px);margin:8px 0 12px;letter-spacing:-.035em} .lab-partner-copy p{margin:0}.lab-partner-copy .eyebrow{font-size:12px} .lab-partner-action{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.lab-partner-action>a:last-child{font-size:14px} .lab-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:72px;align-items:center;padding:18px 0 64px} .lab-intro h1{font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-.045em}.lab-intro .lead{max-width:660px;font-size:21px} .lab-identity{padding:40px;background:#fff;border:1px solid var(--border,#dedbd2);border-radius:16px}.lab-identity img{max-width:100%;height:auto}.lab-identity p{font-size:16px;line-height:1.65} .lab-editorial{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:64px;border-top:1px solid var(--border,#dedbd2);padding:48px 0}.lab-editorial h2{font-size:30px;margin:0}.lab-editorial>div>p:first-child{margin-top:0}.lab-editorial p{line-height:1.75} .lab-steps article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;margin-bottom:32px}.lab-steps article:last-child{margin-bottom:0}.lab-steps article>span{color:#8d6b2f;font-size:14px;padding-top:6px}.lab-steps h3{margin:0;font-size:23px}.lab-steps p{margin:10px 0} .lab-note{padding:24px 28px;background:#fff;border-radius:12px;margin:24px 0}.lab-note h3{font-size:22px;margin:0 0 8px}.lab-note p{margin:0} .lab-contact{padding:32px 0;border-top:1px solid var(--border,#dedbd2);display:flex;align-items:center;justify-content:space-between;gap:24px}.lab-contact h2{font-size:30px}.lab-contact .btn{flex-shrink:0} @media(max-width:1000px){.lab-partner-inner{grid-template-columns:190px minmax(0,1fr);gap:24px}.lab-partner-action{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap}.lab-intro{gap:32px}} @media(max-width:680px){.lab-partner-inner,.lab-intro,.lab-editorial{grid-template-columns:minmax(0,1fr);gap:24px}.lab-partner-brand img{width:180px}.lab-partner-action{grid-column:auto}.lab-intro{padding-bottom:40px}.lab-identity{padding:28px}.lab-identity img{width:240px}.lab-editorial{padding:32px 0}.lab-contact{align-items:flex-start;flex-direction:column}.lab-intro .lead{font-size:18px}} /* License: paired information/document panels, then compact legal navigation. */ .pearl-site .license-page-head { max-width:800px; margin-bottom:40px; } .pearl-site .license-page-head h1 { margin:0 0 18px; } .pearl-site .license-page-head p { color:var(--muted); font-size:var(--text-lead); margin:0; } .pearl-site .license-page-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; } .pearl-site :is(.license-info-panel,.license-document-panel) { padding:32px; background:var(--surface); border:1px solid var(--line-gold); border-radius:var(--radius); min-width:0; } .pearl-site .license-panel-heading { display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap; } .pearl-site .license-panel-heading h2 { font-size:1.625rem; margin:0; } .pearl-site .license-info-copy p { margin:0 0 20px; overflow-wrap:anywhere; } .pearl-site .license-info-copy p:last-child { margin-bottom:0; padding-top:20px; border-top:1px solid var(--border); } .pearl-site .license-file-type { font-size:var(--text-small); color:var(--muted); } .pearl-site .license-document-preview { display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 20px 16px; background:var(--surface-2); border-radius:8px; color:var(--primary); } .pearl-site .license-document-preview img { display:block; width:160px; height:auto; border:1px solid var(--border); box-shadow:0 8px 18px #30373512; } .pearl-site .license-document-preview span { display:flex; gap:10px; align-items:center; font-size:var(--text-ui); text-decoration:underline; text-underline-offset:4px; } .pearl-site .license-document-preview:hover { background:#e7e7de; } .pearl-site .license-document-date { margin:20px 0; font-size:var(--text-ui); color:var(--muted); } .pearl-site .license-document-actions { display:flex; flex-wrap:wrap; gap:12px; } .pearl-site .license-document-note { font-size:var(--text-small); color:var(--muted); margin:18px 0 0; line-height:1.6; } .pearl-site .license-legal-panel { display:grid; grid-template-columns:1fr 1.4fr; gap:40px; padding:28px 32px; margin-top:24px; border:1px solid var(--border); border-radius:var(--radius); } .pearl-site .license-legal-panel h2 { font-size:1.375rem; margin:0 0 12px; } .pearl-site .license-legal-panel p { font-size:var(--text-ui); color:var(--muted); margin:0; max-width:32ch; } .pearl-site .license-legal-links { display:grid; } .pearl-site .license-legal-links a { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:12px 0; border-bottom:1px solid var(--border); color:var(--primary); font-size:var(--text-ui); } .pearl-site .license-legal-links a:first-child { padding-top:0; } .pearl-site .license-legal-links a:last-child { border-bottom:0; padding-bottom:0; } .pearl-site .license-legal-links a span:first-child { text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-gold); } .pearl-site .license-legal-links a:hover { color:var(--gold-text); } .pearl-site .license-page-foot { margin-top:28px; } .pearl-site .license-page-foot p { font-size:var(--text-small); color:var(--muted); margin:8px 0 0; } .pearl-site .license-page-foot a { color:var(--primary); text-decoration:underline; text-underline-offset:4px; } @media(max-width:850px) { .pearl-site .license-page-grid { grid-template-columns:1fr; } .pearl-site .license-legal-panel { grid-template-columns:1fr; gap:24px; } .pearl-site .license-legal-panel p { max-width:none; } } @media(max-width:540px) { .pearl-site :is(.license-info-panel,.license-document-panel,.license-legal-panel) { padding:24px 20px; } .pearl-site .license-page-head { margin-bottom:28px; } .pearl-site .license-panel-heading h2 { font-size:1.375rem; } .pearl-site .license-document-actions { flex-direction:column; } .pearl-site .license-legal-links a { padding:16px 0; } } /* Appointment facts and a readable three-step route, shared with doctor profiles. */ .visit-section-heading { margin-bottom:32px; } .visit-section-heading h2 { margin:0; text-wrap:balance; } .service-visit .visit-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; padding:32px; margin-bottom:24px; } .visit-doctor { display:grid; grid-template-columns:80px minmax(0,1fr); gap:24px; align-items:start; } .visit-doctor-copy { min-width:0; } .visit-doctor h3 { margin:0 0 8px; font-size:1.625rem; line-height:1.35; text-wrap:balance; } .visit-specialty { margin:0; color:#59625e; font-size:1rem; line-height:1.6; } .visit-address { display:flex; align-items:flex-start; gap:12px; margin:24px 0 0; font-size:1rem; line-height:1.6; color:#59625e; } .visit-address svg { width:20px; height:20px; flex:0 0 20px; margin-top:3px; color:#80622f; } .visit-street { white-space:nowrap; } .visit-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; align-content:center; margin:0; padding:0 0 0 40px; border-left:1px solid #dedbd2; } .visit-facts>div { min-width:0; } .visit-facts dt { color:#59625e; font-size:1rem; } .visit-facts dd { margin:8px 0 0; font-size:1.5rem; line-height:1.35; font-weight:600; color:#123831; font-variant-numeric:tabular-nums; text-wrap:balance; } .visit-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .service-visit .visit-detail { padding:32px; } .visit-detail-heading { display:flex; align-items:center; gap:20px; margin-bottom:16px; } .visit-detail-heading .clinic-icon { flex-shrink:0; } .visit-details h3 { margin:0; font-size:1.5rem; line-height:1.35; text-wrap:balance; } .visit-details p { margin:0; max-width:65ch; } .visit-process { margin-top:48px; } .visit-process>h3 { margin:0 0 28px; font-size:1.625rem; } .visit-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:0; } .visit-route li { position:relative; min-width:0; } .visit-route li:not(:last-child)::after { content:""; position:absolute; top:24px; left:64px; right:-16px; height:1px; background:#c6a467; } .visit-step-number { display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border:1px solid #c6a467; border-radius:50%; background:#fff; color:#80622f; font-size:1.25rem; line-height:1; font-weight:600; } .visit-route h4 { margin:0 0 8px; font-size:1.375rem; line-height:1.4; } .visit-route p { margin:0; } .service-visit .service-info-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; } @media(max-width:1080px) { .service-visit .visit-summary { gap:24px; padding:24px; } .visit-doctor { grid-template-columns:64px minmax(0,1fr); gap:16px; } .visit-doctor>.clinic-icon { width:64px; height:64px; } .visit-doctor h3 { font-size:1.5rem; } .visit-facts { padding-left:24px; gap:24px; } .service-visit .visit-detail { padding:24px; } } @media(max-width:960px) { .service-visit .visit-summary { grid-template-columns:minmax(0,1fr); gap:28px; } .visit-facts { border-left:0; border-top:1px solid #dedbd2; padding:24px 0 0; } .visit-details { grid-template-columns:minmax(0,1fr); } .visit-detail-heading { gap:18px; } .visit-route { grid-template-columns:minmax(0,1fr); gap:24px; } .visit-route li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:20px; } .visit-route li:not(:last-child)::after { top:64px; bottom:-8px; left:24px; right:auto; width:1px; height:auto; } } @media(max-width:700px) { .visit-section-heading { margin-bottom:24px; } .visit-facts { gap:24px 16px; } .visit-facts dd { font-size:1.25rem; } .visit-doctor { grid-template-columns:minmax(0,1fr); gap:16px; } .visit-doctor h3 { max-width:24ch; } .visit-address { margin-top:16px; } .visit-detail-heading .clinic-icon { width:64px; height:64px; } .visit-details h3 { font-size:1.375rem; } .visit-process { margin-top:36px; } } @media(max-width:380px) { .visit-detail-heading { align-items:flex-start; flex-direction:column; gap:12px; } .visit-facts { grid-template-columns:minmax(0,1fr); } .visit-facts>div+div { padding-top:16px; border-top:1px solid #dedbd2; } .visit-address { gap:8px; font-size:.875rem; } .service-visit .service-info-actions .btn { width:100%; } } /* Keep the clinic descriptor and homepage headings as complete words. */ .pearl-site .pearl-home :is(h1,h2,.im-location,.im-location span) { hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:normal; } /* About clinic: never split the clinic name or descriptor inside a word. */ .pearl-site .about-main-hero h1 { hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:normal; } /* Appointment confirmation and three independent sidebar sections. */ .pearl-site .appointment-success-card { width:min(480px,100%); padding:36px; text-align:left; background:var(--surface-2); border:1px solid var(--line-gold); border-radius:16px; box-shadow:none; } .pearl-site .appointment-success-art { display:block; width:96px; height:96px; object-fit:contain; margin:0 0 24px; border-radius:12px; } .pearl-site .appointment-success-card h2 { margin:0 0 16px; font-size:clamp(26px,3vw,34px); line-height:1.2; color:var(--primary); text-align:left; max-width:18ch; } .pearl-site .appointment-success-card p { margin:0 0 28px; font-size:17px; line-height:1.7; color:var(--text); text-align:left; } .pearl-site .appointment-success-card .btn { min-width:144px; } .pearl-site .appointment-aside { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; } .pearl-site .appointment-aside>.appointment-hero-stats { margin:0; padding:28px; border:1px solid var(--line-gold); border-radius:var(--radius); background:var(--surface); box-shadow:none; display:grid; gap:24px; } .pearl-site .appointment-hero-stat { padding:0; background:none; border:0; box-shadow:none; } .pearl-site .appointment-hero-stat+.appointment-hero-stat { padding-top:24px; border-top:1px solid var(--border); } .pearl-site .appointment-aside>.card { margin:0; } .pearl-site .appointment-contacts-card .note-box { background:var(--surface-2); border-color:var(--border); color:var(--muted); } @media(max-width:540px) { .pearl-site .appointment-success-card { padding:28px 24px; } .pearl-site .appointment-success-art { width:80px; height:80px; margin-bottom:20px; } .pearl-site .appointment-aside>.appointment-hero-stats { padding:24px; } } .pearl-site .appointment-success-modal { z-index:1200; overflow-y:auto; }