/* =============================================================================
   The light UI frame, site-wide (2026-10-02). Loaded by ui-light.php on every page, body.ca-ui.
   Same language as the tour product page (tour.css): Jost with real weight, light paper header and
   footer, no grain. Frame only: page bodies keep their own backgrounds until each page type is
   reworked (home first), so an old dark section stays readable meanwhile. House tokens only.
   ============================================================================= */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jost-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jost-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jost-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jost-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Display face (2026-10-08, factory/night/2026-10-08/r-font.md): Fraunces, OFL 1.1, one variable file per subset
   (wght 100-900, opsz 9-144). Jost stays the body and interface face. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-var-latin.woff2') format('woff2-variations'), url('fonts/fraunces-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-var-latin-ext.woff2') format('woff2-variations'), url('fonts/fraunces-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body.ca-ui {
    --ui-bg: var(--ivory);
    --ui-paper: color-mix(in srgb, var(--ivory) 35%, white);
    --ui-ink: var(--obsidian);
    --ui-ink-2: var(--charcoal-lt);
    --ui-line: color-mix(in srgb, var(--obsidian) 12%, transparent);
    --ui-tint: color-mix(in srgb, var(--beige) 55%, var(--ivory));
    --ui-accent: var(--gold-dark);
    --ui-radius: 14px;
    --ui-radius-sm: 10px;
    --ui-shadow: 0 1px 2px color-mix(in srgb, var(--obsidian) 6%, transparent), 0 8px 28px color-mix(in srgb, var(--obsidian) 9%, transparent);
    --ui-font-display: 'Jost', sans-serif;   /* H1 and H2 on every ca-ui page. Was 'Fraunces', Georgia, serif: Sami dislikes the serif (Cem 2026-10-12); Sidar's brand card decides the final face */
    --ui-font-body: 'Jost', sans-serif;               /* reading text and interface */
    --ui-display-wght-h1: 600;
    --ui-display-wght-h2: 600;
    --ui-display-track: -.01em;
}
body.ca-ui::after { display: none !important; }                 /* the fixed grain overlay */

/* Display face on H1 and H2, every family at once. The families each set 'Jost' on their headings (some with
   !important), so this one rule carries three classes and !important to win without editing them. The footer,
   header and consent bar are outside main and keep Jost. Tune with the --ui-font-display / --ui-display-* tokens. */
html body.ca-ui.ca-ui.ca-ui :where(main, #content, .site-main) :is(h1, h2) {
    font-family: var(--ui-font-display) !important; font-optical-sizing: auto; font-style: normal !important;
    letter-spacing: var(--ui-display-track) !important; font-weight: var(--ui-display-wght-h2) !important; }
html body.ca-ui.ca-ui.ca-ui :where(main, #content, .site-main) h1 { font-weight: var(--ui-display-wght-h1) !important; }

/* Header. Fixed from first paint: the parent's headroom.js adds .headroom (position:fixed) on jQuery ready, which
   pulled an in-flow 81px header out of the flow after paint and shifted the page (CLS 0.098, qa S2 HIGH 1). */
body.ca-ui #masthead.site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; }
body.ca-ui.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { body.ca-ui.admin-bar #masthead.site-header { top: 46px; } }
/* ...and the content's top offset from first paint too: the parent's scripts.min.js writes padding-top = header height
   inline on #content after load (an inline value still wins, so the final layout is unchanged). The tours hub keeps
   its navbar absolute and gets no offset from that script, so it is left out. Family !important rules still win. */
body.ca-ui:not(.page-template-template-tours-hub) #content.site-content { padding-top: 81px; }
@media (min-width: 1025px) { body.ca-ui:not(.page-template-template-tours-hub) #content.site-content { padding-top: 81.28px; } }
/* One left edge (qa S2 MED 5): from 1280px the header sits in the same frame as the pages, a 1200 box with the
   clamp(1.25rem, 5vw, 3rem) gutter every family wrap uses, so logo, H1 and section edges share one line. The wide
   catalogue and atlas (tours and destinations hubs from 1600px) and the centred article column are stated exceptions. */
@media (min-width: 1280px) { body.ca-ui #masthead .header-inner { max-width: 1200px; padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); box-sizing: border-box; } }
body.ca-ui #masthead, body.ca-ui #masthead .navbar { background: var(--ui-paper) !important; box-shadow: 0 1px 0 var(--ui-line); }
body.ca-ui #masthead a, body.ca-ui #masthead .navbar-nav a, body.ca-ui #masthead .menu a {
    font-family: 'Jost', sans-serif !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: .02em !important;
    text-transform: none !important; color: var(--ui-ink) !important; text-shadow: none !important; }
body.ca-ui #masthead .menu a:hover, body.ca-ui #masthead .current-menu-item > a { color: var(--ui-accent) !important; }
/* The current section in ink with an accent underline: gold-dark text on paper measured 4.09:1 (under 4.5), and
   less over the glass header. Hover keeps the accent colour. */
body.ca-ui #masthead .current-menu-item > a, body.ca-ui #masthead .current-menu-ancestor > a, body.ca-ui #masthead .current-menu-parent > a {
    color: var(--ui-ink) !important; text-decoration: underline; text-decoration-color: var(--ui-accent); text-decoration-thickness: 2px; text-underline-offset: .45em; }
body.ca-ui #masthead .custom-logo-text { color: var(--ui-ink) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: .01em !important; }
body.ca-ui #masthead .sub-menu { background: var(--ui-paper) !important; box-shadow: var(--ui-shadow); border-radius: var(--ui-radius-sm); }
body.ca-ui #masthead .icon-bar { background: var(--ui-ink) !important; }
body.ca-ui #masthead svg { color: var(--ui-ink); fill: currentColor; }

/* Footer */
body.ca-ui #colophon, body.ca-ui #colophon .ca-footer-custom { background: var(--ui-tint) !important; border-top: 1px solid var(--ui-line); }
body.ca-ui #colophon, body.ca-ui #colophon p, body.ca-ui #colophon li, body.ca-ui #colophon span, body.ca-ui #colophon a:not(.ca-whatsapp-btn) {
    font-family: 'Jost', sans-serif !important; color: var(--ui-ink-2) !important; text-shadow: none !important; font-size: 15px !important; letter-spacing: 0 !important; opacity: 1 !important; }
body.ca-ui #colophon a:not(.ca-whatsapp-btn):hover { color: var(--ui-ink) !important; }
body.ca-ui #colophon h2, body.ca-ui #colophon h3, body.ca-ui #colophon h4, body.ca-ui #colophon .ca-footer-brand-name, body.ca-ui #colophon [class*="heading"], body.ca-ui #colophon [class*="title"] {
    font-family: 'Jost', sans-serif !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ui-ink) !important; }
body.ca-ui #colophon div:not(.ca-footer-custom):not(.ca-footer-grid) { color: var(--ui-ink-2) !important; font-family: 'Jost', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important; }
body.ca-ui #colophon .ca-footer-trust, body.ca-ui #colophon .ca-footer-trust * { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--ui-ink-2) !important; background: transparent !important; }
body.ca-ui #colophon .ca-whatsapp-btn { color: var(--ivory) !important; font-family: 'Jost', sans-serif !important; text-transform: none !important; letter-spacing: .01em !important; border-radius: var(--ui-radius-sm); font-size: 15px !important; font-weight: 500 !important; padding: .75rem 1.4rem !important; }
body.ca-ui #colophon hr, body.ca-ui #colophon [class*="divider"] { border-color: var(--ui-line) !important; background: var(--ui-line) !important; }

/* Consent bar in the light language (was an obsidian band with thin uppercase gold-bordered buttons).
   Markup and behaviour stay in ca-leads.php. "html body" outranks tour.css's obsidian rule for the bar.
   Accept all and Accept essentials stay the same ghost button, same size, side by side. */
html body.ca-ui #ca-consent {
    background: var(--ui-paper) !important; color: var(--ui-ink) !important; border-top: 1px solid var(--ui-line) !important;
    box-shadow: 0 -8px 28px color-mix(in srgb, var(--obsidian) 9%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.ca-ui #ca-consent > * { background: transparent !important; }
/* While the consent bar is up, the phone action bars step aside: both sit at the bottom, and the glass bar showed the
   price and "Check availability" through the consent buttons on a first visit (seen 2026-10-15, tour at 390). */
html.ca-consent-open body.ca-ui :is(.tr-bar, .ui-mbar) { transform: translateY(110%) !important; visibility: hidden; }
html body.ca-ui #ca-consent .ca-consent-text { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--ui-ink-2); }
html body.ca-ui #ca-consent .ca-consent-text a { color: var(--ui-ink); border-bottom: 1px solid var(--ui-accent); }
html body.ca-ui #ca-consent .ca-consent-text a:hover { color: var(--ui-accent); }
html body.ca-ui #ca-consent .ca-consent-btn {
    font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
    min-height: 48px; border-radius: var(--ui-radius-sm); color: var(--ui-ink); background: transparent;
    border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
html body.ca-ui #ca-consent .ca-consent-btn:hover { color: var(--ui-ink); border-color: var(--ui-ink); }
html body.ca-ui #ca-consent .ca-consent-row { border-bottom-color: var(--ui-line); }
html body.ca-ui #ca-consent .ca-consent-row-title { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ui-ink); }
html body.ca-ui #ca-consent .ca-consent-row-desc { font-size: 15px; font-weight: 400; color: var(--ui-ink-2); }
html body.ca-ui #ca-consent .ca-consent-toggle-track { border-color: color-mix(in srgb, var(--obsidian) 35%, transparent); }
html body.ca-ui #ca-consent .ca-consent-toggle-thumb { background: var(--ui-ink-2); }
html body.ca-ui #ca-consent .ca-consent-toggle[aria-checked="true"] .ca-consent-toggle-track { border-color: var(--ui-accent); background: var(--ui-accent); }
html body.ca-ui #ca-consent .ca-consent-toggle[aria-checked="true"] .ca-consent-toggle-thumb { background: var(--ui-paper); }
html body.ca-ui #ca-consent .ca-consent-toggle--locked { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--ui-ink-2); }
@media (max-width: 600px) {
    /* Two accept buttons side by side (equal), Customise under them: the bar takes less of the first screen. */
    html body.ca-ui #ca-consent .ca-consent-view[data-ca-view="main"] .ca-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    html body.ca-ui #ca-consent .ca-consent-view[data-ca-view="main"] .ca-consent-btn[data-ca-action="customise"] { grid-column: 1 / -1; }
    html body.ca-ui #ca-consent .ca-consent-btn { padding: .6rem .5rem; }
    html body.ca-ui #ca-consent .ca-consent-text { font-size: 14px; }
}

/* Back-to-top: paper circle, ink arrow */
body.ca-ui #ca-back-top { background: var(--ui-paper) !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; box-shadow: var(--ui-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ca-ui #ca-back-top svg path { stroke: var(--ui-ink) !important; }
body.ca-ui #ca-back-top.ca-back-top-visible { opacity: 1 !important; }
body.ca-ui #ca-back-top:hover { border-color: var(--ui-ink) !important; }

/* Focus ring, one for the whole frame: 2px accent, offset 2px. The old ring carried a dark 6px halo
   made for obsidian pages. Page CSS with a stronger selector keeps its own ring. */
body.ca-ui :focus-visible, body.ca-ui a:focus-visible, body.ca-ui button:focus-visible, body.ca-ui #ca-back-top:focus-visible {
    outline: 2px solid var(--ui-accent); outline-offset: 2px; box-shadow: none; }
body.ca-ui .ca-mob-link:focus-visible, body.ca-ui .ca-mob-link--solo:focus-visible, body.ca-ui .ca-mob-link--sub:focus-visible { color: var(--ui-ink) !important; }
@media (min-width: 64.0625em) {
    body.ca-ui #masthead .navbar-nav ul a:focus-visible { color: var(--ui-accent) !important; outline: 2px solid var(--ui-accent); outline-offset: -2px; }
}

/* Footer small print: the copyright line was 11px at weight 300, the place line 10px Cormorant caps. */
html body.ca-ui #colophon div.ca-footer-bottom.ca-footer-bottom { font-size: 14px !important; font-weight: 400 !important; border-top-color: var(--ui-line) !important; }
html body.ca-ui #colophon div.ca-footer-location.ca-footer-location { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; border-top-color: var(--ui-line) !important; }
@media (max-width: 960px) { body.ca-ui #ca-back-top { display: none !important; } }
/* Back-to-top sat in the middle of the screen, over reading text. It now stacks above the WhatsApp
   bubble at the right edge (bubble: 56px at bottom 2rem, right 2rem). */
body.ca-ui #ca-back-top { left: auto !important; right: calc(2rem + 6px) !important; bottom: calc(2rem + 56px + 12px) !important; transform: translateY(10px) !important; }
body.ca-ui #ca-back-top.ca-back-top-visible { transform: none !important; }

/* =============================================================================
   Navigation, two axes (IA 2026-10, factory/office/IA-2026-10.md): WHAT (Private tours, Transfers,
   Journeys, Services) and WHERE (Destinations). Tours and Destinations open as mega panels whose columns
   are the menu's own "col-head" groups; every other parent is a plain dropdown. Desktop only (>=1024px);
   the phone drawer keeps the theme's accordion.
   ============================================================================= */
@media (min-width: 1024px) {
    body.ca-ui #masthead .sf-menu > li.mega { position: static; }
    body.ca-ui #masthead .header-inner, body.ca-ui #masthead .inner-wrap { position: relative; }
    body.ca-ui #masthead .sf-menu > li.mega > ul.sub-menu {
        left: 50% !important; right: auto !important; top: 100%; transform: translateX(-50%);
        width: min(1100px, calc(100vw - 4rem)) !important; padding: 1.75rem 2rem 1.25rem !important;
        background: var(--ui-paper) !important; border: 1px solid var(--ui-line); border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow) !important; }
    body.ca-ui #masthead .sf-menu > li.mega > ul.sub-menu:not([style*="none"]) {
        display: grid !important; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 1.25rem 1.75rem; }
    body.ca-ui #masthead li.mega li.col-head > ul.sub-menu {
        display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important;
        box-shadow: none !important; border: 0 !important; background: none !important; padding: 0 !important; margin: .5rem 0 0 !important; width: auto !important; transform: none !important; }
    body.ca-ui #masthead li.mega li.col-head > a { pointer-events: none; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ui-ink-2) !important; padding: 0 0 .4rem !important; border-bottom: 1px solid var(--ui-line); display: block; }
    body.ca-ui #masthead li.mega li.col-head li a { display: block; padding: .38rem 0 !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.35; white-space: normal; letter-spacing: 0 !important; }
    body.ca-ui #masthead li.mega li.col-head li a:hover { color: var(--ui-accent) !important; }
    body.ca-ui #masthead li.mega > ul > li.mega-all { grid-column: 1 / -1; border-top: 1px solid var(--ui-line); padding-top: .9rem; }
    body.ca-ui #masthead li.mega > ul > li.mega-all > a { font-weight: 600 !important; }
    body.ca-ui #masthead li.mega > ul > li.mega-all > a::after { content: " \2192"; }
    body.ca-ui #masthead li.mega .sf-sub-indicator, body.ca-ui #masthead li.col-head .sf-sub-indicator { display: none; }
    /* Plain dropdowns */
    body.ca-ui #masthead .sf-menu > li:not(.mega) > ul.sub-menu { padding: .6rem 0 !important; min-width: 240px; border: 1px solid var(--ui-line); }
    body.ca-ui #masthead .sf-menu > li:not(.mega) > ul.sub-menu a { padding: .55rem 1.1rem !important; font-weight: 400 !important; }
}
/* Contact as the one quiet button in the bar */
body.ca-ui #masthead li.menu-cta > a { border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); border-radius: var(--ui-radius-sm); padding: .45rem 1rem !important; }
body.ca-ui #masthead li.menu-cta > a:hover { border-color: var(--ui-ink); }
@media (min-width: 1024px) {
    body.ca-ui #masthead li.mega > ul > li { min-width: 0 !important; width: auto !important; float: none !important; border: 0 !important; }
    body.ca-ui #masthead li.mega li.col-head li, body.ca-ui #masthead li.mega li.col-head li a { white-space: normal !important; width: auto !important; min-width: 0 !important; overflow-wrap: anywhere; }
    body.ca-ui #masthead li.mega > ul > li.mega-all { border-top: 1px solid var(--ui-line) !important; }
    body.ca-ui #masthead li.mega > ul > li.mega-all > a { border: 0 !important; padding-left: 0 !important; }
    body.ca-ui #masthead li.mega > ul > li.mega-all > a::before { display: none !important; }
}
/* Phone menu group headings (from the menu's col-head groups) */
body.ca-ui .ca-mob-item--heading { padding: 1.1rem 0 .3rem; }
body.ca-ui .ca-mob-group { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-pale); }

/* Phone menu panel in the light language (was obsidian with letter-spaced serif caps) */
body.ca-ui .ca-mob-overlay, body.ca-ui .ca-mob-panel { background: var(--ui-paper) !important; color: var(--ui-ink) !important; }
body.ca-ui .ca-mob-link, body.ca-ui .ca-mob-link--sub, body.ca-ui .ca-mob-chevron, body.ca-ui .ca-mob-back, body.ca-ui .ca-mob-sub-title {
    font-family: 'Jost', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ui-ink) !important; }
body.ca-ui .ca-mob-link { font-size: 20px !important; font-weight: 500 !important; }
body.ca-ui .ca-mob-link--sub { font-size: 17px !important; font-weight: 400 !important; line-height: 1.35 !important; }
body.ca-ui .ca-mob-sub-title { font-size: 22px !important; font-weight: 600 !important; color: var(--ui-ink) !important; }
body.ca-ui .ca-mob-back { font-size: 15px !important; color: var(--ui-ink-2) !important; border: 0 !important; outline-color: var(--ui-accent); }
body.ca-ui .ca-mob-item { border-color: var(--ui-line) !important; }
body.ca-ui .ca-mob-list > .ca-mob-item, body.ca-ui .ca-mob-list--sub > .ca-mob-item { border-bottom: 1px solid var(--ui-line) !important; }
body.ca-ui .ca-mob-group { color: var(--ui-accent) !important; }
body.ca-ui .ca-mob-item--heading { border-bottom: 0 !important; padding-top: 1.4rem !important; }
body.ca-ui .ca-mob-close { color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; border-radius: 50% !important; background: var(--ui-paper) !important; }
body.ca-ui .ca-mob-close svg { width: 18px; height: 18px; }
body.ca-ui .ca-mob-close svg line { stroke-width: 1.6; }
body.ca-ui .ca-mob-chevron svg, body.ca-ui .ca-mob-back svg { color: var(--ui-ink-2); }
body.ca-ui .ca-mob-wa { border-color: var(--ui-line) !important; background: var(--ui-paper) !important; }
body.ca-ui .ca-mob-wa a { font-family: 'Jost', sans-serif !important; letter-spacing: .01em !important; text-transform: none !important; font-size: 16px !important; font-weight: 600 !important; border-radius: var(--ui-radius-sm) !important; color: var(--ivory) !important; }
body.ca-ui.ca-nav-open #ca-chat-bubble, body.ca-ui.ca-nav-open #ca-back-top { display: none !important; }
body.ca-ui .ca-mob-close { display: grid !important; place-items: center !important; }
body.ca-ui .ca-mob-close svg { width: 18px !important; height: 18px !important; min-width: 18px; flex: none; }
body.ca-ui .ca-mob-overlay :focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-accent) 60%, transparent) !important; outline-offset: 3px; border-radius: 8px; }
body.ca-ui .ca-mob-back:focus:not(:focus-visible) { outline: none !important; }
@media (min-width: 1024px) {
    /* The theme fixes every submenu list at 220px; inside a mega column it must follow the column (it spilled 37px). */
    body.ca-ui #masthead .sf-menu > li.mega > ul.sub-menu > li.col-head > ul.sub-menu { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
}
/* Frame lines and the phone hamburger in ink, not gold (gold lines were made for the dark header). */
body.ca-ui #masthead #site-navigation, body.ca-ui #masthead .navbar { border-bottom-color: var(--ui-line) !important; }
body.ca-ui .ca-mob-ham span { background: var(--ui-ink) !important; }
body.ca-ui .ca-mob-sub-title { border-bottom-color: var(--ui-line) !important; }

/* Logo mark: the file is white (made for the old dark header) and carried a black drop-shadow halo
   (style.css .custom-logo-text::before). On paper it is drawn in ink through the file's own alpha.
   S2-0b (2026-10-08): ca-logo.png has a 1px opaque frame baked into its edge (alpha 248-255 on row 0, column 0,
   the last row and column), which the mask drew as a faint square around the leaf. images/ca-mark.png is the
   same mark with the frame cleared (144px, 5KB); the mask reads that file. */
body.ca-ui #masthead .custom-logo-text::before, body.ca-ui .header-logo-wrapper .custom-logo-text::before { filter: none !important;
    background: var(--ui-ink) !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
    -webkit-mask: url('images/ca-mark.png') no-repeat center / contain; mask: url('images/ca-mark.png') no-repeat center / contain; }

/* Temporary lockup D (Cem 2026-10-19): the C/A emblem with CONCIERGE over ATELIER (Jost 300) set around the A's
   crossbar, one image (ratio 5.419) drawn in ink through its alpha; it replaces the leaf mark and the typed name. */
body.ca-ui #masthead .custom-logo-text { display: inline-block !important; width: calc(43px * 5.419); height: 43px; padding: 0 !important;
    overflow: hidden; color: transparent !important; text-indent: 110% !important; white-space: nowrap !important; background: var(--ui-ink) !important;
    -webkit-mask: url('images/ca_logo_temp_d.webp') no-repeat left center / contain; mask: url('images/ca_logo_temp_d.webp') no-repeat left center / contain; }
body.ca-ui #masthead .custom-logo-text::before { display: none !important; }
@media (max-width: 760px) { body.ca-ui #masthead .custom-logo-text { width: calc(32px * 5.419); height: 32px; } }
/* Live carries an uploaded custom logo (img.custom-logo inside a.custom-logo-link) where local has the text:
   the link draws the same lockup and the old image is hidden. */
/* The link keeps the 44px hit area (style.css) so the header keeps its height; a shorter link made the header
   12px shorter on phones and main jumped up after load (CLS 0.013). The lockup is sized inside it. */
body.ca-ui #masthead a.custom-logo-link { display: inline-block !important; width: calc(43px * 5.419) !important; height: 44px !important;
    min-height: 44px !important; padding: 0 !important; background: var(--ui-ink) !important;
    -webkit-mask: url('images/ca_logo_temp_d.webp') no-repeat left center / auto 43px; mask: url('images/ca_logo_temp_d.webp') no-repeat left center / auto 43px; }
body.ca-ui #masthead a.custom-logo-link img.custom-logo { opacity: 0 !important; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important; }
@media (max-width: 760px) { body.ca-ui #masthead a.custom-logo-link { width: calc(32px * 5.419) !important;
    -webkit-mask-size: auto 32px; mask-size: auto 32px; } }

/* Shared phone action bar (ca_ui_mbar() in ui-light.php) for the families that had only the chat bubble
   (home, services hub, about, service). Same pattern as the family bars: one green WhatsApp button fixed
   at the bottom on phones, replaces the bubble, hides behind the drawer, and slides away while the page's
   own WhatsApp button or the footer is on screen. */
body.ca-ui .ui-mbar { display: none; }
@media (max-width: 760px) {
    body.ca-ui.ca-has-mbar { padding-bottom: 74px; }
    body.ca-ui.ca-has-mbar #ca-chat-bubble { display: none !important; }
    body.ca-ui:has(.ui-mbar) #ca-chat-bubble { display: none !important; }
    body.ca-ui .ui-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .65rem clamp(1.25rem, 5vw, 3rem) calc(.65rem + env(safe-area-inset-bottom));
        background: var(--ui-paper); border-top: 1px solid var(--ui-line); box-shadow: 0 -6px 20px color-mix(in srgb, var(--obsidian) 8%, transparent); }
    body.ca-ui .ui-mbar-btn { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: var(--ui-radius-sm);
        font: 600 16px/1.2 'Jost', sans-serif; letter-spacing: .01em; text-transform: none; text-decoration: none;
        background: var(--wa-green); color: var(--ivory) !important; border: 1px solid var(--wa-green); }
    body.ca-ui .ui-mbar-btn:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); }
    body.ca-ui .ui-mbar[data-hide] { transform: translateY(110%); visibility: hidden; }
    body.ca-ui.ca-nav-open .ui-mbar { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body.ca-ui .ui-mbar { transition: transform 240ms ease, visibility 240ms; }
}

/* Footer says each thing once (Cem 2026-10-08): the cities line already sits under the brand, the company name in the
   copyright, Privacy and Terms in the Information list. The legal strip keeps UID, phone, email, Impressum, Cookies. */
body.ca-ui #colophon .ca-footer-location,
body.ca-ui #colophon .ca-footer-trust > span:first-child,
body.ca-ui #colophon .ca-footer-trust a[href*="/privacy-policy/"],
body.ca-ui #colophon .ca-footer-trust a[href*="/terms/"] { display: none !important; }

/* Skip to content (keyboard only): drawn in the light frame, not the old obsidian and gold (Cem 2026-10-19). */
body.ca-ui .ca-skip-link { font-family: 'Jost', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: normal !important;
    text-transform: none !important; color: var(--ui-ink) !important; background: var(--ui-paper) !important; border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius-sm); box-shadow: var(--ui-shadow); padding: 12px 18px !important; }
body.ca-ui .ca-skip-link:focus-visible { outline: 2px solid var(--ui-ink) !important; outline-offset: 2px; }

/* Inspiro's Customizer palette (teal #0bb4aa, never changed) still reached guests through the parent's base link
   colour: image links and the theme skip link drew teal, and their keyboard outline with it (drift audit 5,
   2026-10-27). The parent's variables now carry house tokens; Jost on the parent's screen-reader labels, which
   otherwise fetched Cormorant SC for a hidden "Toggle sidebar" span. */
body.ca-ui {
    --inspiro-primary-color: var(--ui-ink);
    --inspiro-secondary-color: var(--ui-accent);
    --inspiro-tertiary-color: var(--ui-ink-2);
    --inspiro-accent-color: var(--ui-accent);
    --wp--preset--color--secondary: var(--ui-accent);
}
body.ca-ui .screen-reader-text { font-family: 'Jost', sans-serif; }
/* The footer "Cookies" button inherited the parent's button face and was the last thing drawing Cormorant SC on
   light pages (the whole font file was fetched for one word). Same face and size as its row. */
body.ca-ui #colophon .ca-consent-reopen { font-family: 'Jost', sans-serif !important; font-size: 14px !important; font-weight: 400;
    letter-spacing: 0 !important; text-transform: none !important; color: var(--ui-ink-2) !important; }
body.ca-ui #colophon .ca-consent-reopen:hover { color: var(--ui-ink) !important; }

/* One "Skip to content" (drift audit 6, 2026-10-27): the parent prints its own a.skip-link (teal, to #content) after
   ours; keyboard users met two identical links. Ours (.ca-skip-link, to #main) stays; the parent's leaves the tab order. */
body.ca-ui a.skip-link.screen-reader-text:not(.ca-skip-link) { display: none !important; }

/* Mega column headings wrap inside their column (drift sweep 2026-10-27): the parent keeps menu links on one line,
   and at 1366 "Switzerland and the Alps" (213px) and "Food, wine and villages" (202px) ran 22-33px past their
   182px columns into the next heading. Every heading takes two lines' height, text at the foot, so the rules
   under them stay on one line across the panel. */
@media (min-width: 1024px) {
    body.ca-ui #masthead li.mega li.col-head > a { white-space: normal !important; width: auto !important; min-width: 0 !important;
        overflow-wrap: break-word; line-height: 1.35 !important; display: flex !important; align-items: flex-end; min-height: 2.7em; box-sizing: content-box; }
}