/* ==================================================
   GLOBAL DESIGN SETTINGS
================================================== */

@font-face {
    font-family: "Ogg Medium";
    src: url("https://dcym8fthxf5uu.cloudfront.net/fonts/247a073c-29f5-4a89-aa3a-741020f346fc/OggText-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

:root {
    --color-primary: #1c82c5;
    --color-primary-dark: #146ca8;
    --color-secondary: #f7901e;
    --color-secondary-light: #ffa544;

    --color-background: #f5f7f6;
    --color-surface: #ffffff;
    --color-heading: #0f1d1a;
    --color-text: #53645f;
    --color-muted: #71807b;
    --color-border: rgba(15, 29, 26, 0.12);
    --color-white: #ffffff;
    --color-dark: #102f43;

    --font-primary: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Ogg Medium", Georgia, "Times New Roman", serif;

    --container-width: 1400px;
    --content-width: 1200px;
    --container-gutter: 24px;

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 18px;
    --radius-pill: 999px;

    --shadow-small: 0 8px 24px rgba(15, 29, 26, 0.08);
    --shadow-medium: 0 16px 40px rgba(15, 29, 26, 0.12);
    --shadow-large: 0 24px 60px rgba(15, 29, 26, 0.16);

    --transition-fast: 180ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Cinematic hero animation variables */
    --mx: 0;
    --my: 0;
    --intro: 0;
    --phase2: 0;
    --phase2-out: 0;
    --phase3: 0;
    --split-x: 0vw;
    --split-y: 0px;
    --split-scale: 1.045;
    --second-opacity: 0;
    --second-scale: 1.08;
    --third-opacity: 0;
    --third-scale: 1.1;
    --image-blur: 0px;
    --overlay-opacity: 0.08;
    --brand-blue-rgb: 28, 130, 197;
}

/* ==================================================
   GLOBAL RESET
================================================== */

html {
    box-sizing: border-box;
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 16px;
    text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: clip;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    margin: 0;
    color: inherit;
    font: inherit;
}

/* ==================================================
   ACCESSIBILITY HELPERS
================================================== */

.hh-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 11px 16px;
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: var(--color-primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}

.hh-skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 4px;
}

button {
    border: 0;
}

ul,
ol,
p,
blockquote,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-heading);
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.75rem);
    letter-spacing: -0.035em;
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    letter-spacing: -0.025em;
}

p {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

strong,
b {
    font-weight: 700;
}

.site-container {
    width: min(var(--container-width), calc(100% - (var(--container-gutter) * 2)));
    margin-inline: auto;
}

.content-container {
    width: min(var(--content-width), calc(100% - (var(--container-gutter) * 2)));
    margin-inline: auto;
}

.site-section {
    position: relative;
    padding-block: clamp(70px, 9vw, 130px);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

::selection {
    color: var(--color-white);
    background: var(--color-primary);
}

/* ==================================================
   HEADER VARIABLES
================================================== */

.hh-header {
    --header-green: var(--color-primary);
    --header-green-light: var(--color-primary-dark);
    --header-orange: var(--color-secondary);
    --header-orange-light: var(--color-secondary-light);
    --header-text: #536762;
    --header-soft: #f0f7f5;
    --header-border: rgba(7, 63, 56, 0.12);
    --header-white: #ffffff;

    position: relative;
    z-index: 9999;
    width: 100%;
    font-family: var(--font-primary);
}

.hh-header,
.hh-header * {
    box-sizing: border-box;
}

.hh-header a,
.hh-header button {
    font-family: inherit;
}

/* ==================================================
   TOP INFORMATION BAR
================================================== */

.hh-header__topbar {
    position: relative;
    z-index: 30;
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    background: var(--header-green);
}

.hh-header__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: min(1400px, calc(100% - 50px));
    min-height: 42px;
    margin: 0 auto;
}

.hh-header__topbar-left,
.hh-header__topbar-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.hh-header__top-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color:white;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a.hh-header__top-item:hover,
a.hh-header__top-item:focus-visible {
    color: var(--header-orange);
}

.hh-header__top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header-orange);
}

.hh-header__top-icon svg {
    width: 14px;
    height: 14px;
}

.hh-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    max-width: 220px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(10, 33, 55, 0.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.hh-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hh-header__top-link {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.hh-header__top-link:hover,
.hh-header__top-link:focus-visible {
    color: var(--header-orange);
}

/* ==================================================
   MAIN HEADER
================================================== */

.hh-header__main {
    position: relative;
    z-index: 10;
    width: 100%;
    border-bottom: 1px solid var(--header-border);
    background: rgba(255, 255, 255, 0.98);
    transition: box-shadow var(--transition-normal), background-color var(--transition-normal);
}

.hh-header.is-sticky .hh-header__main {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 15px 40px rgba(7, 63, 56, 0.12);
    animation: hhHeaderSlideDown 350ms ease;
}

.hh-header__main-inner {
    display: flex;
    align-items: center;
    width: min(1400px, calc(100% - 50px));
    min-height: 84px;
    margin: 0 auto;
}

/* ==================================================
   LOGO
================================================== */

.hh-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--header-green);
    text-decoration: none;
}

.hh-header__logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 60px;
    object-fit: contain;
    color: var(--header-green);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.hh-header__logo:hover .hh-header__logo-icon {
    transform: rotate(-5deg) scale(1.04);
}

.hh-header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hh-header__logo-text strong {
    color: var(--header-green);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hh-header__logo-text>span {
    color: var(--header-orange);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ==================================================
   DESKTOP NAVIGATION
================================================== */

.hh-header__nav {
    margin-right: auto;
    margin-left: auto;
}

.hh-header__menu {
    display: flex;
    align-items: center;
    gap: 3px;
}

.hh-header__menu-item {
    position: relative;
}

.hh-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 72px;
    padding: 0 16px;
    border: 0;
    color: var(--header-green);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.hh-header__nav-link::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 18px;
    left: 16px;
    height: 2px;
    background: var(--header-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms ease;
}

.hh-header__nav-link:hover,
.hh-header__nav-link:focus-visible {
    color: var(--header-orange);
}

.hh-header__nav-link:hover::after,
.hh-header__nav-link:focus-visible::after {
    transform: scaleX(1);
}

.hh-header__dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.hh-header__menu-item--dropdown:hover .hh-header__dropdown-toggle svg,
.hh-header__menu-item--dropdown.is-open .hh-header__dropdown-toggle svg {
    transform: rotate(180deg);
}

/* ==================================================
   SERVICES DROPDOWN
================================================== */

.hh-header__dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% - 5px);
    left: 50%;
    width: 525px;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease;
}

.hh-header__menu-item--dropdown:hover .hh-header__dropdown,
.hh-header__menu-item--dropdown.is-open .hh-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.hh-header__dropdown-inner {
    padding: 21px;
    border: 1px solid var(--header-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(7, 63, 56, 0.15);
}

.hh-header__dropdown-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--header-border);
}

.hh-header__dropdown-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #ffffff;
    background: var(--header-green);
}

.hh-header__dropdown-heading-icon svg {
    width: 19px;
    height: 19px;
}

.hh-header__dropdown-heading div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hh-header__dropdown-heading strong {
    color: var(--header-green);
    font-size: 13px;
    font-weight: 800;
}

.hh-header__dropdown-heading span:not(.hh-header__dropdown-heading-icon) {
    color: var(--header-text);
    font-size: 9px;
}

.hh-header__dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.hh-header__dropdown-grid a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--header-text);
    font-size: 14px !important;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.hh-header__dropdown-grid a:hover,
.hh-header__dropdown-grid a:focus-visible {
    color: var(--header-green);
    background: var(--header-soft);
    transform: translateX(3px);
}

.hh-header__dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding: 13px 14px;
    border-radius: 9px;
    color: #ffffff;
    background: var(--header-green);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.hh-header__dropdown-footer svg {
    width: 17px;
    height: 17px;
    transition: transform var(--transition-fast);
}

.hh-header__dropdown-footer:hover,
.hh-header__dropdown-footer:focus-visible {
    color: #ffffff;
    background: var(--header-green-light);
}

.hh-header__dropdown-footer:hover svg {
    transform: translateX(4px);
}

/* ==================================================
   HEADER ACTIONS
================================================== */

.hh-header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 15px;
}

.hh-header__registration-link {
    color: var(--header-green);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.hh-header__registration-link:hover,
.hh-header__registration-link:focus-visible {
    color: var(--header-orange);
}

.hh-header__book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 14px;
    color: #ffffff;
    background: var(--header-green);
    box-shadow: 0 18px 36px rgba(7, 63, 56, 0.2);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hh-header__book-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--header-green);
    background: var(--header-orange);
}

.hh-header__book-icon svg {
    width: 14px;
    height: 14px;
}

.hh-header__book-button:hover,
.hh-header__book-button:focus-visible {
    color: #ffffff;
    background: var(--header-green-light);
    transform: translateY(-3px);
    box-shadow: 0 17px 32px rgba(7, 63, 56, 0.23);
}

/* ==================================================
   MOBILE TOGGLE
================================================== */

.hh-header__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--header-border);
    border-radius: 10px;
    background: var(--header-soft);
    cursor: pointer;
}

.hh-header__mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 5px;
    background: var(--header-green);
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.hh-header__mobile-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hh-header__mobile-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.hh-header__mobile-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==================================================
   MOBILE MENU
================================================== */

.hh-header__mobile-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--header-border);
    background: #ffffff;
    opacity: 0;
    transition: max-height var(--transition-slow), opacity var(--transition-normal);
}

.hh-header.is-sticky .hh-header__mobile-menu {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9998;
    max-height: calc(100vh - 76px);
}

.hh-header__mobile-menu.is-open {
    max-height: 900px;
    opacity: 1;
}

.hh-header__mobile-menu-inner {
    width: min(100% - 32px, 720px);
    margin: 0 auto;
    padding: 18px 0 25px;
}

.hh-header__mobile-list {
    display: flex;
    flex-direction: column;
}

.hh-header__mobile-list>li {
    border-bottom: 1px solid var(--header-border);
}

.hh-header__mobile-list>li>a,
.hh-header__mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 53px;
    padding: 10px 3px;
    border: 0;
    color: var(--header-green);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hh-header__mobile-dropdown-toggle svg {
    width: 17px;
    height: 17px;
    transition: transform 220ms ease;
}

.hh-header__mobile-dropdown.is-open .hh-header__mobile-dropdown-toggle svg {
    transform: rotate(180deg);
}

.hh-header__mobile-submenu {
    display: grid;
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;
    transition: max-height 350ms ease, padding 350ms ease;
}

.hh-header__mobile-dropdown.is-open .hh-header__mobile-submenu {
    max-height: 500px;
    padding: 4px 10px 15px;
}

.hh-header__mobile-submenu a {
    display: block;
    padding: 10px 13px;
    border-radius: 7px;
    color: var(--header-text);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.hh-header__mobile-submenu a:hover,
.hh-header__mobile-submenu a:focus-visible {
    color: var(--header-green);
    background: var(--header-soft);
}

.hh-header__mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.hh-header__mobile-book,
.hh-header__mobile-registration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.hh-header__mobile-book {
    color: #ffffff;
    background: var(--header-green);
}

.hh-header__mobile-book:hover,
.hh-header__mobile-book:focus-visible {
    color: #ffffff;
    background: var(--header-green-light);
}

.hh-header__mobile-book svg {
    width: 17px;
    height: 17px;
}

.hh-header__mobile-registration {
    border: 1px solid var(--header-border);
    color: var(--header-green);
    background: var(--header-soft);
}

.hh-header__mobile-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 9px;
    background: var(--header-soft);
}

.hh-header__mobile-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--header-green);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.hh-header__mobile-contact a svg {
    width: 16px;
    height: 16px;
    color: var(--header-orange);
}

.hh-header__mobile-contact>span {
    color: var(--header-text);
    font-size: 9px;
}

/* ==================================================
   HEADER ACCESSIBILITY
================================================== */

.hh-header a:focus-visible,
.hh-header button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
}

@keyframes hhHeaderSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================
   CINEMATIC HERO — FULL WIDTH
================================================== */

/* Keep the hero independent from any theme/container spacing. */
main.site-shell,
.site-shell {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: var(--color-dark);
}

.cinema-hero {
    position: relative;
    width: 100vw;
    max-width: none;
    height: calc(100vh + 3100px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 0;
    overflow: visible;
}

.cinema-hero>.stage {
    position: sticky;
    top: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    min-height: 640px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    /* remove default blue background so images show through */
    background: transparent !important;
}

.cinema-hero .world,
.cinema-hero .scene,
.cinema-hero .brand-overlay,
.cinema-hero .contrast-overlay,
.cinema-hero .grain,
.cinema-hero .hero-copy,
.cinema-hero .scroll-cue {
    position: absolute;
}

.cinema-hero .world {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-primary);
}

.cinema-hero .scene {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.cinema-hero .scene-split {
    inset: -3%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    object-position: center 45%;
    filter: saturate(0.92) contrast(1.03) brightness(0.84) blur(var(--image-blur));
    z-index: 3;
}

.cinema-hero .scene-left {
    clip-path: inset(0 50% 0 0);
    transform: translate3d(calc(var(--split-x) * -1 + var(--mx) * 14px), calc(var(--split-y) + var(--my) * 7px), 0) scale(var(--split-scale));
    transform-origin: 25% 50%;
}

.cinema-hero .scene-right {
    clip-path: inset(0 0 0 50%);
    transform: translate3d(calc(var(--split-x) + var(--mx) * 14px), calc(var(--split-y) + var(--my) * 7px), 0) scale(var(--split-scale));
    transform-origin: 75% 50%;
}

.cinema-hero .scene-second,
.cinema-hero .scene-third {
    top: 50%;
    left: 50%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.9) contrast(1.04) brightness(0.78);
}

.cinema-hero .scene-second {
    z-index: 1;
    opacity: var(--second-opacity);
    transform: translate3d(calc(-50% + var(--mx) * 10px), calc(-50% + var(--my) * 7px), 0) scale(var(--second-scale));
}

.cinema-hero .scene-third {
    z-index: 2;
    opacity: var(--third-opacity);
    transform: translate3d(calc(-50% + var(--mx) * 8px), calc(-50% + var(--my) * 6px), 0) scale(var(--third-scale));
}

.cinema-hero .brand-overlay {
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(var(--brand-blue-rgb), 0.78) 0%,
            rgba(var(--brand-blue-rgb), 0.56) 38%,
            rgba(var(--brand-blue-rgb), 0.36) 68%,
            rgba(var(--brand-blue-rgb), 0.62) 100%),
        linear-gradient(180deg,
            rgba(var(--brand-blue-rgb), 0.30) 0%,
            rgba(var(--brand-blue-rgb), 0.12) 46%,
            rgba(var(--brand-blue-rgb), 0.72) 100%);
    opacity: var(--overlay-opacity);
    mix-blend-mode: multiply;
}

.cinema-hero .contrast-overlay {
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 38%, rgba(6, 32, 49, 0.04) 0%, rgba(6, 32, 49, 0.30) 62%, rgba(6, 32, 49, 0.58) 100%),
        linear-gradient(180deg, rgba(3, 26, 42, 0.16), transparent 34%, rgba(3, 26, 42, 0.48));
}

.cinema-hero .grain {
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.cinema-hero .hero-copy {
    z-index: 10;
    right: 24px;
    left: 24px;
    width: auto;
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    color: #ffffff;
    text-align: center;
}

@keyframes cinemaHeroReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes cinemaEyebrowDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.7);
    }
}

.cinema-hero .hero-copy>* {
    animation: cinemaHeroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cinema-hero .hero-copy>*:nth-child(1) {
    animation-delay: 0.05s;
}

.cinema-hero .hero-copy>*:nth-child(2) {
    animation-delay: 0.22s;
}

.cinema-hero .hero-copy>*:nth-child(3) {
    animation-delay: 0.38s;
}

.cinema-hero .hero-copy>*:nth-child(4) {
    animation-delay: 0.52s;
}

.cinema-hero .hero-copy .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-pill);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: none;
}

.cinema-hero .hero-copy .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 10px 2px rgba(247, 144, 30, 0.55);
    animation: cinemaEyebrowDot 1.8s ease-in-out infinite;
}

.cinema-hero .hero-copy-main {
    top: 14vh;
    opacity: calc(1 - var(--intro));
    transform: translate3d(0, calc(var(--intro) * -180px), 0) scale(calc(1 - var(--intro) * 0.08));
}

.cinema-hero .hero-copy-second {
    top: 50%;
    opacity: calc(var(--phase2) * (1 - var(--phase2-out)));
    transform: translate3d(0, calc(-50% + (1 - var(--phase2)) * 72px - var(--phase2-out) * 92px), 0);
}

.cinema-hero .hero-copy-third {
    top: 50%;
    opacity: var(--phase3);
    transform: translate3d(0, calc(-50% + (1 - var(--phase3)) * 72px), 0);
}

/* Slightly darken and increase contrast on the third scene image to improve readability */
.cinema-hero .scene-third {
    filter: saturate(0.92) contrast(1.06) brightness(0.84) blur(var(--image-blur));
}

.cinema-hero .hero-copy-main h1 {
    margin: 24px 0 0;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(75px, 8vw, 80px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-shadow: 0 24px 70px rgba(2, 25, 41, 0.48);
}

.cinema-hero .hero-copy h1 span,
.cinema-hero .hero-copy h2 span {
    background: linear-gradient(100deg, var(--color-secondary) 0%, #ffc774 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cinema-hero .hero-copy h2 {
    max-width: 860px;
    margin: 24px auto 0;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(75px, 8vw, 80px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-shadow: 0 22px 64px rgba(2, 25, 41, 0.52);
}

.cinema-hero .hero-copy p {
    max-width: 650px;
    margin: 28px auto 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 3px 24px rgba(2, 25, 41, 0.68);
}

.cinema-hero .hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.cinema-hero .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 27px;
    border-radius: var(--radius-pill);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition-normal), background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.cinema-hero .button:hover,
.cinema-hero .button:focus-visible {
    transform: translateY(-2px);
}

.cinema-hero .button-primary {
    color: var(--color-dark);
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(2, 25, 41, 0.25);
}

.cinema-hero .button-primary:hover,
.cinema-hero .button-primary:focus-visible {
    color: var(--color-dark);
    background: #f3f7f9;
}

.cinema-hero .button-ghost {
    border: 1px solid rgba(255, 255, 255, 0.48);
    color: #ffffff;
    background: rgba(8, 47, 73, 0.22);
    backdrop-filter: blur(14px);
}

.cinema-hero .button-ghost:hover,
.cinema-hero .button-ghost:focus-visible {
    color: #ffffff;
    background: rgba(8, 47, 73, 0.38);
}

.cinema-hero .hero-copy-third .button {
    margin-top: 30px;
}

.cinema-hero .scroll-cue {
    z-index: 11;
    left: 50%;
    bottom: 28px;
    width: 34px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
    opacity: calc(1 - var(--intro));
}

.cinema-hero .scroll-cue span {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 4px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    transform: translateX(-50%);
    animation: cue 1.2s ease-in-out infinite;
}

@keyframes cue {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.35;
    }

    45% {
        opacity: 1;
    }

    72% {
        transform: translate(-50%, 21px);
        opacity: 0.1;
    }
}

/* ==================================================
   RESPONSIVE — LAPTOP
================================================== */

@media (max-width: 1200px) {

    .hh-header__topbar-inner,
    .hh-header__main-inner {
        width: min(100% - 36px, 1400px);
    }

    .hh-header__nav-link {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 10px;
    }

    .hh-header__registration-link {
        display: none;
    }

    .hh-header__book-button {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* ==================================================
   RESPONSIVE — TABLET
================================================== */

@media (max-width: 980px) {
    .hh-header__topbar-right {
        display: none;
    }

    .hh-header__topbar-left {
        width: 100%;
        justify-content: space-between;
    }

    .hh-header__nav,
    .hh-header__actions {
        display: none;
    }

    .hh-header__mobile-toggle {
        display: flex;
    }

    .hh-header__mobile-menu {
        display: block;
    }

    .hh-header__main-inner {
        min-height: 76px;
    }
}

@media (max-width: 900px) {
    .cinema-hero .hero-copy-main {
        top: 18vh;
    }

    .cinema-hero .hero-copy-main h1 {
        font-size: clamp(2rem, 6vw, 3.4rem);
    }

    .cinema-hero .hero-copy h2 {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }

    .cinema-hero .scene-split {
        object-position: 54% center;
    }

    .cinema-hero .scene-second {
        object-position: 58% center;
    }

    .cinema-hero .scene-third {
        object-position: center;
    }

    .cinema-hero .brand-overlay {
        opacity: calc(var(--overlay-opacity) * 0.55);
    }
}

/* ==================================================
   RESPONSIVE — MOBILE
================================================== */

@media (max-width: 639px) {
    :root {
        --container-gutter: 18px;
    }

    .hh-header__topbar-inner {
        width: calc(100% - 28px);
        min-height: 38px;
    }

    .hh-header__topbar-left {
        justify-content: center;
    }

    .hh-header__topbar-left .hh-header__top-item:nth-child(2) {
        display: none;
    }

    .hh-header__main-inner {
        width: calc(100% - 28px);
        min-height: 70px;
    }

    .hh-header__logo-icon {
       width: 120px !important;
        height: 60px !important;
        object-fit: contain;

    }

    .hh-header__logo-text strong {
        font-size: 18px;
    }

    .hh-header__logo-text>span {
        font-size: 10px;
    }

    .hh-header__mobile-toggle {
        width: 42px;
        height: 42px;
    }

    .hh-header__mobile-actions {
        grid-template-columns: 1fr;
    }

    .hh-header__mobile-contact {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .cinema-hero>.stage {
        height: 100svh;
        min-height: 680px;
    }

    .cinema-hero .hero-copy {
        right: 18px;
        left: 18px;
        width: auto;
        max-width: none;
    }

    .cinema-hero .hero-copy .eyebrow {
        padding: 7px 16px 7px 13px;
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .cinema-hero .hero-copy-main {
        top: 20vh;
    }

    .cinema-hero .hero-copy-main h1 {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    .cinema-hero .hero-copy h2 {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }

    .cinema-hero .hero-copy p {
        font-size: 1rem;
        line-height: 1.46;
    }

    .cinema-hero .hero-actions {
        display: grid;
        width: 100%;
    }

    .cinema-hero .button {
        width: 100%;
    }

    .cinema-hero .scene-split {
        object-position: 57% center;
    }

    .cinema-hero .scene-second,
    .cinema-hero .scene-third {
        width: 100%;
        height: 100%;
        object-position: center center;
    }

    .cinema-hero .scroll-cue {
        bottom: 20px;
    }
}

/* ==================================================
   FULL-BLEED SAFETY OVERRIDE
   Keeps the hero edge-to-edge inside WordPress/page builders.
================================================== */

body>main.site-shell,
main.site-shell,
.site-shell,
.site-shell>.cinema-hero,
.cinema-hero,
.cinema-hero>.stage {
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

main.site-shell,
.site-shell {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.cinema-hero {
    width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
}

.cinema-hero>.stage {
    width: 100vw !important;
    margin: 0 !important;
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hh-header.is-sticky .hh-header__main {
        animation: none;
    }

    .scroll-cue span {
        animation: none;
    }
}

/* ==================================================
   FEATURED SERVICES CAROUSEL
   Add after: Cinematic Hero CSS
   Uses the existing global colour, font and motion variables
================================================== */

500;
600;
700;
800&display=swap');


.hcs-hero,
.hcs-hero * {
    box-sizing: border-box;
}

.hcs-hero {
    --hcs-white: var(--color-white);
    --hcs-dark: var(--color-primary);
    --hcs-accent: var(--color-secondary);

    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;

    background-color: #d98f98;

    font-family: var(--font-primary);

    transition:
        background-color 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hcs-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 680px;
    overflow: hidden;
}

/* Grain */

.hcs-grain {
    position: absolute;
    inset: 0;
    z-index: 50;

        opacity: 0;
        mix-blend-mode: normal;
        background-image: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");

    background-size: 200px 200px;
}

/* Large text */

.hcs-ghost-text {
    position: absolute;
    top: 16%;
    right: 0;
    left: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.9);

    font-family: var(--font-primary);
    font-size:100px !important;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.025em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    pointer-events: none;
    user-select: none;

    transition:
        opacity 300ms ease,
        transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand */

.hcs-brand {
    position: absolute;
    top: 28px;
    left: 40px;
    z-index: 60;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}

/* Carousel */

.hcs-carousel {
    position: absolute;
    inset: 0;
    z-index: 3;

    pointer-events: none;
}

.hcs-service-image {
    position: absolute;

    overflow: hidden;

    border: 6px solid rgba(255, 255, 255, 0.72);
    border-radius: 180px 180px 26px 26px;

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0 30px 70px rgba(5, 47, 42, 0.18);

    transition:
        transform 650ms cubic-bezier(0.4, 0, 0.2, 1),
        filter 650ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 650ms cubic-bezier(0.4, 0, 0.2, 1),
        left 650ms cubic-bezier(0.4, 0, 0.2, 1),
        width 650ms cubic-bezier(0.4, 0, 0.2, 1),
        height 650ms cubic-bezier(0.4, 0, 0.2, 1),
        bottom 650ms cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform, filter, opacity, left;
}

.hcs-service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
}

/* Image overlay */

.hcs-service-image::after {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(7, 63, 56, 0) 50%,
            rgba(7, 63, 56, 0.2) 100%);

    content: "";
}

/* Active center */

.hcs-service-image.is-center {
    bottom: -6%;
    left: 50%;
    z-index: 20;

    width: min(31vw, 440px);
    height: 78%;

    opacity: 1;
    filter: blur(0);

    transform: translateX(-50%) scale(1);
}

/* Left */

.hcs-service-image.is-left {
    bottom: 15%;
    left: 26%;
    z-index: 10;

    width: min(14vw, 190px);
    height: 34%;

    opacity: 0.78;
    filter: blur(2px) saturate(0.8);

    transform: translateX(-50%) scale(1);
}

/* Right */

.hcs-service-image.is-right {
    bottom: 15%;
    left: 74%;
    z-index: 10;

    width: min(14vw, 190px);
    height: 34%;

    opacity: 0.78;
    filter: blur(2px) saturate(0.8);

    transform: translateX(-50%) scale(1);
}

/* Back */

.hcs-service-image.is-back {
    bottom: 18%;
    left: 50%;
    z-index: 5;

    width: min(11vw, 140px);
    height: 25%;

    opacity: 0.55;
    filter: blur(4px) saturate(0.6);

    transform: translateX(-50%) scale(1);
}

/* Hidden items */

.hcs-service-image.is-hidden {
    bottom: 16%;
    left: 50%;
    z-index: 1;

    width: 90px;
    height: 20%;

    opacity: 0;
    filter: blur(8px);

    transform: translateX(-50%) scale(0.7);
}

/* Bottom content */

.hcs-content {
    position: absolute;
    bottom: 58px;
    left: 56px;
    z-index: 60;

    width: min(370px, calc(100% - 32px));

    color: #ffffff;
}

.hcs-small-label {
    display: inline-block;
    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.hcs-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(32px, 3.2vw, 52px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.hcs-content p {
    margin: 0 0 22px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;
    line-height: 1.65;

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.hcs-content.is-changing h2,
.hcs-content.is-changing p {
    opacity: 0;
    transform: translateY(8px);
}

/* Actions */

.hcs-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hcs-service-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 14px 20px;

    border-radius: 100px;

    color: var(--hcs-dark);
    background: #ffffff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.hcs-service-button svg {
    width: 18px;
    height: 18px;

    transition: transform 180ms ease;
}

.hcs-service-button:hover {
    color: var(--hcs-dark);
    background: #f8f8f8;

    transform: translateY(-3px);
}

.hcs-service-button:hover svg {
    transform: translateX(4px);
}

/* Navigation */

.hcs-navigation {
    display: flex;
    gap: 8px;
}

.hcs-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    padding: 0;

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    color: #ffffff;
    background: transparent;

    cursor: pointer;

    transition:
        transform 150ms ease,
        background-color 150ms ease;
}

.hcs-nav-button svg {
    width: 23px;
    height: 23px;
}

.hcs-nav-button:hover {
    background: rgba(255, 255, 255, 0.14);

    transform: scale(1.08);
}

.hcs-nav-button:focus-visible,
.hcs-service-button:focus-visible,
.hcs-all-services:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* Counter */

.hcs-counter {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 60;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hcs-counter-line {
    width: 38px;
    height: 1px;

    background: rgba(255, 255, 255, 0.6);
}

/* All services */

.hcs-all-services {
    position: absolute;
    right: 48px;
    bottom: 64px;
    z-index: 60;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;

    font-family: var(--font-primary);
    font-size: clamp(26px, 3vw, 48px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.hcs-all-services svg {
    width: 30px;
    height: 30px;

    transition: transform 180ms ease;
}

.hcs-all-services:hover {
    color: #ffffff;
    opacity: 0.9;
}

.hcs-all-services:hover svg {
    transform: translateX(5px);
}

/* Tablet */

@media (max-width: 1024px) {

    .hcs-service-image.is-center {
        width: min(40vw, 390px);
        height: 70%;
    }

    .hcs-service-image.is-left {
        left: 20%;
        width: 17vw;
    }

    .hcs-service-image.is-right {
        left: 80%;
        width: 17vw;
    }

    .hcs-content {
        bottom: 40px;
        left: 30px;
    }

    .hcs-all-services {
        right: 30px;
        bottom: 46px;
    }
}

/* Mobile */

@media (max-width: 639px) {

    .hcs-hero {
        min-height: auto;
    }

    .hcs-stage {
        min-height: 760px;
        height: auto;
    }

    .hcs-brand {
        top: 16px;
        left: 14px;
        padding: 8px 12px;
        font-size: 10px;
    }

    .hcs-counter {
        top: 18px;
        right: 14px;
        font-size: 11px;
    }

    .hcs-ghost-text {
        top: 20%;
        font-size: 25px !important;
        opacity: 0.72;
    }

    .hcs-service-image {
        border-width: 4px;
        border-radius: 110px 110px 18px 18px;
    }

    .hcs-service-image.is-center {
        bottom: 24%;
        left: 50%;
        width: min(64vw, 255px);
        height: 46%;
    }

    .hcs-service-image.is-left {
        bottom: 38%;
        left: 10%;
        width: 62px;
        height: 18%;
    }

    .hcs-service-image.is-right {
        bottom: 38%;
        left: 90%;
        width: 62px;
        height: 18%;
    }

    .hcs-service-image.is-back {
        bottom: 41%;
        width: 50px;
        height: 14%;
    }

    .hcs-content {
        bottom: 12px;
        left: 16px;
        width: calc(100% - 32px);
    }

    .hcs-small-label {
        margin-bottom: 7px;
    }

    .hcs-content h2 {
        max-width: 270px;
        margin-bottom: 7px;
        font-size: 27px;
    }

    .hcs-content p {
        max-width: 310px;
        margin-bottom: 14px;
        font-size: 12px;
        line-height: 1.5;
    }

    .hcs-actions {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hcs-service-button {
        min-height: 44px;
        padding: 11px 15px;
        font-size: 12px;
    }

    .hcs-nav-button {
        width: 42px;
        height: 42px;
    }

    .hcs-all-services {
        position: static;
        right: auto;
        bottom: auto;
        left: auto;
        display: inline-flex;
        margin: 16px 16px 24px;
        gap: 6px;
        font-size: 17px;
        text-align: left;
        display: none !important;
    }

    .hcs-all-services svg {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hcs-hero,
    .hcs-service-image,
    .hcs-content h2,
    .hcs-content p,
    .hcs-nav-button,
    .hcs-service-button,
    .hcs-all-services {
        transition: none;
    }
}

/* ==================================================
   ABOUT US SECTION
   Add after: Featured Services Carousel CSS
   Uses the existing global colour and typography settings
================================================== */

/* =========================================
   BASE
========================================= */

.hh-about,
.hh-about * {
    box-sizing: border-box;
}

.hh-about {
    --hh-green: var(--color-primary);
    --hh-green-light: var(--color-primary-dark);
    --hh-orange: var(--color-secondary);
    --hh-blue: #62b7e8;
    --hh-text: #586964;
    --hh-soft: #f3f8f7;
    --hh-white: var(--color-white);
    --hh-border: rgba(7, 63, 56, 0.13);

    position: relative;

    width: 100%;
    padding: 120px 30px;

    overflow: hidden;

    background: #ffffff;

    font-family: var(--font-primary);
}

.hh-about__container {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(65px, 8vw, 125px);

    width: min(1320px, 100%);
    margin: 0 auto;
}

/* =========================================
   DECORATIVE BACKGROUND
========================================= */

.hh-about__decor {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.hh-about__decor--one {
    top: -170px;
    left: -160px;

    width: 430px;
    height: 430px;

    border: 1px solid rgba(7, 63, 56, 0.07);
}

.hh-about__decor--two {
    right: -110px;
    bottom: -140px;

    width: 330px;
    height: 330px;

    background: rgba(56, 182, 255, 0.05);
}

/* =========================================
   LEFT VISUAL AREA
========================================= */

.hh-about__visual {
    position: relative;

    min-height: 650px;
}

.hh-about__main-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 78%;
    height: 585px;

    overflow: hidden;

    border-radius: 220px 220px 26px 26px;

    background: #dceeea;

    box-shadow: 0 28px 65px rgba(7, 63, 56, 0.16);
}

.hh-about__main-image img,
.hh-about__small-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hh-about__visual:hover .hh-about__main-image img {
    transform: scale(1.04);
}

.hh-about__visual:hover .hh-about__small-image img {
    transform: scale(1.05);
}

.hh-about__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(7, 63, 56, 0) 58%,
            rgba(7, 63, 56, 0.22) 100%);

    pointer-events: none;
}

/* Small image */

.hh-about__small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;

    width: 42%;
    height: 295px;

    overflow: hidden;

    border: 7px solid #ffffff;
    border-radius: 150px 150px 22px 22px;

    background: #f4ddd0;

    box-shadow: 0 24px 50px rgba(7, 63, 56, 0.18);

    transform: rotate(3deg);
}

/* Image label */

.hh-about__image-label {
    position: absolute;
    bottom: 28px;
    left: 28px;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow: 0 15px 35px rgba(7, 63, 56, 0.15);

    backdrop-filter: blur(12px);
}

.hh-about__image-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    color: #ffffff;
    background: var(--hh-green);
}

.hh-about__image-label-icon svg {
    width: 20px;
    height: 20px;
}

.hh-about__image-label div,
.hh-about__experience-card div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hh-about__image-label strong {
    color: var(--hh-green);

    font-size: 12px;
    font-weight: 800;
}

.hh-about__image-label span:not(.hh-about__image-label-icon) {
    color: #6d7f7a;

    font-size: 10px;
}

/* Floating card */

.hh-about__experience-card {
    position: absolute;
    top: 80px;
    right: -14px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 230px;
    padding: 15px 16px;

    border: 1px solid var(--hh-border);
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 20px 45px rgba(7, 63, 56, 0.14);

    animation: hhAboutFloat 4.5s ease-in-out infinite;
}

.hh-about__experience-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--hh-orange);
}

.hh-about__experience-icon svg {
    width: 20px;
    height: 20px;
}

.hh-about__experience-card strong {
    color: var(--hh-green);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.hh-about__experience-card span:not(.hh-about__experience-icon) {
    color: #71817d;

    font-size: 10px;
    line-height: 1.35;
}

/* =========================================
   RIGHT CONTENT
========================================= */

.hh-about__content {
    max-width: 650px;
}

.hh-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--hh-green);

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hh-about__eyebrow span {
    width: 34px;
    height: 2px;

    background: var(--hh-orange);
}

.hh-about__content h2 {
    max-width: 650px;
    margin: 0 0 22px;

    color: var(--hh-green);

    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.hh-about__content h2 span {
    display: block;

    color: var(--hh-orange);
}

.hh-about__lead {
    margin: 0 0 14px;

    color: var(--hh-green);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
}

.hh-about__description {
    max-width: 620px;
    margin: 0 0 14px;

    color: var(--hh-text);

    font-size: 15px;
    line-height: 1.75;
}

/* =========================================
   FEATURE CARDS
========================================= */

.hh-about__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 30px;
    margin-bottom: 34px;
}

.hh-about__feature {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    min-height: 108px;
    padding: 17px;

    border: 1px solid var(--hh-border);
    border-radius: 14px;

    background: var(--hh-soft);

    transition:
        transform 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.hh-about__feature:hover {
    border-color: rgba(7, 63, 56, 0.22);

    background: #ffffff;

    transform: translateY(-4px);

    box-shadow: 0 17px 35px rgba(7, 63, 56, 0.08);
}

.hh-about__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--hh-green);
}

.hh-about__feature-icon svg {
    width: 15px;
    height: 15px;
}

.hh-about__feature div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hh-about__feature strong {
    color: var(--hh-green);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.hh-about__feature span:not(.hh-about__feature-icon) {
    color: var(--hh-text);

    font-size: 11px;
    line-height: 1.5;
}

/* =========================================
   BUTTONS
========================================= */

.hh-about__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.hh-about__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 56px;
    padding: 15px 22px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}

.hh-about__button svg,
.hh-about__text-link svg {
    width: 18px;
    height: 18px;

    transition: transform 200ms ease;
}

.hh-about__button--primary {
    color: #ffffff;
    background: var(--hh-green);

    box-shadow: 0 15px 30px rgba(7, 63, 56, 0.18);
}

.hh-about__button--primary:hover {
    color: #ffffff;
    background: var(--hh-green-light);

    transform: translateY(-3px);

    box-shadow: 0 20px 38px rgba(7, 63, 56, 0.22);
}

.hh-about__button:hover svg,
.hh-about__text-link:hover svg {
    transform: translateX(4px);
}

.hh-about__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--hh-green);

    font-size: 13px;
    font-weight: 800;
    text-decoration: none;

    transition: color 200ms ease;
}

.hh-about__text-link:hover {
    color: var(--hh-orange);
}

.hh-about__button:focus-visible,
.hh-about__text-link:focus-visible {
    outline: 3px solid var(--hh-orange);
    outline-offset: 4px;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes hhAboutFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .hh-about {
        padding: 95px 24px;
    }

    .hh-about__container {
        grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
        gap: 55px;
    }

    .hh-about__visual {
        min-height: 590px;
    }

    .hh-about__main-image {
        height: 530px;
    }

    .hh-about__experience-card {
        right: -5px;
    }
}

/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 850px) {

    .hh-about {
        padding: 80px 20px;
    }

    .hh-about__container {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .hh-about__visual {
        width: min(620px, 100%);
        min-height: 620px;
        margin: 0 auto;
    }

    .hh-about__content {
        max-width: 720px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 639px) {

    .hh-about {
        padding: 65px 16px;
    }

    .hh-about__container {
        gap: 55px;
    }

    .hh-about__visual {
        min-height: 475px;
    }

    .hh-about__main-image {
        width: 84%;
        height: 430px;

        border-radius: 170px 170px 20px 20px;
    }

    .hh-about__main-image img {
        object-position: 52% center;
    }

    .hh-about__small-image {
        width: 43%;
        height: 205px;

        border-width: 5px;
        border-radius: 105px 105px 16px 16px;
    }

    .hh-about__experience-card {
        top: 42px;
        right: -4px;

        width: 185px;
        padding: 11px 12px;
    }

    .hh-about__experience-icon {
        flex-basis: 35px;

        width: 35px;
        height: 35px;
    }

    .hh-about__experience-card strong {
        font-size: 10px;
    }

    .hh-about__experience-card span:not(.hh-about__experience-icon) {
        font-size: 8px;
    }

    .hh-about__image-label {
        bottom: 17px;
        left: 14px;

        padding: 10px 11px;
    }

    .hh-about__image-label-icon {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .hh-about__image-label strong {
        font-size: 10px;
    }

    .hh-about__image-label span:not(.hh-about__image-label-icon) {
        font-size: 8px;
    }

    .hh-about__eyebrow {
        margin-bottom: 16px;

        font-size: 10px;
    }

    .hh-about__content h2 {
        margin-bottom: 18px;

        font-size: clamp(38px, 12vw, 53px);
    }

    .hh-about__lead {
        font-size: 16px;
    }

    .hh-about__description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hh-about__features {
        grid-template-columns: 1fr;
        gap: 10px;

        margin-top: 24px;
        margin-bottom: 27px;
    }

    .hh-about__feature {
        min-height: auto;
        padding: 15px;
    }

    .hh-about__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .hh-about__button {
        width: 100%;
    }

    .hh-about__text-link {
        justify-content: center;
    }
}



/* =========================================
   SCROLL REVEAL ANIMATIONS
========================================= */

.hh-about-reveal {
    opacity: 0;
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--about-delay, 0ms);
    will-change: opacity, transform;
}

.hh-about-reveal--up {
    transform: translate3d(0, 34px, 0);
}

.hh-about-reveal--left {
    transform: translate3d(-46px, 0, 0);
}

.hh-about-reveal--right {
    transform: translate3d(46px, 0, 0);
}

.hh-about-reveal--scale {
    transform: scale(0.9) rotate(5deg);
}

.hh-about-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.hh-about__decor--one {
    animation: hhAboutDecorOne 12s ease-in-out infinite alternate;
}

.hh-about__decor--two {
    animation: hhAboutDecorTwo 10s ease-in-out infinite alternate;
}

@keyframes hhAboutDecorOne {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(30px, 24px, 0) scale(1.08);
    }
}

@keyframes hhAboutDecorTwo {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-24px, -18px, 0) scale(1.1);
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .hh-about__experience-card {
        animation: none;
    }

    .hh-about__main-image img,
    .hh-about__small-image img,
    .hh-about__feature,
    .hh-about__button,
    .hh-about__button svg,
    .hh-about__text-link,
    .hh-about__text-link svg {
        transition: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    .hh-about-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hh-about__decor--one,
    .hh-about__decor--two {
        animation: none;
    }
}

/* ==================================================
   WORKING HOURS / CONSULTATION CTA SECTION
   Add after: Why Choose Us Section CSS
   Uses existing global colours, typography and spacing variables
================================================== */

.hh-hours {
    position: relative;
    width: 100%;
    padding: clamp(90px, 11vw, 160px) var(--container-gutter);
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-dark);
    isolation: isolate;
}

.hh-hours::before {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 16% 14%, rgba(28, 130, 197, 0.35), transparent 31%),
        radial-gradient(circle at 90% 85%, rgba(247, 144, 30, 0.18), transparent 28%),
        linear-gradient(135deg, #0d2839 0%, #123a51 52%, #0c2636 100%);
    content: "";
}

/* ==================================================
   DECORATIVE AMBIENT BACKGROUND
================================================== */

.hh-hours__ambient,
.hh-hours__grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hh-hours__ambient {
    z-index: -2;
    overflow: hidden;
}

.hh-hours__grid-lines {
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.hh-hours__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.7;
}

.hh-hours__orb--one {
    top: -110px;
    left: -90px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(98, 183, 232, 0.22);
    box-shadow:
        0 0 90px rgba(28, 130, 197, 0.22),
        inset 0 0 70px rgba(28, 130, 197, 0.12);
    animation: hhHoursOrbOne 10s ease-in-out infinite alternate;
}

.hh-hours__orb--two {
    right: -120px;
    bottom: -140px;
    width: 430px;
    height: 430px;
    background: rgba(247, 144, 30, 0.08);
    box-shadow: 0 0 120px rgba(247, 144, 30, 0.12);
    animation: hhHoursOrbTwo 13s ease-in-out infinite alternate;
}

/* ==================================================
   MAIN LAYOUT
================================================== */

.hh-hours__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: clamp(70px, 9vw, 140px);
    width: min(var(--container-width), 100%);
    margin-inline: auto;
}

/* ==================================================
   LEFT CONTENT
================================================== */

.hh-hours__content {
    position: relative;
    z-index: 4;
    max-width: 630px;
}

.hh-hours__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hh-hours__eyebrow-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 7px rgba(247, 144, 30, 0.14);
}

.hh-hours__eyebrow-dot::after {
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(247, 144, 30, 0.6);
    border-radius: 50%;
    animation: hhHoursPulse 2.2s ease-out infinite;
    content: "";
}

.hh-hours__content h2 {
    margin: 0 0 25px;
    color: var(--color-white);
    font-size: clamp(3.1rem, 6vw, 6.9rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.hh-hours__content h2 span {
    display: block;
    color: var(--color-secondary);
}

.hh-hours__intro {
    max-width: 570px;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.8;
}

.hh-hours__notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
}

.hh-hours__notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--color-secondary);
    background: rgba(247, 144, 30, 0.12);
}

.hh-hours__notice-icon svg {
    width: 18px;
    height: 18px;
}

.hh-hours__notice p {
    color: rgba(255, 255, 255, 0.69);
    font-size: 0.82rem;
    line-height: 1.65;
}

.hh-hours__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hh-hours__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    padding: 0 21px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.hh-hours__button::before {
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 10%,
            rgba(255, 255, 255, 0.42) 48%,
            transparent 86%);
    transform: skewX(-18deg);
    transition: left 650ms ease;
    content: "";
}

.hh-hours__button:hover::before {
    left: 120%;
}

.hh-hours__button svg {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    transition: transform var(--transition-normal);
}

.hh-hours__button span {
    position: relative;
    z-index: 2;
}

.hh-hours__button:hover {
    transform: translateY(-4px);
}

.hh-hours__button:hover svg {
    transform: translateX(4px);
}

.hh-hours__button--primary {
    color: var(--color-heading);
    background: var(--color-white);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.hh-hours__button--primary:hover {
    color: var(--color-heading);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}

.hh-hours__button--secondary {
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
}

.hh-hours__button--secondary:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.12);
}

/* ==================================================
   HELP LINK
================================================== */

.hh-hours__help-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    width: min(100%, 470px);
    margin-top: 22px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    color: var(--color-white);
    text-decoration: none;
}

.hh-hours__help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    color: var(--color-secondary);
    background: rgba(247, 144, 30, 0.12);
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-hours__help-icon svg {
    width: 18px;
    height: 18px;
}

.hh-hours__help-link>span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hh-hours__help-link small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
}

.hh-hours__help-link strong {
    color: var(--color-white);
    font-size: 0.86rem;
}

.hh-hours__help-arrow {
    width: 19px;
    height: 19px;
    color: rgba(255, 255, 255, 0.66);
    transition: transform var(--transition-normal);
}

.hh-hours__help-link:hover {
    color: var(--color-white);
}

.hh-hours__help-link:hover .hh-hours__help-icon {
    color: var(--color-heading);
    background: var(--color-secondary);
    transform: rotate(-8deg) scale(1.08);
}

.hh-hours__help-link:hover .hh-hours__help-arrow {
    transform: translateX(6px);
}

/* ==================================================
   RIGHT VISUAL AREA
================================================== */

.hh-hours__visual {
    position: relative;
    min-height: 690px;
    perspective: 1300px;
}

.hh-hours__clock {
    position: absolute;
    top: -72px;
    right: -55px;
    z-index: 1;
    width: 290px;
    height: 290px;
    pointer-events: none;
    opacity: 0.52;
}

.hh-hours__clock-ring,
.hh-hours__clock-hand,
.hh-hours__clock-centre {
    position: absolute;
    top: 50%;
    left: 50%;
}

.hh-hours__clock-ring {
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.hh-hours__clock-ring--outer {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.36);
}

.hh-hours__clock-ring--middle {
    width: 76%;
    height: 76%;
    border: 1px solid rgba(247, 144, 30, 0.38);
}

.hh-hours__clock-ring--inner {
    width: 51%;
    height: 51%;
    border: 1px dotted rgba(255, 255, 255, 0.32);
}

.hh-hours__clock-hand {
    bottom: 50%;
    width: 2px;
    border-radius: 99px;
    background: var(--color-secondary);
    transform-origin: 50% 100%;
}

.hh-hours__clock-hand--hour {
    height: 52px;
}

.hh-hours__clock-hand--minute {
    height: 79px;
    background: rgba(255, 255, 255, 0.72);
}

.hh-hours__clock-centre {
    width: 13px;
    height: 13px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: var(--color-secondary);
    transform: translate(-50%, -50%);
}

/* ==================================================
   TIMETABLE PANEL
================================================== */

.hh-hours__panel {
    --hours-pointer-x: 50%;
    --hours-pointer-y: 50%;

    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    width: min(100%, 610px);
    padding: clamp(26px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(24px);
    transform: translateY(-50%);
    transform-style: preserve-3d;
    will-change: transform;
}

.hh-hours__panel::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at var(--hours-pointer-x) var(--hours-pointer-y),
            rgba(98, 183, 232, 0.18),
            transparent 34%);
    pointer-events: none;
    content: "";
}

.hh-hours__panel-shine {
    position: absolute;
    top: -70%;
    left: -28%;
    width: 54%;
    height: 240%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.07),
            transparent);
    pointer-events: none;
    transform: rotate(18deg);
    animation: hhHoursPanelShine 8s ease-in-out infinite;
}

.hh-hours__panel-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.hh-hours__panel-header>div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hh-hours__panel-header>div>span {
    color: var(--color-secondary);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hh-hours__panel-header h3 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.hh-hours__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.67);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}

.hh-hours__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #72d89b;
    box-shadow: 0 0 0 5px rgba(114, 216, 155, 0.11);
    animation: hhHoursStatusPulse 2s ease-out infinite;
}

/* ==================================================
   SCHEDULE ROWS
================================================== */

.hh-hours__schedule {
    position: relative;
    z-index: 2;
    display: grid;
    margin-top: 12px;
}

.hh-hours__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(36px, 1fr) auto auto auto;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.84);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
    will-change: transform;
}

.hh-hours__row::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 0;
    border-radius: 99px;
    background: var(--color-secondary);
    transform: translateY(-50%);
    transition: height var(--transition-normal);
    content: "";
}

.hh-hours__row:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.065);
}

.hh-hours__row:hover::before {
    height: 28px;
}

.hh-hours__day {
    font-size: 0.86rem;
    font-weight: 750;
}

.hh-hours__line {
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.08));
}

.hh-hours__row time,
.hh-hours__closed {
    font-size: 0.78rem;
    font-weight: 700;
}

.hh-hours__dash {
    color: rgba(255, 255, 255, 0.34);
}

.hh-hours__row--closed {
    grid-template-columns: minmax(100px, auto) minmax(36px, 1fr) auto;
}

.hh-hours__closed {
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    color: #f9b5a8;
    background: rgba(222, 91, 65, 0.12);
}

/* ==================================================
   PANEL FOOTER
================================================== */

.hh-hours__panel-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(247, 144, 30, 0.19);
    border-radius: var(--radius-medium);
    background: rgba(247, 144, 30, 0.085);
}

.hh-hours__panel-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--color-heading);
    background: var(--color-secondary);
}

.hh-hours__panel-footer-icon svg {
    width: 18px;
    height: 18px;
}

.hh-hours__panel-footer p {
    color: rgba(255, 255, 255, 0.73);
    font-size: 0.76rem;
    line-height: 1.55;
}

/* ==================================================
   MOTION INITIAL STATES
   Content stays visible by default.
   JavaScript applies entrance animation safely.
================================================== */

[data-hours-reveal],
[data-hours-visual],
.hh-hours__row {
    opacity: 1;
}

/* Hide elements only after JavaScript has initialised */
.hh-hours[data-hours-initialised="true"] [data-hours-reveal],
.hh-hours[data-hours-initialised="true"] [data-hours-visual],
.hh-hours[data-hours-initialised="true"] .hh-hours__row {
    opacity: 0;
}

/* ==================================================
   KEYFRAME ANIMATIONS
================================================== */

@keyframes hhHoursPulse {
    0% {
        opacity: 0.8;
        transform: scale(0.75);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes hhHoursStatusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(114, 216, 155, 0.3);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(114, 216, 155, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(114, 216, 155, 0);
    }
}

@keyframes hhHoursPanelShine {

    0%,
    24% {
        left: -45%;
    }

    58%,
    100% {
        left: 130%;
    }
}

@keyframes hhHoursOrbOne {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, 45px, 0) scale(1.12);
    }
}

@keyframes hhHoursOrbTwo {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-65px, -35px, 0) scale(1.08);
    }
}

/* ==================================================
   LAPTOP
================================================== */

@media (max-width: 1180px) {
    .hh-hours__container {
        grid-template-columns: minmax(0, 0.88fr) minmax(470px, 1.12fr);
        gap: 62px;
    }

    .hh-hours__content h2 {
        font-size: clamp(3rem, 5.8vw, 5.7rem);
    }

    .hh-hours__clock {
        right: -20px;
    }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 960px) {
    .hh-hours__container {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .hh-hours__content {
        max-width: 740px;
    }

    .hh-hours__visual {
        width: min(100%, 690px);
        min-height: 670px;
        margin-inline: auto;
    }

    .hh-hours__panel {
        right: 50%;
        width: min(100%, 610px);
        transform: translate(50%, -50%);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 639px) {
    .hh-hours {
        padding-block: 76px;
    }

    .hh-hours__container {
        gap: 58px;
    }

    .hh-hours__content h2 {
        font-size: clamp(2.65rem, 13vw, 4.2rem);
    }

    .hh-hours__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hh-hours__button {
        width: 100%;
    }

    .hh-hours__help-link {
        grid-template-columns: auto 1fr;
    }

    .hh-hours__help-arrow {
        display: none;
    }

    .hh-hours__visual {
        min-height: 650px;
    }

    .hh-hours__clock {
        top: -44px;
        right: -60px;
        width: 220px;
        height: 220px;
    }

    .hh-hours__panel {
        width: 100%;
        padding: 22px 17px;
        border-radius: 23px;
    }

    .hh-hours__panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .hh-hours__row {
        grid-template-columns: minmax(84px, auto) minmax(20px, 1fr) auto auto auto;
        gap: 7px;
        min-height: 55px;
        padding-inline: 8px;
    }

    .hh-hours__row--closed {
        grid-template-columns: minmax(84px, auto) minmax(20px, 1fr) auto;
    }

    .hh-hours__day {
        font-size: 0.78rem;
    }

    .hh-hours__row time,
    .hh-hours__closed {
        font-size: 0.7rem;
    }

    .hh-hours__panel-footer {
        align-items: flex-start;
    }
}

/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 390px) {
    .hh-hours__row {
        grid-template-columns: 78px 1fr auto;
    }

    .hh-hours__row .hh-hours__dash,
    .hh-hours__row time:first-of-type {
        display: none;
    }

    .hh-hours__row--closed {
        grid-template-columns: 78px 1fr auto;
    }
}

/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {
    .hh-hours__panel {
        transform-style: flat;
    }

    .hh-hours__row:hover {
        background: transparent;
    }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    [data-hours-reveal],
    [data-hours-visual],
    .hh-hours__row {
        opacity: 1;
        transform: none;
    }

    .hh-hours__orb,
    .hh-hours__eyebrow-dot::after,
    .hh-hours__status-dot,
    .hh-hours__panel-shine {
        animation: none;
    }

    .hh-hours__panel,
    .hh-hours__row,
    .hh-hours__button,
    .hh-hours__help-icon,
    .hh-hours__help-arrow {
        transition: none;
    }
}


/* ==================================================
   WORKING HOURS — MOTION FIX OVERRIDES
================================================== */

.hh-hours__panel {
    transition:
        transform 180ms ease-out,
        box-shadow var(--transition-normal);
}

@media (max-width: 960px) {
    .hh-hours__panel {
        transform: translate(50%, -50%);
    }
}

@media (max-width: 960px) and (hover: hover) and (pointer: fine) {
    .hh-hours__panel:hover {
        transform: translate(50%, -50%);
    }
}


/* ==================================================
   CINEMATIC OUR DOCTORS SLIDER
   Replace the previous Our Doctors CSS with this code
   Add after: Working Hours Section CSS
================================================== */

.hh-doctor-slider {
    --doctor-active-accent: var(--color-primary);

    position: relative;
    width: 100%;
    padding: clamp(90px, 11vw, 155px) var(--container-gutter);
    overflow: hidden;
    background: #f6f8f7;
    isolation: isolate;
}

/* ==================================================
   ANIMATED BACKGROUND
================================================== */

.hh-doctor-slider__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.hh-doctor-slider__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(15, 29, 26, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 29, 26, 0.035) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom,
            transparent,
            #000 14%,
            #000 84%,
            transparent);
}

.hh-doctor-slider__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
}

.hh-doctor-slider__orb--one {
    top: -180px;
    right: -120px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(28, 130, 197, 0.12);
    box-shadow:
        inset 0 0 90px rgba(28, 130, 197, 0.06),
        0 0 110px rgba(28, 130, 197, 0.08);
    animation: hhDoctorOrbOne 16s linear infinite;
}

.hh-doctor-slider__orb--one::before,
.hh-doctor-slider__orb--one::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.hh-doctor-slider__orb--one::before {
    inset: 65px;
    border: 1px dashed rgba(28, 130, 197, 0.13);
}

.hh-doctor-slider__orb--one::after {
    inset: 145px;
    background: rgba(28, 130, 197, 0.045);
}

.hh-doctor-slider__orb--two {
    bottom: -180px;
    left: -120px;
    width: 430px;
    height: 430px;
    background: rgba(247, 144, 30, 0.07);
    box-shadow: 0 0 120px rgba(247, 144, 30, 0.1);
    animation: hhDoctorOrbTwo 10s ease-in-out infinite alternate;
}

/* ==================================================
   CONTAINER AND HEADER
================================================== */

.hh-doctor-slider__container {
    position: relative;
    z-index: 2;
    width: min(var(--container-width), 100%);
    margin-inline: auto;
}

.hh-doctor-slider__header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.55fr);
    align-items: end;
    gap: clamp(45px, 8vw, 125px);
    margin-bottom: clamp(55px, 8vw, 90px);
}

.hh-doctor-slider__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hh-doctor-slider__eyebrow span {
    width: 36px;
    height: 2px;
    background: var(--color-secondary);
}

.hh-doctor-slider__header h2 {
    max-width: 900px;
    color: var(--color-heading);
    font-size: clamp(2.9rem, 5.8vw, 6.3rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.hh-doctor-slider__header h2 span {
    display: block;
    color: var(--color-primary);
}

.hh-doctor-slider__header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 7px;
}

.hh-doctor-slider__header-side p {
    max-width: 480px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.78;
}

.hh-doctor-slider__view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-doctor-slider__view-all svg {
    width: 19px;
    height: 19px;
    transition: transform var(--transition-normal);
}

.hh-doctor-slider__view-all:hover {
    color: var(--color-secondary);
}

.hh-doctor-slider__view-all:hover svg {
    transform: translateX(5px);
}

/* ==================================================
   SLIDER STAGE
================================================== */

.hh-doctor-slider__stage {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(15, 29, 26, 0.08);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 35%,
            rgba(255, 255, 255, 0.96),
            rgba(238, 244, 242, 0.92) 70%);
    box-shadow:
        0 35px 90px rgba(15, 29, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.hh-doctor-slider__stage.is-dragging {
    cursor: grabbing;
}

.hh-doctor-slider__stage::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(246, 248, 247, 0.92) 0%,
            transparent 12%,
            transparent 88%,
            rgba(246, 248, 247, 0.92) 100%);
    content: "";
    z-index: 20;
}

/* ==================================================
   GHOST NAME
================================================== */

.hh-doctor-slider__ghost-name {
    position: absolute;
    top: 45px;
    right: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
}

.hh-doctor-slider__ghost-name span {
    display: inline-block;
    color: color-mix(in srgb,
            var(--doctor-active-accent) 10%,
            transparent);
    font-size: clamp(6rem, 14vw, 13rem);
    font-weight: 800;
    line-height: 0.78;
    letter-spacing: -0.07em;
    white-space: nowrap;
    transition: color 500ms ease;
}

/* ==================================================
   TRACK AND SLIDES
================================================== */

.hh-doctor-slider__viewport {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.hh-doctor-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hh-doctor-slide {
    --doctor-drag-x: 0px;
    --doctor-pointer-x: 50%;
    --doctor-pointer-y: 50%;

    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    width: min(900px, calc(100% - 190px));
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(15, 29, 26, 0.1);
    border-radius: 28px;
    background: var(--color-white);
    box-shadow: 0 30px 70px rgba(15, 29, 26, 0.16);
    opacity: 0;
    pointer-events: none;
    transform:
        translate(calc(-50% + var(--doctor-drag-x)),
            -50%) scale(0.78);
    transition:
        transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 500ms ease,
        filter 600ms ease,
        box-shadow 500ms ease;
    will-change: transform, opacity;
}

.hh-doctor-slide.is-active {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    transform:
        translate(calc(-50% + var(--doctor-drag-x)),
            -50%) scale(1);
}

.hh-doctor-slide.is-previous {
    z-index: 7;
    opacity: 0.54;
    filter: saturate(0.72) blur(0.6px);
    transform:
        translate(-118%, -50%) scale(0.76) rotateY(9deg);
}

.hh-doctor-slide.is-next {
    z-index: 7;
    opacity: 0.54;
    filter: saturate(0.72) blur(0.6px);
    transform:
        translate(18%, -50%) scale(0.76) rotateY(-9deg);
}

.hh-doctor-slide.is-far-previous {
    z-index: 4;
    opacity: 0.13;
    transform:
        translate(-165%, -50%) scale(0.62);
}

.hh-doctor-slide.is-far-next {
    z-index: 4;
    opacity: 0.13;
    transform:
        translate(65%, -50%) scale(0.62);
}

.hh-doctor-slide.is-hidden {
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
}

/* ==================================================
   DOCTOR IMAGE
================================================== */

.hh-doctor-slide__image-wrap {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #dce7e5;
}

.hh-doctor-slide__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    will-change: transform;
}

.hh-doctor-slide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 47%,
            rgba(15, 29, 26, 0.58) 100%);
}

.hh-doctor-slide__light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at var(--doctor-pointer-x) var(--doctor-pointer-y),
            rgba(255, 255, 255, 0.32),
            transparent 32%);
    transition: opacity var(--transition-normal);
}

.hh-doctor-slide__availability {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: rgba(15, 29, 26, 0.27);
    backdrop-filter: blur(12px);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.hh-doctor-slide__availability span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79d7a0;
    animation: hhDoctorAvailability 2.1s ease-out infinite;
}

.hh-doctor-slide__index {
    position: absolute;
    right: 20px;
    bottom: 17px;
    color: rgba(255, 255, 255, 0.93);
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
}

/* ==================================================
   DOCTOR CONTENT
================================================== */

.hh-doctor-slide__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 4vw, 58px);
}

.hh-doctor-slide__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.hh-doctor-slide__meta span {
    padding: 7px 10px;
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    background: rgba(28, 130, 197, 0.08);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hh-doctor-slide__meta span:last-child {
    color: #a85f15;
    background: rgba(247, 144, 30, 0.11);
}

.hh-doctor-slide__content h3 {
    margin-bottom: 8px;
    color: var(--color-heading);
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hh-doctor-slide__qualifications {
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hh-doctor-slide__description {
    max-width: 480px;
    color: var(--color-text);
    font-size: 0.94rem;
    line-height: 1.75;
}

.hh-doctor-slide__interests {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.hh-doctor-slide__interests span {
    position: relative;
    padding: 8px 11px 8px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    background: #f8faf9;
    font-size: 0.69rem;
    font-weight: 700;
}

.hh-doctor-slide__interests span::before {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-secondary);
    transform: translateY(-50%);
    content: "";
}

.hh-doctor-slide__actions {
    margin-top: 26px;
}

.hh-doctor-slide__actions .hh-page-button {
    min-height: 46px;
}

.hh-doctor-slide__profile {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-doctor-slide__profile svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-normal);
}

.hh-doctor-slide__profile:hover {
    color: var(--color-secondary);
}

.hh-doctor-slide__profile:hover svg {
    transform: translateX(6px);
}

/* ==================================================
   SLIDER CONTROLS
================================================== */

.hh-doctor-slider__controls {
    position: absolute;
    right: 30px;
    bottom: 28px;
    left: 30px;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    align-items: center;
    gap: 22px;
}

.hh-doctor-slider__counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-heading);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hh-doctor-slider__counter-line {
    width: 30px;
    height: 1px;
    background: rgba(15, 29, 26, 0.25);
}

.hh-doctor-slider__progress {
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(15, 29, 26, 0.1);
}

.hh-doctor-slider__progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
            var(--doctor-active-accent),
            var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
}

.hh-doctor-slider__buttons {
    display: flex;
    gap: 8px;
}

.hh-doctor-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(15, 29, 26, 0.12);
    border-radius: 50%;
    color: var(--color-heading);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 25px rgba(15, 29, 26, 0.08);
    cursor: pointer;
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-doctor-slider__button svg {
    width: 21px;
    height: 21px;
}

.hh-doctor-slider__button:hover {
    border-color: var(--doctor-active-accent);
    color: var(--color-white);
    background: var(--doctor-active-accent);
    transform: translateY(-3px) scale(1.04);
}

/* ==================================================
   DRAG HINT
================================================== */

.hh-doctor-slider__drag-hint {
    position: absolute;
    bottom: 43px;
    left: 50%;
    z-index: 31;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(15, 29, 26, 0.48);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
}

.hh-doctor-slider__drag-icon {
    position: relative;
    width: 28px;
    height: 16px;
    border: 1px solid rgba(15, 29, 26, 0.23);
    border-radius: 99px;
}

.hh-doctor-slider__drag-icon span {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--doctor-active-accent);
    transform: translateY(-50%);
    animation: hhDoctorDragHint 1.8s ease-in-out infinite;
}

/* ==================================================
   MOTION INITIAL STATES
================================================== */

.hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-title],
.hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-reveal],
.hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-stage] {
    opacity: 0;
}

/* ==================================================
   KEYFRAMES
================================================== */

@keyframes hhDoctorOrbOne {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hhDoctorOrbTwo {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, -45px, 0) scale(1.1);
    }
}

@keyframes hhDoctorAvailability {
    0% {
        box-shadow: 0 0 0 0 rgba(121, 215, 160, 0.35);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(121, 215, 160, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(121, 215, 160, 0);
    }
}

@keyframes hhDoctorDragHint {

    0%,
    100% {
        left: 5px;
    }

    50% {
        left: 17px;
    }
}

/* ==================================================
   LAPTOP
================================================== */

@media (max-width: 1180px) {
    .hh-doctor-slide {
        width: min(820px, calc(100% - 130px));
    }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {
    .hh-doctor-slider__header {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hh-doctor-slider__header-side {
        max-width: 650px;
        padding-bottom: 0;
    }

    .hh-doctor-slider__stage {
        min-height: 850px;
    }

    .hh-doctor-slide {
        grid-template-columns: 1fr;
        width: min(590px, calc(100% - 90px));
        min-height: 680px;
    }

    .hh-doctor-slide__image-wrap {
        min-height: 340px;
        height: 340px;
    }

    .hh-doctor-slide__content {
        justify-content: flex-start;
        padding: 30px;
    }

    .hh-doctor-slide.is-previous {
        transform:
            translate(-126%, -50%) scale(0.75);
    }

    .hh-doctor-slide.is-next {
        transform:
            translate(26%, -50%) scale(0.75);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 639px) {
    .hh-doctor-slider {
        padding-block: 74px;
    }

    .hh-doctor-slider__header {
        margin-bottom: 40px;
    }

    .hh-doctor-slider__header h2 {
        font-size: clamp(2.55rem, 12vw, 3.9rem);
    }

    .hh-doctor-slider__stage {
        min-height: 790px;
        border-radius: 24px;
    }

    .hh-doctor-slider__ghost-name {
        top: 34px;
    }

    .hh-doctor-slider__ghost-name span {
        font-size: clamp(4.2rem, 19vw, 7rem);
    }

    .hh-doctor-slide {
        top: 47%;
        width: calc(100% - 30px);
        min-height: 640px;
        border-radius: 22px;
    }

    .hh-doctor-slide__image-wrap {
        height: 300px;
        min-height: 300px;
    }

    .hh-doctor-slide__content {
        padding: 24px 21px;
    }

    .hh-doctor-slide__content h3 {
        font-size: 2rem;
    }

    .hh-doctor-slide__description {
        font-size: 0.86rem;
    }

    .hh-doctor-slide.is-previous,
    .hh-doctor-slide.is-next,
    .hh-doctor-slide.is-far-previous,
    .hh-doctor-slide.is-far-next {
        opacity: 0;
        pointer-events: none;
    }

    .hh-doctor-slider__controls {
        right: 16px;
        bottom: 18px;
        left: 16px;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }

    .hh-doctor-slider__button {
        width: 44px;
        height: 44px;
    }

    .hh-doctor-slider__drag-hint {
        display: none;
    }
}

/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 400px) {
    .hh-doctor-slider__stage {
        min-height: 810px;
    }

    .hh-doctor-slide {
        min-height: 665px;
    }

    .hh-doctor-slide__image-wrap {
        height: 280px;
        min-height: 280px;
    }

    .hh-doctor-slide__interests span:nth-child(3) {
        display: none;
    }

    .hh-doctor-slider__counter-line {
        width: 18px;
    }
}

/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {
    .hh-doctor-slide__light {
        display: none;
    }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-title],
    .hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-reveal],
    .hh-doctor-slider[data-slider-initialised="true"] [data-doctor-slider-stage] {
        opacity: 1;
        transform: none;
    }

    .hh-doctor-slider__orb,
    .hh-doctor-slide__availability span,
    .hh-doctor-slider__drag-icon span {
        animation: none;
    }

    .hh-doctor-slide,
    .hh-doctor-slider__button,
    .hh-doctor-slide__profile svg {
        transition: none;
    }
}

/* ==================================================
   PATIENT CARE PROCESS — MOTION JOURNEY SECTION
   Add after: Cinematic Our Doctors Slider CSS
   Uses existing global colours, fonts and layout variables
================================================== */

.hh-process {
    --process-accent: var(--color-primary);
    --process-pointer-x: 50%;
    --process-pointer-y: 50%;

    position: relative;
    width: 100%;
    padding: clamp(90px, 11vw, 155px) var(--container-gutter);
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-white);
    isolation: isolate;
}

.hh-process::before {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 12% 10%, rgba(28, 130, 197, 0.32), transparent 28%),
        radial-gradient(circle at 88% 88%, rgba(247, 144, 30, 0.16), transparent 25%),
        linear-gradient(135deg, #0d293a 0%, #123a51 50%, #0b2433 100%);
    content: "";
}

/* ==================================================
   DECORATIVE BACKGROUND
================================================== */

.hh-process__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.hh-process__grid {
    position: absolute;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: linear-gradient(to bottom,
            transparent,
            #000 16%,
            #000 82%,
            transparent);
}

.hh-process__orb {
    position: absolute;
    border-radius: 50%;
}

.hh-process__orb--one {
    top: -170px;
    right: -120px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 0 100px rgba(28, 130, 197, 0.1);
    animation: hhProcessOrbit 18s linear infinite;
}

.hh-process__orb--one::before {
    position: absolute;
    inset: 72px;
    border: 1px dashed rgba(247, 144, 30, 0.2);
    border-radius: 50%;
    content: "";
}

.hh-process__orb--two {
    bottom: -180px;
    left: -120px;
    width: 390px;
    height: 390px;
    background: rgba(247, 144, 30, 0.055);
    box-shadow: 0 0 120px rgba(247, 144, 30, 0.09);
    animation: hhProcessFloat 11s ease-in-out infinite alternate;
}

/* ==================================================
   CONTAINER AND HEADER
================================================== */

.hh-process__container {
    position: relative;
    z-index: 2;
    width: min(var(--container-width), 100%);
    margin-inline: auto;
}

.hh-process__header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.55fr);
    align-items: end;
    gap: clamp(45px, 8vw, 125px);
    margin-bottom: clamp(55px, 8vw, 90px);
}

.hh-process__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hh-process__eyebrow span {
    width: 36px;
    height: 2px;
    background: var(--color-secondary);
}

.hh-process__header h2 {
    max-width: 900px;
    color: var(--color-white);
    font-size: clamp(2.9rem, 5.8vw, 6.3rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.hh-process__header h2 span {
    display: block;
    color: var(--color-secondary);
}

.hh-process__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 6px;
}

.hh-process__intro p {
    color: rgba(255, 255, 255, 0.69);
    font-size: 1rem;
    line-height: 1.78;
}

.hh-process__header-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-process__header-link svg {
    width: 19px;
    height: 19px;
    color: var(--color-secondary);
    transition: transform var(--transition-normal);
}

.hh-process__header-link:hover {
    color: var(--color-secondary);
}

.hh-process__header-link:hover svg {
    transform: translateX(5px);
}

/* ==================================================
   EXPERIENCE LAYOUT
================================================== */

.hh-process__experience {
    display: grid;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
    min-height: 690px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

/* ==================================================
   LEFT PROCESS RAIL
================================================== */

.hh-process__rail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 42px 30px 42px 44px;
    border-right: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(6, 27, 40, 0.24);
}

.hh-process__rail-progress {
    position: absolute;
    top: 74px;
    bottom: 74px;
    left: 30px;
    width: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
}

.hh-process__rail-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to bottom,
            var(--color-secondary),
            var(--color-primary));
    transform: scaleY(0.25);
    transform-origin: top;
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hh-process__step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 105px;
    padding: 17px 18px;
    border: 1px solid transparent;
    border-radius: 17px;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-process__step::before {
    position: absolute;
    top: 50%;
    left: -15px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: var(--color-dark);
    transform: translateY(-50%);
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
    content: "";
}

.hh-process__step:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.045);
    transform: translateX(5px);
}

.hh-process__step.is-active {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    background:
        linear-gradient(100deg,
            rgba(28, 130, 197, 0.18),
            rgba(255, 255, 255, 0.055));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.13);
}

.hh-process__step.is-active::before {
    border-color: var(--color-secondary);
    background: var(--color-secondary);
    box-shadow: 0 0 0 7px rgba(247, 144, 30, 0.13);
    transform: translateY(-50%) scale(1.15);
}

.hh-process__step-number {
    color: var(--color-secondary);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.hh-process__step-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hh-process__step-copy strong {
    color: inherit;
    font-size: 0.91rem;
    line-height: 1.35;
}

.hh-process__step-copy small {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.7rem;
    line-height: 1.45;
}

.hh-process__step-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.055);
    opacity: 0;
    transform: translateX(-8px);
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        opacity var(--transition-normal),
        transform var(--transition-normal);
}

.hh-process__step-arrow svg {
    width: 16px;
    height: 16px;
}

.hh-process__step.is-active .hh-process__step-arrow {
    color: var(--color-dark);
    background: var(--color-secondary);
    opacity: 1;
    transform: translateX(0);
}

/* ==================================================
   RIGHT ANIMATED STAGE
================================================== */

.hh-process__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(32px, 5vw, 70px);
    padding: clamp(42px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at var(--process-pointer-x) var(--process-pointer-y),
            rgba(98, 183, 232, 0.12),
            transparent 34%);
}

.hh-process__stage::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.035),
            transparent 48%);
    content: "";
}

.hh-process__stage-glow {
    position: absolute;
    top: 50%;
    left: 31%;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(28, 130, 197, 0.15);
    filter: blur(55px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hh-process__ghost-number {
    position: absolute;
    top: -28px;
    right: 18px;
    color: rgba(255, 255, 255, 0.035);
    font-size: clamp(10rem, 22vw, 20rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}

/* ==================================================
   ANIMATED VISUAL
================================================== */

.hh-process__visual {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    aspect-ratio: 1;
    margin-inline: auto;
    will-change: transform;
}

.hh-process__visual-orbit {
    position: absolute;
    inset: 0;
}

.hh-process__orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.hh-process__orbit-ring--one {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    animation: hhProcessRing 20s linear infinite;
}

.hh-process__orbit-ring--two {
    width: 72%;
    height: 72%;
    border: 1px solid rgba(247, 144, 30, 0.28);
    animation: hhProcessRingReverse 14s linear infinite;
}

.hh-process__orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.hh-process__orbit-dot--one {
    top: 8%;
    left: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 20px rgba(247, 144, 30, 0.55);
}

.hh-process__orbit-dot--two {
    right: 10%;
    bottom: 23%;
    background: #62b7e8;
    box-shadow: 0 0 20px rgba(98, 183, 232, 0.48);
}

.hh-process__visual-icon {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 142px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 38px;
    color: var(--color-white);
    background:
        linear-gradient(145deg,
            rgba(28, 130, 197, 0.55),
            rgba(28, 130, 197, 0.18));
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    transform: rotate(-4deg);
}

.hh-process__visual-icon svg {
    width: 68px;
    height: 68px;
}

.hh-process__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(98, 183, 232, 0.24);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: hhProcessPulse 3s ease-out infinite;
}

.hh-process__pulse--one {
    width: 54%;
    height: 54%;
}

.hh-process__pulse--two {
    width: 54%;
    height: 54%;
    animation-delay: 1.45s;
}

/* ==================================================
   CONTENT PANEL
================================================== */

.hh-process__panel {
    position: relative;
    z-index: 4;
    max-width: 520px;
}

.hh-process__panel-label {
    display: inline-flex;
    margin-bottom: 17px;
    padding: 8px 11px;
    border: 1px solid rgba(247, 144, 30, 0.23);
    border-radius: var(--radius-pill);
    color: var(--color-secondary);
    background: rgba(247, 144, 30, 0.08);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hh-process__panel h3 {
    margin-bottom: 18px;
    color: var(--color-white);
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.hh-process__panel>p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.94rem;
    line-height: 1.76;
}

.hh-process__points {
    display: grid;
    gap: 11px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.hh-process__points li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
    line-height: 1.5;
}

.hh-process__points li>span {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(247, 144, 30, 0.07);
}

.hh-process__panel-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-process__panel-link svg {
    width: 19px;
    height: 19px;
    color: var(--color-secondary);
    transition: transform var(--transition-normal);
}

.hh-process__panel-link:hover {
    color: var(--color-secondary);
}

.hh-process__panel-link:hover svg {
    transform: translateX(6px);
}

/* ==================================================
   STAGE CONTROLS
================================================== */

.hh-process__controls {
    position: absolute;
    right: 28px;
    bottom: 25px;
    left: 28px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hh-process__counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.hh-process__counter-line {
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.hh-process__control-buttons {
    display: flex;
    gap: 8px;
}

.hh-process__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-process__control svg {
    width: 20px;
    height: 20px;
}

.hh-process__control:hover {
    border-color: var(--color-secondary);
    color: var(--color-dark);
    background: var(--color-secondary);
    transform: translateY(-3px);
}

/* ==================================================
   SECTION CTA
================================================== */

.hh-process__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 22px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-large);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(16px);
}

.hh-process__cta-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hh-process__cta-copy span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.hh-process__cta-copy strong {
    color: var(--color-white);
    font-size: clamp(1rem, 1.5vw, 1.24rem);
}

.hh-process__cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hh-process__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 49px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-process__cta-button:hover {
    transform: translateY(-3px);
}

.hh-process__cta-button--primary {
    color: var(--color-dark);
    background: var(--color-white);
}

.hh-process__cta-button--primary:hover {
    color: var(--color-dark);
    background: #f4f7f6;
}

.hh-process__cta-button--secondary {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    background: transparent;
}

.hh-process__cta-button--secondary:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* ==================================================
   MOTION INITIAL STATES
================================================== */

.hh-process[data-process-initialised="true"] [data-process-title],
.hh-process[data-process-initialised="true"] [data-process-reveal],
.hh-process[data-process-initialised="true"] [data-process-experience],
.hh-process[data-process-initialised="true"] [data-process-step] {
    opacity: 0;
}

/* ==================================================
   KEYFRAMES
================================================== */

@keyframes hhProcessOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hhProcessFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, -40px, 0) scale(1.1);
    }
}

@keyframes hhProcessRing {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes hhProcessRingReverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes hhProcessPulse {
    0% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.75);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.65);
    }
}

/* ==================================================
   LAPTOP
================================================== */

@media (max-width: 1160px) {
    .hh-process__experience {
        grid-template-columns: minmax(310px, 0.76fr) minmax(0, 1.24fr);
    }

    .hh-process__stage {
        grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
        gap: 34px;
        padding-inline: 42px;
    }

    .hh-process__visual-icon {
        width: 122px;
        height: 122px;
        border-radius: 32px;
    }

    .hh-process__visual-icon svg {
        width: 58px;
        height: 58px;
    }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 920px) {
    .hh-process__header {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hh-process__intro {
        max-width: 650px;
        padding-bottom: 0;
    }

    .hh-process__experience {
        grid-template-columns: 1fr;
    }

    .hh-process__rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    }

    .hh-process__rail-progress {
        display: none;
    }

    .hh-process__step {
        grid-template-columns: 1fr;
        align-content: center;
        min-height: 125px;
        padding: 14px;
        text-align: center;
    }

    .hh-process__step::before,
    .hh-process__step-arrow,
    .hh-process__step-copy small {
        display: none;
    }

    .hh-process__step:hover {
        transform: translateY(-3px);
    }

    .hh-process__stage {
        min-height: 610px;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 639px) {
    .hh-process {
        padding-block: 74px;
    }

    .hh-process__header {
        margin-bottom: 40px;
    }

    .hh-process__header h2 {
        font-size: clamp(2.55rem, 12vw, 3.9rem);
    }

    .hh-process__experience {
        min-height: auto;
        border-radius: 24px;
    }

    .hh-process__rail {
        display: flex;
        flex-direction: row;
        padding: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .hh-process__rail::-webkit-scrollbar {
        display: none;
    }

    .hh-process__step {
        flex: 0 0 185px;
        min-height: 92px;
        scroll-snap-align: start;
    }

    .hh-process__stage {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 760px;
        padding: 34px 22px 92px;
        text-align: center;
    }

    .hh-process__visual {
        width: min(100%, 230px);
    }

    .hh-process__visual-icon {
        width: 104px;
        height: 104px;
        border-radius: 28px;
    }

    .hh-process__visual-icon svg {
        width: 49px;
        height: 49px;
    }

    .hh-process__panel {
        max-width: 100%;
    }

    .hh-process__panel h3 {
        font-size: clamp(2rem, 10vw, 2.9rem);
    }

    .hh-process__points {
        width: fit-content;
        margin-inline: auto;
        text-align: left;
    }

    .hh-process__panel-link {
        justify-content: center;
    }

    .hh-process__ghost-number {
        top: 0;
        right: -8px;
        font-size: 10rem;
    }

    .hh-process__cta {
        align-items: stretch;
        flex-direction: column;
    }

    .hh-process__cta-actions {
        flex-direction: column;
    }

    .hh-process__cta-button {
        width: 100%;
    }
}

/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {
    .hh-process__stage {
        background: transparent;
    }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .hh-process[data-process-initialised="true"] [data-process-title],
    .hh-process[data-process-initialised="true"] [data-process-reveal],
    .hh-process[data-process-initialised="true"] [data-process-experience],
    .hh-process[data-process-initialised="true"] [data-process-step] {
        opacity: 1;
        transform: none;
    }

    .hh-process__orb,
    .hh-process__orbit-ring,
    .hh-process__pulse {
        animation: none;
    }

    .hh-process__step,
    .hh-process__step::before,
    .hh-process__step-arrow,
    .hh-process__rail-progress span,
    .hh-process__control,
    .hh-process__cta-button {
        transition: none;
    }
}


/* ==================================================
   CINEMATIC LIGHT FOOTER
   Add after: Patient Care Process CSS
   This file already includes the final light colour theme
================================================== */

.hh-footer,
.hh-footer * {
    box-sizing: border-box;
}

.hh-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--color-heading);
    background:
        radial-gradient(circle at 12% 18%, rgba(28, 130, 197, 0.1), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(247, 144, 30, 0.1), transparent 25%),
        linear-gradient(180deg, #fbfaf6 0%, #f3efe6 100%);
    isolation: isolate;
}

/* ==================================================
   DECORATIVE BACKGROUND
================================================== */

.hh-footer__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.hh-footer__grid {
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(15, 29, 26, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 29, 26, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
}

.hh-footer__orb {
    position: absolute;
    border-radius: 50%;
}

.hh-footer__orb--one {
    top: -220px;
    right: -150px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(28, 130, 197, 0.15);
    box-shadow:
        inset 0 0 110px rgba(28, 130, 197, 0.08),
        0 0 130px rgba(28, 130, 197, 0.08);
    animation: hhFooterOrbit 22s linear infinite;
}

.hh-footer__orb--one::before,
.hh-footer__orb--one::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.hh-footer__orb--one::before {
    inset: 74px;
    border: 1px dashed rgba(247, 144, 30, 0.22);
}

.hh-footer__orb--one::after {
    inset: 165px;
    background: rgba(28, 130, 197, 0.055);
}

.hh-footer__orb--two {
    bottom: -250px;
    left: -170px;
    width: 500px;
    height: 500px;
    background: rgba(247, 144, 30, 0.08);
    box-shadow: 0 0 140px rgba(247, 144, 30, 0.09);
    animation: hhFooterFloat 13s ease-in-out infinite alternate;
}

.hh-footer__spotlight {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle,
            rgba(28, 130, 197, 0.12),
            rgba(28, 130, 197, 0) 68%);
    filter: blur(12px);
    transform: translate(-50%, -50%);
    transition: opacity 250ms ease;
}

/* ==================================================
   PRIMARY CTA
================================================== */

.hh-footer__cta-wrap {
    position: relative;
    z-index: 2;
    padding: clamp(85px, 10vw, 140px) var(--container-gutter) 0;
}

.hh-footer__cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 45px;
    width: min(var(--container-width), 100%);
    margin-inline: auto;
    padding: clamp(34px, 5vw, 62px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 32px;
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.15), transparent 32%),
        linear-gradient(135deg, #1c82c5 0%, #146ca8 58%, #0d507e 100%);
    box-shadow:
        0 38px 80px rgba(20, 108, 168, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hh-footer__cta-heartbeat {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%2090'%3E%3Cpath%20d='M0%2045%20L46%2045%20L54%2033%20L62%2045%20L78%2045%20L86%2049%20L92%2015%20L98%2075%20L104%2045%20L118%2045%20L128%2029%20L138%2045%20L220%2045'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 220px 90px;
    opacity: 0.22;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
    animation: hhFooterHeartbeatScroll 6s linear infinite;
    pointer-events: none;
}

@keyframes hhFooterHeartbeatScroll {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -220px;
    }
}

.hh-footer__cta-copy {
    position: relative;
    z-index: 1;
    max-width: 850px;
}

.hh-footer__cta-actions {
    position: relative;
    z-index: 1;
}

.hh-footer__eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: #fff4df;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hh-footer__cta h2 {
    margin: 0 0 18px;
    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.hh-footer__cta h2 span {
    display: block;
    color: #ffd09a;
}

.hh-footer__cta p {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.75;
}

.hh-footer__cta-emergency {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 20px 10px 16px;
    border: 1px solid rgba(255, 92, 92, 0.4);
    border-radius: var(--radius-pill);
    color: #ffe3e3;
    background: rgba(255, 92, 92, 0.14);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}

.hh-footer__cta-emergency strong {
    color: #ffffff;
    font-weight: 800;
}

.hh-footer__cta-emergency:hover,
.hh-footer__cta-emergency:focus-visible {
    background: rgba(255, 92, 92, 0.24);
    border-color: rgba(255, 92, 92, 0.65);
    transform: translateY(-2px);
}

.hh-footer__cta-emergency-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ff5c5c;
    animation: hhFooterEmergencyPulse 1.8s ease-out infinite;
}

@keyframes hhFooterEmergencyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 92, 92, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 92, 92, 0);
    }
}

.hh-footer__cta-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 235px);
}

.hh-footer__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 0 19px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    font-size: 0.79rem;
    font-weight: 800;
    text-decoration: none;
    will-change: transform;
}

.hh-footer__button::before {
    position: absolute;
    top: 0;
    left: -125%;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 10%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 88%);
    transform: skewX(-18deg);
    transition: left 700ms ease;
    content: "";
}

.hh-footer__button:hover::before {
    left: 125%;
}

.hh-footer__button span,
.hh-footer__button svg {
    position: relative;
    z-index: 1;
}

.hh-footer__button svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-normal);
}

.hh-footer__button:hover svg {
    transform: translateX(5px);
}

.hh-footer__button--primary {
    color: var(--color-heading);
    background: var(--color-white);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}

.hh-footer__button--primary:hover {
    color: var(--color-heading);
}

.hh-footer__button--secondary {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.hh-footer__button--secondary:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.17);
}

/* ==================================================
   MOVING MARQUEE
================================================== */

.hh-footer__marquee {
    position: relative;
    z-index: 2;
    margin-top: clamp(60px, 7vw, 90px);
    padding: 25px 0;
    overflow: hidden;
    border-top: 1px solid rgba(15, 29, 26, 0.09);
    border-bottom: 1px solid rgba(15, 29, 26, 0.09);
    background: rgba(255, 255, 255, 0.38);
}

.hh-footer__marquee-track {
    display: flex;
    width: max-content;
    animation: hhFooterMarquee 28s linear infinite;
}

.hh-footer__marquee-group {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
}

.hh-footer__marquee-group span {
    color: rgba(15, 29, 26, 0.11);
    font-size: clamp(2.6rem, 5vw, 5.8rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.hh-footer__marquee-group i {
    display: block;
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 18px rgba(247, 144, 30, 0.3);
}

/* ==================================================
   MAIN FOOTER LAYOUT
================================================== */

.hh-footer__main {
    position: relative;
    z-index: 2;
    padding: clamp(70px, 8vw, 110px) var(--container-gutter);
}

.hh-footer__container {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.25fr) minmax(150px, 0.65fr) minmax(180px, 0.75fr) minmax(280px, 1fr);
    gap: clamp(40px, 6vw, 85px);
    width: min(var(--container-width), 100%);
    margin-inline: auto;
}

/* ==================================================
   BRAND COLUMN
================================================== */

.hh-footer__brand {
    max-width: 380px;
}

.hh-footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-heading);
    text-decoration: none;
}

.hh-footer__logo-icon {
    display: inline-flex;
    width: 180px;
    height: 80px;
    object-fit: contain;
    color: var(--color-primary);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.hh-footer__logo:hover .hh-footer__logo-icon {
    transform: rotate(-6deg) scale(1.05);
}

.hh-footer__logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hh-footer__logo-text strong {
    color: var(--color-heading);
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: -0.035em;
}

.hh-footer__logo-text>span {
    color: var(--color-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hh-footer__brand>p {
    margin: 0;
    color: #5d6e69;
    font-size: 0.88rem;
    line-height: 1.75;
}

.hh-footer__brand-line {
    margin: 10px 0 0;
    color: #52635e;
    font-size: 0.75rem;
    font-weight: 600;
}

.hh-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.hh-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(15, 29, 26, 0.14);
    border-radius: 50%;
    color: var(--color-primary);
    background: #ffffff;
    transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.hh-footer__social-link svg {
    width: 18px;
    height: 18px;
}

.hh-footer__social-link:hover,
.hh-footer__social-link:focus-visible {
    color: #ffffff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

/* ==================================================
   FOOTER COLUMNS
================================================== */

.hh-footer__column-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: auto;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    color: var(--color-heading);
    background: transparent;
    font: inherit;
    font-size: 0.81rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    cursor: default;
}

.hh-footer__column-toggle svg {
    display: none;
    width: 18px;
    height: 18px;
    transition: transform var(--transition-normal);
}

.hh-footer__column-content {
    display: grid;
    gap: 13px;
}

.hh-footer__column-content>a:not(.hh-footer__contact-item):not(.hh-footer__location-link) {
    position: relative;
    width: fit-content;
    padding-left: 0;
    color: #65736f;
    font-size: 0.8rem;
    text-decoration: none;
    transition:
        color var(--transition-normal),
        padding-left var(--transition-normal);
}

.hh-footer__column-content>a:not(.hh-footer__contact-item):not(.hh-footer__location-link)::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-secondary);
    transform: translateY(-50%);
    transition: width var(--transition-normal);
    content: "";
}

.hh-footer__column-content>a:not(.hh-footer__contact-item):not(.hh-footer__location-link):hover {
    padding-left: 18px;
    color: var(--color-primary);
}

.hh-footer__column-content>a:not(.hh-footer__contact-item):not(.hh-footer__location-link):hover::before {
    width: 11px;
}

/* ==================================================
   CONTACT COLUMN
================================================== */

.hh-footer__contact .hh-footer__column-content {
    gap: 16px;
}

.hh-footer__contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    color: var(--color-heading);
    text-decoration: none;
}

.hh-footer__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(28, 130, 197, 0.14);
    border-radius: 12px;
    color: var(--color-primary);
    background: rgba(28, 130, 197, 0.075);
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        transform var(--transition-normal);
}

.hh-footer__contact-icon svg {
    width: 18px;
    height: 18px;
}

.hh-footer__contact-item>span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.hh-footer__contact-item small {
    color: #8a9692;
    font-size: 0.65rem;
}

.hh-footer__contact-item strong {
    overflow-wrap: anywhere;
    color: #455853;
    font-size: 0.76rem;
    line-height: 1.45;
}

a.hh-footer__contact-item:hover {
    color: var(--color-primary);
}

a.hh-footer__contact-item:hover .hh-footer__contact-icon {
    color: var(--color-white);
    background: var(--color-primary);
    transform: rotate(-7deg) scale(1.06);
}

.hh-footer__location-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: 4px;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-footer__location-link svg {
    width: 17px;
    height: 17px;
    color: var(--color-secondary);
    transition: transform var(--transition-normal);
}

.hh-footer__location-link:hover {
    color: var(--color-secondary);
}

.hh-footer__location-link:hover svg {
    transform: translateX(5px);
}

/* ==================================================
   COPYRIGHT BAR
================================================== */

.hh-footer__bottom {
    position: relative;
    z-index: 2;
    padding: 20px var(--container-gutter);
    background: #102d3c;
}

.hh-footer__bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 30px;
    width: min(var(--container-width), 100%);
    margin-inline: auto;
}

.hh-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
}

.hh-footer__legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.hh-footer__legal-links a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    text-decoration: none;
}

.hh-footer__legal-links a:hover {
    color: #ffd09a;
}

.hh-footer__back-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

.hh-footer__back-top svg {
    width: 17px;
    height: 17px;
    color: var(--color-secondary);
    transition: transform var(--transition-normal);
}

.hh-footer__back-top:hover {
    color: var(--color-white);
}

.hh-footer__back-top:hover svg {
    transform: translateY(-4px);
}

/* ==================================================
   MOTION INITIAL STATE
   Applied only when JavaScript confirms Motion is available
================================================== */

.hh-footer.is-motion-ready [data-footer-reveal] {
    opacity: 0;
}

/* ==================================================
   KEYFRAMES
================================================== */

@keyframes hhFooterOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hhFooterFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(80px, -50px, 0) scale(1.1);
    }
}

@keyframes hhFooterMarquee {
    to {
        transform: translateX(-50%);
    }
}

/* ==================================================
   LAPTOP
================================================== */

@media (max-width: 1120px) {
    .hh-footer__container {
        grid-template-columns:
            minmax(260px, 1fr) repeat(2, minmax(150px, 0.65fr));
    }

    .hh-footer__contact {
        grid-column: 1 / -1;
    }

    .hh-footer__contact .hh-footer__column-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-footer__location-link {
        grid-column: 1 / -1;
    }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {
    .hh-footer__cta {
        grid-template-columns: 1fr;
    }

    .hh-footer__cta-actions {
        flex-direction: row;
        width: 100%;
    }

    .hh-footer__button {
        flex: 1;
    }

    .hh-footer__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-footer__brand {
        grid-column: 1 / -1;
        max-width: 620px;
    }

    .hh-footer__contact {
        grid-column: 1 / -1;
    }

    .hh-footer__bottom-inner {
        grid-template-columns: 1fr auto;
    }

    .hh-footer__legal-links {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {
    .hh-footer__cta-wrap {
        padding-top: 72px;
    }

    .hh-footer__cta {
        gap: 30px;
        padding: 28px 22px;
        border-radius: 24px;
    }

    .hh-footer__cta h2 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .hh-footer__cta-actions {
        flex-direction: column;
    }

    .hh-footer__marquee {
        margin-top: 55px;
        padding-block: 20px;
    }

    .hh-footer__marquee-group {
        gap: 24px;
        padding-right: 24px;
    }

    .hh-footer__marquee-group span {
        font-size: 2.7rem;
    }

    .hh-footer__main {
        padding-block: 65px;
    }

    .hh-footer__container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hh-footer__brand {
        margin-bottom: 38px;
    }

    .hh-footer__column,
    .hh-footer__contact {
        grid-column: auto;
        border-top: 1px solid rgba(15, 29, 26, 0.1);
    }

    .hh-footer__column-toggle {
        min-height: 58px;
        margin: 0;
        cursor: pointer;
    }

    .hh-footer__column-toggle svg {
        display: block;
        color: var(--color-primary);
    }

    .hh-footer__column.is-open .hh-footer__column-toggle svg {
        transform: rotate(180deg);
    }

    .hh-footer__column-content {
        display: grid;
        max-height: 0;
        overflow: hidden;
        transition:
            max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
            padding-bottom 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hh-footer__column.is-open .hh-footer__column-content {
        padding-bottom: 25px;
    }

    .hh-footer__contact .hh-footer__column-content {
        grid-template-columns: 1fr;
    }

    .hh-footer__location-link {
        grid-column: auto;
    }

    .hh-footer__bottom-inner {
        grid-template-columns: 1fr auto;
        gap: 18px;
    }

    .hh-footer__legal-links {
        gap: 13px;
    }
}

/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 460px) {
    .hh-footer__bottom-inner {
        grid-template-columns: 1fr;
    }

    .hh-footer__back-top {
        grid-row: 1;
        justify-self: end;
    }

    .hh-footer__bottom p {
        grid-row: 2;
    }

    .hh-footer__legal-links {
        grid-row: 3;
    }
}

/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {
    .hh-footer__spotlight {
        display: none;
    }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .hh-footer.is-motion-ready [data-footer-reveal] {
        opacity: 1;
        transform: none;
    }

    .hh-footer__orb,
    .hh-footer__marquee-track,
    .hh-footer__cta-heartbeat {
        animation: none;
    }

    .hh-footer__button,
    .hh-footer__button::before,
    .hh-footer__column-content,
    .hh-footer__column-toggle svg,
    .hh-footer__contact-icon,
    .hh-footer__location-link svg,
    .hh-footer__back-top svg {
        transition: none;
    }
}

/* ==================================================
   INNER PAGES — SHARED DESIGN SYSTEM
================================================== */
.hh-page-main{overflow:hidden;background:var(--color-background)}
.hh-page-container{width:min(var(--container-width),100%);margin-inline:auto;padding-inline:var(--container-gutter)}
.hh-page-hero{position:relative;padding:clamp(88px,10vw,150px) 0 clamp(72px,8vw,120px);overflow:hidden;background:linear-gradient(135deg,#f8faf9,#edf4f6)}
.hh-page-hero__ambient{position:absolute;inset:0;pointer-events:none}.hh-page-hero__ambient span:first-child{position:absolute;width:480px;height:480px;right:-160px;top:-190px;border:1px solid rgba(28,130,197,.14);border-radius:50%;animation:hhInnerOrbit 22s linear infinite}.hh-page-hero__ambient span:last-child{position:absolute;width:320px;height:320px;left:-150px;bottom:-170px;border-radius:50%;background:rgba(247,144,30,.08);filter:blur(8px)}
.hh-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:32px;color:var(--color-muted);font-size:.75rem}.hh-breadcrumb a{color:var(--color-primary);text-decoration:none}
.hh-page-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr);align-items:end;gap:clamp(42px,8vw,120px)}
.hh-page-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--color-primary);font-size:.73rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.hh-page-kicker:before{width:30px;height:2px;background:var(--color-secondary);content:""}
.hh-page-hero h1{font-size:clamp(2.3rem,4.2vw,4.4rem);line-height:1.04;letter-spacing:-.03em}.hh-page-hero h1 span{display:block;color:var(--color-primary)}
.hh-page-hero__copy p{font-size:1.02rem;line-height:1.8}.hh-page-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}
.hh-page-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border-radius:var(--radius-pill);font-size:.79rem;font-weight:800;text-decoration:none;transition:transform var(--transition-normal),background var(--transition-normal),color var(--transition-normal),box-shadow var(--transition-normal)}.hh-page-button:hover{transform:translateY(-3px)}.hh-page-button--primary{color:white;background:var(--color-primary);box-shadow:0 14px 30px rgba(28,130,197,.2)}.hh-page-button--primary:hover{color:white;background:var(--color-primary-dark)}.hh-page-button--secondary{border:1px solid var(--color-border);color:var(--color-heading);background:white}.hh-page-button--secondary:hover{color:var(--color-primary);border-color:rgba(28,130,197,.3)}
.hh-page-section{padding:clamp(72px,9vw,130px) 0}.hh-page-section--soft{background:#eef3f1}.hh-page-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(45px,8vw,120px)}.hh-page-media{overflow:hidden;border-radius:28px;box-shadow:var(--shadow-large)}.hh-page-media img{width:100%;height:100%;object-fit:cover}.hh-page-media--portrait{height:min(650px,70vw)}.hh-page-media--banner{height:min(420px,42vw);margin-bottom:40px}
.hh-page-copy h2,.hh-section-heading h2,.hh-info-panel h2{margin-bottom:20px;font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;letter-spacing:-.02em}.hh-page-copy>p{margin-bottom:18px}.hh-page-feature-list{display:grid;gap:12px;margin-top:28px}.hh-page-feature-list article{display:grid;gap:4px;padding:17px;border:1px solid var(--color-border);border-radius:15px;background:white}.hh-page-feature-list strong{color:var(--color-heading)}.hh-page-feature-list span{font-size:.82rem}
.hh-specialty-slider+.hh-page-kicker{margin-top:44px}
.hh-support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.hh-support-card{position:relative;padding:32px;border:1px solid var(--color-border);border-radius:22px;background:white;overflow:hidden;box-shadow:0 8px 24px rgba(20,75,101,.05);transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)}
.hh-support-card:before{position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-slow);content:""}
.hh-support-card:hover{transform:translateY(-10px);border-color:rgba(28,130,197,.28);box-shadow:0 28px 48px rgba(20,75,101,.16)}
.hh-support-card:hover:before{transform:scaleX(1)}
.hh-support-card__icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:18px;color:var(--color-primary);background:linear-gradient(135deg,rgba(28,130,197,.16),rgba(28,130,197,.06));box-shadow:inset 0 0 0 1px rgba(28,130,197,.12);transition:background var(--transition-normal),color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal)}
.hh-support-card__icon svg{width:25px;height:25px}
.hh-support-card:hover .hh-support-card__icon{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;transform:scale(1.1) rotate(-4deg);box-shadow:0 10px 22px rgba(28,130,197,.35)}
.hh-support-card h3{margin-bottom:11px;font-size:1.25rem;color:var(--color-heading)}
.hh-support-card h3:last-child{margin-bottom:0}
.hh-support-card p{margin:0;font-size:.9rem;line-height:1.75}
.hh-support-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.hh-support-grid{grid-template-columns:1fr}}
.hh-highlight-box{position:relative;display:flex;align-items:center;gap:22px;margin:8px 0 26px;padding:28px 30px;border-radius:22px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 22px 46px rgba(28,130,197,.32);overflow:hidden}
.hh-highlight-box:before{position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.14),transparent 55%);content:""}
.hh-highlight-box__icon{position:relative;display:grid;place-items:center;flex:0 0 auto;width:56px;height:56px;border-radius:17px;background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hh-highlight-box__icon:after{position:absolute;inset:-7px;border:2px solid rgba(255,255,255,.55);border-radius:inherit;content:"";animation:hhHighlightPulse 2.4s ease-out infinite}
.hh-highlight-box__icon svg{position:relative;width:25px;height:25px}
.hh-highlight-box p{position:relative;margin:0;font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.88)}
.hh-highlight-box strong{display:block;margin-bottom:5px;color:#fff;font-size:1.18rem;letter-spacing:-.01em}
@keyframes hhHighlightPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@media(prefers-reduced-motion:reduce){.hh-highlight-box__icon:after{animation:none}}
@media(max-width:560px){.hh-highlight-box{flex-direction:column;align-items:flex-start}}
@media(max-width:820px){.hh-support-grid--three{grid-template-columns:1fr 1fr}}
.hh-arc-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;margin:56px 0 20px;padding:0 4px}
.hh-arc-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;width:148px;min-height:188px;padding:24px 12px;border:0;border-radius:26px;background:white;text-align:center;box-shadow:0 12px 30px rgba(20,75,101,.09);transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-normal)}
.hh-arc-card__icon{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;color:var(--color-primary);background:rgba(28,130,197,.10);transition:background var(--transition-normal),color var(--transition-normal),transform var(--transition-normal)}
.hh-arc-card__icon svg{width:23px;height:23px}
.hh-arc-card span{font-size:.83rem;font-weight:800;color:var(--color-heading);line-height:1.3}
.hh-arc-card:hover{box-shadow:var(--shadow-large)}
.hh-arc-card:hover .hh-arc-card__icon{background:var(--color-primary);color:#fff;transform:scale(1.1)}
.hh-arc-card:nth-child(1),.hh-arc-card:nth-child(7){transform:translateY(-4px)}
.hh-arc-card:nth-child(2),.hh-arc-card:nth-child(6){transform:translateY(-16px)}
.hh-arc-card:nth-child(3),.hh-arc-card:nth-child(5){transform:translateY(-28px)}
.hh-arc-card:nth-child(4){transform:translateY(-40px)}
.hh-arc-card:hover{transform:translateY(-14px)}
@media(max-width:900px){.hh-arc-card{width:130px}}
.hh-arc-grid--five .hh-arc-card:nth-child(1),.hh-arc-grid--five .hh-arc-card:nth-child(5){transform:translateY(-6px)}
.hh-arc-grid--five .hh-arc-card:nth-child(2),.hh-arc-grid--five .hh-arc-card:nth-child(4){transform:translateY(-22px)}
.hh-arc-grid--five .hh-arc-card:nth-child(3){transform:translateY(-38px) scale(1.1);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 24px 44px rgba(28,130,197,.4);z-index:1}
.hh-arc-grid--five .hh-arc-card:nth-child(3) .hh-arc-card__icon{background:rgba(255,255,255,.2);color:#fff}
.hh-arc-grid--five .hh-arc-card:nth-child(3) span{color:#fff}
.hh-arc-grid--five .hh-arc-card:nth-child(1):hover,.hh-arc-grid--five .hh-arc-card:nth-child(2):hover,.hh-arc-grid--five .hh-arc-card:nth-child(4):hover,.hh-arc-grid--five .hh-arc-card:nth-child(5):hover{transform:translateY(-14px)}
.hh-arc-grid--five .hh-arc-card:nth-child(3):hover{transform:translateY(-42px) scale(1.13)}
@media(max-width:760px){.hh-arc-grid--five .hh-arc-card{transform:none!important}}
@media(max-width:640px){.hh-arc-grid{gap:12px;margin-top:34px}.hh-arc-card{width:calc(50% - 8px);padding:18px 10px}.hh-arc-card:nth-child(1),.hh-arc-card:nth-child(2),.hh-arc-card:nth-child(3),.hh-arc-card:nth-child(4),.hh-arc-card:nth-child(5),.hh-arc-card:nth-child(6),.hh-arc-card:nth-child(7){transform:none}.hh-arc-card:hover{transform:translateY(-6px)}}
.hh-specialty-slider{position:relative;margin-top:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hh-specialty-track{display:flex;width:max-content;animation:hhSpecialtyMarquee 26s linear infinite}
.hh-specialty-slider:hover .hh-specialty-track{animation-play-state:paused}
.hh-specialty-group{display:flex;align-items:flex-end;gap:22px;padding-right:22px}
.hh-specialty-card{flex:0 0 auto;width:172px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 14px 22px;border:1px solid var(--color-border);border-radius:50% 50% 18px 18px/68px 68px 18px 18px;background:white;box-shadow:0 10px 26px rgba(20,75,101,.06);transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)}
.hh-specialty-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-large);border-color:rgba(28,130,197,.28)}
.hh-specialty-card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--color-primary);background:rgba(28,130,197,.10);transition:background var(--transition-normal),color var(--transition-normal),transform var(--transition-normal)}
.hh-specialty-card__icon svg{width:23px;height:23px}
.hh-specialty-card:hover .hh-specialty-card__icon{background:var(--color-primary);color:#fff;transform:scale(1.1)}
.hh-specialty-card span{font-size:.85rem;font-weight:800;color:var(--color-heading);line-height:1.3}
@keyframes hhSpecialtyMarquee{to{transform:translateX(-50%)}}
@media(max-width:640px){.hh-specialty-card{width:150px;padding:28px 10px 18px}.hh-specialty-track{animation-duration:20s}}
@media(prefers-reduced-motion:reduce){.hh-specialty-track{animation:none}}
.hh-specialty-slider--pop3d{perspective:1100px}
.hh-specialty-slider--pop3d .hh-specialty-card{transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease,border-color .3s ease}
.hh-specialty-slider--pop3d .hh-specialty-card:hover{transform:translateY(-12px) scale(1.07) rotateY(10deg) translateZ(10px);background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 24px 42px rgba(28,130,197,.35);z-index:1}
.hh-specialty-slider--pop3d .hh-specialty-card:hover span:not(.hh-specialty-card__icon){color:#fff}
.hh-specialty-slider--pop3d .hh-specialty-card:hover .hh-specialty-card__icon{background:#fff;color:var(--color-primary);transform:scale(1.1) rotate(-4deg)}
@media(prefers-reduced-motion:reduce){.hh-specialty-slider--pop3d .hh-specialty-card:hover{transform:none}}
/* Flip cards — front summary, back detail on hover/focus/tap */
.hh-flip-grid{display:grid;gap:20px;margin-top:28px}
.hh-flip-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hh-flip-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hh-flip-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hh-flip-grid--2 .hh-flip-card{height:300px}
.hh-flip-card{position:relative;height:238px;perspective:1600px;cursor:pointer}
.hh-flip-card__inner{position:relative;width:100%;height:100%;transition:transform 640ms cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.hh-flip-card:hover .hh-flip-card__inner,.hh-flip-card:focus-visible .hh-flip-card__inner,.hh-flip-card:focus-within .hh-flip-card__inner{transform:rotateY(180deg)}
.hh-flip-card__front,.hh-flip-card__back{position:absolute;inset:0;display:flex;flex-direction:column;padding:26px;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hh-flip-card__front{justify-content:space-between;border:1px solid var(--color-border);background:linear-gradient(150deg,#ffffff,#f4f9fb);box-shadow:0 10px 26px rgba(20,75,101,.05);transition:box-shadow 300ms ease}
.hh-flip-card:hover .hh-flip-card__front{box-shadow:0 18px 40px rgba(20,75,101,.10)}
.hh-flip-card__back{align-items:flex-start;justify-content:center;gap:10px;color:#fff;background:linear-gradient(150deg,var(--color-primary),var(--color-primary-dark));transform:rotateY(180deg);box-shadow:0 18px 40px rgba(28,130,197,.28)}
.hh-flip-card__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(28,130,197,.10);color:var(--color-primary);font-weight:800;font-size:1.05rem}
.hh-flip-card__front h3{margin:16px 0 0;color:var(--color-heading);font-size:1.22rem;line-height:1.2}
.hh-flip-card__hint{display:inline-flex;align-items:center;gap:6px;margin-top:auto;color:var(--color-primary);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.hh-flip-card__hint svg{width:13px;height:13px;transition:transform 300ms ease}
.hh-flip-card:hover .hh-flip-card__hint svg{transform:translateX(4px)}
.hh-flip-card__back h3{margin:0;color:#fff;font-size:1.1rem;line-height:1.2}
.hh-flip-card__back p{margin:0;color:rgba(255,255,255,.92);font-size:.85rem;line-height:1.62}
@media(max-width:900px){.hh-flip-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hh-flip-grid--2,.hh-flip-grid--3,.hh-flip-grid--4{grid-template-columns:1fr}.hh-flip-card{height:auto;min-height:210px}}
@media(hover:none){.hh-flip-card:active .hh-flip-card__inner{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){.hh-flip-card__inner{transition:none}}
.hh-page-band{padding:clamp(65px,8vw,105px) 0;color:white;background:var(--color-dark)}.hh-page-band h2{margin-bottom:20px;color:white;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.15;letter-spacing:-.02em}.hh-page-band__grid{display:grid;grid-template-columns:1fr .65fr;align-items:end;gap:70px}.hh-page-band p{color:rgba(255,255,255,.7);font-size:1rem;line-height:1.8}
.hh-section-heading{max-width:800px;margin-bottom:42px}.hh-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.hh-service-card{position:relative;display:flex;min-height:300px;flex-direction:column;padding:26px;border:1px solid var(--color-border);border-radius:20px;color:inherit;background:white;text-decoration:none;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)}.hh-service-card:before{position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-slow);content:""}.hh-service-card:hover{transform:translateY(-8px);border-color:rgba(28,130,197,.25);box-shadow:var(--shadow-large)}.hh-service-card:hover:before{transform:scaleX(1)}.hh-service-card__number{color:var(--color-secondary);font-size:.72rem;font-weight:800;letter-spacing:.1em}.hh-service-card h2{margin:auto 0 15px;font-size:1.7rem}.hh-service-card p{font-size:.86rem}.hh-service-card__link{margin-top:22px;color:var(--color-primary);font-size:.75rem;font-weight:800}
.hh-service-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;align-items:start;gap:clamp(45px,8vw,100px)}.hh-service-content h2{margin:0 0 16px;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15}.hh-service-content h3{margin:36px 0 14px;font-size:clamp(1.4rem,1.8vw,1.75rem);line-height:1.2}.hh-service-content>p{margin-bottom:17px}.hh-check-list{display:grid;gap:11px;margin:27px 0}.hh-check-list>div{display:flex;align-items:center;gap:11px;padding:15px;border:1px solid var(--color-border);border-radius:13px;background:white}.hh-check-list span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;color:white;background:var(--color-primary);font-size:.72rem}.hh-service-sidebar{position:sticky;top:130px;display:grid;gap:15px}.hh-sidebar-card{padding:27px;border-radius:21px;color:white;background:var(--color-dark);box-shadow:var(--shadow-medium)}.hh-sidebar-card h3{margin-bottom:13px;color:white;font-size:1.8rem}.hh-sidebar-card p{margin-bottom:22px;color:rgba(255,255,255,.7);font-size:.85rem}.hh-sidebar-card--soft{color:var(--color-heading);background:#e8f1f5}.hh-sidebar-card--soft h3{color:var(--color-heading)}.hh-sidebar-card--soft p{color:var(--color-text)}.hh-sidebar-card a:not(.hh-page-button){color:var(--color-primary);font-weight:800;text-decoration:none}
.hh-faq-list{display:grid;gap:11px}.hh-faq-item{border:1px solid var(--color-border);border-radius:16px;background:white;overflow:hidden}.hh-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;color:var(--color-heading);font-weight:800;cursor:pointer;list-style:none}.hh-faq-item summary::-webkit-details-marker{display:none}.hh-faq-item summary span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;color:var(--color-primary);background:rgba(28,130,197,.08);transition:transform var(--transition-normal)}.hh-faq-item[open] summary span{transform:rotate(45deg)}.hh-faq-item>div{padding:0 22px 21px}.hh-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hh-related-card{display:flex;align-items:center;justify-content:space-between;padding:22px;border:1px solid var(--color-border);border-radius:15px;color:var(--color-heading);background:white;text-decoration:none;transition:transform var(--transition-normal),border-color var(--transition-normal)}.hh-related-card b{color:var(--color-primary)}.hh-related-card:hover{transform:translateY(-4px);border-color:rgba(28,130,197,.3)}
.hh-narrow,.hh-policy-content,.hh-article-content{max-width:900px}.hh-fee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hh-fee-card{padding:28px;border:1px solid var(--color-border);border-radius:20px;background:white}.hh-fee-card>span{color:var(--color-secondary);font-weight:800}.hh-fee-card h2{margin:42px 0 14px;font-size:1.75rem}.hh-info-panel{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:24px;padding:34px;border-radius:22px;background:#e8f1f5}.hh-info-panel h2{font-size:clamp(1.9rem,3.5vw,3.2rem)}.hh-info-panel .hh-page-button{flex-shrink:0;white-space:nowrap}
.hh-emergency-card{padding:38px;border-radius:24px;color:white;background:#8f2c24}.hh-emergency-card h2{margin-bottom:16px;color:white;font-size:clamp(2.5rem,5vw,5rem);line-height:.95}.hh-emergency-card p{color:rgba(255,255,255,.78)}.hh-emergency-card a{display:inline-flex;margin-top:24px;color:white;font-size:1.4rem;font-weight:800}
.hh-contact-grid{display:grid;grid-template-columns:1fr .65fr;gap:24px}.hh-contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.hh-contact-card{display:block;padding:26px;border:1px solid var(--color-border);border-radius:19px;color:inherit;background:white;text-decoration:none;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal),background var(--transition-normal)}.hh-contact-card span{color:var(--color-primary);font-size:.72rem;font-weight:800;text-transform:uppercase;transition:color var(--transition-normal)}.hh-contact-card h2{margin:25px 0 10px;font-size:1.7rem;transition:color var(--transition-normal)}.hh-contact-card strong{display:inline-flex;align-items:center;gap:8px;color:var(--color-primary);font-weight:800}.hh-contact-card strong span{transition:transform var(--transition-normal)}
.hh-contact-card p{transition:color var(--transition-normal)}
a.hh-contact-card:hover,div.hh-contact-card:hover{transform:translateY(-6px);border-color:var(--color-primary);background:var(--color-primary);box-shadow:0 18px 34px rgba(28,130,197,.28)}
.hh-contact-card:hover span{color:rgba(255,255,255,.85)}
.hh-contact-card:hover h2{color:white}
.hh-contact-card:hover p{color:rgba(255,255,255,.85)}
.hh-contact-card:hover strong{color:white}
.hh-contact-card:hover strong span{transform:translateX(4px)}.hh-contact-panel{padding:35px;border-radius:23px;color:white;background:var(--color-dark)}.hh-contact-panel h2{margin-bottom:15px;color:white;font-size:2.5rem}.hh-contact-panel p{margin-bottom:25px;color:rgba(255,255,255,.7)}.hh-contact-panel .hh-page-button{margin:5px 0;width:100%}
.hh-contact-form-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;align-items:start;margin-top:10px}.hh-contact-form-intro p{margin-top:14px;color:var(--color-muted);line-height:1.75}.hh-contact-form-panel{padding:34px;border:1px solid var(--color-border);border-radius:23px;background:white;box-shadow:var(--shadow-medium)}
.hh-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hh-form-field{margin:0}.hh-form-field--full{margin-top:14px}.hh-form-field input,.hh-form-field textarea{width:100%;padding:14px 16px;border:1px solid var(--color-border);border-radius:13px;font:inherit;color:var(--color-heading);background:#f7f9fa;transition:border-color var(--transition-normal)}.hh-form-field textarea{min-height:140px;resize:vertical}.hh-form-field input:focus,.hh-form-field textarea:focus{outline:none;border-color:var(--color-primary)}
.hh-form-submit{margin-top:18px}.hh-form-submit input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:0;border-radius:var(--radius-pill);color:white;background:var(--color-primary);font-size:.79rem;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform var(--transition-normal),background var(--transition-normal)}.hh-form-submit input[type=submit]:hover{transform:translateY(-3px);background:var(--color-primary-dark)}
.wpcf7-not-valid-tip{margin-top:6px;color:#b3261e;font-size:.78rem}.wpcf7-response-output{margin-top:20px;padding:14px 18px;border-radius:13px;border:1px solid var(--color-border);font-size:.85rem}
@media(max-width:900px){.hh-contact-form-wrap{grid-template-columns:1fr}.hh-form-grid{grid-template-columns:1fr}}
.hh-doctor-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.hh-doctor-list-card{overflow:hidden;border:1px solid var(--color-border);border-radius:24px;background:white}.hh-doctor-list-card__image{height:430px;overflow:hidden;background:#e8f1f5}.hh-doctor-list-card__image img{width:100%;height:100%;object-fit:contain;object-position:center}.hh-doctor-list-card>div:last-child{padding:28px}.hh-doctor-list-card>div>span{color:var(--color-primary);font-size:.73rem;font-weight:800;text-transform:uppercase}.hh-doctor-list-card h2{margin:12px 0 8px;font-size:2.2rem}.hh-doctor-profile{display:grid;grid-template-columns:.7fr 1fr;align-items:center;gap:clamp(45px,8vw,110px)}
.hh-policy-content h2,.hh-article-content h2{margin:38px 0 15px;font-size:2rem}.hh-article-content h3{margin:30px 0 12px;font-size:1.5rem}.hh-policy-content p,.hh-article-content p{margin-bottom:17px}.hh-article-content>p>img,.hh-article-content figure img{border-radius:20px;margin:24px 0;max-width:100%;height:auto}.hh-article-lead{font-size:1.25rem;line-height:1.75}.hh-article-content ul{display:grid;gap:10px;margin:20px 0 30px;padding-left:20px;list-style:disc}.hh-article-content aside{margin-top:35px;padding:22px;border-left:4px solid var(--color-secondary);background:#fff7ed}.hh-article-content .hh-check-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:20px 0 30px}.hh-article-content .hh-info-panel{margin-top:8px}
.hh-blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,380px));justify-content:center;gap:24px}.hh-blog-card{overflow:hidden;border:1px solid var(--color-border);border-radius:22px;background:white}.hh-blog-card a{color:inherit;text-decoration:none}.hh-blog-card__image{height:260px;overflow:hidden}.hh-blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.hh-blog-card:hover img{transform:scale(1.05)}.hh-blog-card__content{padding:25px}.hh-blog-card__content>span{color:var(--color-primary);font-size:.7rem;font-weight:800;text-transform:uppercase}.hh-blog-card h2{margin:13px 0;font-size:1.65rem}.hh-blog-card b{display:block;margin-top:20px;color:var(--color-primary);font-size:.76rem}
.hh-blog-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:52px}
.hh-blog-pagination__page{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:1.5px solid var(--color-border);border-radius:50%;color:var(--color-heading);font-size:.85rem;font-weight:800;text-decoration:none;background:#fff;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 150ms ease,box-shadow 200ms ease}
.hh-blog-pagination__page:hover{border-color:rgba(28,130,197,.35);color:var(--color-primary);transform:translateY(-2px)}
.hh-blog-pagination__page.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 10px 22px rgba(28,130,197,.28);cursor:default}
.hh-blog-pagination__next{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:0 24px;height:44px;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-heading);font-size:.8rem;font-weight:800;text-decoration:none;background:#fff;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 150ms ease}
.hh-blog-pagination__next:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-2px)}
@media(max-width:480px){.hh-blog-pagination{gap:7px}.hh-blog-pagination__page{width:38px;height:38px;font-size:.78rem}.hh-blog-pagination__next{padding:0 16px;height:38px;font-size:.74rem}}
@keyframes hhInnerOrbit{to{transform:rotate(360deg)}}
@media(max-width:1180px){.hh-header__menu{gap:11px}.hh-header__nav-link{font-size:.69rem}.hh-service-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.hh-page-hero__grid,.hh-page-split,.hh-page-band__grid,.hh-service-layout,.hh-contact-grid,.hh-doctor-profile{grid-template-columns:1fr}.hh-page-media--portrait{height:560px}.hh-service-sidebar{position:static}.hh-fee-grid{grid-template-columns:1fr}.hh-contact-panel{order:-1}.hh-doctor-list-grid{grid-template-columns:1fr}.hh-related-grid{grid-template-columns:1fr}.hh-info-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:639px){.hh-page-hero{padding-top:68px}.hh-page-hero h1{font-size:clamp(1.9rem,8vw,2.7rem)}.hh-page-actions{align-items:stretch;flex-direction:column}.hh-page-button{width:100%}.hh-service-grid,.hh-contact-cards{grid-template-columns:1fr}.hh-page-media--portrait{height:430px}.hh-service-card{min-height:260px}.hh-doctor-list-card__image{height:370px}.hh-footer__cta-wrap{padding-top:55px}}
.hh-404-hero{min-height:70vh;display:flex;align-items:center}.hh-404-hero .hh-page-container{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:620px;margin:0 auto;text-align:center}.hh-404-code{margin:0 0 -8px;color:var(--color-primary);opacity:.16;font-size:clamp(4rem,11vw,7rem);font-weight:800;line-height:1;letter-spacing:-.03em}.hh-404-hero p{max-width:460px;color:var(--color-muted);font-size:1rem;line-height:1.75}.hh-404-hero .hh-page-actions{justify-content:center;margin-top:8px}

/* ==================================================
   HH FAST PREMIUM EXPERIENCE LAYER — ALL PAGES
   Interaction-only enhancement. Existing design remains locked.
================================================== */

/* Performance containment for off-screen inner-page sections */
.hh-inner-page .hh-page-section,
.hh-inner-page .hh-related-grid,
.hh-inner-page .hh-faq-list {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
}

/* Lightweight scroll progress */
.hh-fx-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 9998;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--color-primary, #1c82c5), var(--color-secondary, #f7901e));
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* Reveal: only transform + opacity, no expensive blur */
.hh-fx-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 520ms ease var(--hh-fx-delay, 0ms),
        transform 620ms cubic-bezier(.22, 1, .36, 1) var(--hh-fx-delay, 0ms);
}

.hh-fx-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* All-page premium box interaction */
.hh-fx-card {
    --hh-fx-x: 50%;
    --hh-fx-y: 50%;
    position: relative;
    isolation: isolate;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition:
        transform 380ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 380ms ease,
        border-color 300ms ease;
    will-change: transform;
}

.hh-fx-card::after {
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        230px circle at var(--hh-fx-x) var(--hh-fx-y),
        rgba(255, 255, 255, .24),
        transparent 62%
    );
    transition: opacity 220ms ease;
    content: "";
}

.hh-fx-card:hover,
.hh-fx-card:focus-within {
    border-color: rgba(28, 130, 197, .24);
    box-shadow: 0 18px 42px rgba(15, 29, 26, .12);
}

.hh-fx-card:hover::after,
.hh-fx-card:focus-within::after {
    opacity: 1;
}

/* Micro-flip entrance accent, not a disruptive 180-degree flip */
.hh-fx-card.is-fx-entering {
    animation: hhFxMicroFlip 620ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes hhFxMicroFlip {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(5deg) rotateY(-4deg) translate3d(0, 24px, 0) scale(.985);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
    }
}

/* Image movement without layout shift */
.hh-fx-card img,
.hh-fx-image img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.hh-fx-card:hover img,
.hh-fx-image:hover img {
    transform: scale(1.035);
}

/* Premium buttons: sweep + spring press */
.hh-fx-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 240ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 260ms ease;
}

.hh-fx-button::before {
    position: absolute;
    top: -35%;
    left: -80%;
    z-index: -1;
    width: 45%;
    height: 170%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-18deg);
    transition: left 560ms cubic-bezier(.22, 1, .36, 1);
    content: "";
}

.hh-fx-button:hover::before { left: 135%; }
.hh-fx-button:active { transform: translate3d(0, 1px, 0) scale(.975); }
.hh-fx-button svg { transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.hh-fx-button:hover svg { transform: translate3d(4px, 0, 0); }

/* Link underline */
.hh-fx-link {
    position: relative;
}

.hh-fx-link::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
    content: "";
}

.hh-fx-link:hover::after,
.hh-fx-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* FAQ interaction */
.hh-faq-item {
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease, border-color 300ms ease;
}

.hh-faq-item:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(28, 130, 197, .22);
    box-shadow: 0 14px 34px rgba(15, 29, 26, .09);
}

.hh-faq-item summary svg,
.hh-faq-item button svg {
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

/* Cursor glow — no custom cursor animation loop */
.hh-fx-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9997;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(28, 130, 197, .10), transparent 68%);
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 180ms ease;
    will-change: transform;
}

.hh-fx-cursor-glow.is-visible { opacity: 1; }

/* Form focus polish */
.hh-fx-field {
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.hh-fx-field:focus {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 0 0 4px rgba(28, 130, 197, .10);
}

/* Active navigation */
.hh-header__nav-link.hh-fx-current,
.hh-header__mobile-menu a.hh-fx-current {
    color: var(--color-primary, #1c82c5);
}

/* Never animate expensive effects on touch/small screens */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .hh-fx-cursor-glow { display: none; }
    .hh-fx-card,
    .hh-fx-card:hover,
    .hh-fx-card:focus-within {
        transform: none !important;
    }
    .hh-fx-card::after { display: none; }
    .hh-inner-page .hh-page-section,
    .hh-inner-page .hh-related-grid,
    .hh-inner-page .hh-faq-list {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .hh-fx-progress,
    .hh-fx-cursor-glow { display: none; }
    .hh-fx-reveal,
    .hh-fx-reveal.is-visible,
    .hh-fx-card,
    .hh-fx-card.is-fx-entering,
    .hh-fx-button,
    .hh-fx-link::after,
    .hh-fx-field {
        opacity: 1;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ==================================================
   BULK BILLING ANNOUNCEMENT — POPUP + STICKY BAR
   Lightweight UI injected by shared script.js on every page
================================================== */

body.hh-bulkbar-active {
    padding-bottom: 86px;
}

.hh-bulkbar {
    position: fixed;
    right: 18px;
    bottom: 16px;
    left: 18px;
    z-index: 9994;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    width: min(1180px, calc(100% - 36px));
    min-height: 66px;
    margin-inline: auto;
    padding: 10px 12px 10px 16px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 20px;
    color: #fff;
    background: rgba(12, 45, 63, .96);
    box-shadow: 0 18px 45px rgba(7, 31, 44, .24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translate3d(0, 120%, 0);
    opacity: 0;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease;
    contain: layout paint;
}

.hh-bulkbar.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.hh-bulkbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    color: #163244;
    background: #ffd09a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hh-bulkbar__badge::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1c82c5;
    box-shadow: 0 0 0 5px rgba(28, 130, 197, .14);
    content: "";
}

.hh-bulkbar__copy {
    min-width: 0;
}

.hh-bulkbar__copy strong,
.hh-bulkbar__copy span {
    display: block;
}

.hh-bulkbar__copy strong {
    color: #fff;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.25;
}

.hh-bulkbar__copy span {
    margin-top: 2px;
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
    line-height: 1.35;
}

.hh-bulkbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-bulkbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.hh-bulkbar__action--primary {
    border-color: #fff;
    color: #163244;
    background: #fff;
}

.hh-bulkbar__action:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(255, 255, 255, .40);
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.hh-bulkbar__action--primary:hover {
    border-color: #ffd09a;
    color: #163244;
    background: #ffd09a;
}

.hh-bulkbar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.hh-bulkbar__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    transform: rotate(6deg);
}

.hh-bulkbar__close svg,
.hh-bulkbar__action svg {
    width: 17px;
    height: 17px;
}

.hh-bulk-pill {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9994;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    background: #0c2d3f;
    box-shadow: 0 14px 34px rgba(7, 31, 44, .22);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transform: translate3d(0, 90px, 0);
    opacity: 0;
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
}

.hh-bulk-pill.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.hh-bulk-pill::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd09a;
    content: "";
}

/* Popup backdrop */
.hh-bulkmodal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    background: rgba(5, 24, 34, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 260ms ease, visibility 260ms ease;
}

.hh-bulkmodal.is-open {
    visibility: visible;
    opacity: 1;
}

.hh-bulkmodal__dialog {
    position: relative;
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(5, 24, 34, .34);
    transform: translate3d(0, 24px, 0) scale(.97);
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.hh-bulkmodal.is-open .hh-bulkmodal__dialog {
    transform: translate3d(0, 0, 0) scale(1);
}

.hh-bulkmodal__top {
    position: relative;
    padding: 34px 34px 30px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 208, 154, .26), transparent 34%),
        linear-gradient(135deg, #1c82c5 0%, #146ca8 58%, #0d507e 100%);
}

.hh-bulkmodal__top::after {
    position: absolute;
    right: -52px;
    bottom: -84px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
}

.hh-bulkmodal__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff4df;
    background: rgba(255, 255, 255, .10);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hh-bulkmodal__label::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd09a;
    content: "";
}

.hh-bulkmodal h2 {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 0;
    color: #fff;
    font-size: clamp(29px, 5vw, 48px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.hh-bulkmodal h2 span {
    display: block;
    color: #ffd09a;
}

.hh-bulkmodal__body {
    padding: 28px 34px 32px;
}

.hh-bulkmodal__body > p {
    margin: 0;
    color: #586965;
    font-size: 14px;
    line-height: 1.68;
}

.hh-bulkmodal__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid rgba(247, 144, 30, .18);
    border-radius: 14px;
    color: #78501f;
    background: rgba(247, 144, 30, .08);
    font-size: 12px;
    line-height: 1.55;
}

.hh-bulkmodal__note svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #f7901e;
}

.hh-bulkmodal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.hh-bulkmodal__actions--single {
    grid-template-columns: 1fr;
}

.hh-bulkmodal__action--button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.hh-bulkmodal__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(28, 130, 197, .15);
    border-radius: 999px;
    color: #1c82c5;
    background: rgba(28, 130, 197, .06);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 180ms ease, color 180ms ease, background-color 180ms ease;
}

.hh-bulkmodal__action--primary {
    border-color: #1c82c5;
    color: #fff;
    background: #1c82c5;
}

.hh-bulkmodal__action:hover {
    transform: translate3d(0, -2px, 0);
    color: #fff;
    background: #146ca8;
}

.hh-bulkmodal__action svg {
    width: 18px;
    height: 18px;
}

.hh-bulkmodal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease;
}

.hh-bulkmodal__close:hover {
    background: rgba(255, 255, 255, .18);
    transform: rotate(7deg);
}

.hh-bulkmodal__close svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 800px) {
    body.hh-bulkbar-active { padding-bottom: 104px; }

    .hh-bulkbar {
        right: 10px;
        bottom: 10px;
        left: 10px;
        grid-template-columns: 1fr auto;
        gap: 9px 12px;
        width: calc(100% - 20px);
        min-height: 0;
        padding: 12px;
        border-radius: 18px;
    }

    .hh-bulkbar__badge { display: none; }
    .hh-bulkbar__copy { grid-column: 1 / -1; }
    .hh-bulkbar__copy strong { font-size: 13px; }
    .hh-bulkbar__copy span { display: none; }
    .hh-bulkbar__actions { align-items: stretch; }
    .hh-bulkbar__action { min-height: 39px; padding-inline: 12px; font-size: 11px; }
    .hh-bulkbar__close { align-self: center; }
}

@media (max-width: 520px) {
    .hh-bulkmodal { padding: 12px; }
    .hh-bulkmodal__dialog { border-radius: 22px; }
    .hh-bulkmodal__top { padding: 30px 22px 25px; }
    .hh-bulkmodal__body { padding: 23px 22px 25px; }
    .hh-bulkmodal__actions { grid-template-columns: 1fr; }
    .hh-bulkbar__actions { width: 100%; }
    .hh-bulkbar__action { flex: 1; }
    .hh-bulkbar__action svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-bulkbar,
    .hh-bulk-pill,
    .hh-bulkmodal,
    .hh-bulkmodal__dialog,
    .hh-bulkbar__action,
    .hh-bulkmodal__action,
    .hh-bulkmodal__close {
        transition: none !important;
    }
}


/* ==================================================
   FINAL PERFORMANCE + LAYERING PATCH
   Preserves the homepage design and original animations.
================================================== */

/* Popup/sticky always stay above the footer and every transformed section */
.hh-bulkbar,
.hh-bulk-pill,
.hh-bulkmodal {
    position: fixed !important;
    z-index: 2147483000 !important;
    isolation: isolate;
}

.hh-bulkmodal {
    inset: 0 !important;
}

body.hh-bulkbar-active {
    padding-bottom: 0 !important;
}

/* Lighter compositing: blur was a major paint cost on scroll */
.hh-bulkbar {
    background: rgba(12, 45, 63, .985);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    contain: content;
}

.hh-bulkmodal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 24, 34, .72);
}

/* Inner-page premium card motion: CSS-only and fast */
.hh-inner-page .hh-fx-card--inner {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    transition:
        transform 260ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 260ms ease,
        border-color 220ms ease;
}

.hh-inner-page .hh-fx-card--inner::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.30) 48%, transparent 72%);
    transform: translate3d(-115%, 0, 0) skewX(-14deg);
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
    content: "";
}

.hh-inner-page .hh-fx-card--inner:hover,
.hh-inner-page .hh-fx-card--inner:focus-within {
    transform: perspective(900px) translate3d(0, -6px, 0) rotateX(1.2deg) rotateY(-1.2deg);
    box-shadow: 0 22px 48px rgba(13, 70, 102, .14);
}

.hh-inner-page .hh-fx-card--inner:hover::before,
.hh-inner-page .hh-fx-card--inner:focus-within::before {
    opacity: 1;
    transform: translate3d(115%, 0, 0) skewX(-14deg);
}

.hh-inner-page .hh-fx-card--inner img {
    transform: translateZ(0) scale(1);
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.hh-inner-page .hh-fx-card--inner:hover img,
.hh-inner-page .hh-fx-card--inner:focus-within img {
    transform: translateZ(0) scale(1.035);
}

/* Keep homepage doctor slider entirely under its own original animation system */
body:not(.hh-inner-page) .hh-doctor-slide,
body:not(.hh-inner-page) .hh-doctor-slider,
body:not(.hh-inner-page) .hh-doctor-slider * {
    --hh-fx-delay: 0ms;
}

body:not(.hh-inner-page) .hh-doctor-slide.hh-fx-card,
body:not(.hh-inner-page) .hh-doctor-slide.hh-fx-reveal {
    opacity: 1 !important;
    transform: none;
}

/* Ultra-light loader */
.hh-lite-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    display: grid;
    place-items: center;
    background: #fbfaf6;
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease, visibility 280ms ease;
    pointer-events: none;
}

.hh-lite-loader.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.hh-lite-loader__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #fff;
    background: #1c82c5;
    box-shadow: 0 12px 30px rgba(28,130,197,.20);
    transform: translateZ(0);
    animation: hhLiteLoaderPulse 700ms cubic-bezier(.22,1,.36,1) both;
}

.hh-lite-loader__mark span {
    font: 800 22px/1 var(--font-primary, Arial, sans-serif);
}

.hh-lite-loader__line {
    position: absolute;
    width: 92px;
    height: 2px;
    margin-top: 90px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(28,130,197,.12);
}

.hh-lite-loader__line::after {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: #f7901e;
    animation: hhLiteLoaderLine 650ms ease-in-out infinite alternate;
    content: "";
}

@keyframes hhLiteLoaderPulse {
    from { opacity: 0; transform: scale(.82); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hhLiteLoaderLine {
    from { transform: translate3d(-110%,0,0); }
    to { transform: translate3d(220%,0,0); }
}

/* Browser rendering optimisation for long inner pages only */
.hh-inner-page .hh-page-section,
.hh-inner-page .hh-page-band {
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
}

/* Avoid promoting every homepage element to its own GPU layer */
body:not(.hh-inner-page) .hh-fx-card,
body:not(.hh-inner-page) .hh-fx-reveal {
    will-change: auto;
}

@media (max-width: 900px), (hover: none) {
    .hh-inner-page .hh-fx-card--inner:hover,
    .hh-inner-page .hh-fx-card--inner:focus-within {
        transform: translate3d(0, -3px, 0);
    }

    .hh-fx-cursor-glow {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-lite-loader__mark,
    .hh-lite-loader__line::after {
        animation: none !important;
    }

    .hh-lite-loader {
        transition: none !important;
    }

    .hh-inner-page .hh-fx-card--inner,
    .hh-inner-page .hh-fx-card--inner img,
    .hh-inner-page .hh-fx-card--inner::before {
        transition: none !important;
        transform: none !important;
    }
}


/* ==================================================
   FOUNDER STORY — ABOUT PAGE
================================================== */
.hh-founder-section{position:relative;padding:clamp(78px,9vw,132px) var(--container-gutter);overflow:hidden;background:linear-gradient(180deg,#f7fafb 0%,#eef6f8 100%)}
.hh-founder-section::before{position:absolute;right:-180px;top:-220px;width:520px;height:520px;border:1px solid rgba(28,130,197,.12);border-radius:50%;content:""}
.hh-founder-layout{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.35fr);align-items:start;gap:clamp(48px,8vw,110px)}
.hh-founder-media{position:sticky;top:130px}
.hh-founder-flip{position:relative;width:100%;aspect-ratio:4/5;border-radius:28px;perspective:1600px;background:#dceef8;box-shadow:0 28px 70px rgba(21,75,101,.16);cursor:pointer}
.hh-founder-flip__inner{position:relative;width:100%;height:100%;transition:transform 700ms cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.hh-founder-media:hover .hh-founder-flip__inner,.hh-founder-flip:focus-visible .hh-founder-flip__inner,.hh-founder-flip:focus-within .hh-founder-flip__inner{transform:rotateY(180deg)}
.hh-founder-flip__front,.hh-founder-flip__back{position:absolute;inset:0;overflow:hidden;border-radius:28px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hh-founder-flip__front img{display:block;width:100%;height:100%;object-fit:cover}
.hh-founder-flip__back{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:38px;color:#fff;background:linear-gradient(150deg,var(--color-primary),var(--color-primary-dark));transform:rotateY(180deg);box-shadow:0 18px 40px rgba(28,130,197,.28)}
.hh-founder-flip__back span{color:#ffd09a;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hh-founder-flip__back h3{margin:0;color:#fff;font-size:1.9rem;line-height:1.1}
.hh-founder-flip__back p{margin:0;color:rgba(255,255,255,.9);font-size:.92rem;line-height:1.65}
.hh-founder-media__caption{position:absolute;right:18px;bottom:18px;left:18px;padding:17px 19px;border:1px solid rgba(255,255,255,.35);border-radius:16px;color:#fff;background:rgba(12,45,63,.92)}
@media(hover:none){.hh-founder-flip:active .hh-founder-flip__inner{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){.hh-founder-flip__inner{transition:none}}
.hh-founder-media__caption span{display:block;margin-bottom:4px;color:#ffd09a;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hh-founder-media__caption strong{font-size:.85rem;line-height:1.35}
.hh-founder-content h2{max-width:820px;margin:14px 0 28px;font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;letter-spacing:-.02em}
.hh-founder-content p{max-width:820px;margin:0 0 17px;color:var(--color-text);font-size:.96rem;line-height:1.82}
.hh-founder-content p:first-of-type{font-size:1.08rem;color:var(--color-heading)}

/* ==================================================
   MODERN SERVICES DIRECTORY
================================================== */
.hh-services-page .hh-page-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f4f8fa 100%)}

/* Services slider */
.hh-services-page .hh-svc-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:0}
.hh-services-page .hh-svc-controls{display:flex;gap:10px}
.hh-services-page .hh-svc-nav{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;border:1.5px solid rgba(28,130,197,.22);border-radius:50%;color:var(--color-primary);background:#fff;cursor:pointer;transition:background 200ms ease,color 200ms ease,transform 150ms ease,border-color 200ms ease,opacity 200ms ease}
.hh-services-page .hh-svc-nav svg{width:19px;height:19px}
.hh-services-page .hh-svc-nav:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:scale(1.06)}
.hh-services-page .hh-svc-nav:disabled{opacity:.32;pointer-events:none}
.hh-services-page .hh-svc-slider{position:relative;margin-top:30px}
.hh-services-page .hh-svc-track{display:flex;gap:20px;padding:40px 6px 46px;margin:-40px -6px -40px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:1600px}
.hh-services-page .hh-svc-track::-webkit-scrollbar{display:none}
.hh-services-page .hh-service-card{--card-scale:1;--card-shift:0px;--card-tilt:0deg;--card-opacity:1;position:relative;flex:0 0 auto;width:min(300px,78vw);scroll-snap-align:start;display:grid;gap:16px;padding:30px 26px;overflow:hidden;border:1px solid rgba(28,130,197,.12);border-radius:24px;color:var(--color-heading);background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(16,67,91,.06);text-decoration:none;opacity:var(--card-opacity);transform:translate3d(0,var(--card-shift),0) scale(var(--card-scale)) rotateY(var(--card-tilt));transition:transform 380ms cubic-bezier(.22,1,.36,1),opacity 380ms ease,box-shadow 260ms ease,border-color 220ms ease}
.hh-services-page .hh-service-card.is-active{box-shadow:0 26px 60px rgba(16,67,91,.18);border-color:rgba(28,130,197,.32)}
.hh-services-page .hh-service-card::before{position:static;inset:auto;z-index:auto;opacity:1;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 14px 28px rgba(28,130,197,.18);font-size:1.5rem;content:attr(data-service-icon);transform:none;transform-origin:center;pointer-events:none;transition:transform 300ms cubic-bezier(.22,1,.36,1),border-radius 300ms ease}
.hh-services-page .hh-service-card::after{position:absolute;right:-70px;bottom:-90px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(247,144,30,.12),transparent 68%);content:"";transition:transform 360ms ease;pointer-events:none}
.hh-services-page .hh-service-card__number{position:absolute;top:22px;right:24px;color:rgba(14,49,65,.14);font-size:.68rem;font-weight:900;letter-spacing:.16em}
.hh-services-page .hh-service-card h2{margin:0;padding-right:30px;font-size:1.4rem;line-height:1.1;letter-spacing:-.03em}
.hh-services-page .hh-service-card p{margin:0;color:var(--color-text);font-size:.85rem;line-height:1.62}
.hh-services-page .hh-service-card__link{color:var(--color-primary);font-size:.74rem;font-weight:850;white-space:nowrap;transition:transform 220ms ease,color 220ms ease}
.hh-services-page .hh-service-card:hover,.hh-services-page .hh-service-card:focus-visible{transform:translate3d(0,calc(var(--card-shift) - 7px),0) scale(var(--card-scale)) rotateY(var(--card-tilt));border-color:rgba(28,130,197,.28);box-shadow:0 24px 58px rgba(16,67,91,.13)}
.hh-services-page .hh-service-card:hover::before{transform:rotate(-5deg) scale(1.06);border-radius:50%}
.hh-services-page .hh-service-card:hover::after{transform:translate3d(-25px,-18px,0) scale(1.15)}
.hh-services-page .hh-service-card:hover .hh-service-card__link{color:var(--color-secondary);transform:translateX(5px)}
.hh-services-page .hh-svc-progress{position:relative;width:100%;height:3px;margin-top:10px;border-radius:3px;background:rgba(28,130,197,.12);overflow:hidden}
.hh-services-page .hh-svc-progress__fill{position:absolute;inset:0 auto 0 0;width:20%;border-radius:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transition:width 120ms ease}
@media(max-width:639px){.hh-services-page .hh-svc-controls{display:none}}
@media(prefers-reduced-motion:reduce){.hh-services-page .hh-svc-track{scroll-behavior:auto}}

/* ==================================================
   HORIZONTAL 3D FAN SLIDER (Services directory)
================================================== */
.hh-stack-section{position:relative;overflow:hidden;padding:20px 0 10px}
.hh-stack-section--full{width:100%;padding-left:clamp(20px,4vw,60px);padding-right:clamp(20px,4vw,60px)}
.hh-services-marquee{display:flex;flex-direction:column;gap:22px}
.hh-marquee-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hh-marquee-track{display:flex;gap:22px;width:max-content;will-change:transform}
.hh-marquee-row--left .hh-marquee-track{animation:hh-marquee-left 46s linear infinite}
.hh-marquee-row--right .hh-marquee-track{animation:hh-marquee-right 36s linear infinite}
.hh-marquee-row:hover .hh-marquee-track{animation-play-state:paused}
.hh-marquee-track .hh-service-tile{flex:0 0 290px;width:290px}
@keyframes hh-marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hh-marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.hh-marquee-track{animation:none!important}}
@media(max-width:640px){.hh-marquee-track .hh-service-tile{flex-basis:230px;width:230px}}
.hh-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.hh-service-tile{display:block;overflow:hidden;border:1px solid var(--color-border);border-radius:24px;color:inherit;background:#fff;box-shadow:0 12px 26px rgba(20,75,101,.07);text-decoration:none;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)}
.hh-service-tile:hover{transform:translateY(-8px);border-color:rgba(28,130,197,.3);box-shadow:0 30px 52px -18px rgba(20,75,101,.28)}
.hh-service-tile__media{position:relative;display:grid;place-items:center;height:150px;overflow:hidden;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))}
.hh-service-tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.hh-service-tile__media:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,130,197,.78),rgba(15,79,122,.58))}
.hh-service-tile__media span{position:relative;z-index:1;font-size:2.6rem;color:#fff}
.hh-service-tile:hover .hh-service-tile__media img{transform:scale(1.08)}
.hh-service-tile__body{padding:22px 24px 26px}
.hh-service-tile__number{display:inline-block;margin-bottom:8px;color:var(--color-secondary);font-size:.7rem;font-weight:900;letter-spacing:.14em}
.hh-service-tile__title{margin:0 0 8px;color:var(--color-heading);font-size:1.2rem;line-height:1.15;letter-spacing:-.02em}
.hh-service-tile__text{margin:0 0 14px;color:var(--color-text);font-size:.87rem;line-height:1.6}
.hh-service-tile__link{display:inline-flex;align-items:center;gap:6px;color:var(--color-primary);font-size:.74rem;font-weight:850;transition:color var(--transition-normal)}
.hh-service-tile__link span{display:inline-flex;transition:transform var(--transition-normal)}
.hh-service-tile:hover .hh-service-tile__link{color:var(--color-secondary)}
.hh-service-tile:hover .hh-service-tile__link span{transform:translateX(4px)}
@media(max-width:640px){.hh-services-grid{grid-template-columns:1fr}}
.hh-stack-heading{position:relative;z-index:1;max-width:640px;margin:0 auto 32px;text-align:center}
.hh-stack-heading h2{margin-bottom:12px;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.15;letter-spacing:-.02em;color:var(--color-heading)}
.hh-stack-heading p{margin:0;color:var(--color-muted);font-size:1rem;line-height:1.65}
.hh-stack-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.hh-stack-bg:before{width:1100px;height:1100px;max-width:170vw;max-height:170vw;border-radius:50%;background:radial-gradient(circle,rgba(28,130,197,.13),rgba(28,130,197,0) 62%);filter:blur(6px);content:""}
.hh-stack-bg:after{position:absolute;width:760px;height:760px;max-width:110vw;max-height:110vw;border-radius:50%;border:1px solid rgba(28,130,197,.12);content:""}
.hh-stack-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.hh-stack-stage{position:relative;width:100%;flex:1 1 auto;height:580px;max-width:1100px;overflow-x:hidden;overflow-y:visible;perspective:1800px;outline:none}
.hh-stack-section--full .hh-stack-stage{max-width:none}
.hh-stack-card{--stack-x:0px;--stack-scale:1;--stack-rot:0deg;--stack-opacity:1;--stack-z:1;position:absolute;top:50%;left:50%;width:400px;display:block;overflow:hidden;border-radius:24px;color:inherit;background:#fff;box-shadow:0 18px 34px rgba(20,75,101,.1);text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;backface-visibility:hidden;transform:translate(-50%,-50%) translateX(var(--stack-x)) scale(var(--stack-scale)) rotateY(var(--stack-rot));opacity:var(--stack-opacity);z-index:var(--stack-z);transition:transform .8s cubic-bezier(.25,.9,.32,1),opacity .6s ease,box-shadow .5s ease}
.hh-stack-card.is-active{box-shadow:0 44px 80px -22px rgba(20,75,101,.32),0 10px 24px rgba(20,75,101,.1);cursor:default}
.hh-stack-card__media{display:grid;place-items:center;height:150px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))}
.hh-stack-card__media span{font-size:3rem;color:#fff}
.hh-stack-card__body{padding:24px 28px 28px}
.hh-stack-card__number{display:inline-block;margin-bottom:10px;color:var(--color-secondary);font-size:.72rem;font-weight:900;letter-spacing:.14em}
.hh-stack-card__title{margin:0 0 8px;color:var(--color-heading);font-size:1.35rem;line-height:1.15;letter-spacing:-.02em}
.hh-stack-card__text{margin:0 0 16px;color:var(--color-text);font-size:.9rem;line-height:1.65}
.hh-stack-card__link{color:var(--color-primary);font-size:.74rem;font-weight:850}
.hh-stack-card.is-active:hover .hh-stack-card__link{color:var(--color-secondary)}
.hh-stack-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;flex:0 0 auto}
.hh-stack-arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;flex:0 0 auto;border:1.5px solid rgba(28,130,197,.22);border-radius:50%;color:var(--color-primary);background:#fff;cursor:pointer;transition:background 200ms ease,color 200ms ease,transform 150ms ease,border-color 200ms ease}
.hh-stack-arrow svg{width:19px;height:19px}
.hh-stack-arrow:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:scale(1.06)}
.hh-stack-dots{display:flex;flex-direction:row;gap:8px;max-width:220px;overflow:hidden}
.hh-stack-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(28,130,197,.2);cursor:pointer;transition:background .25s ease,transform .25s ease}
.hh-stack-dots button.is-active{background:var(--color-primary);transform:scale(1.5)}
@media(max-width:900px){.hh-stack-stage{height:520px}.hh-stack-card{width:330px}.hh-stack-card__title{font-size:1.18rem}}
@media(max-width:640px){.hh-stack-wrap{gap:14px}.hh-stack-stage{height:440px}.hh-stack-card{width:260px;border-radius:18px}.hh-stack-card__media{height:110px}.hh-stack-card__media span{font-size:2.2rem}.hh-stack-card__body{padding:18px 20px 20px}.hh-stack-card__title{font-size:1.02rem}.hh-stack-card__text{font-size:.8rem}.hh-stack-arrow{width:42px;height:42px}.hh-stack-arrow svg{width:17px;height:17px}.hh-stack-dots{display:none}}
@media(prefers-reduced-motion:reduce){.hh-stack-card{transition:opacity .3s ease}}

/* ==================================================
   MODERN SINGLE SERVICE PAGES
================================================== */
.hh-service-detail-page .hh-page-hero__grid{position:relative;grid-template-columns:minmax(0,1.15fr) minmax(320px,.72fr) 150px;align-items:center}
.hh-service-hero-mark{display:grid;place-items:center;gap:10px;justify-self:end;width:132px;height:160px;border:1px solid rgba(255,255,255,.22);border-radius:66px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.hh-service-hero-mark span{font-size:2.6rem;color:#ffd09a}.hh-service-hero-mark small{max-width:95px;color:var(--color-muted);font-size:.63rem;font-weight:800;line-height:1.35;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.hh-service-detail-page .hh-service-layout{gap:clamp(50px,8vw,105px)}
.hh-service-detail-page .hh-service-content{position:relative;padding-left:32px;border-left:1px solid rgba(28,130,197,.14)}
.hh-service-detail-page .hh-service-content::before{position:absolute;top:0;left:-2px;width:3px;height:92px;border-radius:3px;background:linear-gradient(var(--color-primary),var(--color-secondary));content:""}
.hh-service-detail-page .hh-service-content h2{letter-spacing:-.02em}
.hh-service-detail-page .hh-check-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hh-service-detail-page .hh-check-list>div{display:grid;align-content:start;justify-items:start;gap:14px;min-height:150px;padding:22px;border:1px solid rgba(28,130,197,.12);border-radius:20px;background:linear-gradient(145deg,#fff,#f5f9fb);box-shadow:0 10px 28px rgba(20,75,101,.06);transition:transform 230ms ease,box-shadow 230ms ease}
.hh-service-detail-page .hh-check-list>div:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(20,75,101,.11)}
.hh-service-detail-page .hh-check-list span{width:34px;height:34px;flex-basis:34px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 9px 18px rgba(28,130,197,.17)}
.hh-service-detail-page .hh-sidebar-card{position:relative;overflow:hidden;border-radius:26px}
.hh-service-detail-page .hh-sidebar-card::after{position:absolute;right:-55px;bottom:-65px;width:150px;height:150px;border:1px solid rgba(255,255,255,.13);border-radius:50%;content:""}
.hh-service-detail-page .hh-sidebar-card--soft::after{border-color:rgba(28,130,197,.12)}
.hh-service-detail-page .hh-faq-item{border-radius:18px;box-shadow:0 8px 24px rgba(20,75,101,.045)}
.hh-service-detail-page .hh-related-card{border-radius:20px;transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease}
.hh-service-detail-page .hh-related-card:hover{transform:translateY(-5px);border-color:rgba(28,130,197,.26);box-shadow:0 18px 38px rgba(20,75,101,.10)}

/* Doctor profile photo — kept at a natural portrait ratio instead of being stretched to fill the wide content column */
.hh-doctor-portrait-row{display:flex;flex-wrap:wrap;align-items:center;gap:34px;margin-bottom:8px}
.hh-doctor-portrait{flex:0 0 auto;width:min(300px,100%);overflow:hidden;border-radius:24px;background:#dceef8;box-shadow:0 20px 46px rgba(21,75,101,.16)}
.hh-doctor-portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.hh-doctor-portrait-intro{flex:1 1 320px;min-width:0}
.hh-doctor-portrait-intro h2{margin:0 0 12px}
@media(max-width:520px){.hh-doctor-portrait{width:220px;margin:0 auto}.hh-doctor-portrait-row{justify-content:center;text-align:center}}

/* Bottom bulk-billing sticky UI removed */
.hh-bulkbar,.hh-bulk-pill{display:none!important}
body.hh-bulkbar-active{padding-bottom:0!important}

@media(max-width:980px){.hh-founder-layout{grid-template-columns:1fr}.hh-founder-media{position:relative;top:auto;max-width:560px}.hh-service-detail-page .hh-page-hero__grid{grid-template-columns:1fr}.hh-service-hero-mark{display:none}.hh-service-detail-page .hh-check-list{grid-template-columns:1fr}}
@media(max-width:760px){.hh-services-page .hh-service-grid{grid-template-columns:1fr}.hh-services-page .hh-service-card{grid-template-columns:58px 1fr;min-height:0;padding:22px;gap:8px 17px}.hh-services-page .hh-service-card::before{width:58px;height:58px;border-radius:17px;font-size:1.35rem}.hh-services-page .hh-service-card h2{grid-column:2;font-size:1.55rem}.hh-services-page .hh-service-card p{grid-column:2}.hh-services-page .hh-service-card__link{grid-column:2;justify-self:start;margin-top:5px}.hh-founder-content h2{font-size:clamp(2.3rem,11vw,3.8rem)}.hh-service-detail-page .hh-service-content{padding-left:20px}}
@media(prefers-reduced-motion:reduce){.hh-services-page .hh-service-card,.hh-services-page .hh-service-card::before,.hh-services-page .hh-service-card::after,.hh-service-detail-page .hh-check-list>div,.hh-service-detail-page .hh-related-card{transition:none!important;transform:none!important}}


/* ==================================================
   BULK BILLING COMPACT PILL — PERMANENTLY REMOVED
   Full announcement popup remains unchanged.
================================================== */
.hh-bulk-pill,
.hh-bulkbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.hh-bulkbar-active {
    padding-bottom: 0 !important;
}


/* ==================================================
   BOTTOM BULK BILLING ANNOUNCEMENT BAR
   Full-width bar only. No compact reopen pill after close.
================================================== */
.hh-bulkbar-final,
.hh-bulkbar-final *{box-sizing:border-box}
.hh-bulkbar-final{
    position:fixed;
    right:clamp(8px,1.2vw,18px);
    bottom:clamp(8px,1.2vw,18px);
    left:clamp(8px,1.2vw,18px);
    z-index:2147483630;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto auto;
    align-items:center;
    gap:clamp(16px,2vw,30px);
    min-height:82px;
    padding:13px 24px 13px 20px;
    border:1px solid rgba(94,180,222,.24);
    border-radius:24px;
    color:#fff;
    background:#0d3448;
    box-shadow:0 20px 52px rgba(4,25,36,.22);
    transform:translate3d(0,115%,0);
    opacity:0;
    visibility:hidden;
    transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 240ms ease,visibility 240ms ease;
}
.hh-bulkbar-final.is-visible{
    transform:translate3d(0,0,0);
    opacity:1;
    visibility:visible;
}
.hh-bulkbar-final.is-closing{
    transform:translate3d(0,120%,0);
    opacity:0;
}
.hh-bulkbar-final__badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:0 18px 0 10px;
    border-radius:999px;
    color:#0e3448;
    background:#ffc984;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}
.hh-bulkbar-final__badge-dot{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
}
.hh-bulkbar-final__badge-dot::after{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#1c82c5;
    content:"";
}
.hh-bulkbar-final__copy{min-width:0}
.hh-bulkbar-final__copy strong{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:clamp(.84rem,1.25vw,1rem);
    line-height:1.35;
}
.hh-bulkbar-final__copy span{
    display:block;
    color:rgba(255,255,255,.68);
    font-size:.72rem;
    line-height:1.4;
}
.hh-bulkbar-final__action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:0 22px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.055);
    font-size:.78rem;
    font-weight:850;
    text-decoration:none;
    white-space:nowrap;
    transition:transform 180ms ease,background-color 180ms ease,border-color 180ms ease;
}
.hh-bulkbar-final__action:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.38);
    background:rgba(255,255,255,.1);
    color:#fff;
}
.hh-bulkbar-final__action--primary{
    min-width:148px;
    border-color:#fff;
    color:#123448;
    background:#fff;
}
.hh-bulkbar-final__action--primary:hover{
    color:#123448;
    background:#fff;
}
.hh-bulkbar-final__action svg{width:19px;height:19px;flex:0 0 auto}
.hh-bulkbar-final__close{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:50%;
    color:rgba(255,255,255,.72);
    background:transparent;
    cursor:pointer;
    transition:color 180ms ease,background-color 180ms ease,transform 180ms ease;
}
.hh-bulkbar-final__close:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
    transform:rotate(90deg);
}
.hh-bulkbar-final__close svg{width:19px;height:19px}
@media(max-width:980px){
    .hh-bulkbar-final{
        grid-template-columns:auto minmax(0,1fr) auto auto;
    }
    .hh-bulkbar-final__badge{grid-column:1}
    .hh-bulkbar-final__copy{grid-column:2}
    .hh-bulkbar-final__action:first-of-type{display:none}
}
@media(max-width:700px){
    .hh-bulkbar-final{
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px 14px;
        min-height:auto;
        padding:14px;
        border-radius:20px;
    }
    .hh-bulkbar-final__badge{
        grid-column:1;
        justify-self:start;
        min-height:38px;
        padding-right:14px;
        font-size:.66rem;
    }
    .hh-bulkbar-final__copy{grid-column:1/-1;grid-row:2}
    .hh-bulkbar-final__copy strong{font-size:.86rem}
    .hh-bulkbar-final__copy span{font-size:.67rem}
    .hh-bulkbar-final__action--primary{
        grid-column:1;
        grid-row:3;
        justify-self:start;
        min-width:132px;
        min-height:44px;
        padding-inline:18px;
    }
    .hh-bulkbar-final__close{
        grid-column:2;
        grid-row:1;
        justify-self:end;
    }
}
@media(prefers-reduced-motion:reduce){
    .hh-bulkbar-final,
    .hh-bulkbar-final__action,
    .hh-bulkbar-final__close{transition:none!important}
}


/* ==================================================
   CONTACT PAGE — ADDRESS & RESPONSIVE MAP
================================================== */

.hh-contact-card--address {
    grid-column: 1 / -1;
}

.hh-contact-card--address strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.hh-location-section {
    padding-top: 0;
}

.hh-location-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.hh-location-heading h2 {
    margin: 8px 0 10px;
}

.hh-location-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--color-text);
}

.hh-location-map {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-medium);
}

.hh-location-map::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    pointer-events: none;
    content: "";
}

.hh-location-map iframe {
    display: block;
    width: 100%;
    min-height: 420px;
    filter: saturate(0.9) contrast(1.02);
}

@media (max-width: 767px) {
    .hh-location-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .hh-location-heading .hh-page-button {
        width: 100%;
        justify-content: center;
    }

    .hh-location-map iframe {
        min-height: 360px;
        height: 360px;
    }
}

/* ==================================================================
   PREMIUM CINEMATIC EXPERIENCE LAYER (hce-*)
   Purely additive interaction layer. Does not modify layout, colour,
   type, spacing or any existing hh-* rule above this point. Every
   selector below either targets brand-new "hce-" classes/variables
   added at runtime by the matching script.js block, or re-declares a
   handful of already-existing selectors later in the cascade to layer
   extra polish on top without touching their original declarations.
   Never active for prefers-reduced-motion or coarse/touch pointers.
================================================================== */

/* ---------- Hover-triggered cursor ring (desktop only, not a
   persistent follower - only visible while hovering an interactive
   element, so it never fights the existing footer spotlight / inner
   page cursor glow) ---------- */
.hce-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1.5px solid rgba(28, 130, 197, .55);
    border-radius: 50%;
    background: rgba(28, 130, 197, .08);
    opacity: 0;
    transform: translate3d(-100px, -100px, 0) scale(.6);
    transition: opacity 200ms ease, transform 90ms linear, width 220ms cubic-bezier(.22, 1, .36, 1), height 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    will-change: transform;
}

.hce-cursor-ring.is-visible { opacity: 1; }

.hce-cursor-ring.is-magnetic {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-color: rgba(247, 144, 30, .6);
    background: rgba(247, 144, 30, .08);
}

@media (hover: none), (pointer: coarse) {
    .hce-cursor-ring { display: none; }
}

/* ---------- Magnetic buttons ---------- */
.hce-magnetic {
    --hce-mx: 0px;
    --hce-my: 0px;
    transform: translate3d(var(--hce-mx), var(--hce-my), 0);
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Click ripple (own floating element, never clips the
   button's existing shadow/hover-lift) ---------- */
.hce-ripple-dot {
    position: fixed;
    z-index: 9996;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(0);
    opacity: .9;
    animation: hceRipple 620ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes hceRipple {
    to {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0;
    }
}

/* ---------- Light-follow tilt cards (new territory only - homepage
   boxes the existing hh-fx-card system never reaches) ---------- */
.hce-tilt {
    --hce-rx: 0deg;
    --hce-ry: 0deg;
    transform: perspective(1000px) rotateX(var(--hce-rx)) rotateY(var(--hce-ry)) translate3d(0, 0, 0);
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1), box-shadow 380ms ease;
    will-change: transform;
}

.hce-tilt:hover,
.hce-tilt:focus-within {
    box-shadow: 0 20px 46px rgba(15, 29, 26, .14);
}

/* Wire up the existing (previously dormant) light-follow highlight on
   .hh-fx-card - the ::after radial-gradient rule already exists at
   the definition above, it only needed --hh-fx-x / --hh-fx-y set. */
.hce-tilt::after {
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--hh-fx-x, 50%) var(--hh-fx-y, 50%), rgba(255, 255, 255, .28), transparent 62%);
    transition: opacity 220ms ease;
    content: "";
}

.hce-tilt { position: relative; isolation: isolate; }
.hce-tilt:hover::after,
.hce-tilt:focus-within::after { opacity: 1; }

/* Reuse the existing dormant micro-flip entrance keyframe already
   defined above for .hh-fx-card.is-fx-entering */
.hce-tilt.is-fx-entering {
    animation: hhFxMicroFlip 620ms cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- Image reveal (clip-path wipe on scroll-intersect) ---------- */
.hce-img-reveal {
    clip-path: inset(0 0 0 0%);
    transition: clip-path 900ms cubic-bezier(.22, 1, .36, 1);
}

.hce-img-reveal.is-visible {
    clip-path: inset(0 0 0 0%);
}

/* ---------- Scroll-aware header ----------
   Targets .hh-header__main specifically (the part that becomes
   position:fixed via the existing .is-sticky mechanism), never the
   outer .hh-header wrapper - a transform on that relative-positioned
   ancestor would become the containing block for its fixed-position
   descendants and break the existing sticky-nav positioning. */
.hh-header__main {
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.hh-header.is-sticky .hh-header__main.hce-header-hidden {
    transform: translate3d(0, -100%, 0);
}

/* ---------- Cinematic hero reveal (first paint only, additive to the
   existing scroll-driven hero animation - never repeats, never
   touches .scene/.hero-copy which are driven independently) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .cinema-hero > .stage {
        animation: hceHeroReveal 1100ms cubic-bezier(.22, 1, .36, 1) both;
    }
}

@keyframes hceHeroReveal {
    from { opacity: 0; filter: blur(16px) saturate(1.15); }
    to { opacity: 1; filter: blur(0) saturate(1); }
}

/* ---------- Popup entrance polish (existing .hh-bulkmodal only,
   same timing, adds a soft blur-in alongside the existing transform) ---------- */
.hh-bulkmodal__dialog {
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), filter 420ms cubic-bezier(.22, 1, .36, 1);
    filter: blur(6px);
}

.hh-bulkmodal.is-open .hh-bulkmodal__dialog {
    filter: blur(0);
}

/* ---------- Reduced motion / touch kill-switch ---------- */
@media (hover: none), (pointer: coarse) {
    .hce-magnetic { transition: none; }
    .hce-tilt,
    .hce-tilt:hover,
    .hce-tilt:focus-within { transform: none !important; box-shadow: none; }
    .hce-tilt::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hce-cursor-ring,
    .hce-ripple-dot { display: none !important; }
    .hce-tilt,
    .hce-tilt.is-fx-entering,
    .hce-magnetic,
    .hh-header.hce-header-hidden,
    .hce-img-reveal,
    .hce-img-reveal.is-visible {
        opacity: 1;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
    .cinema-hero > .stage { animation: none !important; }
    .hh-bulkmodal__dialog { filter: none !important; }
}


/* ==================================================
   WORDPRESS INNER-PAGE IMAGE VISIBILITY FIX
   Prevents the reveal effect from leaving an image clipped or hidden.
   Applies to About Us, Our Doctors, service and other inner pages only.
================================================== */
body.huntlee-static-page.hh-inner-page img.hce-img-reveal,
body.huntlee-static-page.hh-inner-page img.hce-img-reveal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
}