/* Biviti global shell (2026-09-21): navigation typography and states, Homepage Services dropdown alignment, utility dock and the
   site-wide fine-pointer cursor. Loaded on every page after the page stylesheets. Scoped to shell elements only: page bodies,
   the Industries dropdown and the Services dropdown design are not restyled here. */

/* ---------- 1. Top-level navigation: modestly larger labels (desktop only) ----------
   Eight labels at 15px need more room than the earlier seven at 14px. Labels are never shrunk: the desktop navigation now starts at
   1360px (spacing eases fluidly from 1360 to the approved 1440 values), and 1251 to 1359 uses the approved compact header.
   The masthead is capped at 1440px, so wide screens have no more header room than 1440; labels stay at 15px there (16px would
   put Contact against the Theme control). Page layouts keep their own 1250/1251 breakpoints. */
@media (min-width:1360px){
 .masthead .navigation-study{font-size:15px}
 .masthead .navigation-study>a,.masthead .navigation-study>button,.masthead .nav-split-link{font-size:15px;font-weight:500;letter-spacing:-.005em}
}
@media (min-width:1360px) and (max-width:1439px){
 .masthead{padding-right:clamp(36px,calc(36px + (100vw - 1360px) * .3625),65px)}
 .masthead .navigation-study{margin-left:clamp(32px,calc(32px + (100vw - 1360px) * .2),48px);gap:clamp(20px,calc(20px + (100vw - 1360px) * .0375),23px)}
 .masthead .header-tools{margin-right:clamp(10px,calc(10px + (100vw - 1360px) * .075),16px)}
}
/* 1251 to 1359: the approved compact header (the same rules homepage-delivery.css and service-pilot.css apply at 1250 and below) */
@media (min-width:1251px) and (max-width:1359px){
 .masthead{padding:28px var(--page-gutter);height:110px;align-items:center;gap:20px}
 .masthead .wordmark{width:120px;margin:0}
 .header-tools{padding:0;margin:0 0 0 auto}
 .action-header,.masthead>.action-header{display:none}
 .mobile-menu-toggle{display:flex;align-items:center;gap:12px;order:3;background:none;border:1px solid #c9b18b77;color:#f8f3ea;border-radius:3px;padding:10px 13px;font-size:14px;min-height:44px}
 .navigation-study{display:none;position:absolute;top:100%;left:var(--page-gutter);right:var(--page-gutter);margin:0;padding:20px;background:#271d22;border:1px solid #c9b18b66;white-space:normal;z-index:26;gap:8px;grid-template-columns:1fr 1fr;font-size:15px}
 .navigation-study.is-open{display:grid}
 .navigation-study a,.navigation-study button{padding:12px;text-align:left;min-height:44px;line-height:1.4}
 .services-mega,.industries-mega{position:fixed;top:90px;left:var(--page-gutter);right:var(--page-gutter);width:auto;max-width:none;height:auto;max-height:calc(100dvh - 120px);overflow:auto;z-index:30}
 .services-mega{grid-template-columns:220px 1fr}
 .industries-mega{grid-template-columns:240px 1fr}
 .industry-menu-links{height:auto}
 .industry-menu-links a,.mega-paths button{min-height:44px}
 .mega-close,.industry-menu-close{min-height:44px}
 .p2-page .services-mega .mega-paths{grid-template-columns:1fr}
 .p2-page .industries-mega .industry-menu-links{grid-template-columns:1fr}
}
/* Detail pages (About Biviti, Careers, Resources, industry pages): same labels at 15px; labels never break inside, and the
   navigation moves to its own row below the logo up to 1139px (it was 1000px) so eight 15px labels are never squeezed. */
.detail-header nav{font-size:15px;font-weight:500}
.detail-header nav a{white-space:nowrap}
@media (max-width:1139px){
 .detail-header{flex-wrap:wrap;gap:20px}
 .detail-header nav{order:3;width:100%;flex-wrap:wrap;margin:0;gap:13px 20px;font-size:15px}
 .detail-header .detail-theme{margin-left:auto}
}

/* Split Services control: the label is a link, the chevron is the dropdown button. */
.nav-split{display:inline-flex;align-items:center;gap:0}
/* The chevron matches the Industries chevron (11px, 10px after the label text); its hit area extends to the right and above/below. */
.navigation-study .nav-chevron{display:inline-grid;place-items:center start;min-width:28px;min-height:36px;margin:-10px -12px -10px 0;padding:0 12px 0 0;cursor:pointer}
.navigation-study .nav-chevron span{margin-left:10px;font-size:11px;line-height:1}
@media (max-width:1359px){
 /* Same reading as the Industries row ("Services ⌄"); the chevron keeps its own 44 x 44 target beside the label link. */
 .navigation-study .nav-split{display:flex;justify-content:flex-start;align-items:center}
 .navigation-study .nav-split-link{flex:none;padding-right:0}
 .navigation-study .nav-chevron{min-width:44px;min-height:44px;margin:0;padding:0;place-items:center start}
}

/* Homepage stacking (D-085, found in this pass, present in the baseline): the opening section is isolated, so the client-logo ribbon
   that follows it (transformed) painted over an open drawer or dropdown on tablet and mobile. The opening section is lifted only while
   navigation is open; the dropdowns themselves are unchanged. */
.opening:has(.navigation-study.is-open,.services-mega:not([hidden]),.industries-mega:not([hidden])){z-index:40}

/* ---------- 2. Current page and keyboard focus: borderless (no rectangles), focus stays obvious ---------- */
.masthead .navigation-study a,.masthead .navigation-study button,.detail-header nav a{position:relative;text-decoration:none}
.masthead .navigation-study a[aria-current],.detail-header nav a[aria-current]{color:#f0d4ad}
.masthead .navigation-study a[aria-current]::after,.detail-header nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:currentColor;opacity:.85}
@media (max-width:1359px){.masthead .navigation-study a[aria-current]::after{left:12px;right:auto;width:22px;bottom:6px}}
.masthead .navigation-study a:focus-visible,.masthead .navigation-study button:not(.nav-chevron):focus-visible,.detail-header nav a:focus-visible{
 outline:none!important;box-shadow:none!important;text-decoration:underline;text-decoration-color:#e9cfaa;text-decoration-thickness:2px;text-underline-offset:7px;color:#fbf6ee}
/* Chevron focus: a small circle centred on the glyph (the glyph sits 10px after the label in both layouts) */
.masthead .navigation-study .nav-chevron{position:relative}
.masthead .navigation-study .nav-chevron::after{content:'';position:absolute;left:4px;top:50%;width:19px;height:19px;margin-top:-8px;border-radius:50%;box-shadow:0 0 0 2px #e9cfaa;opacity:0;pointer-events:none}
.masthead .navigation-study .nav-chevron:focus-visible{outline:none!important;box-shadow:none!important}
.masthead .navigation-study .nav-chevron:focus-visible::after{opacity:1}
.masthead .navigation-study button:not(.nav-chevron):focus-visible span{text-decoration:none}

/* ---------- 3. Homepage Services dropdown = the approved Services-page dropdown ----------
   The markup is now identical (generated from tools/site_shell.py). These rules mirror the Services-page rules in service-pilot.css
   (scoped there to .p2-page) so the Homepage renders the same panel. They apply only outside .p2-page. */
body:not(.p2-page) .services-mega{--p2-rule:#d6c8bb;--p2-accent:#72253a;--p2-ease:cubic-bezier(.2,.7,.2,1)}
html[data-theme=dark] body:not(.p2-page) .services-mega{--p2-rule:#5a3542;--p2-accent:#f0cfaa}
body:not(.p2-page) .services-mega .mega-paths a{display:grid;grid-template-columns:21px 1fr 18px;gap:9px;padding:17px 0;border-bottom:1px solid var(--p2-rule);align-items:start}
body:not(.p2-page) .services-mega .mega-paths a svg{width:17px;height:17px;margin-top:4px}
body:not(.p2-page) .services-mega .mega-paths a>span{font-size:10px;padding-top:5px}
body:not(.p2-page) .services-mega .mega-paths a:hover{color:var(--p2-accent)}
body:not(.p2-page) .services-mega .text-action{color:inherit;font-size:15px;line-height:1.5;gap:14px;min-height:44px}
body:not(.p2-page) .services-mega .text-action svg{width:20px;height:20px;transition:transform .3s var(--p2-ease)}
body:not(.p2-page) .services-mega .text-action:hover svg{transform:translateX(4px)}
body:not(.p2-page) .services-mega .mega-intro .text-action{margin:12px 0}
body:not(.p2-page) .services-mega .mega-close{display:block}
@media (max-width:1359px){body:not(.p2-page) .services-mega .mega-paths{grid-template-columns:1fr}}
@media (max-width:700px){
 body:not(.p2-page) .services-mega{grid-template-columns:1fr}
 body:not(.p2-page) .services-mega .mega-intro{display:block}
 body:not(.p2-page) .services-mega .mega-intro h2,body:not(.p2-page) .services-mega .mega-intro>span{display:none}
 body:not(.p2-page) .services-mega .mega-intro .text-action{margin:0}
 body:not(.p2-page) .services-mega .mega-close{margin-top:8px}
 body:not(.p2-page) .services-mega .mega-paths a{min-height:48px}
}

/* ---------- 4. Utility dock: Preference, Theme, Back to Top (one control; every target at least 44 x 44) ---------- */
.page-tools .preference-control,.page-tools .back-to-top{min-height:44px}
.page-tools .dock-theme{appearance:none;display:grid;place-items:center;flex:none;width:44px;min-height:44px;padding:0;border:0;border-left:1px solid #c5ac92;background:none;color:inherit;cursor:pointer}
.page-tools .dock-theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-tools .dock-theme .dock-moon path{fill:currentColor;stroke:none}
.page-tools .dock-theme .dock-sun{display:none}
.page-tools .dock-theme.is-dark .dock-sun{display:block}
.page-tools .dock-theme.is-dark .dock-moon{display:none}
.page-tools .dock-theme:hover svg{transform:rotate(-12deg);transition:transform .3s}
.page-tools .dock-theme:focus-visible{outline:2px solid #8e4e39;outline-offset:-3px;border-radius:50%}
.page-tools.is-compact{flex-direction:column}
/* The Services Hub and Implementation now use the P3 dock policy (D-001): 44 x 44 targets in every state, and the dock parks
   off-screen rather than shrinking when no clear edge position exists (service-pilot.js). Same values as service-p3.css. */
.p2-page .page-tools.is-compact{padding:4px}
.p2-page .page-tools.is-compact :is(.back-to-top,.preference-control){width:44px;min-height:44px}
.p2-page .page-tools.is-tab .p2-tools-tab{width:44px;height:100px}
/* D-088: the edge tab says what it is (a sliders icon and "Options"). D-087: the last resort is a slim handle that stays in the page
   gutter with a transparent 44 px target; the dock is never moved off-screen. Shared by every page family. */
:is(.p2-page,body:not(.p2-page)) .page-tools.is-tab .p2-tools-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:44px;height:100px;padding:12px 0}
.p2-tab-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.p2-tab-icon circle{fill:currentColor;stroke:none}
.p2-tab-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.page-tools.is-edge{border-radius:10px 0 0 10px}
:is(.p2-page,body:not(.p2-page)) .page-tools.is-edge .p2-tools-tab{position:relative;width:16px;height:56px;padding:0;gap:0}
.page-tools.is-edge .p2-tools-tab::before{content:'';position:absolute;top:0;bottom:0;right:0;width:44px}
.page-tools.is-edge .p2-tab-label{display:none}
.page-tools.is-edge .p2-tab-icon{width:11px;height:11px}
.page-tools.is-compact .dock-theme{border-left:0;border-top:1px solid #c5ac92;width:44px}
.page-tools.is-compact :is(.preference-control,.back-to-top){width:44px;min-height:44px}
/* Homepage and detail pages: the same placement states as the service pages (global-shell.js), at 44 x 44 from the start */
.page-tools .p2-tools-tab{display:none}
.page-tools .back-to-top[hidden]{display:none!important}
body:not(.p2-page) .page-tools{transition:opacity .22s,transform .22s cubic-bezier(.2,.7,.2,1),right .22s cubic-bezier(.2,.7,.2,1)}
body:not(.p2-page) .page-tools.is-compact{padding:4px;border-radius:24px;right:var(--p2-tools-gutter,18px)}
body:not(.p2-page) .page-tools.is-compact :is(.back-to-top,.preference-control){display:flex;align-items:center;justify-content:center;padding:6px}
body:not(.p2-page) .page-tools.is-compact .back-to-top{border-left:0;border-top:1px solid #c5ac92}
body:not(.p2-page) .page-tools.is-compact .preference-control{font-size:0}
body:not(.p2-page) .page-tools.is-compact .preference-control span{font-size:17px;margin:0}
body:not(.p2-page) .page-tools.is-compact .back-to-top>span:last-child{display:none}
body:not(.p2-page) .page-tools.is-tab{right:0;padding:0;border-radius:14px 0 0 14px;border-right:0;box-shadow:-4px 6px 18px #130d1033}
body:not(.p2-page) .page-tools.is-tab>:not(.p2-tools-tab){display:none!important}
body:not(.p2-page) .page-tools.is-tab .p2-tools-tab{border:0;background:none;color:inherit;cursor:pointer;animation:bv-tab-in .5s cubic-bezier(.2,.7,.2,1) both}
body:not(.p2-page) .page-tools.is-tab .p2-tools-tab:focus-visible{outline:2px solid #8e4e39;outline-offset:-2px;border-radius:12px 0 0 12px}
@keyframes bv-tab-in{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
/* Homepage near the footer: the dock stays in view (it used to move to the page bottom, out of view) and is placed like anywhere else */
body:not(.p2-page) .page-tools.near-footer{position:fixed;bottom:20px;opacity:1}
@media (max-width:700px){body:not(.p2-page) .page-tools.near-footer{bottom:12px}}
@media (prefers-reduced-motion:reduce){body:not(.p2-page) .page-tools{transition:none}body:not(.p2-page) .page-tools.is-tab .p2-tools-tab{animation:none}}
/* Detail pages have no Homepage or service-page stylesheet, so the dock carries its own base style (matching the approved pill). */
.bv-dock{position:fixed;right:18px;bottom:20px;z-index:8;display:flex;align-items:center;padding:3px;background:#f6eee3ed;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #c9b79b;border-radius:26px;box-shadow:0 5px 18px #130d1020;color:#4a0f1a;font:500 12px/1 'Plus Jakarta Sans',system-ui,sans-serif}
html[data-theme=dark] .bv-dock{background:#1f141af0;border-color:#5a3542;color:#ecd0aa}
.bv-dock button{appearance:none;font:inherit;color:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bv-dock .preference-control{padding:6px 14px}
.bv-dock .preference-control span{font-size:17px;margin-right:2px}
.bv-dock .back-to-top{border-left:1px solid #c5ac92;padding:6px 14px 6px 12px;font-size:11px}
.bv-dock .back-to-top>span:first-child{font-size:19px}
.bv-dock button:focus-visible{outline:2px solid #8e4e39;outline-offset:-3px;border-radius:20px}
@media (max-width:700px){.bv-dock{right:12px;bottom:12px}}

/* ---------- 5. Site-wide cursor (fine pointer, motion allowed; see global-shell.js) ---------- */
.bv-cursor-dot,.bv-cursor-ring{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;will-change:transform;contain:layout style}
.bv-cursor-dot i,.bv-cursor-ring i{position:absolute;left:0;top:0;border-radius:50%;transition:transform .32s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s,opacity .25s}
.bv-cursor-dot i{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--bv-cur-dot)}
.bv-cursor-ring i{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--bv-cur-ring);background:transparent}
html.bv-cursor-on .bv-cursor-dot,html.bv-cursor-on .bv-cursor-ring{opacity:1;transition:opacity .2s}
html{--bv-cur-dot:#72253a;--bv-cur-ring:#72253a73;--bv-cur-fill:#72253a14}
html[data-bv-tone=dark]{--bv-cur-dot:#e9cfaa;--bv-cur-ring:#e9cfaa8c;--bv-cur-fill:#e9cfaa1f}
/* Interactive: the ring opens into a soft brand-tinted disc and the dot recedes (one clear state) */
html[data-bv-cur=interactive] .bv-cursor-ring i{transform:scale(1.65);background:var(--bv-cur-fill);border-color:var(--bv-cur-dot)}
html[data-bv-cur=interactive] .bv-cursor-dot i{transform:scale(.5)}
/* Text: the native I-beam shows for selection; the ring stays small and quiet */
html[data-bv-cur=text] .bv-cursor-dot i{transform:scale(0)}
html[data-bv-cur=text] .bv-cursor-ring i{transform:scale(.55);opacity:.45}
html.bv-cursor-pressed .bv-cursor-ring i{transform:scale(.82)}
html.bv-cursor-pressed[data-bv-cur=interactive] .bv-cursor-ring i{transform:scale(1.4)}
/* Native cursor is hidden only where the custom cursor stands in for it; text, inputs and editable areas keep native cursors */
html.bv-cursor-on,html.bv-cursor-on body{cursor:none}
html.bv-cursor-on :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,dd,dt,figcaption,td,th,small,address){cursor:text}
html.bv-cursor-on :is(a,button,[role=button],[role=tab],summary,label,select,.p3-zoom) :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,dd,dt,figcaption,small,span,strong,em),
html.bv-cursor-on :is(a,button,[role=button],[role=tab],summary,label,select,.p3-zoom){cursor:none}
html.bv-cursor-on :is(input,textarea,select,[contenteditable]:not([contenteditable=false])){cursor:auto}

/* Industries phase (2026-09-26): the Industries dropdown's hub link ("All industries"), beside Close. It uses the dropdown's own label
   treatment (12px, the same colours as "Explore your industry"); the dropdown's design, dimensions and interaction are otherwise unchanged. */
.industry-menu-all{margin-left:auto;margin-block:-14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.3px;color:#754353;text-decoration:none;white-space:nowrap}
.industry-menu-all svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;transition:translate .2s}
.industry-menu-all:hover{text-decoration:underline;text-underline-offset:4px}
.industry-menu-all:hover svg{translate:3px 0}
.industry-menu-all:focus-visible{outline:2px solid #9c654a;outline-offset:3px}
html[data-theme=dark] .industry-menu-all{color:#e2bd92}
@media (max-width:700px){.industry-menu-top:has(.industry-menu-all){gap:12px}.industry-menu-all{padding:0 2px}.industry-menu-all svg{display:none}}