/* Cendavo Liquid Glass shell (Task 37), on every page after site.css: the floating glass nav pill, the colour-field
   atmosphere behind the page, glass panels (.lg, .lg-dark), glass buttons and the glass footer wordmark. Light only: white
   frosted glass over soft daylight colour, ink text, no neon. Panels are plain blur everywhere; glass.js adds an edge
   refraction filter in Chromium (html.lg-refract) and moves the pointer highlight (--mx/--my). Without backdrop-filter
   support, or when the visitor asks for reduced transparency, every panel is opaque. Motion stays in the guarded block. */

/* Atmosphere: four soft colour fields, fixed behind everything (aria-hidden in the markup). glass.js drifts them slowly
   on the motion pages; otherwise they stay where they are. Radial gradients, not blur filters, so they cost nothing.
   Task 44: calmer, a neutral warm-white base with only a faint tint (no field above 25% opacity); the colour comes
   mainly from the photography and footage seen through the glass. */
.atmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.atmos i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:.24}
.atmos i:nth-child(1){left:48%;top:-22vmax;background:radial-gradient(closest-side,#EBCB94,rgba(235,203,148,0))}
.atmos i:nth-child(2){left:-24vmax;top:18%;background:radial-gradient(closest-side,#BACCDA,rgba(186,204,218,0));opacity:.2}
.atmos i:nth-child(3){left:62%;top:48%;background:radial-gradient(closest-side,#C6D3B8,rgba(198,211,184,0));opacity:.18}
.atmos i:nth-child(4){left:14%;top:70%;background:radial-gradient(closest-side,#E8C9B4,rgba(232,201,180,0));opacity:.18}

/* Glass panel. --lg-filter is set by glass.js (Chromium: blur + displacement map); the fallback is a plain blur. The
   ::before layer is the specular highlight, centred on the pointer (or a virtual sun above the page). */
.lg,.site-header .nav{position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.38));-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:var(--lg-filter,blur(18px) saturate(1.8));border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 1px 2px rgba(14,14,13,.06),0 18px 40px -20px rgba(58,40,12,.3)}
.lg::before,.site-header .nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(110% 90% at var(--mx,30%) var(--my,-20%),rgba(255,255,255,.8),rgba(255,255,255,0) 55%);pointer-events:none}
.lg-dark{background:linear-gradient(135deg,rgba(26,25,23,.82),rgba(14,14,13,.7));border-color:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px -24px rgba(14,14,13,.6)}
.lg-dark::before{background:radial-gradient(110% 90% at var(--mx,30%) var(--my,-20%),rgba(255,255,255,.14),rgba(255,255,255,0) 55%)}
.lg-dark :focus-visible{outline-color:#fff}
.lg-defs{position:absolute;overflow:hidden}

/* Header: a floating glass pill. It stays in the page flow (sticky), so it never covers content on load; site.js hides
   it while scrolling down and brings it back on scrolling up or when anything in it takes focus. */
.site-header{padding:12px var(--gut) 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;pointer-events:none}
.site-header .nav{max-width:calc(var(--max) - 2 * var(--gut));min-height:64px;padding-inline:22px 10px;border-radius:32px;pointer-events:auto}
.site-header.is-hidden{transform:translateY(calc(-100% - 16px))}
.site-header .button{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.menu{background:rgba(255,255,255,.5);border-color:rgba(14,14,13,.12)}

/* Buttons: the outline button becomes glass; the ink button gets a lit top edge. */
.button.outline{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(58,40,12,.35)}
.button.outline:hover{background:rgba(255,255,255,.7);border-color:#fff}
.button.dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -12px rgba(14,14,13,.55)}

/* Footer: glass over the atmosphere, and the large wordmark drawn as white glass (a lit gradient with a soft drop
   shadow; decorative and aria-hidden in the markup). */
.footer{border-top:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(246,245,241,.7))}
.footer-bottom{border-top-color:rgba(14,14,13,.1)}
/* Task 43: the whole word shows (no hard cut at its foot): the frame takes the line height and only clips sideways, so
   it still never widens a phone page. */
.footer-sign{height:auto;overflow:clip visible;padding-top:.04em;line-height:.9;color:#F1EEE7}
.footer-word{background:linear-gradient(176deg,#fff 18%,#E7E3DA 46%,#fff 52%,#DCD7CC 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.9);filter:drop-shadow(0 .03em .05em rgba(58,40,12,.26))}

/* Lenis smooth scrolling (motion pages only): native smooth scrolling must not fight it while it animates. */
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Opaque fallbacks: no backdrop-filter, or the visitor asked for less transparency. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.lg,.site-header .nav,.button.outline{background:#FBFAF7}
.lg-dark{background:#1A1917}
}
@media(prefers-reduced-transparency:reduce){
.lg,.site-header .nav,.button.outline{background:#FBFAF7;-webkit-backdrop-filter:none;backdrop-filter:none}
.lg-dark{background:#1A1917}
.atmos{display:none}
}
@media(max-width:1080px){
.site-header .nav{padding-block:8px}
.js .nav-links.open{max-height:calc(100svh - 160px);overflow-y:auto}
}

@media(prefers-reduced-motion:no-preference){
.site-header{transition:transform var(--dur-1) var(--ease-io)}
}
/* Pause motion (Task 41, WCAG 2.2.2), one per page that moves. Task 46: it lives in the header pill, after the logo and
   before the menu button, so it can never cover page content (it used to float in the bottom corner). One style for every
   page, matching the menu button. Task 59: its words say what a press does ("Pause motion", then "Play motion" once
   paused; site.js sets them, with aria-pressed) and aria-pressed drives the icon: pause bars, then a play triangle on an
   ink button. Both are
   drawn with borders, so they survive forced colours (the paused button opts out of them, and ::before inherits that). */
.motion-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid rgba(14,14,13,.12);border-radius:var(--radius-pill);background:rgba(255,255,255,.5);color:var(--ink);font:600 .875rem/1 var(--font-display)}
.motion-btn::before{content:"";flex:none;width:8px;height:10px;border-inline:2.5px solid currentColor}
.motion-btn[aria-pressed="true"]::before{width:0;height:0;margin-left:2px;border-inline:0;border-block:6px solid transparent;border-left:10px solid currentColor}
.motion-btn:hover{background:#fff}
.motion-btn[aria-pressed="true"],.motion-btn[aria-pressed="true"]:hover{border-color:var(--ink);background:var(--ink);color:#fff}
@media(forced-colors:active){.motion-btn[aria-pressed="true"]{forced-color-adjust:none;border-color:ButtonText;background:ButtonText;color:ButtonFace}}
/* Below 1200px the header row has no room for the words (tablets keep the consultation button beside the menu button;
   1081-1199px shows every link), so the button is a 44x44 icon. The words stay in it at font-size 0: still its accessible
   name ("Pause motion" or "Play motion") for screen readers and voice control. */
@media(max-width:1199px){
.motion-btn{width:44px;height:44px;padding:0;gap:0;font-size:0;line-height:0}
}