:root {
--hh-white: #ffffff;
--hh-teal: #008080;
--hh-teal-solid: #00847f;
--hh-teal-dark: #006D6D;
--hh-blue: #4D9BFF;
--hh-blue-hover: #3D8EF5;
--hh-text-dark: #244047;
--hh-teal-form: #238b85;
--hh-grey-button: #e5e5e5;
--hh-grey-button-border: #d0d0d0;
--hh-border-light: #dce8e8;
--hh-shadow-header: 0 2px 8px rgba(0,0,0,0.08);
--hh-shadow-button-blue: 0 10px 24px rgba(77,155,255,0.22);
--hh-shadow-button-blue-hover: 0 6px 18px rgba(77,155,255,0.18);
--hh-radius-button: 10px;
--hh-transition-fast: 0.25s ease;
--hh-transition-header: 0.3s ease;
} html,
body {
margin: 0 !important;
overflow-x: hidden;
}
p:last-child {
margin-bottom: 0;
}
.elementor-widget-text-editor p {
margin-bottom: 0.8em;
}
.elementor-button,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:focus {
color: var(--hh-white) !important;
} .cmplz-manage-consent {
display: none !important;
} .hh-hero-header {
position: fixed !important;
inset: 0 0 auto 0;
width: 100%;
max-width: 100vw;
min-width: 0;
z-index: 9999;
padding: 24px 20px !important;
background: transparent;
box-shadow: none;
box-sizing: border-box;
overflow: visible;
transition:
background-color var(--hh-transition-header),
box-shadow var(--hh-transition-header),
padding var(--hh-transition-header);
}
.hh-hero-header-inner {
max-width: none !important;
width: 100%;
min-width: 0;
margin-inline: auto;
box-sizing: border-box;
}
.hh-hero-header.hh-scrolled {
background: var(--hh-teal-solid);
box-shadow: var(--hh-shadow-header);
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.hh-header-logo {
flex: 0 1 auto;
min-width: 0;
}
.hh-header-logo img {
width: 190px !important;
max-width: 190px !important;
height: auto !important;
transition:
width var(--hh-transition-header),
max-width var(--hh-transition-header),
transform var(--hh-transition-header);
}
.hh-hero-header.hh-scrolled .hh-header-logo img {
width: 170px !important;
max-width: 170px !important;
}
.hh-hero-nav {
display: flex;
align-items: center;
gap: 28px;
}
.hh-hero-nav a {
color: var(--hh-white);
text-decoration: none;
font-weight: 600;
transition: opacity var(--hh-transition-fast);
}
.hh-hero-nav a:hover {
opacity: 0.78;
}
.hh-mobile-menu-trigger {
display: none;
} body:has(.solid-header-page) .hh-hero-header {
background: var(--hh-teal-solid) !important;
box-shadow: var(--hh-shadow-header) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
body:has(.solid-header-page) .entry-content {
padding-top: 80px;
} .hh-solid-header {
position: fixed !important;
inset: 0 0 auto 0;
width: 100%;
z-index: 9999;
padding: 6px 20px !important;
background: var(--hh-teal);
box-shadow: var(--hh-shadow-header);
}
.hh-solid-header .hh-hero-header-inner {
max-width: none !important;
width: 100%;
margin-inline: auto;
}
.hh-solid-header .hh-header-logo img {
width: 150px !important;
max-width: 150px !important;
}
@media (max-width: 1024px) {
.hh-hero-header {
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 0 !important;
padding-left: 14px !important;
padding-right: 5px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.hh-hero-header-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
margin-inline: 0 !important;
box-sizing: border-box !important;
}
.hh-hero-nav,
.hh-header-book-button {
display: none !important;
}
.hh-header-logo {
flex: 0 1 auto !important;
min-width: 0 !important;
}
.hh-header-logo img {
width: 135px !important;
max-width: 135px !important;
}
.hh-hero-header.hh-scrolled .hh-header-logo img {
width: 125px !important;
max-width: 125px !important;
}
body:has(.solid-header-page) .entry-content {
padding-top: 72px;
}
}
@media (max-width: 767px) {
body:has(.solid-header-page) .entry-content {
padding-top: 64px;
}
} @media (min-width: 1025px) and (max-height: 820px) { body:has(.solid-header-page) .entry-content {
padding-top: 0;
} .hero-main .hero-inner {
padding-top: 80px !important;
} .hero-main .hero-title {
font-size: clamp(3rem, 4.8vw, 4.5rem) !important;
line-height: 1.05 !important;
} .hero-main .hero-content {
justify-content: flex-end;
}
} @media (max-width: 1024px) {
.hh-mobile-menu-trigger {
display: flex !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
flex: 0 0 44px !important;
margin-left: auto !important;
margin-right: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 999999 !important;
cursor: pointer !important;
}
.hh-mobile-menu-trigger .hh-hamburger-button,
.hh-mobile-menu-trigger button.hh-hamburger-button,
.hh-mobile-menu-trigger button {
appearance: none !important;
-webkit-appearance: none !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: var(--hh-white) !important;
box-shadow: none !important;
text-shadow: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
cursor: pointer !important;
}
.hh-mobile-menu-trigger .hh-hamburger-button:hover,
.hh-mobile-menu-trigger .hh-hamburger-button:focus,
.hh-mobile-menu-trigger .hh-hamburger-button:active,
.hh-mobile-menu-trigger button:hover,
.hh-mobile-menu-trigger button:focus,
.hh-mobile-menu-trigger button:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: var(--hh-white) !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.hh-mobile-menu-trigger .hh-hamburger-button::before,
.hh-mobile-menu-trigger .hh-hamburger-button::after,
.hh-mobile-menu-trigger button::before,
.hh-mobile-menu-trigger button::after {
display: none !important;
content: none !important;
}
.hh-mobile-menu-trigger .hh-hamburger-button span,
.hh-mobile-menu-trigger button span {
display: block !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
padding: 0 !important;
margin: 0 !important;
background: var(--hh-white) !important;
background-color: var(--hh-white) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
}
} .hh-popup-menu {
display: flex;
flex-direction: column;
gap: 16px;
padding: 26px 28px 28px;
text-align: left;
}
.hh-popup-menu a {
color: var(--hh-white) !important;
text-decoration: none !important;
font-size: 16px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
transition: opacity var(--hh-transition-fast);
}
.hh-popup-menu a:hover {
opacity: 0.78;
}
.hh-popup-menu-label {
align-self: flex-start;
color: var(--hh-white);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.24);
}
.hh-popup-divider {
width: 100%;
height: 1px;
background: rgba(255,255,255,0.16);
margin: 2px 0 4px;
}
.pum-close {
top: 12px !important;
right: 12px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: var(--hh-white) !important;
font-size: 28px !important;
line-height: 1 !important;
padding: 4px 8px !important;
transition: opacity var(--hh-transition-fast);
}
.pum-close:hover,
.pum-close:focus,
.pum-close:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: var(--hh-white) !important;
opacity: 0.78;
}
html.pum-open,
html.pum-open.pum-open-overlay,
body.pum-open,
body.pum-open-overlay,
.pum-open-overlay {
overflow: visible !important;
padding-right: 0 !important;
}
@media (min-width: 1025px) {
#pum-1309 {
display: none !important;
}
} .hh-cinematic {
opacity: 0.88;
transform: translateY(28px);
transition:
opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.hh-cinematic.hh-cinematic-visible {
opacity: 1;
transform: translateY(0);
}
body.elementor-editor-active .hh-cinematic {
opacity: 1 !important;
transform: none !important;
}
.hh-depth-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hh-depth-section::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
background: rgba(0,128,128,0.06);
filter: blur(80px);
top: 50%;
right: -180px;
transform: translateY(-50%);
z-index: -1;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.hh-cinematic {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
} .hh-button-calendar,
.hh-button-phone,
.hh-button-phone-blue {
display: inline-flex;
align-items: center;
color: var(--hh-white) !important;
white-space: nowrap;
}
.hh-button-calendar a,
.hh-button-phone a,
.hh-button-phone-blue a {
color: var(--hh-white) !important;
}
.hh-button-calendar::before,
.hh-button-phone::before,
.hh-button-phone-blue::before {
content: "";
display: inline-block;
width: 20px;
height: 18px;
flex: 0 0 30px;
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: left center;
transform: translateY(3px);
}
.hh-button-calendar::before {
background-image: url(//helm-hearing.co.uk/wp-content/uploads/2026/05/calendar-days.png);
}
.hh-button-phone::before {
background-image: url(//helm-hearing.co.uk/wp-content/uploads/2026/05/phone.png);
}
.hh-button-phone-blue::before {
background-image: url(//helm-hearing.co.uk/wp-content/uploads/2026/05/phone-1.png);
} .hh-home-visits-section {
background: var(--hh-white);
}
.hh-home-visits-section .elementor-icon-list-items {
margin-bottom: 0;
}
.hh-home-visits-section .elementor-icon-list-item {
align-items: flex-start;
}
.hh-home-visits-section .elementor-icon-list-icon {
margin-top: 3px;
}
.hh-home-visits-section .elementor-button {
margin-top: 4px;
}
#home-visits,
#mobile,
#faq {
scroll-margin-top: 120px;
} .hh-footer {
background: var(--hh-teal-dark);
}
.hh-footer p,
.hh-footer .elementor-widget-text-editor,
.hh-footer .elementor-icon-list-text,
.hh-footer a {
color: rgba(255,255,255,0.78);
}
.hh-footer a {
text-decoration: none;
transition:
color var(--hh-transition-fast),
opacity var(--hh-transition-fast);
}
.hh-footer a:hover,
.hh-footer a:focus,
.hh-footer .hh-footer-muted a:hover,
.hh-footer .hh-footer-muted a:focus {
color: var(--hh-white);
}
.hh-footer h2,
.hh-footer h3,
.hh-footer h4,
.hh-footer .elementor-heading-title {
color: var(--hh-white);
}
.hh-footer .hh-footer-muted,
.hh-footer .hh-footer-muted a {
color: rgba(255,255,255,0.65);
}
.hh-footer .elementor-button,
.hh-footer .elementor-button:visited,
.hh-footer .elementor-button:hover,
.hh-footer .elementor-button:focus {
color: var(--hh-white) !important;
}
@media (max-width: 767px) {
.hh-footer {
text-align: left;
}
} .symptoms-modern-section {
background: linear-gradient(135deg, #f4fbfb 0%, var(--hh-white) 45%, #eef8f8 100%);
position: relative;
overflow: hidden;
}
.symptoms-modern-section::before,
.symptoms-modern-section::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
}
.symptoms-modern-section::before {
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(0, 124, 122, 0.08);
top: 35px;
left: 40px;
}
.symptoms-modern-section::after {
width: 120%;
height: 160px;
background: rgba(0, 124, 122, 0.05);
bottom: -95px;
left: -10%;
border-radius: 50% 50% 0 0;
}
.symptoms-modern-section > * {
position: relative;
z-index: 1;
}
.symptoms-modern-inner {
width: 100%;
}
.symptoms-modern-image-column,
.symptoms-modern-content {
min-width: 0;
}
.symptoms-modern-image-column img {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center center;
border-radius: 28px;
display: block;
box-shadow: 0 24px 60px rgba(0, 80, 80, 0.10);
}
.symptoms-modern-intro {
max-width: 560px;
}
.symptoms-modern-list .elementor-icon-list-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.symptoms-modern-reassurance {
margin-top: -4px;
}
.symptoms-modern-button .elementor-button {
border-radius: var(--hh-radius-button);
box-shadow: 0 14px 30px rgba(0, 124, 122, 0.22);
transition: all var(--hh-transition-fast);
}
.symptoms-modern-button .elementor-button:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(0, 124, 122, 0.28);
}
@media (max-width: 1024px) {
.symptoms-modern-inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 45px !important;
width: 100% !important;
max-width: 100% !important;
}
.symptoms-modern-image-column,
.symptoms-modern-content {
width: 100% !important;
max-width: 100% !important;
}
.symptoms-modern-image-column img {
height: 420px;
}
.symptoms-modern-section::before {
width: 320px;
height: 320px;
top: 40px;
left: -60px;
}
}
@media (max-width: 767px) {
.symptoms-modern-section {
padding-left: 18px !important;
padding-right: 18px !important;
}
.symptoms-modern-inner {
gap: 36px !important;
}
.symptoms-modern-image-column img {
height: 300px;
border-radius: 22px;
}
.symptoms-modern-heading h2,
.symptoms-modern-heading .elementor-heading-title {
font-size: 29px !important;
line-height: 1.12em !important;
max-width: 100%;
}
.symptoms-modern-intro {
max-width: 100%;
font-size: 16px !important;
line-height: 1.55em !important;
}
.symptoms-modern-button,
.symptoms-modern-button .elementor-button {
width: 100%;
}
.symptoms-modern-button .elementor-button {
justify-content: center;
}
.symptoms-modern-section::before {
width: 260px;
height: 260px;
top: 30px;
left: -90px;
}
.symptoms-modern-section::after {
height: 120px;
bottom: -75px;
}
} .trust-band-section {
width: 100%;
background: linear-gradient(135deg, #f8ffff 0%, var(--hh-white) 50%, #f6fcfc 100%);
overflow: hidden;
border-bottom: 1px solid rgba(0, 124, 122, 0.10);
}
.trust-band-inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: grid !important;
grid-template-columns: 1.45fr repeat(4, 1fr);
align-items: start;
column-gap: 0;
}
.trust-band-main {
width: auto !important;
max-width: none !important;
padding: 0 34px 0 0;
border-right: 1px solid rgba(0, 124, 122, 0.22);
}
.trust-band-item {
width: auto !important;
max-width: none !important;
min-width: 0;
padding: 0 34px;
text-align: center;
border-right: 1px solid rgba(0, 124, 122, 0.18);
}
.trust-band-item:last-child {
border-right: none;
}
.trust-band-item .elementor-widget-icon,
.trust-band-item .elementor-widget-heading,
.trust-band-item .elementor-widget-text-editor,
.trust-band-main .elementor-widget-icon,
.trust-band-main .elementor-widget-heading,
.trust-band-main .elementor-widget-text-editor {
margin-bottom: 0 !important;
}
.trust-band-item p,
.trust-band-main p {
margin-bottom: 0;
}
.trust-band-item .elementor-icon,
.trust-band-main .elementor-icon {
line-height: 1;
}
@media (max-width: 1024px) {
.trust-band-inner {
grid-template-columns: repeat(2, 1fr);
gap: 32px 0;
}
.trust-band-main {
grid-column: 1 / -1;
padding: 0 0 28px 0;
border-right: none;
border-bottom: 1px solid rgba(0, 124, 122, 0.18);
}
.trust-band-item {
padding: 0 28px;
}
.trust-band-item:nth-child(3),
.trust-band-item:nth-child(5) {
border-right: none;
}
}
@media (max-width: 767px) {
.trust-band-inner {
grid-template-columns: 1fr;
gap: 0;
}
.trust-band-main {
padding: 0 0 24px 0;
border-bottom: 1px solid rgba(0, 124, 122, 0.18);
}
.trust-band-item {
padding: 20px 0;
border-right: none;
border-bottom: 1px solid rgba(0, 124, 122, 0.14);
text-align: left;
}
.trust-band-item:last-child {
border-bottom: none;
}
.trust-band-item .elementor-widget-icon,
.trust-band-item .elementor-icon-wrapper {
justify-content: flex-start;
text-align: left;
}
} .hh-home-visit-card {
max-width: 1450px;
margin: 0 auto;
box-shadow: 0 18px 55px rgba(23, 59, 66, 0.08);
}
.hh-home-visit-left {
max-width: 720px;
}
.hh-home-visit-header-row {
display: flex;
align-items: flex-start;
gap: 32px;
}
.hh-home-visit-heading-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hh-home-visit-icon {
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.hh-home-visit-divider {
width: 90px;
max-width: 90px;
}
.hh-home-visit-divider,
.hh-home-visit-divider * {
border-color: rgba(0, 132, 132, 0.28) !important;
}
.hh-home-visit-checklist {
position: relative;
overflow: hidden;
}
.hh-home-visit-icon-list .elementor-icon-list-items {
display: flex;
flex-direction: column;
}
.hh-home-visit-icon-list .elementor-icon-list-item {
padding: 22px 0;
border-bottom: 1px solid rgba(0, 132, 132, 0.12);
}
.hh-home-visit-icon-list .elementor-icon-list-item:first-child {
padding-top: 0;
}
.hh-home-visit-icon-list .elementor-icon-list-item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.hh-home-visit-icon-list .elementor-icon-list-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 50%;
background: #dff1f1;
display: flex;
align-items: center;
justify-content: center;
margin-right: 18px;
}
.hh-home-visit-icon-list .elementor-icon-list-icon i,
.hh-home-visit-icon-list .elementor-icon-list-icon svg {
font-size: 26px;
width: 26px;
height: 26px;
display: block;
}
.hh-home-visit-icon-list .elementor-icon-list-text {
line-height: 1.45;
}
.hh-home-visit-button .elementor-button {
min-width: 360px;
justify-content: center;
}
.hh-home-visit-note {
max-width: 500px;
flex-wrap: nowrap;
}
.hh-home-visit-note-icon {
flex: 0 0 80px;
width: 80px;
min-width: 80px;
height: 80px;
min-height: 80px;
max-width: 80px;
max-height: 80px;
padding: 0 !important;
box-sizing: border-box;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.hh-home-visit-note-icon img {
width: 26px;
height: 26px;
object-fit: contain;
}
.hh-home-visit-note p {
margin: 0;
color: var(--hh-text-dark);
line-height: 1.5;
}
.hh-home-visit-section::before,
.hh-home-visit-section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
.hh-home-visit-section::before {
inset: 0;
background:
linear-gradient(225deg, rgba(0, 128, 128, 0.035) 0%, rgba(0, 128, 128, 0.018) 22%, transparent 42%),
linear-gradient(225deg, transparent 0%, transparent 34%, rgba(0, 128, 128, 0.07) 39%, rgba(0, 128, 128, 0.025) 68%, transparent 68%, transparent 100%);
opacity: 0.65;
}
.hh-home-visit-section::after {
left: -10%;
top: -20%;
width: 120%;
height: 42%;
background: radial-gradient(ellipse at center, rgba(0, 128, 128, 0.10) 0%, rgba(0, 128, 128, 0.035) 42%, transparent 72%);
}
.hh-home-visit-section > .e-con-inner,
.hh-home-visit-section > .elementor-element {
position: relative;
z-index: 1;
} .hh-faq-accordion .e-n-accordion-item-title {
display: flex;
align-items: center;
}
.hh-faq-accordion .e-n-accordion-item-title-icon {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: #DFF1F1;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.hh-faq-accordion .e-n-accordion-item-title-icon svg,
.hh-faq-accordion svg.e-font-icon-svg.e-fas-plus {
width: 14px;
height: 14px;
color: var(--hh-teal);
fill: var(--hh-teal);
} .hh-why-left,
.hh-why-right {
position: relative;
z-index: 1;
}
.hh-why-left::before,
.hh-why-right::before {
content: "";
position: absolute;
top: -15px;
z-index: -1;
pointer-events: none;
}
.hh-why-left::before {
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.70) 45%, rgba(255,255,255,0.18) 82%, rgba(255,255,255,0) 100%);
filter: blur(18px);
}
.hh-why-right::before {
left: -15px;
width: 88%;
height: calc(100% + 50px);
background: linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.48) 55%, rgba(255,255,255,0.12) 82%, rgba(255,255,255,0) 100%);
filter: blur(22px);
}
.hh-why-right,
.hh-why-row {
min-width: 0;
}
.hh-why-row {
position: relative;
width: 100%;
padding: 24px 0;
border-bottom: none !important;
}
.hh-why-row::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: clamp(525px, 75%, 620px);
height: 1px;
background: rgba(0,128,128,0.30);
}
.hh-why-row:last-child::after {
display: none;
}
.hh-why-row * {
white-space: normal;
} html {
min-height: 100%;
}
body {
min-height: 100vh;
min-height: 100svh;
background-color: var(--hh-teal-solid) !important;
}
#page,
.site,
.hfeed,
.ast-separate-container,
.ast-page-builder-template {
margin: 0 !important;
background-color: var(--hh-teal-solid) !important;
}
#content,
.site-content,
.ast-container,
.ast-article-single,
.ast-article-post,
.entry-content {
background-color: var(--hh-white);
}
#colophon,
.site-footer,
.footer-width-fixer,
.elementor-location-footer,
.hh-footer {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
background-color: var(--hh-teal-solid) !important;
}
#page,
.site,
#content,
.site-content,
.ast-container,
.entry-content {
margin-bottom: 0 !important;
}
@supports (-webkit-touch-callout: none) {
.hh-parallax,
.hh-depth-section,
.your-parallax-section-class {
background-attachment: scroll !important;
}
} .hh-mobile-menu-panel {
position: fixed !important;
inset: 0 0 0 auto !important;
z-index: 10001 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
width: 88vw !important;
max-width: 420px !important;
padding: 30px 28px 36px !important;
background: var(--hh-teal-solid) !important;
transform: translateX(100%) !important;
transition: transform 0.22s ease !important;
pointer-events: none !important;
visibility: hidden !important;
}
body.hh-mobile-menu-open .hh-mobile-menu-panel {
transform: translateX(0) !important;
pointer-events: auto !important;
visibility: visible !important;
}
body.hh-mobile-menu-open {
overflow: hidden;
}
.hh-mobile-menu-close {
display: none !important;
position: relative !important;
z-index: 10003 !important;
color: var(--hh-white) !important;
background: transparent !important;
border: 0 !important;
font-size: 40px !important;
line-height: 1 !important;
cursor: pointer !important;
}
body.hh-mobile-menu-open .hh-mobile-menu-close {
display: block !important;
}
.hh-mobile-menu-links {
position: relative !important;
top: 0 !important;
left: 20px !important;
z-index: 10002 !important;
}
.hh-mobile-menu-panel .elementor-heading-title,
.hh-mobile-menu-panel .elementor-heading-title a {
color: var(--hh-white) !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.8 !important;
text-decoration: none !important;
}
.hh-mobile-menu-links .hh-button-calendar {
margin-top: 40px !important;
border-top: 1px solid rgba(255,255,255,0.2) !important;
}
.hh-mobile-menu-panel .elementor-button {
width: 100% !important;
justify-content: center !important;
margin-top: 40px !important;
}
.hh-mobile-menu-panel .elementor-heading-title a {
transition: opacity 0.2s ease;
}
@media (max-height: 600px) and (orientation: landscape) {
.hh-hero-header {
position: static !important;
inset: auto !important;
width: 100% !important;
background: var(--hh-teal-solid) !important;
box-shadow: var(--hh-shadow-header) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.hh-hero-header .hh-header-logo img {
width: 135px !important;
max-width: 135px !important;
}
} .wpbc_container.wpbc_form a.wpbc_button_light.hh-wpbc-back,
.wpbc_container.wpbc_form a.wpbc_button_light.hh-wpbc-back:hover,
.wpbc_container.wpbc_form a.wpbc_button_light.hh-wpbc-back:focus {
background: var(--hh-grey-button) !important;
background-color: var(--hh-grey-button) !important;
border-color: var(--hh-grey-button-border) !important;
color: var(--hh-text-dark) !important;
box-shadow: none !important;
}
.wpbc_container.wpbc_form .hh-wpbc-confirm input.wpbc_button_light,
.wpbc_container.wpbc_form .hh-wpbc-confirm input.wpbc_button_light:hover,
.wpbc_container.wpbc_form .hh-wpbc-confirm input.wpbc_button_light:focus {
background: var(--hh-blue) !important;
background-color: var(--hh-blue) !important;
border-color: var(--hh-blue) !important;
color: var(--hh-white) !important;
box-shadow: var(--hh-shadow-button-blue) !important;
} @media (max-width: 1024px) {
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_calendar_wraper {
width: 100% !important;
max-width: 330px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: visible !important;
}
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_cal_container,
.wpbc_container_booking_form .wpbc_wizard_step1 .datepick-inline,
.wpbc_container_booking_form .wpbc_wizard_step1 .datepick-one-month,
.wpbc_container_booking_form .wpbc_wizard_step1 table.wpbc_calendar {
width: 320px !important;
max-width: 320px !important;
min-width: 30px !important;
}
}
@media (min-width: 453px) and (max-width: 767px) {
.wpbc_container_booking_form .wpbc_wizard_step1,
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc__row,
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_row,
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc__field,
.wpbc_container_booking_form .wpbc_wizard_step1 .bfb_element {
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_calendar_wraper,
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_calendar_wrapper,
.wpbc_container_booking_form .wpbc_wizard_step1 .wpbc_cal_container,
.wpbc_container_booking_form .wpbc_wizard_step1 .datepick-inline,
.wpbc_container_booking_form .wpbc_wizard_step1 .datepick-one-month {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 768px) {
.wpbc_container_booking_form .wpbc_wizard_step1 .block_hints.datepick .wpdev_hint_with_text {
transform: translateX(18px) !important;
}
}
.wpbc_container_booking_form label.wpbc_inline_checkbox .wpbc_front_end__message_container_right {
display: none !important;
} .wpbc_after_booking_thank_you_section .wpbc_ty__content {
display: grid !important;
grid-template-columns: 50% 46% !important;
column-gap: 40px !important;
align-items: start !important;
}
.wpbc_after_booking_thank_you_section .wpbc_ty__content_text {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.wpbc_after_booking_thank_you_section .wpbc_ty__content_text:first-child {
word-break: normal !important;
overflow-wrap: normal !important;
} .wpbc_after_booking_thank_you_section .wpbc_ty__container button.hh-add-to-calendar.hh-ical-button,
.wpbc_after_booking_thank_you_section .wpbc_ty__container button.hh-add-to-calendar.hh-ical-button * {
color: var(--hh-white) !important;
-webkit-text-fill-color: var(--hh-white) !important;
}
.wpbc_after_booking_thank_you_section .wpbc_ty__container button.hh-add-to-calendar.hh-ical-button {
padding: 10px 16px !important;
}
.wpbc_after_booking_thank_you_section .wpbc_ty__container button.hh-add-to-calendar.hh-ical-button::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
background-image: url(//helm-hearing.co.uk/wp-content/uploads/2026/05/calendar-days.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.hh-calendar-options {
width: 188px;
margin-top: 12px;
}
.hh-calendar-option {
display: block;
width: 188px;
margin-bottom: 8px;
padding: 10px 16px !important;
background: var(--hh-teal);
color: var(--hh-white) !important;
text-decoration: none;
text-align: center;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
transition: opacity 0.2s ease;
}
.hh-calendar-option:hover {
opacity: 0.9;
color: var(--hh-white) !important;
}
.hh-calendar-option:last-child {
margin-bottom: 0;
}
.hh-calendar-options p {
margin: 0 0 4px !important;
} body.elementor-editor-active .hh-hero-header,
body.elementor-editor-active .hh-solid-header {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
transform: none !important;
}
body.elementor-editor-active .hh-hero-header-inner,
body.elementor-editor-active .hh-solid-header .hh-hero-header-inner {
max-width: 100% !important;
}
body.elementor-editor-active .hh-header-logo img,
body.elementor-editor-active .hh-hero-header.hh-scrolled .hh-header-logo img,
body.elementor-editor-active .hh-solid-header .hh-header-logo img {
width: 150px !important;
max-width: 150px !important;
height: auto !important;
}
body.elementor-editor-active .hh-footer img {
max-width: 320px !important;
height: auto !important;
}
body.elementor-editor-active .hh-mobile-menu-panel {
position: relative !important;
transform: none !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.elementor-editor-active .elementor-button,
body.elementor-editor-active .elementor-button:visited,
body.elementor-editor-active .elementor-button:hover,
body.elementor-editor-active .elementor-button:focus {
-webkit-text-fill-color: currentColor;
} .hh-booking-confirmation{
width:min(760px,calc(100% - 40px));
margin:36px auto 48px;
font-family:inherit;
color:#263238
}
.hh-booking-confirmation *{box-sizing:border-box}
.hh-booking-confirmation-card{
overflow:hidden;
border:1px solid #dfe7e7;
border-radius:12px;
background:#fff;
box-shadow:0 4px 14px rgba(0,0,0,.10)
}
.hh-booking-confirmation-header{
padding:34px 34px 30px;
border-bottom:4px solid #008080;
text-align:center
}
.hh-booking-confirmation-logo{
display:block;
width:250px;
max-width:85%;
height:auto;
margin:0 auto 24px
}
.hh-booking-confirmation-header h1{
margin:0 0 10px;
color:#008080;
font-size:28px;
font-weight:700;
line-height:1.25
}
.hh-booking-confirmation-header p{
margin:0;
color:#526262;
font-size:16px;
line-height:1.65
}
.hh-booking-confirmation-section{
margin:0 34px;
padding:30px 0;
border-bottom:1px solid #dce5e5
}
.hh-booking-confirmation-section h2{
margin:0 0 10px;
color:#008080;
font-size:14px;
font-weight:700;
line-height:1.4;
letter-spacing:.7px;
text-transform:uppercase
}
.hh-booking-confirmation-appointment{
margin:0 0 8px;
color:#263238;
font-size:23px;
font-weight:700;
line-height:1.4
}
.hh-booking-confirmation-secondary{
margin:0;
color:#526262;
font-size:16px;
line-height:1.7
}
.hh-booking-confirmation-address{
margin:0 0 20px;
color:#263238;
font-size:17px;
line-height:1.65
}
.hh-booking-confirmation-primary-button{
display:inline-block;
padding:14px 22px;
border:2px solid #008080;
border-radius:7px;
background:#008080;
color:#fff!important;
font-size:16px;
font-weight:700;
line-height:1.2;
text-decoration:none!important;
transition:.2s
}
.hh-booking-confirmation-primary-button:hover,
.hh-booking-confirmation-primary-button:focus{
border-color:#006d6d;
background:#006d6d;
color:#fff!important
}
.hh-booking-confirmation-calendar-buttons{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:20px
}
.hh-booking-confirmation-calendar-buttons a{
display:flex;
min-height:48px;
align-items:center;
justify-content:center;
padding:12px 10px;
border:2px solid #008080;
border-radius:7px;
background:#fff;
color:#008080!important;
font-size:15px;
font-weight:700;
line-height:1.25;
text-align:center;
text-decoration:none!important;
transition:.2s
}
.hh-booking-confirmation-calendar-buttons a:hover,
.hh-booking-confirmation-calendar-buttons a:focus{
background:#eef8f7;
color:#006d6d!important
}
.hh-booking-confirmation-last-section{border-bottom:0}
.hh-booking-confirmation-last-section p{
margin:0 0 14px;
color:#263238;
font-size:16px;
line-height:1.7
}
.hh-booking-confirmation-last-section p:last-child{margin-bottom:0}
.hh-booking-confirmation-missing .hh-booking-confirmation-card{
padding:28px 30px
}
.hh-booking-confirmation-missing h1{
margin:0 0 18px;
color:#102b2b;
font-size:32px
}
.hh-booking-confirmation-missing p{
margin:0 0 18px;
line-height:1.65
}
@media(max-width:680px){
.hh-booking-confirmation{
width:min(100% - 24px,760px);
margin:24px auto 34px
}
.hh-booking-confirmation-header{padding:28px 20px 26px}
.hh-booking-confirmation-logo{width:220px}
.hh-booking-confirmation-header h1{font-size:25px}
.hh-booking-confirmation-header p{font-size:16px}
.hh-booking-confirmation-section{
margin:0 20px;
padding:26px 0
}
.hh-booking-confirmation-appointment{font-size:21px}
.hh-booking-confirmation-calendar-buttons{grid-template-columns:1fr}
.hh-booking-confirmation-calendar-buttons a{width:100%}
} .hh-booking-v2{
width:100%;
font-family:inherit;
color:inherit
}
.hh-booking-v2 *{
box-sizing:border-box
}
.hh-booking-v2 [hidden]{
display:none!important
}
.hh-booking-v2-status{
max-width:940px;
margin:0 auto
}
.hh-booking-v2-error{
max-width:940px;
margin:0 auto 18px;
padding:12px 15px;
border:1px solid #d7dddd;
border-radius:8px;
background:#fff
}
.hh-booking-v2-progress{
width:min(520px,calc(100% - 32px));
margin:0 auto 24px;
display:grid;
grid-template-columns:34px 1fr 34px 1fr 34px 1fr 34px 1fr 34px;
align-items:center
}
.hh-booking-v2-progress-step{
width:18px;
height:18px;
margin:0 auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#d7dddd;
color:transparent;
font-size:11px;
font-weight:700;
transition:.2s
}
.hh-booking-v2-progress-step.is-current{
background:#008080
}
.hh-booking-v2-progress-step.is-complete{
background:#008080;
color:#fff
}
.hh-booking-v2-progress-step.is-complete span{
font-size:0
}
.hh-booking-v2-progress-step.is-complete span:after{
content:'✓';
font-size:12px
}
.hh-booking-v2-progress-line{
height:2px;
background:#d7dddd
}
.hh-booking-v2-progress-line.is-complete{
background:#008080
}
.hh-booking-v2-appointment-picker{
width:100%;
max-width:820px;
margin:0 auto;
padding:28px;
display:grid;
grid-template-columns:400px 1fr;
gap:40px;
align-items:start;
background:#fff;
border:1px solid #dfe7e7;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,.10)
}
.hh-booking-v2-calendar{
position:relative;
width:100%;
padding:14px 42px;
background:#fff;
border:1px solid #dfe7e7;
border-radius:12px;
overflow:hidden
}
.hh-booking-v2-calendar-header{
display:grid;
grid-template-columns:44px 1fr 44px;
align-items:center;
gap:10px;
margin-bottom:14px
}
.hh-booking-v2-month-title{
text-align:center;
color:#008080;
font-size:20px;
font-weight:600
}
.hh-booking-v2-month-button{
width:44px;
height:44px;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:#008080!important;
font:inherit;
font-size:36px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-3px);
cursor:pointer
}
.hh-booking-v2-month-button:hover,.hh-booking-v2-month-button:focus{
background:#f1f6f6!important;
color:#008080!important;
outline:0
}
.hh-booking-v2-month-button:disabled{
opacity:.25;
cursor:default
}
.hh-booking-v2-weekdays,.hh-booking-v2-days{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:6px
}
.hh-booking-v2-days{
grid-template-rows:repeat(6,1fr)
}
.hh-booking-v2-weekdays{
margin-bottom:7px
}
.hh-booking-v2-weekdays span{
text-align:center;
color:#687777;
font-size:13px;
font-weight:600
}
.hh-booking-v2-day,.hh-booking-v2-day-placeholder{
aspect-ratio:1/1;
min-width:0
}
.hh-booking-v2-day{
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:1px solid transparent;
border-radius:7px;
background:transparent;
color:#263333;
font:inherit;
font-size:15px
}
.hh-booking-v2-day.is-unavailable{
color:#aab4b4
}
.hh-booking-v2-day.is-past{
color:#c6cece
}
button.hh-booking-v2-day{
border-color:#008080;
color:#006d6d;
background:#f1f6f6;
cursor:pointer;
font-weight:600
}
button.hh-booking-v2-day:hover,button.hh-booking-v2-day:focus-visible{
background:#e9f5f4;
outline:0
}
.hh-booking-v2-day.is-selected{
background:#008080!important;
border-color:#008080!important;
color:#fff!important
}
.hh-booking-v2-loading-overlay{
display:none;
position:absolute;
inset:0;
z-index:5;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.66)
}
.hh-booking-v2-calendar.is-loading .hh-booking-v2-loading-overlay{
display:flex
}
.hh-booking-v2-calendar.is-loading .hh-booking-v2-calendar-header,
.hh-booking-v2-calendar.is-loading .hh-booking-v2-weekdays,
.hh-booking-v2-calendar.is-loading .hh-booking-v2-days {
opacity:.3;
pointer-events:none
}
.hh-booking-v2-loading-inner{
display:flex;
align-items:center;
gap:9px;
padding:11px 16px;
border-radius:8px;
background:rgba(255,255,255,.94);
color:#006d6d;
font-weight:600
}
.hh-booking-v2-spinner{
width:19px;
height:19px;
border:2px solid rgba(0,128,128,.2);
border-top-color:#008080;
border-radius:50%;
animation:hh-spin .75s linear infinite
}
@keyframes hh-spin{
to{
transform:rotate(360deg)
}
}
.hh-booking-v2-legend{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
font-size:15px;
color:#263333
}
.hh-booking-v2-legend-swatch{
width:34px;
height:34px;
flex:0 0 34px;
border:1px solid #008080;
border-radius:7px;
background:#f1f6f6
}
.hh-booking-v2-times{
width:100%;
margin:0
}
.hh-booking-v2-times h3{
margin:0 0 12px;
color:#008080;
font-size:18px
}
.hh-booking-v2-time-prompt{
margin:0;
color:#687777;
font-size:15px;
line-height:1.6
}
.hh-booking-v2-time-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px
}
.hh-booking-v2-time-button{
min-height:44px;
padding:9px 12px;
border:1px solid #008080;
border-radius:7px;
background:#fff;
color:#006d6d!important;
font:inherit;
font-weight:600;
cursor:pointer
}
.hh-booking-v2-time-button:hover,.hh-booking-v2-time-button:focus-visible{
background:#e9f5f4;
outline:0
}
.hh-booking-v2-form-journey{
width:min(940px,calc(100vw - 40px));
margin:0 auto
}
.hh-booking-v2-appointment-summary{
width:100%;
margin:0 auto 18px;
padding:18px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
background:#f7f9f9;
border:1px solid #dfe7e7;
border-radius:12px
}
.hh-booking-v2-summary-details{
flex:1 1 auto;
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(210px,.8fr);
gap:24px;
align-items:start
}
.hh-booking-v2-summary-copy{
min-width:0
}
.hh-booking-v2-summary-copy h3,
.hh-booking-v2-summary-location h3{
margin:0 0 5px;
color:#008080;
font-size:18px
}
.hh-booking-v2-summary-copy p,
.hh-booking-v2-summary-location p{
margin:0;
line-height:1.45
}
.hh-booking-v2-summary-location{
min-width:0;
padding-left:24px;
border-left:1px solid #d4e1e1
}
.hh-booking-v2-summary-date{
font-weight:600
}
.hh-booking-v2-summary-service{
color:#687777
}
.hh-booking-v2-change-appointment{
flex:0 0 auto;
padding:10px 16px;
border:1px solid #008080;
border-radius:7px;
background:#fff;
color:#006d6d!important;
font:inherit;
font-weight:600;
cursor:pointer
}
.hh-booking-v2-change-appointment:hover{
background:#e9f5f4
}
.hh-booking-v2-form-card{
width:100%;
padding:30px;
background:#fff;
border:1px solid #dfe7e7;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,.10)
}
.hh-booking-v2 .hh-stage{
display:none
}
.hh-booking-v2 .hh-stage.is-active{
display:block
}
.hh-stage h2{
margin:0 0 24px;
color:#008080;
font-size:25px;
line-height:1.25
}
.hh-stage-intro{
margin:-12px 0 24px;
color:#687777
}
.hh-stage-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:24px;
row-gap:0
}
.hh-stage-grid>.ff-el-group{
min-width:0
}
.hh-stage-grid .ff-el-group{
margin-bottom:18px
}
@media(min-width:681px){
.hh-stage[data-hh-stage="2"] .hh-field-client-first-name{grid-column:1;grid-row:1}
.hh-stage[data-hh-stage="2"] .hh-field-client-last-name{grid-column:1;grid-row:2}
.hh-stage[data-hh-stage="2"] .hh-field-client-email{grid-column:2;grid-row:1}
.hh-stage[data-hh-stage="2"] .hh-field-client-phone{grid-column:2;grid-row:2}
.hh-stage[data-hh-stage="2"] .hh-field-date-of-birth{grid-column:1;grid-row:3}
.hh-stage[data-hh-stage="2"].hh-someone-else .hh-field-patient-first-name{grid-column:1;grid-row:3}
.hh-stage[data-hh-stage="2"].hh-someone-else .hh-field-patient-last-name{grid-column:1;grid-row:4}
.hh-stage[data-hh-stage="2"].hh-someone-else .hh-field-date-of-birth{grid-column:2;grid-row:3}
.hh-stage[data-hh-stage="2"].hh-someone-else .hh-field-relationship-to-patient{grid-column:2;grid-row:4}
.hh-stage[data-hh-stage="3"] .hh-field-address-1{grid-column:1;grid-row:1}
.hh-stage[data-hh-stage="3"] .hh-field-city{grid-column:1;grid-row:2}
.hh-stage[data-hh-stage="3"] .hh-field-postcode{grid-column:1;grid-row:3}
.hh-stage[data-hh-stage="3"] .hh-field-gp-surgery{grid-column:2;grid-row:1}
} .hh-stage[data-hh-stage="4"] .hh-stage-grid{
gap:16px;
align-items:stretch
}
.hh-booking-v2 .hh-medical-question,
.hh-booking-v2 .hh-medical-notes{
position:relative;
min-width:0;
margin:0!important;
padding:18px;
border:1px solid #dbe8e8;
border-radius:12px;
background:#f8fbfb;
box-shadow:0 2px 7px rgba(25,65,65,.06)
}
.hh-booking-v2 .hh-medical-question,
.hh-booking-v2 .hh-medical-question.hh-force-visible,
.hh-booking-v2 .hh-medical-notes{
display:flex!important;
flex-direction:column
}
.hh-booking-v2 .hh-medical-question.hh-force-hidden{
display:none!important
}
.hh-booking-v2 .hh-medical-question .ff-el-input--label,
.hh-booking-v2 .hh-medical-notes .ff-el-input--label{
margin-bottom:10px
}
.hh-booking-v2 .hh-medical-question .ff-el-input--label label,
.hh-booking-v2 .hh-medical-notes .ff-el-input--label label{
color:#203737;
font-weight:600;
line-height:1.45
}
.hh-booking-v2 .hh-medical-question .ff-el-input--content{
margin-top:auto
}
.hh-booking-v2 .hh-medical-question .ff-el-form-control,
.hh-booking-v2 .hh-medical-notes .ff-el-form-control{
border-color:#ccdada;
background:#fff
}
.hh-booking-v2 .hh-medical-question .ff-el-form-control:hover,
.hh-booking-v2 .hh-medical-notes .ff-el-form-control:hover{
border-color:#91baba
}
.hh-booking-v2 .hh-medical-question .ff-el-form-control:focus,
.hh-booking-v2 .hh-medical-notes .ff-el-form-control:focus{
border-color:#008080!important;
box-shadow:0 0 0 3px rgba(0,128,128,.12)!important;
outline:0
}
.hh-booking-v2 .hh-medical-notes textarea.ff-el-form-control{
height:56px;
min-height:56px;
resize:vertical
}
.hh-stage-divider{
grid-column:1/-1;
height:1px;
background:#d7dddd;
margin:8px 0 24px
}
.hh-stage-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:10px;
padding-top:24px;
border-top:1px solid #d7dddd
}
.hh-stage-actions button{
min-width:100px;
min-height:48px;
padding:10px 20px;
border:0;
border-radius:10px;
font:inherit;
font-weight:600;
cursor:pointer
}
.hh-stage-back{
background:#e9e9e9;
color:#173333!important
}
.hh-stage-next,.hh-stage-confirm{
background:#008f8f;
color:#fff!important
}
.hh-stage-confirm.is-loading{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
cursor:wait
}
.hh-stage-confirm.is-loading:before{
width:16px;
height:16px;
border:2px solid rgba(255,255,255,.45);
border-top-color:#fff;
border-radius:50%;
content:"";
animation:hh-booking-spin .75s linear infinite
}
.hh-stage-confirm:disabled,
.hh-stage-back:disabled,
.hh-review-terms input:disabled{
cursor:wait;
opacity:.72
}
@keyframes hh-booking-spin{
to{transform:rotate(360deg)}
}
.hh-stage-next:hover,.hh-stage-confirm:hover{
background:#007b7b
}
.hh-stage-error{
margin:10px 0 0;
color:#b42318;
font-weight:600
}
.hh-booking-v2-who-cards{
display:flex;
flex-wrap:wrap;
gap:16px;
margin:0 0 24px
}
.hh-booking-v2-who-card{
min-height:62px;
padding:12px 22px;
display:flex;
align-items:center;
gap:14px;
border:1px solid #d3dfdf;
border-radius:12px;
background:#fff;
color:#102b2b!important;
font:inherit;
font-size:17px;
font-weight:600;
cursor:pointer
}
.hh-booking-v2-who-card.is-selected{
border-color:#008080;
background:#eef8f7;
box-shadow:0 0 0 2px rgba(0,128,128,.14)
}
.hh-booking-v2-who-card:hover,
.hh-booking-v2-who-card:focus,
.hh-booking-v2-who-card:focus-visible,
.hh-booking-v2-who-card:active{
border-color:#008080!important;
background:#eef8f7!important;
color:#102b2b!important;
outline:0!important
}
.hh-booking-v2 .hh-stage-actions button:hover,
.hh-booking-v2 .hh-stage-actions button:focus,
.hh-booking-v2 .hh-stage-actions button:focus-visible,
.hh-booking-v2 .hh-stage-actions button:active{
outline:0!important;
box-shadow:none!important
}
.hh-booking-v2 .hh-stage-back:hover,
.hh-booking-v2 .hh-stage-back:focus,
.hh-booking-v2 .hh-stage-back:focus-visible,
.hh-booking-v2 .hh-stage-back:active{
background:#dedede!important;
color:#173333!important
}
.hh-booking-v2 .hh-stage-next:hover,
.hh-booking-v2 .hh-stage-next:focus,
.hh-booking-v2 .hh-stage-next:focus-visible,
.hh-booking-v2 .hh-stage-next:active,
.hh-booking-v2 .hh-stage-confirm:hover,
.hh-booking-v2 .hh-stage-confirm:focus,
.hh-booking-v2 .hh-stage-confirm:focus-visible,
.hh-booking-v2 .hh-stage-confirm:active{
background:#007b7b!important;
color:#fff!important
}
.hh-booking-v2 .hh-booking-v2-change-appointment:hover,
.hh-booking-v2 .hh-booking-v2-change-appointment:focus,
.hh-booking-v2 .hh-booking-v2-change-appointment:focus-visible,
.hh-booking-v2 .hh-booking-v2-change-appointment:active{
border-color:#008080!important;
background:#e9f5f4!important;
color:#006d6d!important;
outline:0!important
}
.hh-booking-v2 .hh-force-visible{
display:block!important
}
.hh-booking-v2 .hh-force-hidden{
display:none!important
}
.hh-booking-v2-who-label{
margin:0 0 18px;
color:#102b2b;
font-weight:600
}
.hh-booking-v2-ear-icon{
width:26px;
height:26px;
display:inline-flex;
align-items:center;
justify-content:center
}
.hh-booking-v2-ear-icon img{
display:block;
width:26px;
height:26px;
object-fit:contain
}
.hh-booking-v2 .hh-hidden-source-field{
display:none!important
}
.hh-booking-v2 .ff_submit_btn_wrapper{
display:none!important
}
.hh-booking-v2 .ff-el-group label{
font-weight:600
}
.hh-booking-v2 .ff-el-form-control{
width:100%;
min-height:44px
}
.hh-booking-v2 .hh-field-error .ff-el-form-control{
border-color:#b42318!important
}
.hh-booking-v2 .hh-inline-error{
display:block;
margin-top:5px;
color:#b42318;
font-size:13px
}
.hh-dob-helper{
display:block;
margin-top:6px;
color:#607171;
font-size:13px;
line-height:1.45
} .flatpickr-calendar.hh-dob-calendar{
width:min(330px,calc(100vw - 32px));
padding:12px;
border:1px solid rgba(0,128,128,.18);
border-radius:14px;
background:#fbfdfd;
box-shadow:0 18px 45px rgba(32,58,58,.18),0 4px 12px rgba(32,58,58,.1);
color:#344646;
font-family:Poppins,sans-serif;
z-index:100000
}
.flatpickr-calendar.hh-dob-calendar:before,
.flatpickr-calendar.hh-dob-calendar:after{
display:none
}
.flatpickr-calendar.hh-dob-calendar.hh-dob-touch-inline {
position: relative !important;
inset: auto !important;
margin: 8px auto 0 !important;
transform: translateX(-11px) !important;
touch-action: pan-y !important;
}
.flatpickr-calendar.hh-dob-calendar.hh-dob-touch-inline * {
touch-action: pan-y !important;
}
@media (max-width:680px), (pointer:coarse){
.flatpickr-calendar.hh-dob-calendar{
z-index:90!important
}
}
.hh-dob-calendar .flatpickr-months{
align-items:center;
min-height:48px;
margin:-12px -12px 10px;
padding:8px 7px;
border-radius:14px 14px 0 0;
background:#008080
}
.hh-dob-calendar .flatpickr-months .flatpickr-prev-month,
.hh-dob-calendar .flatpickr-months .flatpickr-next-month{
top:8px;
height:36px;
padding:9px 12px;
border-radius:8px;
color:#fff!important;
fill:#fff!important
}
.hh-dob-calendar .flatpickr-months .flatpickr-prev-month:hover,
.hh-dob-calendar .flatpickr-months .flatpickr-next-month:hover,
.hh-dob-calendar .flatpickr-months .flatpickr-prev-month:focus-visible,
.hh-dob-calendar .flatpickr-months .flatpickr-next-month:focus-visible{
background:rgba(255,255,255,.16);
color:#fff!important
}
.hh-dob-calendar .flatpickr-current-month{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:calc(100% - 78px);
height:38px;
left:39px;
padding:0
}
.hh-dob-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.hh-dob-calendar .hh-dob-year-select{
width:auto;
height:34px;
margin:0;
padding:4px 28px 4px 10px;
border:1px solid rgba(255,255,255,.38);
border-radius:8px;
background-color:#fff;
color:#365050;
font:600 15px/1 Poppins,sans-serif;
cursor:pointer
}
.hh-booking-v2-who-card-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
line-height:1.3
}
.hh-booking-v2-who-card-title{
color:inherit;
font-size:17px;
font-weight:600
}
.hh-booking-v2-who-card-helper{
display:block;
margin-top:3px;
color:#607171;
font-size:13px;
font-weight:400;
line-height:1.35
}
.hh-dob-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.hh-dob-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.hh-dob-calendar .hh-dob-year-select:hover,
.hh-dob-calendar .hh-dob-year-select:focus{
border-color:#fff;
background-color:#f2fbfb;
color:#006d6d;
outline:2px solid rgba(255,255,255,.48);
outline-offset:1px
}
.hh-dob-calendar .flatpickr-current-month .numInputWrapper{
display:none
}
.hh-dob-calendar .flatpickr-weekdays{
height:34px
}
.hh-dob-calendar span.flatpickr-weekday{
color:#607171;
font-size:12px;
font-weight:700
}
.hh-dob-calendar .flatpickr-days,
.hh-dob-calendar .dayContainer{
width:100%;
min-width:100%;
max-width:100%
}
.hh-dob-calendar .flatpickr-day{
max-width:none;
height:38px;
border-radius:9px;
color:#405050;
font-weight:500;
line-height:38px
}
.hh-dob-calendar .flatpickr-day:hover,
.hh-dob-calendar .flatpickr-day:focus{
border-color:#b8dddd;
background:#e6f4f4;
color:#006d6d
}
.hh-dob-calendar .flatpickr-day.today{
border-color:#75baba;
color:#006d6d;
font-weight:700
}
.hh-dob-calendar .flatpickr-day.today:hover,
.hh-dob-calendar .flatpickr-day.today:focus{
border-color:#008080;
background:#e6f4f4;
color:#006d6d
}
.hh-dob-calendar .flatpickr-day.selected,
.hh-dob-calendar .flatpickr-day.startRange,
.hh-dob-calendar .flatpickr-day.endRange,
.hh-dob-calendar .flatpickr-day.selected:hover,
.hh-dob-calendar .flatpickr-day.selected:focus{
border-color:#008080;
background:#008080;
color:#fff
}
.hh-dob-calendar .flatpickr-day.prevMonthDay,
.hh-dob-calendar .flatpickr-day.nextMonthDay{
color:#a5b0b0
}
.hh-dob-calendar .flatpickr-day.flatpickr-disabled,
.hh-dob-calendar .flatpickr-day.flatpickr-disabled:hover{
color:#c5cccc
}
.hh-review-section{
padding:22px;
margin:0 0 18px;
border:1px solid #dbe8e8;
border-radius:12px;
background:#f8fbfb;
box-shadow:0 2px 7px rgba(25,65,65,.06)
}
.hh-review-section h3{
margin:0 0 16px;
color:#008080;
font-size:18px
}
.hh-review-appointment-card{
border-color:#b9dcdc;
background:linear-gradient(135deg,#f1fafa 0%,#f9fcfc 100%)
}
.hh-review-appointment-layout{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);
gap:24px
}
.hh-review-appointment-location{
min-width:0;
padding-left:24px;
border-left:1px solid #d1e4e4
}
.hh-review-appointment-location p{
margin:0;
color:#365050;
font-size:16px;
line-height:1.45
}
.hh-review-appointment-date{
margin:0 0 2px;
color:#173333;
font-size:18px;
font-weight:700;
line-height:1.4
}
.hh-review-appointment-service{
margin:0;
color:#365050;
font-size:16px;
font-weight:600
}
.hh-review-payment-note{
margin:8px 0 0;
padding-top:9px;
border-top:1px solid #d1e4e4;
color:#607171;
font-size:14px
}
.hh-review-who{
margin:0 0 18px;
padding:12px 14px;
border-radius:9px;
background:#eaf5f4
}
.hh-review-who .hh-review-row{
grid-template-columns:minmax(175px,.65fr) 1.35fr
}
.hh-review-subsection{
margin-top:18px
}
.hh-review-who+.hh-review-subsection{
margin-top:0
}
.hh-review-subsection+.hh-review-subsection{
padding-top:18px;
border-top:1px solid #dbe5e5
}
.hh-review-subsection h4{
margin:0 0 12px;
color:#173333;
font-size:15px;
font-weight:700
}
.hh-review-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 28px
}
.hh-review-address-columns,
.hh-review-contact-columns{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px
}
.hh-review-address-column,
.hh-review-contact-column{
display:flex;
flex-direction:column;
gap:12px;
min-width:0
}
.hh-review-row{
display:grid;
grid-template-columns:minmax(135px,.8fr) 1.2fr;
gap:12px
}
.hh-review-label{
color:#203737;
font-weight:600
}
.hh-review-value{
color:#263f3f;
overflow-wrap:anywhere
}
.hh-review-medical-grid .hh-review-row{
display:block;
padding:13px 14px;
border:1px solid #dbe7e7;
border-radius:9px;
background:#fff
}
.hh-review-medical-grid .hh-review-label{
margin:0 0 7px;
line-height:1.4
}
.hh-review-medical-grid .hh-review-value{
display:inline-block;
padding:3px 9px;
border-radius:999px;
background:#e5f3f2;
color:#006d6d;
font-weight:700
}
.hh-review-medical-grid .hh-review-row.hh-review-notes{
grid-column:1/-1
}
.hh-review-medical-grid .hh-review-row.hh-review-notes .hh-review-value{
display:block;
padding:0;
border-radius:0;
background:transparent;
color:#263f3f;
font-weight:400;
white-space:pre-wrap
}
.hh-stage-confirm-note{
margin:14px 0 0;
color:#687777;
font-size:14px
}
.hh-review-terms {
margin: 20px 0 0;
padding: 18px 20px;
border: 1px solid #b9dada;
border-radius: 10px;
background: #f2fafa;
transition:
border-color .2s ease,
background-color .2s ease,
box-shadow .2s ease;
}
.hh-review-terms-heading {
margin: 0 0 8px;
color: #003f3f;
font-size: 16px;
font-weight: 700;
}
.hh-review-terms-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
color: #263f3f;
font-weight: 500;
line-height: 1.5;
}
.hh-review-terms a {
color: #008080;
font-weight: 600;
text-decoration: underline;
}
.hh-review-terms-checkbox {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
accent-color: #008080;
}
.hh-review-terms-checkbox:focus-visible {
outline: 3px solid rgba(0, 128, 128, .25);
outline-offset: 3px;
}
.hh-review-terms.is-invalid {
border-color: #b42318;
background: #fff5f4;
box-shadow: 0 0 0 2px rgba(180, 35, 24, .12);
}
.hh-review-terms-error {
margin: 8px 0 0;
color: #b42318;
font-weight: 600;
}
@media(max-width:900px){
.hh-booking-v2-appointment-picker{
max-width:620px;
grid-template-columns:1fr;
gap:24px
}
.hh-booking-v2-calendar,.hh-booking-v2-times{
grid-column:1
}
.hh-booking-v2-form-journey{
max-width:940px
}
}
@media(max-width:760px){
.hh-stage[data-hh-stage="4"] .hh-stage-grid{
grid-template-columns:1fr
}
}
@media(max-width:680px), (pointer:coarse){
.flatpickr-calendar.hh-dob-calendar.open{
width:min(330px,calc(100vw - 24px));
max-height:calc(100dvh - 24px);
overflow:auto;
overscroll-behavior:contain
}
.hh-booking-v2-progress{
margin-bottom:18px
}
.hh-booking-v2-appointment-picker{
padding:18px
}
.hh-booking-v2-calendar{
padding:14px 18px
}
.hh-booking-v2-time-list{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.hh-booking-v2-form-card{
padding:22px 18px
}
.hh-booking-v2-appointment-summary{
flex-direction:column;
align-items:flex-start;
gap:14px;
padding:16px 18px
}
.hh-booking-v2-summary-copy{
width:100%
}
.hh-booking-v2-summary-details{
width:100%;
grid-template-columns:1fr;
gap:14px
}
.hh-booking-v2-summary-location{
width:100%;
padding:14px 0 0;
border-top:1px solid #d4e1e1;
border-left:0
}
.hh-booking-v2-change-appointment{
width:100%;
max-width:100%;
text-align:center
}
.hh-stage-grid,.hh-review-grid{
grid-template-columns:1fr
}
.hh-booking-v2-who-cards{
display:grid;
grid-template-columns:1fr
}
.hh-booking-v2-who-card{
width:100%;
justify-content:flex-start
}
.hh-stage-actions{
justify-content:stretch
}
.hh-stage-actions button{
flex:1;
min-width:0
}
.hh-review-row{
grid-template-columns:1fr;
gap:2px
}
.hh-review-address-columns,
.hh-review-contact-columns{
grid-template-columns:1fr;
gap:12px
}
.hh-review-section{
padding:18px
}
.hh-review-appointment-layout{
grid-template-columns:1fr;
gap:14px
}
.hh-review-appointment-location{
padding:14px 0 0;
border-top:1px solid #d1e4e4;
border-left:0
}
.hh-review-who .hh-review-row{
grid-template-columns:1fr;
gap:3px
}
} #how-it-works {
scroll-margin-top: 100px;
}