/*
 * CloudCard Signature UI v1
 * Public website, public profile shell, and public account surfaces.
 * Restrained, editorial, theme-aware, and intentionally free of decorative UI noise.
 */

:root {
    --signature-gold: #b98a35;
    --signature-gold-soft: #ead7aa;
    --signature-navy: #07182b;
    --signature-rule: color-mix(in srgb, var(--border) 86%, transparent);
    --signature-radius: .875rem;
    --signature-shadow: 0 18px 50px color-mix(in srgb, var(--shadow) 46%, transparent);
}

html {
    scroll-behavior: smooth;
}

body.site-surface {
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
    text-rendering: optimizeLegibility;
}

body.site-surface ::selection {
    background: color-mix(in srgb, var(--brand) 24%, transparent);
}

body.site-surface :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
    outline-offset: 3px;
}

/* Public navigation ----------------------------------------------------- */

.site-header {
    border-color: var(--signature-rule) !important;
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
}

.site-header > div:first-child {
    min-height: 4.75rem;
    padding-block: .8rem !important;
}

.site-header a {
    text-decoration: none;
}

.site-header nav.hidden > a:not(.brand-gradient) {
    position: relative;
    padding-block: .65rem;
    color: color-mix(in srgb, var(--ink) 78%, transparent);
    font-size: .78rem;
    letter-spacing: .015em;
}

.site-header nav.hidden > a:not(.brand-gradient)::after {
    position: absolute;
    right: 0;
    bottom: .2rem;
    left: 0;
    height: 1px;
    background: var(--brand);
    content: "";
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .18s ease, transform .18s ease;
}

.site-header nav.hidden > a:not(.brand-gradient):hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.site-header .brand-gradient {
    min-height: 2.65rem;
    padding: .65rem 1rem !important;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
    border-radius: .7rem !important;
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-size: .76rem;
}

.site-header .brand-gradient:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface)) !important;
    transform: none !important;
}

.site-header nav.hidden .brand-gradient {
    border-color: var(--signature-navy) !important;
    background: var(--signature-navy) !important;
    color: #ffffff !important;
}

.site-header nav.hidden .brand-gradient:hover {
    border-color: var(--signature-gold) !important;
    background: var(--signature-gold) !important;
    color: #07182b !important;
}

.public-mobile-menu-button {
    width: 2.65rem !important;
    height: 2.65rem !important;
    border-radius: .7rem !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

.public-mobile-menu {
    width: min(90vw, 22rem) !important;
    background: var(--surface) !important;
    box-shadow: -20px 0 60px rgba(2, 12, 24, .22) !important;
}

.public-mobile-menu__link {
    min-height: 3.2rem !important;
    border-radius: .65rem !important;
}

.public-mobile-menu__cta {
    margin-top: .5rem;
    border-color: var(--signature-navy) !important;
    background: var(--signature-navy) !important;
    color: #ffffff !important;
}

.site-footer__legal button {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.cc-privacy-modal[hidden] {
    display: none;
}

.cc-privacy-modal {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cc-privacy-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 10, 20, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cc-privacy-modal__panel {
    position: relative;
    width: min(36rem, 100%);
    max-height: min(42rem, calc(100dvh - 2rem));
    overflow-y: auto;
    padding: 1.6rem;
    border: 1px solid var(--signature-rule);
    border-radius: .75rem;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--signature-shadow);
}

.cc-privacy-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--signature-rule);
}

.cc-privacy-modal__head small {
    color: var(--signature-gold);
    font-weight: 900;
    letter-spacing: .15em;
}

.cc-privacy-modal__head h2 {
    margin: .25rem 0 0;
    font-size: 1.35rem;
}

.cc-privacy-modal__head button {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.7rem;
    cursor: pointer;
}

.cc-privacy-modal__panel > p {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.7;
}

.cc-privacy-modal__panel a {
    color: var(--ink);
    font-weight: 900;
}

.cc-modal-open {
    overflow: hidden;
}

/* Sales homepage -------------------------------------------------------- */

.cc-home-shell {
    width: min(100% - 3rem, 78rem) !important;
}

.cc-home-hero {
    padding: clamp(5.5rem, 9vw, 8.5rem) 0 clamp(4.25rem, 7vw, 6.5rem) !important;
}

.cc-home-hero::before {
    background: var(--surface) !important;
}

.cc-home-hero::after {
    opacity: .28 !important;
    background-image: linear-gradient(90deg, var(--signature-rule) 1px, transparent 1px) !important;
    background-size: calc((min(100vw, 78rem) - 1px) / 12) 100% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 84%) !important;
    mask-image: linear-gradient(to bottom, #000, transparent 84%) !important;
}

.cc-home-hero__glow {
    display: none !important;
}

.cc-home-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr) !important;
    gap: clamp(3rem, 7vw, 7rem) !important;
}

.cc-home-kicker {
    padding: 0 0 .85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--signature-rule) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: .67rem !important;
    letter-spacing: .19em !important;
}

.cc-home-kicker__dot {
    width: 1.8rem !important;
    height: 1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cc-home-hero__title {
    max-width: 11.5ch !important;
    margin-top: 1.45rem !important;
    font-size: clamp(3.25rem, 6.2vw, 5.65rem) !important;
    letter-spacing: -.075em !important;
    line-height: .94 !important;
}

.cc-home-hero__text {
    max-width: 39rem !important;
    margin-top: 1.6rem !important;
    font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
    line-height: 1.75 !important;
}

.cc-home-hero__actions {
    margin-top: 2rem !important;
}

.cc-home-btn {
    min-height: 3.15rem !important;
    padding: .8rem 1.15rem !important;
    border-radius: .7rem !important;
    font-size: .78rem !important;
    letter-spacing: .01em;
}

.cc-home-btn:hover {
    transform: translateY(-1px) !important;
}

.cc-home-btn--primary {
    border-color: var(--action-bg, var(--brand)) !important;
    background: var(--action-bg, var(--brand)) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

.cc-home-btn--secondary {
    background: var(--surface) !important;
    box-shadow: none !important;
}

.cc-home-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 2.4rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--signature-rule);
}

.cc-home-trust__item {
    padding-right: .9rem;
}

.cc-home-trust__item + .cc-home-trust__item {
    padding-left: .9rem;
    border-left: 1px solid var(--signature-rule);
}

.cc-home-trust__icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border: 1px solid var(--signature-rule);
    border-radius: .5rem !important;
    background: transparent !important;
}

.cc-home-hero__visual {
    min-height: 37rem !important;
}

.cc-home-profile-card {
    top: 1rem !important;
    width: min(100%, 25rem) !important;
    border-color: var(--signature-rule) !important;
    border-radius: 1.1rem !important;
    box-shadow: 0 30px 70px color-mix(in srgb, var(--shadow) 66%, transparent) !important;
    transform: none !important;
}

.cc-home-profile-card__cover {
    height: 8rem !important;
    background: linear-gradient(115deg, var(--signature-navy), color-mix(in srgb, var(--brand) 68%, #06111e)) !important;
}

.cc-home-profile-card__avatar {
    border-radius: .8rem !important;
}

.cc-home-profile-card__actions span,
.cc-home-profile-card__rows div {
    border-radius: .55rem !important;
}

.cc-home-nfc-card {
    bottom: 2.5rem !important;
    width: 14.5rem !important;
    border-radius: 1rem !important;
    background: #07182b !important;
    box-shadow: 0 24px 55px rgba(2, 10, 20, .28) !important;
    transform: translateX(-1.25rem) !important;
}

.cc-home-nfc-card::before {
    position: absolute;
    top: 0;
    right: 1.25rem;
    bottom: 0;
    width: 1px;
    background: rgba(234, 215, 170, .45);
    content: "";
}

.cc-home-tap-pill {
    right: 0 !important;
    bottom: .3rem !important;
    padding: .55rem .72rem !important;
    border-radius: .55rem !important;
    background: var(--surface) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow) 44%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.cc-home-proof {
    background: color-mix(in srgb, var(--surface) 97%, var(--brand) 3%) !important;
}

.cc-home-proof__grid > div {
    padding: 1.5rem 1.6rem !important;
}

.cc-home-section {
    padding: clamp(5rem, 8vw, 7.5rem) 0 !important;
}

.cc-home-section-heading {
    margin-inline: 0 !important;
    text-align: left !important;
}

.cc-home-section-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .66rem !important;
    letter-spacing: .18em !important;
}

.cc-home-section-heading__eyebrow::before {
    width: 1.7rem;
    height: 1px;
    background: currentColor;
    content: "";
}

.cc-home-section-heading h2,
.cc-home-platform__intro h2,
.cc-home-final__panel h2 {
    max-width: 18ch;
    margin-top: .85rem !important;
    font-size: clamp(2.35rem, 4.5vw, 4rem) !important;
    letter-spacing: -.065em !important;
    line-height: 1 !important;
}

.cc-home-section-heading p {
    margin: 1.1rem 0 0 !important;
}

.cc-home-how__grid {
    gap: 0 !important;
    margin-top: 3rem !important;
    border-top: 1px solid var(--signature-rule);
    border-bottom: 1px solid var(--signature-rule);
}

.cc-home-step {
    min-height: 17rem;
    padding: 1.75rem !important;
    border: 0 !important;
    border-right: 1px solid var(--signature-rule) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cc-home-step:last-child {
    border-right: 0 !important;
}

.cc-home-step__icon,
.cc-home-feature__icon {
    border: 1px solid var(--signature-rule);
    border-radius: .65rem !important;
    background: transparent !important;
}

.cc-home-platform {
    background: color-mix(in srgb, var(--surface) 96%, var(--brand) 4%) !important;
}

.cc-home-feature-grid {
    gap: 1px !important;
    overflow: hidden;
    margin-top: 3rem !important;
    border: 1px solid var(--signature-rule);
    border-radius: 1rem;
    background: var(--signature-rule);
}

.cc-home-feature {
    min-height: 15rem !important;
    padding: 1.55rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

.cc-home-feature--dark {
    background: var(--signature-navy) !important;
}

.cc-home-feature--dark .cc-home-feature__icon {
    border-color: rgba(255,255,255,.2);
    color: var(--signature-gold-soft);
}

.cc-home-feature--dark .cc-home-feature__label {
    color: var(--signature-gold-soft) !important;
}

.cc-home-final {
    padding-top: 2rem !important;
}

.cc-home-final__panel {
    padding: clamp(2rem, 5vw, 4rem) !important;
    border: 1px solid rgba(234, 215, 170, .24);
    border-radius: 1rem !important;
    background: var(--signature-navy) !important;
    box-shadow: 0 28px 60px rgba(4, 20, 31, .18) !important;
}

.cc-home-final__panel .cc-home-section-heading__eyebrow {
    color: var(--signature-gold-soft) !important;
}

.cc-home-btn--light {
    border-color: var(--signature-gold-soft) !important;
    background: var(--signature-gold-soft) !important;
    color: #1c2530 !important;
    box-shadow: none !important;
}

.cc-home-contact {
    padding-block: clamp(5rem, 8vw, 7.5rem) !important;
}

.cc-home-contact__panel {
    border-radius: 1rem !important;
    box-shadow: none !important;
}

.cc-home-contact__decoration {
    display: none !important;
}

.cc-home-contact__button {
    min-height: 3.15rem;
    padding: .8rem 1.2rem !important;
    border-radius: .7rem !important;
    background: var(--action-bg, var(--brand)) !important;
    box-shadow: none !important;
}

.cc-home-contact__button:hover {
    transform: translateY(-1px) !important;
}

.cc-contact-modal__panel {
    border-radius: .9rem !important;
}

/* Public profile -------------------------------------------------------- */

.cloudcard-profile-page {
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

.cloudcard-profile-page:not(.is-section-page) {
    padding: clamp(.8rem, 2vw, 1.5rem) clamp(.5rem, 2vw, 1.5rem) 2.5rem !important;
    background: var(--cc-theme-page, var(--profile-page)) !important;
}

.cloudcard-profile-page:not(.is-section-page)::before {
    display: none !important;
}

.cloudcard-profile-page:not(.is-section-page) .cloudcard-profile {
    width: min(100%, 52rem) !important;
}

.cloudcard-profile-page .cloudcard-profile__identity,
.cloudcard-profile-page .cloudcard-profile__menu-card,
.cloudcard-profile-page .cloudcard-profile__content-card {
    border-radius: var(--signature-radius) !important;
    box-shadow: 0 16px 44px color-mix(in srgb, var(--cc-theme-shadow, var(--profile-shadow)) 45%, transparent) !important;
}

.cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__cover:not(.has-custom-cover) {
    background: linear-gradient(110deg, var(--cc-theme-brand), color-mix(in srgb, var(--cc-theme-accent) 72%, #07182b)) !important;
}

.cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__cover.has-custom-cover {
    height: clamp(10rem, 28vw, 15rem) !important;
    background-size: cover !important;
}

.cloudcard-profile-page .cloudcard-profile__avatar-wrap {
    border-radius: 50% !important;
}

.cloudcard-profile-page .cloudcard-profile__avatar {
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
}

.cloudcard-profile-page .cloudcard-profile__verified-badge {
    border-radius: .55rem !important;
}

.cloudcard-profile-page .cloudcard-profile__name {
    letter-spacing: -.045em !important;
}

.cloudcard-profile-page .cloudcard-profile__actions {
    gap: .65rem !important;
}

.cloudcard-profile-page .cloudcard-profile__action {
    min-height: 5.75rem;
    justify-content: center;
    padding: .65rem .4rem;
    border: 1px solid var(--cc-theme-border) !important;
    border-radius: .7rem !important;
    background: var(--cc-theme-soft) !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.cloudcard-profile-page .cloudcard-profile__action:hover {
    transform: translateY(-1px);
}

.cloudcard-profile-page .cloudcard-profile__action-icon {
    width: 2.45rem !important;
    border: 0 !important;
    border-radius: .55rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cloudcard-profile-page .cloudcard-profile__action:nth-child(2) .cloudcard-profile__action-icon {
    border-radius: .55rem !important;
}

.cloudcard-profile-page .cloudcard-profile__booking-status {
    border-radius: .7rem !important;
    box-shadow: inset 3px 0 0 var(--cc-theme-brand) !important;
}

.cloudcard-profile-page .cloudcard-profile__calendar-link,
.cloudcard-profile-page .cloudcard-profile__document-link,
.cloudcard-profile-page .cloudcard-profile__primary-button {
    border-radius: .6rem !important;
    background: var(--cc-action-bg) !important;
    box-shadow: none !important;
}

.cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__menu-card {
    margin-top: 1rem !important;
}

.cloudcard-profile-page .cloudcard-profile__menu-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cc-theme-border);
}

.cloudcard-profile-page .cloudcard-profile__menu {
    gap: 0 !important;
}

.cloudcard-profile-page .cloudcard-profile__menu-link {
    border: 0 !important;
    border-bottom: 1px solid var(--cc-theme-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cloudcard-profile-page .cloudcard-profile__menu-link:last-child {
    border-bottom: 0 !important;
}

.cloudcard-profile-page .cloudcard-profile__menu-link:hover {
    background: color-mix(in srgb, var(--cc-theme-soft) 72%, var(--cc-theme-card)) !important;
    box-shadow: none !important;
}

.cloudcard-profile-page .cloudcard-profile__menu a[href*="section=availability"] {
    border: 1px solid var(--cc-action-bg) !important;
    border-radius: .7rem !important;
    background: var(--cc-action-bg) !important;
}

/*
 * The highlighted booking row gets breathing room only in the single-column
 * menu. In the two-column desktop grid a margin on one item does not push its
 * neighbours - it shrinks the item inside its own track, so this card rendered
 * 10px lower and 21px shorter than the card beside it.
 */
@media (max-width: 640px) {
    .cloudcard-profile-page .cloudcard-profile__menu a[href*="section=availability"] {
        margin-block: .65rem;
    }
}

.cloudcard-install-popup__dialog,
.smart-actions-dialog,
.customer-info-dialog {
    border-radius: .9rem !important;
}

/* Professional PDF library --------------------------------------------- */

.cloudcard-profile-page.is-section-page {
    margin-bottom: 0 !important;
    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)) !important;
}

.cloudcard-profile-page .cloudcard-profile__content-card--documents {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cloudcard-profile-page .cloudcard-profile__library-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--cc-theme-border, var(--profile-border));
}

.cloudcard-profile-page .cloudcard-profile__library-heading {
    min-width: 0;
}

.cloudcard-profile-page .cloudcard-profile__library-heading .cloudcard-profile__section-title {
    margin-top: .35rem;
}

.cloudcard-profile-page .cloudcard-profile__library-count {
    display: inline-flex;
    min-height: 1.8rem;
    flex: 0 0 auto;
    align-items: center;
    padding: .35rem .55rem;
    border: 1px solid var(--cc-theme-border, var(--profile-border));
    border-radius: .5rem;
    background: var(--cc-theme-soft, var(--profile-soft));
    color: var(--cc-theme-muted, var(--profile-muted));
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
}

.cloudcard-profile-page .cloudcard-profile__documents {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: .65rem !important;
    margin-top: 1rem !important;
}

.cloudcard-profile-page .cloudcard-profile__document {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: center !important;
    gap: .8rem !important;
    padding: .78rem !important;
    overflow: hidden;
    border-radius: .65rem !important;
    box-sizing: border-box;
}

.cloudcard-profile-page .cloudcard-profile__document-copy {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
}

.cloudcard-profile-page .cloudcard-profile__document-title {
    display: -webkit-box !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    color: var(--cc-theme-ink, var(--profile-ink));
    font-size: .78rem !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cloudcard-profile-page .cloudcard-profile__document-description {
    overflow-wrap: anywhere;
}

.cloudcard-profile-page .cloudcard-profile__document-meta {
    color: var(--cc-theme-muted, var(--profile-muted)) !important;
    font-variant-numeric: tabular-nums;
}

.cloudcard-profile-page .cloudcard-profile__document-icon {
    width: 2.5rem !important;
    border-radius: .55rem !important;
}

.cloudcard-profile-page .cloudcard-profile__document-link {
    min-width: 4.2rem;
    min-height: 2.35rem;
    padding: .55rem .7rem !important;
    border: 1px solid var(--cc-action-bg) !important;
    border-radius: .55rem !important;
    background: var(--cc-action-bg) !important;
    color: var(--cc-action-ink) !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.cloudcard-profile-page .cloudcard-profile__document-link:hover {
    background: var(--cc-action-hover) !important;
    transform: translateY(-1px);
}

@media (min-width: 1100px) {
    .cloudcard-profile-page.is-section-page .cloudcard-profile__dock-shell {
        left: min(calc(50% + 24.5rem), calc(100% - 4rem)) !important;
        bottom: 2rem !important;
        width: auto !important;
        max-width: none !important;
        padding: .35rem !important;
        border-radius: .75rem !important;
        /* The dock centres itself with translate, so cancel that here too. */
        transform: none !important;
        translate: none !important;
    }

    .cloudcard-profile-page.is-section-page .cloudcard-profile__dock {
        flex-direction: column;
        gap: .2rem;
    }

    .cloudcard-profile-page.is-section-page .cloudcard-profile__dock-link {
        width: 2.9rem;
        min-width: 2.9rem;
        height: 2.9rem;
        flex-basis: 2.9rem;
        border-radius: .55rem;
    }
}

@media (max-width: 640px) {
    .cloudcard-profile-page .cloudcard-profile__content-card--documents {
        padding: 1rem !important;
    }

    .cloudcard-profile-page .cloudcard-profile__library-header {
        align-items: flex-start;
    }

    .cloudcard-profile-page .cloudcard-profile__document {
        grid-template-columns: 2.35rem minmax(0, 1fr) !important;
        align-items: start !important;
        gap: .7rem !important;
        padding: .72rem !important;
    }

    .cloudcard-profile-page .cloudcard-profile__document-icon {
        width: 2.35rem !important;
    }

    .cloudcard-profile-page .cloudcard-profile__document-link {
        grid-column: 1 / -1;
        width: 100% !important;
        min-height: 2.65rem;
        margin-top: .1rem;
    }

    .cloudcard-profile-page .cloudcard-profile__document-title {
        font-size: .76rem !important;
    }
}

@media (max-width: 380px) {
    .cloudcard-profile-page .cloudcard-profile__library-header {
        display: grid;
        justify-items: start;
    }
}

/* Footer --------------------------------------------------------------- */

.site-footer {
    margin-top: 0;
    border-color: var(--signature-rule) !important;
    background: color-mix(in srgb, var(--surface) 97%, var(--ink) 3%);
}

.site-footer__grid {
    gap: clamp(2rem, 5vw, 4.5rem) !important;
    padding-block: clamp(3.5rem, 7vw, 5.5rem) !important;
}

.site-footer__portal-link,
.site-footer__contact-link {
    border-radius: .7rem !important;
    box-shadow: none !important;
}

.site-footer__portal-link:hover {
    border-color: var(--brand) !important;
    transform: none !important;
}

@media (max-width: 1000px) {
    .cc-home-hero__grid {
        grid-template-columns: 1fr !important;
    }

    .cc-home-hero__copy {
        max-width: 48rem;
    }

    .cc-home-hero__visual {
        width: min(100%, 34rem) !important;
        margin-inline: auto;
    }
}

@media (max-width: 720px) {
    .cc-home-shell {
        width: min(100% - 1.5rem, 78rem) !important;
    }

    .cc-home-hero {
        padding-top: 4rem !important;
    }

    .cc-home-hero__title {
        max-width: 12ch !important;
        font-size: clamp(2.75rem, 13vw, 4.3rem) !important;
    }

    .cc-home-trust {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }

    .cc-home-trust__item,
    .cc-home-trust__item + .cc-home-trust__item {
        padding: 0 !important;
        border-left: 0 !important;
    }

    .cc-home-hero__visual {
        min-height: 30rem !important;
    }

    .cc-home-nfc-card {
        transform: translateX(0) !important;
    }

    .cc-home-step {
        min-height: 0;
        border-right: 0 !important;
        border-bottom: 1px solid var(--signature-rule) !important;
    }

    .cc-home-step:last-child {
        border-bottom: 0 !important;
    }

    .cloudcard-profile-page .cloudcard-profile__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cloudcard-profile-page .cloudcard-profile__action {
        min-height: 4.8rem;
        flex-direction: row !important;
        justify-content: flex-start;
        padding: .7rem !important;
        text-align: left;
    }
}

@media (max-width: 430px) {
    .cc-home-hero__visual {
        min-height: 27rem !important;
    }

    .cc-home-profile-card {
        width: 94% !important;
    }

    .cc-home-nfc-card {
        width: 10.75rem !important;
    }

    .cloudcard-profile-page .cloudcard-profile__actions {
        gap: .45rem !important;
    }
}

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

    .site-header *,
    .cc-home-btn,
    .cloudcard-profile-page * {
        transition-duration: .01ms !important;
    }
}

/* ---- Public profile: real desktop layout ----------------------------------
   The profile was a 52rem phone column centred in whatever window it was
   opened in — at 1600px that left 768px of dead space either side.

   Everything below lives inside a min-width query, so narrow screens never see
   a single one of these rules and the mobile layout is untouched by design,
   not by luck. The three overlays inside .cloudcard-profile are position:fixed,
   so they stay out of the grid flow. */
@media (min-width: 1100px) {
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile {
        width: min(100%, 74rem) !important;
        display: grid;
        grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    /* Identity stays in view while the right column scrolls. */
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__identity {
        position: sticky;
        top: 1.5rem;
        grid-column: 1;
        margin: 0 !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__menu-card {
        grid-column: 2;
        margin: 0 !important;
    }

    /* The action grid is cramped in a 23rem column; two up reads better. */
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* With the room now available, explore items can sit two across. */
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .7rem !important;
    }

    /* The share-information row stays full width - it is the primary action. */
    .cloudcard-profile-page:not(.is-section-page)
    .cloudcard-profile__menu > *:first-child {
        grid-column: 1 / -1;
    }
}

/* Between the phone layout and the dashboard, hold a readable measure.
 *
 * The explore list is one column at every width it is visible, so letting the
 * page run to 60rem here made each row ~900px wide with its label in the first
 * third and nothing after it. 40rem keeps the rows the shape they are on a
 * phone and centres them, which is what an iPad or a landscape phone should
 * get. Above 1099px this stops applying and the desktop dashboard takes over. */
@media (min-width: 641px) and (max-width: 1099px) {
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile {
        width: min(100% - 2.5rem, 40rem) !important;
        margin-inline: auto !important;
    }
}

/* ---- Public profile SECTION pages: desktop --------------------------------
   The earlier desktop work only targeted :not(.is-section-page), so About,
   Documents, Calendar and Office kept the phone column — measured at 736px of
   content in a 1600px window, 864px unused.

   Widening them means the floating dock rail has to move outward too, or the
   two collide. Both are changed together here. Mobile is untouched: everything
   is inside the same min-width query the dock rail already uses. */
@media (min-width: 1100px) {
    /*
     * The second term reserves room for the dock rail. Without it, at 1100px
     * the 62rem column ran to x=1039 while the rail started at x=1021 — a 17px
     * overlap. The rail is pinned to the viewport, so the content has to yield.
     */
    .cloudcard-profile-page.is-section-page .cloudcard-profile {
        width: min(62rem, calc(100% - 13rem)) !important;
    }

    .cloudcard-profile-page.is-section-page .cloudcard-profile__dock-shell {
        left: min(calc(50% + 34rem), calc(100% - 4rem)) !important;
    }

    /*
     * A ten-item PDF list is a long scroll as single rows. An existing
     * `.cloudcard-profile-page .cloudcard-profile__documents` rule sets one
     * column with !important, so this has to match it and out-specify it.
     */
    .cloudcard-profile-page.is-section-page .cloudcard-profile__documents {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem;
        align-items: start;
    }

    .cloudcard-profile-page.is-section-page .cloudcard-profile__document {
        min-width: 0;
    }
}

/* Narrower desktops: widen, but keep the documents in one column so the rail
   and the content never fight over the same pixels. */
@media (min-width: 780px) and (max-width: 1099px) {
    .cloudcard-profile-page.is-section-page .cloudcard-profile {
        width: min(100%, 52rem) !important;
    }
}

/* ---- Public profile header ------------------------------------------------
   The professional's own bar, replacing the platform's marketing nav. Their
   identity on the left, their sections in the middle, one action on the right.
   Section links live here on desktop; below 1100px the existing bottom dock
   still owns section navigation, so they are hidden rather than duplicated. */
.profile-header__inner {
    min-height: 4.1rem;
}

.profile-header__who {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .65rem;
    /*
     * Must be allowed to SHRINK. With flex:0 0 auto a long name sized the block
     * to its content — 432px on a 375px screen — and pushed the Save contact
     * button off the edge where it could not be tapped. Shrinking lets the
     * ellipsis do its job instead.
     */
    flex: 0 1 auto;
    text-decoration: none;
    color: var(--ink);
}

.profile-header__avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--surface-accent);
}

.profile-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header__id {
    min-width: 0;
    line-height: 1.2;
}

.profile-header__name {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.015em;
    /* A long name must shrink the label, never the page. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-header__role {
    display: block;
    margin-top: .05rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-header__nav {
    display: none;
    align-items: center;
    gap: 1.15rem;
    margin: 0 auto;
    min-width: 0;
}

.profile-header__link {
    position: relative;
    padding-block: .35rem;
    color: color-mix(in srgb, var(--ink) 78%, transparent);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease;
}

.profile-header__link:hover {
    color: var(--brand);
}

.profile-header__link.is-active {
    color: var(--brand);
}

.profile-header__link.is-active::after {
    position: absolute;
    right: 0;
    bottom: -.1rem;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    content: "";
}

.profile-header__cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    min-height: 2.6rem;
    padding: .6rem 1rem;
    border-radius: .7rem;
    background: var(--signature-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, transform .16s ease;
}

.profile-header__cta:hover {
    background: var(--signature-gold);
    color: var(--signature-navy);
    transform: translateY(-1px);
}

.profile-header__cta svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sections join the bar only where there is room for them. Below this the
   bottom dock is still on screen and already does the job. */
@media (min-width: 1100px) {
    .profile-header__nav {
        display: flex;
    }

    .profile-header__cta {
        margin-left: 0;
    }
}

/* With sections in the header, the floating rail is redundant on desktop. */
@media (min-width: 1100px) {
    .cloudcard-profile-page.is-section-page .cloudcard-profile__dock-shell {
        display: none !important;
    }

    /* The rail was the only reason to reserve that gutter. */
    .cloudcard-profile-page.is-section-page .cloudcard-profile {
        width: min(62rem, calc(100% - 3rem)) !important;
    }
}

/* ===========================================================================
   PUBLIC PROFILE — DESKTOP DASHBOARD
   ===========================================================================

   The wide layout the CEO approved: the identity card sticky on the left, a
   hero banner and a grid of preview cards on the right.

   Mobile is protected by construction, not by patching. There are exactly two
   rules outside the media query below, and both are `display: none` — the new
   markup simply does not exist visually until 1100px. Nothing the phone layout
   already renders is touched at any width below that.

   Colours come from the theme tokens (--brand/--ink/--surface/--muted), so a
   professional on Midnight Gold gets the dark treatment from the mock while
   one on Fresh Mint gets the same layout in their own palette.
   ------------------------------------------------------------------------ */

.cc-desk {
    display: none;
}

.cc-desk-only {
    display: none;
}

@media (min-width: 1100px) {

    /*
     * Secondary text tone.
     *
     * `--muted` (#6F7E88 on the default theme) measures 2.5–2.8:1 against
     * these card surfaces — well under the 4.5:1 AA needs for body text. It is
     * a platform-wide token used on many pages, so it is left alone and the
     * dashboard derives its own tone instead.
     *
     * Deriving from `--ink` rather than picking a hex keeps this correct on
     * the dark themes too, where ink is light and surface is dark.
     */
    .cloudcard-profile-page {
        --cc-soft: color-mix(in srgb, var(--ink) 78%, transparent);

        /*
         * Accent tone.
         *
         * `--brand` is a decorative colour with no contrast guarantee. Measured
         * against the card surface across the palettes it ranges from 9:1 down
         * to 1.32:1 — on Black Diamond brand is #2a2a2a on a near-black card,
         * i.e. invisible. Ink, by contrast, is 12–19:1 against surface on every
         * theme.
         *
         * Mixing 45% brand into ink keeps the brand hue recognisable while the
         * 55% ink share carries the contrast. Solid buttons built on this pair
         * it with --surface rather than white, which would fail on the pale
         * gold and silver brands.
         */
        --cc-accent: color-mix(in srgb, var(--brand) 40%, var(--ink));

        /*
         * The letter badges are 9-13px on a near-surface field, so they need a
         * heavier ink share than body accents. These four ratios
         * (accent 40 / strong 25 / soft 78 / PDF 20) were chosen by computing
         * every foreground-background pair this file produces against all 50
         * theme palettes: all 50 pass, tightest 4.77:1 on Golden Olive.
         */
        --cc-accent-strong: color-mix(in srgb, var(--brand) 25%, var(--ink));
    }

    /* ---- Column shell --------------------------------------------------- */

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile {
        /*
         * 96rem, not the 74rem this was before. At 1600px that leaves the
         * identity 400px and the dashboard 1114px — the proportions in the
         * approved comp. Capping at 82rem gave the dashboard 890px and the
         * calendar card had to stack its Book now button.
         */
        width: min(100%, 96rem) !important;
        grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
        gap: 1.4rem;
    }

    /* The explore list is the phone's navigation. The dashboard replaces it
       here, so showing both would be the same links twice. */
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__menu-card {
        display: none;
    }

    .cc-desk {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        grid-column: 2;
        min-width: 0;
    }

    .cc-desk-only {
        display: block;
    }

    /* ---- Left column additions ------------------------------------------ */

    .cc-desk__quick {
        margin: 1.6rem 0 .55rem;
        padding-top: 1.1rem;
        border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--cc-soft);
    }

    .cc-desk__socials {
        display: flex;
        gap: .6rem;
        margin-top: 1.1rem;
        padding-top: 1.1rem;
        border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    }

    .cc-desk__social {
        display: grid;
        place-items: center;
        width: 2.9rem;
        height: 2.9rem;
        border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
        color: var(--ink);
        text-decoration: none;
        transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .cc-desk__social:hover,
    .cc-desk__social:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 55%, transparent);
        background: color-mix(in srgb, var(--brand) 14%, var(--surface));
        transform: translateY(-2px);
    }

    .cc-desk__social svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---- Shared card chrome --------------------------------------------- */

    .cc-desk__card,
    .cc-desk__hero,
    .cc-desk__footer {
        border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
        border-radius: 1.5rem;
        background: color-mix(in srgb, var(--surface) 95%, var(--ink) 5%);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .cc-desk__card {
        display: flex;
        flex-direction: column;
        gap: .95rem;
        padding: 1.35rem 1.45rem 1.5rem;
        min-width: 0;
    }

    .cc-desk__head {
        display: flex;
        /* At 1100px the cards are ~290px wide and the nowrap "View all" link
           left the title 120px, overflowing it by 15px. Letting the head wrap
           drops the link to its own line instead of squeezing the heading. */
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .7rem;
        min-width: 0;
    }

    .cc-desk__head-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border-radius: .7rem;
        background: color-mix(in srgb, var(--brand) 16%, transparent);
        color: var(--cc-accent);
    }

    .cc-desk__head-icon svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Must be allowed to shrink, or a long section title pushes the "View all"
       link out of the card the same way a long name pushed the header CTA off
       the screen. */
    .cc-desk__head-copy {
        /* The floor is what triggers the wrap above. With min-width:0 it just
           shrank to nothing and let the heading spill instead. */
        flex: 1 1 8rem;
        min-width: 8rem;
    }

    .cc-desk__title {
        margin: 0;
        /* Last-resort guard for a single unbroken word. */
        overflow-wrap: anywhere;
        font-size: 1.06rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
    }

    .cc-desk__sub {
        margin: .2rem 0 0;
        font-size: .82rem;
        line-height: 1.45;
        color: var(--cc-soft);
    }

    .cc-desk__more {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        flex: 0 0 auto;
        /* WCAG 2.2 target size minimum. The text alone measured 20px high. */
        min-height: 1.5rem;
        /* Stays right-aligned whether it sits beside the title or wraps below. */
        margin-left: auto;
        margin-top: .15rem;
        font-size: .82rem;
        font-weight: 600;
        color: var(--cc-accent);
        text-decoration: none;
        white-space: nowrap;
    }

    .cc-desk__more:hover,
    .cc-desk__more:focus-visible {
        text-decoration: underline;
    }

    .cc-desk__more svg {
        width: .85rem;
        height: .85rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .18s ease;
    }

    .cc-desk__more:hover svg {
        transform: translateX(2px);
    }

    /* ---- Hero ------------------------------------------------------------ */

    .cc-desk__hero {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        overflow: hidden;
        padding: 2rem 2.1rem;
        background:
            /*
             * Kept at 16%. At 26% the glow dragged the eyebrow to 4.07:1 and
             * the lead to 4.46:1 against AA's 4.5 — only where the glow is at
             * full strength, which is behind the artwork rather than the copy,
             * but a narrower hero would move the text into it.
             */
            radial-gradient(
                120% 140% at 92% 50%,
                color-mix(in srgb, var(--brand) 16%, transparent) 0%,
                transparent 62%
            ),
            color-mix(in srgb, var(--surface) 95%, var(--ink) 5%);
    }

    .cc-desk__hero-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-desk__eyebrow {
        display: inline-block;
        margin: 0 0 .85rem;
        padding: .3rem .72rem;
        border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--brand) 14%, transparent);
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--cc-accent);
    }

    .cc-desk__hero-title {
        margin: 0;
        font-size: clamp(1.9rem, 2.5vw, 2.6rem);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -.02em;
        color: var(--ink);
    }

    .cc-desk__hero-title span {
        display: block;
        color: var(--cc-accent);
    }

    .cc-desk__hero-lead {
        margin: .8rem 0 0;
        max-width: 34rem;
        font-size: .95rem;
        line-height: 1.55;
        color: var(--cc-soft);
    }

    .cc-desk__hero-cta {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-top: 1.25rem;
        padding: .72rem 1.25rem;
        border: 0;
        border-radius: 999px;
        background: var(--cc-accent);
        font: inherit;
        font-size: .9rem;
        font-weight: 650;
        /* Not #fff — on the pale gold and silver brands white sat at ~2:1. */
        color: var(--surface);
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease;
    }

    .cc-desk__hero-cta:hover,
    .cc-desk__hero-cta:focus-visible {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }

    .cc-desk__hero-cta svg {
        width: 1.05rem;
        height: 1.05rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* The NFC card resting on its signal rings. */
    .cc-desk__hero-art {
        position: relative;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 15rem;
        height: 11rem;
    }

    .cc-desk__hero-card {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        width: 6.2rem;
        height: 9.4rem;
        border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
        border-radius: .95rem;
        /*
         * Fixed dark base rather than an --ink derivation. On the dark themes
         * --ink is near-white, which turned the card into a white rectangle;
         * it represents a physical NFC card, so it should read as the same
         * dark object whatever palette the professional picked. Only the
         * brand tint follows the theme.
         */
        background:
            linear-gradient(
                150deg,
                color-mix(in srgb, #131c2b 80%, var(--brand)) 0%,
                #0b111b 100%
            );
        box-shadow: 0 18px 34px rgb(0 0 0 / .38);
        transform: rotate(-13deg);
    }

    .cc-desk__hero-card svg {
        width: 1.7rem;
        height: 1.7rem;
        fill: none;
        stroke: #fff;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__hero-card em {
        font-size: .58rem;
        font-style: normal;
        font-weight: 600;
        letter-spacing: .06em;
        color: color-mix(in srgb, #fff 82%, transparent);
    }

    .cc-desk__hero-ring {
        position: absolute;
        bottom: .9rem;
        left: 50%;
        width: 8rem;
        height: 2.6rem;
        border: 1.5px solid color-mix(in srgb, var(--brand) 52%, transparent);
        border-radius: 50%;
        /* `translate` is its own property, so the ripple animation below cannot
           knock the centring out the way a transform keyframe would. */
        translate: -50% 0;
        animation: cc-desk-ripple 3.4s ease-out infinite;
    }

    .cc-desk__hero-ring--2 {
        animation-delay: 1.1s;
    }

    .cc-desk__hero-ring--3 {
        animation-delay: 2.2s;
    }

    @keyframes cc-desk-ripple {
        0%   { transform: scale(.55); opacity: 0; }
        22%  { opacity: .85; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    /* ---- Card grid ------------------------------------------------------- */

    .cc-desk__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
        /* Cards in a row share a height, as in the comp. With `start` a long
           contact list left its neighbours with ragged bottoms and a visible
           hole above the availability strip. */
        align-items: stretch;
    }

    .cc-desk__card--wide {
        grid-column: 1 / -1;
    }

    .cc-desk__bio {
        margin: 0;
        font-size: .9rem;
        line-height: 1.6;
        color: color-mix(in srgb, var(--ink) 84%, transparent);
        /* Keeps the overview card a predictable height whatever the bio length;
           the full text is one click away on the About page. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
    }

    .cc-desk__muted {
        margin: 0;
        font-size: .9rem;
        color: var(--cc-soft);
    }

    .cc-desk__chips {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cc-desk__chips li {
        padding: .32rem .7rem;
        border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
        font-size: .76rem;
        font-weight: 550;
        color: color-mix(in srgb, var(--ink) 82%, transparent);
    }

    /* ---- Next available -------------------------------------------------- */

    .cc-desk__next {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .9rem;
        padding: 1rem;
        border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
        border-radius: 1.1rem;
        background: color-mix(in srgb, var(--surface) 90%, var(--ink) 10%);
    }

    .cc-desk__next-mark {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 3rem;
        height: 3rem;
        border-radius: .85rem;
        background: color-mix(in srgb, var(--surface) 80%, var(--ink) 20%);
        color: var(--cc-accent);
    }

    .cc-desk__next-mark svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__next-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-desk__next-label {
        margin: 0;
        font-size: .74rem;
        color: var(--cc-soft);
    }

    .cc-desk__next-date {
        margin: .1rem 0 0;
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--ink);
    }

    .cc-desk__next-time {
        margin: .1rem 0 0;
        font-size: .8rem;
        color: var(--cc-soft);
    }

    .cc-desk__book {
        flex: 0 0 auto;
        padding: .62rem 1.15rem;
        border-radius: 999px;
        background: var(--cc-accent);
        font-size: .86rem;
        font-weight: 650;
        color: var(--surface);
        text-decoration: none;
        white-space: nowrap;
        transition: filter .18s ease, transform .18s ease;
    }

    .cc-desk__book:hover,
    .cc-desk__book:focus-visible {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    /* ---- List blocks ----------------------------------------------------- */

    .cc-desk__files,
    .cc-desk__links,
    .cc-desk__facts,
    .cc-desk__wins,
    .cc-desk__quotes {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cc-desk__file {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .75rem;
        border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
        border-radius: .85rem;
        background: color-mix(in srgb, var(--surface) 91%, var(--ink) 9%);
        min-width: 0;
    }

    .cc-desk__file-mark {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border-radius: .55rem;
        /* Red tint over an ink-anchored base, so the badge never drifts toward
           the colour of its own label. */
        background: color-mix(in srgb, #dc2626 12%, color-mix(in srgb, var(--ink) 10%, var(--surface)));
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .04em;
        /* Keeps the PDF red readable on light and dark themes alike: a fixed
           dark red vanished on the dark palettes, plain #dc2626 measured
           2.38:1 on its own tint on the light ones. */
        color: color-mix(in srgb, #dc2626 20%, var(--ink));
    }

    .cc-desk__file-copy {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-desk__file-name {
        overflow: hidden;
        /* Same 24px target minimum. Padding rather than min-height, so the
           ellipsis on a long filename keeps working. */
        padding-block: .18rem;
        font-size: .86rem;
        font-weight: 600;
        color: var(--cc-accent);
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-desk__file-name:hover,
    .cc-desk__file-name:focus-visible {
        text-decoration: underline;
    }

    .cc-desk__file-meta {
        font-size: .72rem;
        color: var(--cc-soft);
    }

    .cc-desk__file-get {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border-radius: .55rem;
        color: var(--cc-soft);
        transition: background .18s ease, color .18s ease;
    }

    .cc-desk__file-get:hover,
    .cc-desk__file-get:focus-visible {
        background: color-mix(in srgb, var(--brand) 14%, transparent);
        color: var(--cc-accent);
    }

    .cc-desk__file-get svg {
        width: 1.05rem;
        height: 1.05rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---- Office facts ---------------------------------------------------- */

    .cc-desk__facts li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: .86rem;
        line-height: 1.45;
        color: color-mix(in srgb, var(--ink) 84%, transparent);
    }

    .cc-desk__facts svg {
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
        margin-top: .1rem;
        fill: none;
        stroke: var(--cc-soft);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---- Contact rows ---------------------------------------------------- */

    .cc-desk__link {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .55rem .7rem;
        border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
        border-radius: .85rem;
        background: color-mix(in srgb, var(--surface) 91%, var(--ink) 9%);
        text-decoration: none;
        min-width: 0;
        transition: border-color .18s ease, background .18s ease;
    }

    .cc-desk__link:hover,
    .cc-desk__link:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 42%, transparent);
        background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    }

    .cc-desk__link-mark {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border-radius: .55rem;
        /*
         * Anchored to ink/surface, not brand. A brand tint under brand-derived
         * text moves both together: on Ivory Gold the pair measured 1.09:1.
         * A neutral field keeps the accent readable on all 50 palettes.
         */
        background: color-mix(in srgb, var(--ink) 13%, var(--surface));
        font-size: .8rem;
        font-weight: 700;
        color: var(--cc-accent-strong);
    }

    .cc-desk__link-text {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-desk__link-text strong {
        overflow: hidden;
        font-size: .86rem;
        font-weight: 600;
        color: var(--ink);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-desk__link-text small {
        font-size: .72rem;
        color: var(--cc-soft);
    }

    .cc-desk__link-go {
        flex: 0 0 auto;
        width: .85rem;
        height: .85rem;
        fill: none;
        stroke: var(--cc-soft);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---- Availability strip ---------------------------------------------- */

    .cc-desk__strip {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: .6rem;
    }

    .cc-desk__day {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        min-width: 5.4rem;
        padding: .7rem .85rem;
        border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
        border-radius: .95rem;
        background: color-mix(in srgb, var(--surface) 91%, var(--ink) 9%);
        text-decoration: none;
        transition: border-color .18s ease, transform .18s ease;
    }

    .cc-desk__day:hover,
    .cc-desk__day:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 50%, transparent);
        transform: translateY(-2px);
    }

    .cc-desk__day.is-next {
        border-color: var(--cc-accent);
        background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    }

    .cc-desk__day-name {
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .1em;
        color: var(--cc-soft);
    }

    .cc-desk__day-date {
        font-size: .92rem;
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
    }

    .cc-desk__day-count {
        font-size: .68rem;
        color: var(--cc-soft);
    }

    .cc-desk__day--more {
        color: var(--cc-soft);
    }

    .cc-desk__day--more svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__tz {
        display: flex;
        align-items: center;
        gap: .55rem;
        margin: 0;
        margin-left: auto;
        padding: 0 .3rem;
    }

    .cc-desk__tz svg {
        flex: 0 0 auto;
        width: 1.3rem;
        height: 1.3rem;
        fill: none;
        stroke: var(--cc-soft);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__tz span {
        display: flex;
        flex-direction: column;
    }

    .cc-desk__tz strong {
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink);
    }

    .cc-desk__tz small {
        font-size: .74rem;
        color: var(--cc-soft);
    }

    /* ---- Achievements ---------------------------------------------------- */

    .cc-desk__wins li {
        padding: .6rem .75rem;
        border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
        border-radius: .85rem;
        background: color-mix(in srgb, var(--surface) 91%, var(--ink) 9%);
    }

    .cc-desk__wins strong {
        display: block;
        font-size: .87rem;
        font-weight: 650;
        color: var(--ink);
    }

    .cc-desk__wins small {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin-top: .12rem;
        font-size: .76rem;
        line-height: 1.45;
        color: var(--cc-soft);
    }

    /* ---- Testimonials ---------------------------------------------------- */

    .cc-desk__quotes {
        gap: .8rem;
    }

    .cc-desk__quotes blockquote {
        margin: 0;
        font-size: .88rem;
        line-height: 1.55;
        color: color-mix(in srgb, var(--ink) 86%, transparent);
    }

    .cc-desk__quote-by {
        display: flex;
        align-items: center;
        gap: .55rem;
        margin: .5rem 0 0;
    }

    .cc-desk__quote-mark {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 999px;
        /* Same reason as .cc-desk__link-mark. */
        background: color-mix(in srgb, var(--ink) 13%, var(--surface));
        font-size: .82rem;
        font-weight: 700;
        color: var(--cc-accent-strong);
    }

    .cc-desk__quote-by span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cc-desk__quote-by strong {
        font-size: .84rem;
        font-weight: 650;
        color: var(--ink);
    }

    .cc-desk__quote-by small {
        font-size: .74rem;
        color: var(--cc-soft);
    }

    /* ---- Empty states ---------------------------------------------------- */

    .cc-desk__empty {
        padding: 1rem;
        border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--surface) 93%, var(--ink) 7%);
    }

    .cc-desk__empty-title {
        margin: 0;
        font-size: .88rem;
        font-weight: 650;
        color: var(--ink);
    }

    .cc-desk__empty-copy {
        margin: .2rem 0 0;
        font-size: .8rem;
        line-height: 1.45;
        color: var(--cc-soft);
    }

    /* ---- Footer bar ------------------------------------------------------ */

    .cc-desk__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .9rem 1.35rem;
    }

    .cc-desk__stamp {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        min-width: 0;
        font-size: .8rem;
        color: var(--cc-soft);
    }

    .cc-desk__stamp svg {
        flex: 0 0 auto;
        width: 1.1rem;
        height: 1.1rem;
        fill: none;
        stroke: var(--cc-accent);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__stamp strong {
        font-weight: 650;
        color: var(--ink);
        white-space: nowrap;
    }

    .cc-desk__stamp span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-desk__share {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        flex: 0 0 auto;
        padding: .5rem 1rem;
        border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
        transition: border-color .18s ease, background .18s ease;
    }

    .cc-desk__share:hover,
    .cc-desk__share:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 50%, transparent);
        background: color-mix(in srgb, var(--brand) 10%, transparent);
    }

    .cc-desk__share svg {
        width: .95rem;
        height: .95rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

/* ---- Wide desktop: the comp's mixed rhythm --------------------------------
   Two big cards, then three smaller ones, then the full-width strip. A six
   column base makes those spans expressible; auto-placement still closes the
   gaps cleanly when a card is missing because its plan feature is off. */
@media (min-width: 1400px) {
    .cc-desk__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .cc-desk__card {
        grid-column: span 3;
    }

    .cc-desk__card--trio {
        grid-column: span 2;
    }

    .cc-desk__card--wide {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-desk__hero-ring {
        animation: none;
        opacity: .35;
    }
}

/* ===========================================================================
   PUBLIC PROFILE — DESKTOP DENSITY & ALIGNMENT REVISION
   ===========================================================================
   The contact directory now lives in the sticky identity panel instead of a
   tall duplicate grid card. This keeps the desktop dashboard compact, removes
   the empty row beside long social lists, and leaves the mobile presentation
   untouched below 1100px.
   ------------------------------------------------------------------------ */
@media (min-width: 1100px) {
    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile {
        width: min(calc(100% - 3rem), 92rem) !important;
        grid-template-columns: minmax(0, 23.5rem) minmax(0, 1fr);
        gap: 1.15rem;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__identity {
        /* Keep the sticky rail flush with the right-column hero on first load. */
        top: 0;
        align-self: start;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__cover {
        height: 13rem !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__identity-body {
        padding: 0 1.6rem 1.4rem !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__avatar-wrap {
        width: 7.35rem;
        height: 7.35rem;
        margin-top: -3.7rem;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__avatar {
        width: 6.9rem;
        height: 6.9rem;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__name {
        margin-top: .85rem;
        font-size: clamp(1.8rem, 2.25vw, 2.2rem);
        line-height: 1.04;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__actions {
        gap: .55rem !important;
        margin-top: .9rem !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__action {
        min-height: 4.55rem !important;
        gap: .35rem !important;
        padding: .55rem .3rem !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__action-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .cloudcard-profile-page:not(.is-section-page) .cloudcard-profile__booking-status {
        margin-top: .75rem !important;
        padding: .7rem .8rem !important;
    }

    .cc-desk {
        gap: 1rem;
    }

    .cc-desk__quick {
        margin: 1rem 0 .45rem;
        padding-top: .8rem;
    }

    .cc-desk__hero {
        /* Fill the exact dashboard width so its right edge aligns with the
           combined Professional Overview and Consultation Calendar row. */
        align-self: stretch;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 1.55rem 1.7rem;
        border-radius: 1.25rem;
    }

    .cc-desk__hero-title {
        font-size: clamp(1.85rem, 2.25vw, 2.45rem);
    }

    .cc-desk__grid {
        gap: 1rem;
        /* Every paired row shares one baseline and one card height. This keeps
           Professional Overview aligned with Consultation Calendar while the
           full-width sections retain their natural content height. */
        align-items: stretch;
    }

    .cc-desk__card,
    .cc-desk__footer {
        border-radius: 1.25rem;
    }

    .cc-desk__card {
        gap: .78rem;
        padding: 1.1rem 1.15rem 1.2rem;
    }

    .cc-desk__head {
        gap: .6rem;
    }

    .cc-desk__more--button {
        min-height: 2rem;
        padding: .3rem .38rem .3rem .65rem;
        border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 90%, var(--ink) 10%);
        text-decoration: none !important;
    }

    .cc-desk__more--button:hover,
    .cc-desk__more--button:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 48%, transparent);
        background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    }

    .cc-desk__more-count {
        display: grid;
        place-items: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding-inline: .28rem;
        border-radius: 999px;
        background: var(--cc-accent);
        color: var(--surface);
        font-size: .62rem;
        font-variant-numeric: tabular-nums;
    }

    .cc-desk__files {
        gap: .42rem;
    }

    .cc-desk__file {
        gap: .58rem;
        padding: .5rem .6rem;
        border-radius: .72rem;
    }

    .cc-desk__file-mark {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: .48rem;
        font-size: .52rem;
    }

    .cc-desk__file-name {
        padding-block: .1rem;
        font-size: .8rem;
    }

    .cc-desk__file-meta {
        font-size: .68rem;
    }

    .cc-desk__file-get {
        width: 1.85rem;
        height: 1.85rem;
    }

    /* Documents and Office Information form one deliberate, equal-height row. */
    .cc-desk__card--trio {
        align-self: stretch;
    }

    .cc-desk__facts--office {
        display: grid;
        flex: 1 1 auto;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: .35rem;
    }

    .cc-desk__facts--office li {
        align-items: center;
        min-height: 2.35rem;
        padding: .32rem .1rem;
        border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }

    .cc-desk__facts--office li:last-child {
        border-bottom: 0;
    }

    .cc-desk__fact-copy,
    .cc-desk__fact-label,
    .cc-desk__fact-value {
        display: block;
        min-width: 0;
    }

    .cc-desk__fact-copy {
        flex: 1 1 auto;
    }

    .cc-desk__fact-label {
        margin-bottom: .06rem;
        color: var(--cc-soft);
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .09em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .cc-desk__fact-value {
        overflow: hidden;
        color: color-mix(in srgb, var(--ink) 88%, transparent);
        font-size: .78rem;
        font-weight: 550;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-desk__facts--office li:last-child .cc-desk__fact-value {
        display: -webkit-box;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .cc-desk__socials {
        display: block;
        margin-top: .8rem;
        padding: .85rem;
        border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
    }

    .cc-desk__socials-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    .cc-desk__socials-head p,
    .cc-desk__socials-head span {
        margin: 0;
    }

    .cc-desk__socials-head p {
        color: var(--ink);
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .cc-desk__socials-head span {
        display: block;
        margin-top: .12rem;
        color: var(--cc-soft);
        font-size: .65rem;
    }

    .cc-desk__socials-all {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        flex: 0 0 auto;
        min-height: 2rem;
        padding: .35rem .55rem;
        border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
        border-radius: 999px;
        background: transparent;
        color: var(--cc-accent);
        font: inherit;
        font-size: .68rem;
        font-weight: 650;
        cursor: pointer;
    }

    .cc-desk__socials-all:hover,
    .cc-desk__socials-all:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 48%, transparent);
        background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    }

    .cc-desk__socials-all svg {
        width: .75rem;
        height: .75rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-desk__social-list {
        display: flex;
        gap: .45rem;
        margin-top: .7rem;
    }

    .cc-desk__social {
        width: 2.55rem;
        height: 2.55rem;
    }

    .cc-desk__footer {
        padding: .8rem 1.15rem;
    }
}

@media (min-width: 1400px) {
    .cc-desk__card--trio {
        grid-column: span 3;
    }
}