/* The glass header, every page (2026-10-30 v2, Abraham: "the header also needs improvement should have that glass finish design because the
   one we have right now is blending with the rest of the site"). One floating bar holds the logo, the links, the language control, the phone and
   the button, so the header reads as one object. Loads after header.css and theme-crc.css (the family's dark bar) and replaces its look.

   Material: ADM liquid glass, web build (E:\Claude\_agency\tools\liquid-glass\web\liquid-glass.css, "On a website"): backdrop blur with a little
   saturation and lift, a tint, a sheen that is lighter at the top, a hot top-left edge, a rim that runs from white to the logo blue, and a soft shadow.
   Copied, not linked: only the pieces a bar needs. Over a WHITE page plain frost turns into nothing, so this one carries a real blue tint, a rim
   that is visible on white and a shadow in the navy.

   Kit rules kept: nothing above the bar (header, .crc-sticky, body) has filter, opacity below 1, mask, clip-path or mix-blend-mode. The rim is a
   mask on a pseudo-element INSIDE the bar, which is fine. No overflow:hidden on the bar, so the menus hang out of it. Fallbacks at the end:
   prefers-reduced-transparency and no backdrop-filter get a near-solid pale panel; reduced motion keeps the bar still and always showing. */
:root{--gl-ink:#20282E;--gl-blue:#2B4898;--gl-navy:15 26 56;--gl-tint:rgba(212,224,246,.74);--gl-solid:#E4ECF9;--gl-top:10px;--gl-gut:clamp(10px,2vw,28px);--gl-r:20px;
--bar:62px;--util:0px;--h-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--gl-fx:blur(20px) saturate(1.3) brightness(1.04)}
@media(min-width:1001px){:root{--bar:72px;--gl-r:22px}}

.crc-sticky,.ch-home .crc-sticky{top:0}
/* v3 (2026-10-30): the wrapper holds no height on any page, so the bar floats over whatever starts the page (the film on the home, the navy or photo page head
   inside; css/inner.css gives the head the padding that clears the bar). It used to hold the bar's height, which left a white strip above the navy head */
.crc-sticky,.ch-home .crc-sticky{height:0}
.msd-hdr,html:not(.nv-on) .nv-home .msd-hdr,.nv-home .msd-hdr{background:transparent!important;color:var(--gl-ink);font-family:var(--h-sans)}
.msd-hdr__util{display:none!important}

/* the bar */
.msd-hdr .msd-hdr__bar{position:relative;isolation:isolate;height:var(--bar);width:min(100% - 2*var(--gl-gut),1328px);margin:var(--gl-top) auto 0;border-radius:var(--gl-r);
background-color:var(--gl-tint);
background-image:linear-gradient(180deg,rgba(255,255,255,.62) 0,rgba(255,255,255,.28) 22%,rgba(255,255,255,.06) 52%,rgba(43,72,152,.05) 100%);
-webkit-backdrop-filter:var(--gl-fx);backdrop-filter:var(--gl-fx);
box-shadow:inset 2.5px 3.5px 0 rgba(255,255,255,.62),inset 8px 10px 18px -9px rgba(255,255,255,.75),inset -2.5px -2.5px 0 rgba(43,72,152,.07),0 1px 2px rgb(var(--gl-navy)/.10),0 10px 24px -6px rgb(var(--gl-navy)/.20),0 22px 48px -14px rgb(var(--gl-navy)/.20);
transition:height .32s var(--e),margin-top .32s var(--e),box-shadow .32s var(--e),background-color .32s var(--e),transform .42s var(--e)}
.msd-hdr .msd-hdr__bar.is-scrolled{height:calc(var(--bar) - 10px);margin-top:calc(var(--gl-top) - 3px);background-color:rgba(206,219,244,.84);-webkit-backdrop-filter:var(--gl-fx);backdrop-filter:var(--gl-fx);
box-shadow:inset 2.5px 3.5px 0 rgba(255,255,255,.62),inset 8px 10px 18px -9px rgba(255,255,255,.75),inset -2.5px -2.5px 0 rgba(43,72,152,.07),0 1px 2px rgb(var(--gl-navy)/.12),0 12px 26px -6px rgb(var(--gl-navy)/.24),0 26px 54px -14px rgb(var(--gl-navy)/.24)}
/* rim: 1.6px, white at the top left running to the logo blue at the bottom right; the specular echo sits 4px inside the top and left edges */
.msd-hdr__bar:before{content:"";position:absolute;inset:0;z-index:1;padding:1.6px;border-radius:inherit;pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.98) 0,rgba(255,255,255,.55) 24%,rgba(43,72,152,.30) 62%,rgba(43,72,152,.56) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.msd-hdr__bar:after{content:"";position:absolute;inset:4px;z-index:1;border-radius:calc(var(--gl-r) - 4px);pointer-events:none;border:solid transparent;border-width:1.25px 0 0 1.25px;border-color:rgba(255,255,255,.9) transparent transparent rgba(255,255,255,.62)}
.msd-hdr .msd-hdr__bar-in{max-width:none;height:100%;margin:0;padding:0 10px 0 clamp(14px,1.6vw,20px);gap:10px}

/* the logo: colour on glass, 44 px; it settles to 88% with the bar (a transform, so nothing moves) */
.msd-hdr__logo{display:block;padding:0;border-radius:10px;background:none;line-height:0}
.msd-hdr .msd-hdr__logo img{height:38px;width:auto}
@media(min-width:1001px){.msd-hdr .msd-hdr__logo img{height:46px}}
.msd-hdr__sheet-logo img{height:40px}

/* centre links: ink on glass, a pale pill travels to the hovered link and rests on the current page (js/motion.js places it) */
@media(min-width:1001px){
.msd-hdr__menu>li>a{height:44px;padding:0 14px;border-radius:12px;font:500 16px/1 var(--h-sans);color:var(--gl-ink);transition:color .18s var(--e),background-color .18s var(--e)}
.msd-hdr__menu>li>a:hover,.msd-hdr__menu>li.is-open>a{color:var(--gl-ink);background:rgba(255,255,255,.4)}
.msd-hdr__menu.has-pill>li>a:hover,.msd-hdr__menu.has-pill>li.is-open>a{background:transparent}
.msd-hdr__menu>li>a[aria-current]{color:var(--gl-blue)}
.msd-hdr__pill{top:50%;margin-top:-22px;height:44px;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(43,72,152,.16),inset 1px 2px 0 rgba(255,255,255,.9),0 4px 10px -4px rgb(var(--gl-navy)/.2)}
.msd-hdr__caret{color:var(--gl-ink)}
.msd-hdr__cta{height:48px;margin-left:6px;padding:0 18px 0 22px;border-radius:13px;background:var(--gl-blue);color:#fff;font:500 16px/1 var(--h-sans);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -4px rgba(43,72,152,.5);transition:background-color .2s var(--e),transform .12s var(--e),box-shadow .2s var(--e)}
.msd-hdr__cta:hover{background:#223C82;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -4px rgba(43,72,152,.55)}
.msd-hdr__cta i{width:auto;height:auto;border-radius:0;background:none;color:inherit}.msd-hdr__cta svg{width:19px;height:19px}
.msd-hdr__cta:after{display:none}
}
@media(min-width:1001px) and (max-width:1180px){.msd-hdr__menu>li>a{padding:0 9px;font-size:15px}.msd-hdr__cta{padding:0 14px 0 16px;font-size:15px}.msd-hdr .msd-hdr__bar-in{padding-left:14px;gap:6px}}
@media(min-width:1240px){.crc-tel{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;font:400 16px/1 var(--h-sans);color:var(--gl-ink);white-space:nowrap;text-decoration:none}.crc-tel:hover{color:var(--gl-blue)}}
.crc-lang .gt_selector,.crc-lang select{height:42px;border-radius:12px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(43,72,152,.16),inset 1px 2px 0 rgba(255,255,255,.8);color:var(--gl-ink);font:400 15px/1 var(--h-sans)}
.crc-lang:after{border-color:var(--gl-ink)}
.msd-hdr__call,.msd-hdr__burger{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(43,72,152,.16),inset 1px 2px 0 rgba(255,255,255,.85);color:var(--gl-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.msd-hdr__burger span{background:var(--gl-ink)}
@media(max-width:380px){.crc-lang .gt_selector,.crc-lang select{max-width:86px;padding:0 20px 0 10px;font-size:13px}.crc-lang:after{right:8px}.msd-hdr .msd-hdr__bar-in{padding:0 6px 0 10px;gap:5px}.msd-hdr .msd-hdr__logo img{height:30px}.msd-hdr__call,.msd-hdr__burger{width:40px;height:40px}}

/* menus hang a little below the bar */
.msd-hdr__mega{top:calc(100% + 10px);overflow:visible}
.msd-hdr__mega-foot{border-radius:0 0 24px 24px}
.msd-hdr__mega-in{border-radius:24px 24px 0 0}
.msd-hdr__drop{top:calc(100% + 10px)}
@media(min-width:1001px){.has-mega:hover>.msd-hdr__mega,.has-drop:hover>.msd-hdr__drop{margin-top:0}}
/* the hover bridge: the pointer crosses the 10 px gap without losing the menu */
.msd-hdr__mega:before,.msd-hdr__drop:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* hide on the way down, back on the way up (js/motion.js sets html.nk-hdr-away); focus inside or an open menu keeps it showing */
html.nk-hdr-away .msd-hdr .msd-hdr__bar{transform:translateY(calc(-100% - 28px))}
html.nk-hdr-away .msd-hdr:focus-within .msd-hdr__bar,html.nk-hdr-away .msd-hdr.is-menu-open .msd-hdr__bar{transform:none}

/* fallbacks */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.msd-hdr .msd-hdr__bar,.msd-hdr .msd-hdr__bar.is-scrolled{background-color:var(--gl-solid);background-image:none}}
@media(prefers-reduced-transparency:reduce){.msd-hdr .msd-hdr__bar,.msd-hdr .msd-hdr__bar.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--gl-solid);background-image:none}.crc-lang .gt_selector,.crc-lang select,.msd-hdr__call,.msd-hdr__burger{background:#fff}}
@media(prefers-reduced-motion:reduce){.msd-hdr .msd-hdr__bar,.msd-hdr .msd-hdr__bar.is-scrolled{transition:none}html.nk-hdr-away .msd-hdr .msd-hdr__bar{transform:none}}
@media(forced-colors:active){.msd-hdr .msd-hdr__bar{border:1px solid CanvasText;background:Canvas;box-shadow:none}.msd-hdr__bar:before,.msd-hdr__bar:after{display:none}}
/* the phone booking bar keeps the home's rounded-rectangle buttons on every page (it lived in css/home.css until v2) */
#msd-mobile-cta .msd-cta{border-radius:14px}
#msd-mobile-cta .msd-cta-book{background:var(--gl-blue);color:#fff}