/* GENERATED by bin/compile-themes.php (osdot/module-theme): the public pages' one stylesheet for a product's own theme, Motion Subtle and Cinematic. Do not edit by hand; the sources are webroot/css/*.css. */
/* fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/inter/inter-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/inter/inter-latin-400-normal.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/inter/inter-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/inter/inter-latin-500-normal.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/inter/inter-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/inter/inter-latin-600-normal.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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/inter/inter-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/inter/inter-latin-700-normal.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: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/inter/inter-latin-ext-800-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/inter/inter-latin-800-normal.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: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-400-normal.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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-500-normal.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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-600-normal.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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-700-normal.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: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-ext-800-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/montserrat/montserrat-latin-800-normal.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/poppins/poppins-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/poppins/poppins-latin-400-normal.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/poppins/poppins-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/poppins/poppins-latin-500-normal.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/poppins/poppins-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/poppins/poppins-latin-600-normal.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/poppins/poppins-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/poppins/poppins-latin-700-normal.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: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/poppins/poppins-latin-ext-800-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/poppins/poppins-latin-800-normal.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: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/sorts-mill-goudy/sorts-mill-goudy-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/sorts-mill-goudy/sorts-mill-goudy-latin-400-normal.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: "Marcellus SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/marcellus-sc/marcellus-sc-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Marcellus SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/marcellus-sc/marcellus-sc-latin-400-normal.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: "Inter Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 107.35%; ascent-override: 90.24%; descent-override: 22.47%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 108.35%; ascent-override: 89.41%; descent-override: 22.26%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 101.12%; ascent-override: 95.80%; descent-override: 23.85%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 102.02%; ascent-override: 94.95%; descent-override: 23.64%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; font-style: normal; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 103.14%; ascent-override: 93.92%; descent-override: 23.39%; line-gap-override: 0.00%; }
@font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 114.09%; ascent-override: 84.84%; descent-override: 22.00%; line-gap-override: 0.00%; }
@font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 115.91%; ascent-override: 83.51%; descent-override: 21.65%; line-gap-override: 0.00%; }
@font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 109.03%; ascent-override: 88.78%; descent-override: 23.02%; line-gap-override: 0.00%; }
@font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 111.00%; ascent-override: 87.21%; descent-override: 22.61%; line-gap-override: 0.00%; }
@font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 113.11%; ascent-override: 85.58%; descent-override: 22.19%; line-gap-override: 0.00%; }
@font-face { font-family: "Poppins Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 113.74%; ascent-override: 92.32%; descent-override: 30.77%; line-gap-override: 8.79%; }
@font-face { font-family: "Poppins Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 114.65%; ascent-override: 91.58%; descent-override: 30.53%; line-gap-override: 8.72%; }
@font-face { font-family: "Poppins Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 106.71%; ascent-override: 98.39%; descent-override: 32.80%; line-gap-override: 9.37%; }
@font-face { font-family: "Poppins Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 107.48%; ascent-override: 97.70%; descent-override: 32.57%; line-gap-override: 9.30%; }
@font-face { font-family: "Poppins Fallback"; font-style: normal; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 108.15%; ascent-override: 97.09%; descent-override: 32.36%; line-gap-override: 9.25%; }
@font-face { font-family: "Sorts Mill Goudy Fallback"; font-style: normal; font-weight: 400; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 106.03%; ascent-override: 90.54%; descent-override: 45.08%; line-gap-override: 0.00%; }
@font-face { font-family: "Marcellus SC Fallback"; font-style: normal; font-weight: 400; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 96.29%; ascent-override: 101.17%; descent-override: 29.06%; line-gap-override: 0.00%; }
/* tokens */
:root { --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-cinematic: 900ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-enter: cubic-bezier(0, 0, 0.2, 1); --easing-exit: cubic-bezier(0.4, 0, 1, 1); --easing-expressive: cubic-bezier(0.16, 1, 0.3, 1); --touch: 2.75rem; --focus-width: 3px; --container-narrow: 40rem; --container-text: 46rem; --container-wide: 76rem; --font-ui: Inter, "Inter Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; }
/* OsDot/Cms.site */
.cms-home,.cms-page { min-width:0 }
.cms-page { max-width:820px;margin:0 auto;padding:.5rem 0 2rem }
.cms-page h1 { margin:.75rem 0 .5rem;font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.2 }
.cms-section { margin:2rem 0;min-width:0 }
.cms-section h2 { margin:0 0 1rem;font-size:clamp(1.35rem,3.5vw,1.85rem) }
.section-heading { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1rem }
.section-heading h2 { margin:0 }
.text-link { display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--link);text-decoration:none }
.text-link:hover { text-decoration:underline;text-underline-offset:3px }
.lead { font-size:1.1rem;color:var(--muted);line-height:1.6 }
.cms-date { color:var(--muted);font-size:.9rem;margin:.25rem 0 1rem }
.cms-image,.cms-cover,.cms-card img { display:block;width:100%;height:auto;border-radius:var(--radius) }
.cms-cover { margin:1rem 0 1.5rem }
.eyebrow { margin:0;color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem }
.button-row { display:flex;flex-wrap:wrap;gap:.5rem }
.cms-card-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem }
.cms-card { min-width:0 }
.cms-card a { color:var(--ink);text-decoration:none }
.cms-card h2,.cms-card h3 { margin:.75rem 0 .25rem;font-size:1.2rem;overflow-wrap:break-word }
.cms-card a:hover h2,.cms-card a:hover h3 { color:var(--link);text-decoration:underline }
.cms-card p { margin:0;color:var(--muted);line-height:1.55 }
.cms-pager { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem }
.cms-faq-list { display:grid;gap:.5rem }
.cms-faq-list details { border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:0 }
.cms-faq-list summary { display:flex;align-items:center;min-height:44px;padding:.6rem 1rem;font-weight:600;cursor:pointer;overflow-wrap:anywhere }
.cms-faq-list details>div { padding:0 1rem 1rem }
.cms-rich { line-height:1.75;overflow-wrap:anywhere;min-width:0 }
.cms-rich h2,.cms-rich h3,.cms-rich h4 { margin:1.75rem 0 .5rem;line-height:1.3 }
.cms-rich ul,.cms-rich ol { padding-left:1.5rem }
.cms-rich a { color:var(--link);text-decoration:underline;text-underline-offset:3px }
.cms-rich blockquote { margin:1rem 0;padding:.25rem 1rem;border-left:4px solid var(--border);color:var(--muted) }
.cms-rich pre { max-width:100%;overflow:auto;padding:.75rem;border-radius:8px;background:var(--surface-2) }
.cms-rich table { display:block;max-width:100%;overflow-x:auto;border-collapse:collapse }
.cms-rich th,.cms-rich td { padding:.5rem;border:1px solid var(--border);text-align:left }
.breadcrumbs { display:flex;flex-wrap:wrap;gap:.35rem;color:var(--muted);font-size:.9rem }
.breadcrumbs a { color:var(--link) }
.notice { padding:.75rem 1rem;border-radius:var(--radius);background:var(--warn-bg);color:var(--ink) }
@media (min-width:640px) {
.cms-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:960px) {
.cms-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
.cms-figures { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0 }
.cms-figures div { padding:1rem;border:1px solid var(--border);border-radius:var(--radius);text-align:center }
.cms-figures dd { margin:0;font-size:1.75rem;font-weight:700 }
.cms-figures dt { color:var(--muted) }
@media (min-width:960px) {
.cms-figures { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
.place-photo { position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--surface-2) }
.place-photo picture { display:block;width:100%;height:100% }
.place-photo__img { display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%) }
.cms-about .place-photo { aspect-ratio:4/5;width:min(100%,26rem);margin:2rem 0 }
.cms-home__section { display: contents; }
.cms-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.cms-strip__item { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2, .5rem) var(--space-4, 1rem); border: 1px solid var(--border, #d8d0c2); border-radius: var(--radius-pill, 999px); background: var(--surface, #fffdf9); color: var(--text, #1a1820); font-weight: 600; text-decoration: none; overflow-wrap: break-word; }
a.cms-strip__item:hover, a.cms-strip__item:focus-visible { border-color: var(--primary, #6e5020); color: var(--primary-text, var(--primary, #6e5020)); }
.cms-steps { list-style: none; margin: 0; padding: 0; counter-reset: cms-step; display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.cms-steps__item { counter-increment: cms-step; position: relative; padding: var(--space-6, 1.5rem); padding-top: calc(var(--space-6, 1.5rem) + 2.75rem); border-radius: var(--radius-card, 12px); background: var(--surface, #fffdf9); min-width: 0; }
.cms-steps__item::before { content: counter(cms-step); position: absolute; top: var(--space-6, 1.5rem); inset-inline-start: var(--space-6, 1.5rem); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primary, #6e5020); color: var(--on-primary, #ffffff); font-weight: 700; }
.cms-steps__item h3 { margin: 0 0 var(--space-2, .5rem); font-size: var(--text-lg, 1.125rem); overflow-wrap: break-word; }
.cms-steps__item p { margin: 0; color: var(--text-muted, #5d5964); overflow-wrap: break-word; }
.cms-about { display: grid; gap: var(--space-4, 1rem); max-width: 44rem; }
.cms-about h2, .cms-about p { margin: 0; }
.cms-about__text { font-size: var(--text-lg, 1.125rem); color: var(--text, #1a1820); overflow-wrap: break-word; }
.cms-strip__item > picture { display: contents; }
.cms-strip__icon { flex: none; width: 2rem; height: 2rem; object-fit: contain; }
.cms-strip--icons .cms-strip__item:has(> .cms-strip__icon, > picture) { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, .5rem); min-width: 0; padding-inline: var(--space-3, .75rem); text-align: center; }
:where(.cms-strip--icons) .cms-strip__item:where(:has(> .cms-strip__icon, > picture)) { padding-block: var(--space-3, .75rem); border-radius: var(--radius-card, 12px); }
.cms-steps__icon { display: inline-block; width: 3rem; height: 3rem; margin-bottom: var(--space-3, .75rem); object-fit: contain; vertical-align: top; }
.cms-about--media { display: flex; flex-wrap: wrap; max-width: none; align-items: center; column-gap: var(--space-12, 3rem); }
.cms-about__media { flex: 1 1 18rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 1rem); justify-items: start; min-width: 0; }
.cms-about__copy { flex: 1 1 20rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 1rem); justify-items: start; min-width: 0; }
.cms-about__photo { justify-self: stretch; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-media, var(--radius-card, 12px)); background: var(--sunken, #e4dacb); }
.cms-about__photo picture, .cms-about__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-about__faces { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cms-about__faces li + li { margin-inline-start: -.75rem; }
.cms-about__faces picture { display: block; }
.cms-about__face { display: block; width: 3.5rem; height: 3.5rem; border: 3px solid var(--surface, #fffdf9); border-radius: 50%; object-fit: cover; }
.cms-about__points { display: grid; gap: var(--space-2, .5rem); margin: 0; padding: 0; list-style: none; }
.cms-about__points li { display: flex; align-items: baseline; gap: var(--space-3, .75rem); min-width: 0; overflow-wrap: anywhere; }
.cms-about__points li::before { content: ""; flex: none; width: .4em; height: .75em; margin-inline: .2em .15em; border: solid var(--accent, currentColor); border-width: 0 .16em .16em 0; transform: translateY(-.1em) rotate(45deg); }
.cms-cta { display: flex; flex-wrap: wrap; gap: var(--space-6, 1.5rem); align-items: center; justify-content: space-between; padding: var(--space-8, 2rem); border-radius: var(--radius-card, 12px); background: var(--primary, #6e5020); color: var(--on-primary, #ffffff); }
.cms-cta > div { flex: 1 1 18rem; min-width: 0; }
.cms-cta h2 { margin: 0 0 var(--space-2, .5rem); color: inherit; overflow-wrap: break-word; }
.cms-cta p { margin: 0; color: inherit; }
.cms-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.cms-cta .btn { background: var(--surface, #fffdf9); color: var(--text, #1a1820); border-color: transparent; }
.cms-cta .btn--primary { background: var(--on-primary, #ffffff); color: var(--primary-text, var(--primary, #6e5020)); }
/* OsDot/Cms.contact */
.cms-page.cms-contact { max-width:1200px }
.cms-icon { flex:none;width:1.15em;height:1.15em }
.cms-contact-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem }
.cms-contact-details,.cms-contact-form { min-width:0;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface) }
.cms-contact-details h2,.cms-contact-form h2 { margin-top:0 }
.cms-address { line-height:1.6 }
.cms-contact-list,.cms-social { list-style:none;padding:0;margin:1rem 0 }
.cms-contact-list li { display:flex;align-items:center;gap:.5rem;min-height:44px;overflow-wrap:anywhere }
.cms-contact-list a,.cms-social a { color:var(--link) }
.cms-social { display:flex;flex-wrap:wrap;gap:.25rem 1rem }
.cms-social a { display:inline-flex;align-items:center;min-height:44px }
.cms-map { margin-top:1rem }
.cms-map h3 { display:flex;align-items:center;gap:.4rem;font-size:1rem }
.cms-map-frame iframe { width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius) }
.cms-contact-form textarea { min-height:9rem }
.cms-hp { position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden }
@media (min-width:960px) {
.cms-contact-grid { grid-template-columns:minmax(0,2fr) minmax(0,3fr) }
}
.cms-contact-details .place-photo { width:100%;aspect-ratio:4/5;max-height:24rem;margin:0 0 1rem }
/* OsDot/Hero.hero */
.cinehero { --cinehero-text: #ffffff; --cinehero-scrim: 12 10 14; --cinehero-accent: var(--accent, #9a4f31); --cinehero-panel: var(--surface, #f6f1e7); --cinehero-panel-text: var(--text, #1a1820); --cinehero-panel-muted: var(--text-muted, #5d5964); --cinehero-chip: 12 10 14; --cinehero-chip-alpha: .74; --cinehero-glow: 255 214 170; --ch-safe-bottom: env(safe-area-inset-bottom, 0px); --cinehero-accent-text: var(--cinehero-text); --cinehero-deep-alpha: .9; --cinehero-copy-w: 48rem; --cinehero-radius: 0px; --ch-spd: 1; --ch-a: .85; --ch-flat: 0; --ch-x: start; --ch-y: end; --ch-align: start; }
.cinehero[data-speed="slow"] { --ch-spd: 1.35; }
.cinehero[data-speed="fast"] { --ch-spd: .7; }
.cinehero[data-overlay="none"] { --ch-a: 0; }
.cinehero[data-overlay="soft"] { --ch-a: .55; }
.cinehero[data-overlay="strong"] { --ch-a: 1; --ch-flat: .22; }
.cinehero[data-position^="top"] { --ch-y: start; }
.cinehero[data-position^="middle"] { --ch-y: center; }
.cinehero[data-position$="center"] { --ch-x: center; --ch-align: center; }
.cinehero[data-position$="end"] { --ch-x: end; --ch-align: end; }
.cinehero { --ch-h: clamp(32.5rem, 78vh, 51.25rem); --ch-h: clamp(32.5rem, 78svh, 51.25rem); }
.cinehero[data-height="full"] { --ch-h: 100vh; --ch-h: 100svh; }
.cinehero[data-height="medium"] { --ch-h: clamp(26rem, 62vh, 40rem); --ch-h: clamp(26rem, 62svh, 40rem); }
.cinehero[data-height="short"] { --ch-h: clamp(20rem, 46vh, 30rem); --ch-h: clamp(20rem, 46svh, 30rem); }
.cinehero:is([data-height="medium"], [data-height="short"]) { --ch-safe-bottom: 0px; }
.cinehero[data-height="short"] .cinehero__title { font-size: clamp(1.6rem, .9rem + 2.8cqi, 3rem); margin-bottom: .6rem; }
.cinehero[data-height="short"] .cinehero__eyebrow { margin-bottom: .5rem; }
.cinehero[data-height="short"] .cinehero__text { margin-bottom: 1rem; }
.cinehero[data-height="short"] .cinehero__copy { padding-top: 1rem; padding-bottom: clamp(3.5rem, 5cqi, 4.5rem); }
.cinehero[data-height="short"] .cinehero__big { font-size: clamp(2.4rem, .5rem + 4.6cqi, 5rem); }
.cinehero { position: relative; display: grid; isolation: isolate; overflow: hidden; container-type: inline-size; color: var(--cinehero-text); background: var(--sunken, #141318); border-radius: var(--cinehero-radius); font-family: var(--font-body, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
[data-page-width="boxed"] .cinehero { --ch-frame-w: var(--container-wide, 76rem); }
[data-page-width="full"] .cinehero { --ch-frame-w: calc(2.1 * var(--ch-h)); }
:is([data-page-width="boxed"], [data-page-width="full"]) .cinehero { max-width: var(--ch-frame-w); margin-inline: auto; border-radius: clamp(var(--cinehero-radius), calc((100vw - var(--ch-frame-w)) * 100), var(--cinehero-panel-radius, var(--radius-card, 1.25rem))); margin-block-start: clamp(0px, calc((100vw - var(--ch-frame-w)) * 100), var(--space-6, 1.5rem)); }
.cinehero__slides { grid-area: 1 / 1; display: grid; margin: 0; padding: 0; list-style: none; min-width: 0; min-height: var(--cinehero-min-h, var(--ch-h)); }
.cinehero__slide { grid-area: 1 / 1; position: relative; display: grid; min-width: 0; visibility: hidden; opacity: 0; z-index: 0; }
.cinehero__slide.is-active { visibility: visible; opacity: 1; z-index: 2; }
.cinehero__slide.is-leaving { visibility: visible; opacity: 1; z-index: 1; }
.cinehero:not(.is-ready) .cinehero__slide:first-child { visibility: visible; opacity: 1; z-index: 2; }
@media (scripting: none) {
.cinehero:not(.is-ready) .cinehero__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.cinehero:not(.is-ready) .cinehero__slide { flex: 0 0 100%; scroll-snap-align: start; visibility: visible; opacity: 1; }
}
.cinehero__media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.cinehero__media:empty { background: linear-gradient(135deg, var(--surface-2, #2b2830), var(--sunken, #141318)); }
.cinehero__media picture, .cinehero__media img, .cinehero__slat picture, .cinehero__slat img, .cinehero__ghost { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
@media (max-width: 40rem) {
.cinehero__media img, .cinehero__slat img, .cinehero__ghost img { object-position: var(--nfx, var(--fx, 50%)) var(--nfy, var(--fy, 50%)); }
}
.cinehero__slide[data-focal^="top"] { --fy: 20%; }
.cinehero__slide[data-focal^="bottom"] { --fy: 80%; }
.cinehero__slide[data-focal$="left"] { --fx: 22%; }
.cinehero__slide[data-focal$="right"] { --fx: 78%; }
.cinehero__slide[data-focal-narrow^="top"] { --nfy: 20%; }
.cinehero__slide[data-focal-narrow^="bottom"] { --nfy: 80%; }
.cinehero__slide[data-focal-narrow$="left"] { --nfx: 22%; }
.cinehero__slide[data-focal-narrow$="right"] { --nfx: 78%; }
[data-focal^="0 "] { --fx:0% }
[data-focal^="1 "] { --fx:1% }
[data-focal^="2 "] { --fx:2% }
[data-focal^="3 "] { --fx:3% }
[data-focal^="4 "] { --fx:4% }
[data-focal^="5 "] { --fx:5% }
[data-focal^="6 "] { --fx:6% }
[data-focal^="7 "] { --fx:7% }
[data-focal^="8 "] { --fx:8% }
[data-focal^="9 "] { --fx:9% }
[data-focal^="10 "] { --fx:10% }
[data-focal^="11 "] { --fx:11% }
[data-focal^="12 "] { --fx:12% }
[data-focal^="13 "] { --fx:13% }
[data-focal^="14 "] { --fx:14% }
[data-focal^="15 "] { --fx:15% }
[data-focal^="16 "] { --fx:16% }
[data-focal^="17 "] { --fx:17% }
[data-focal^="18 "] { --fx:18% }
[data-focal^="19 "] { --fx:19% }
[data-focal^="20 "] { --fx:20% }
[data-focal^="21 "] { --fx:21% }
[data-focal^="22 "] { --fx:22% }
[data-focal^="23 "] { --fx:23% }
[data-focal^="24 "] { --fx:24% }
[data-focal^="25 "] { --fx:25% }
[data-focal^="26 "] { --fx:26% }
[data-focal^="27 "] { --fx:27% }
[data-focal^="28 "] { --fx:28% }
[data-focal^="29 "] { --fx:29% }
[data-focal^="30 "] { --fx:30% }
[data-focal^="31 "] { --fx:31% }
[data-focal^="32 "] { --fx:32% }
[data-focal^="33 "] { --fx:33% }
[data-focal^="34 "] { --fx:34% }
[data-focal^="35 "] { --fx:35% }
[data-focal^="36 "] { --fx:36% }
[data-focal^="37 "] { --fx:37% }
[data-focal^="38 "] { --fx:38% }
[data-focal^="39 "] { --fx:39% }
[data-focal^="40 "] { --fx:40% }
[data-focal^="41 "] { --fx:41% }
[data-focal^="42 "] { --fx:42% }
[data-focal^="43 "] { --fx:43% }
[data-focal^="44 "] { --fx:44% }
[data-focal^="45 "] { --fx:45% }
[data-focal^="46 "] { --fx:46% }
[data-focal^="47 "] { --fx:47% }
[data-focal^="48 "] { --fx:48% }
[data-focal^="49 "] { --fx:49% }
[data-focal^="50 "] { --fx:50% }
[data-focal^="51 "] { --fx:51% }
[data-focal^="52 "] { --fx:52% }
[data-focal^="53 "] { --fx:53% }
[data-focal^="54 "] { --fx:54% }
[data-focal^="55 "] { --fx:55% }
[data-focal^="56 "] { --fx:56% }
[data-focal^="57 "] { --fx:57% }
[data-focal^="58 "] { --fx:58% }
[data-focal^="59 "] { --fx:59% }
[data-focal^="60 "] { --fx:60% }
[data-focal^="61 "] { --fx:61% }
[data-focal^="62 "] { --fx:62% }
[data-focal^="63 "] { --fx:63% }
[data-focal^="64 "] { --fx:64% }
[data-focal^="65 "] { --fx:65% }
[data-focal^="66 "] { --fx:66% }
[data-focal^="67 "] { --fx:67% }
[data-focal^="68 "] { --fx:68% }
[data-focal^="69 "] { --fx:69% }
[data-focal^="70 "] { --fx:70% }
[data-focal^="71 "] { --fx:71% }
[data-focal^="72 "] { --fx:72% }
[data-focal^="73 "] { --fx:73% }
[data-focal^="74 "] { --fx:74% }
[data-focal^="75 "] { --fx:75% }
[data-focal^="76 "] { --fx:76% }
[data-focal^="77 "] { --fx:77% }
[data-focal^="78 "] { --fx:78% }
[data-focal^="79 "] { --fx:79% }
[data-focal^="80 "] { --fx:80% }
[data-focal^="81 "] { --fx:81% }
[data-focal^="82 "] { --fx:82% }
[data-focal^="83 "] { --fx:83% }
[data-focal^="84 "] { --fx:84% }
[data-focal^="85 "] { --fx:85% }
[data-focal^="86 "] { --fx:86% }
[data-focal^="87 "] { --fx:87% }
[data-focal^="88 "] { --fx:88% }
[data-focal^="89 "] { --fx:89% }
[data-focal^="90 "] { --fx:90% }
[data-focal^="91 "] { --fx:91% }
[data-focal^="92 "] { --fx:92% }
[data-focal^="93 "] { --fx:93% }
[data-focal^="94 "] { --fx:94% }
[data-focal^="95 "] { --fx:95% }
[data-focal^="96 "] { --fx:96% }
[data-focal^="97 "] { --fx:97% }
[data-focal^="98 "] { --fx:98% }
[data-focal^="99 "] { --fx:99% }
[data-focal^="100 "] { --fx:100% }
[data-focal$=" 0"] { --fy:0% }
[data-focal$=" 1"] { --fy:1% }
[data-focal$=" 2"] { --fy:2% }
[data-focal$=" 3"] { --fy:3% }
[data-focal$=" 4"] { --fy:4% }
[data-focal$=" 5"] { --fy:5% }
[data-focal$=" 6"] { --fy:6% }
[data-focal$=" 7"] { --fy:7% }
[data-focal$=" 8"] { --fy:8% }
[data-focal$=" 9"] { --fy:9% }
[data-focal$=" 10"] { --fy:10% }
[data-focal$=" 11"] { --fy:11% }
[data-focal$=" 12"] { --fy:12% }
[data-focal$=" 13"] { --fy:13% }
[data-focal$=" 14"] { --fy:14% }
[data-focal$=" 15"] { --fy:15% }
[data-focal$=" 16"] { --fy:16% }
[data-focal$=" 17"] { --fy:17% }
[data-focal$=" 18"] { --fy:18% }
[data-focal$=" 19"] { --fy:19% }
[data-focal$=" 20"] { --fy:20% }
[data-focal$=" 21"] { --fy:21% }
[data-focal$=" 22"] { --fy:22% }
[data-focal$=" 23"] { --fy:23% }
[data-focal$=" 24"] { --fy:24% }
[data-focal$=" 25"] { --fy:25% }
[data-focal$=" 26"] { --fy:26% }
[data-focal$=" 27"] { --fy:27% }
[data-focal$=" 28"] { --fy:28% }
[data-focal$=" 29"] { --fy:29% }
[data-focal$=" 30"] { --fy:30% }
[data-focal$=" 31"] { --fy:31% }
[data-focal$=" 32"] { --fy:32% }
[data-focal$=" 33"] { --fy:33% }
[data-focal$=" 34"] { --fy:34% }
[data-focal$=" 35"] { --fy:35% }
[data-focal$=" 36"] { --fy:36% }
[data-focal$=" 37"] { --fy:37% }
[data-focal$=" 38"] { --fy:38% }
[data-focal$=" 39"] { --fy:39% }
[data-focal$=" 40"] { --fy:40% }
[data-focal$=" 41"] { --fy:41% }
[data-focal$=" 42"] { --fy:42% }
[data-focal$=" 43"] { --fy:43% }
[data-focal$=" 44"] { --fy:44% }
[data-focal$=" 45"] { --fy:45% }
[data-focal$=" 46"] { --fy:46% }
[data-focal$=" 47"] { --fy:47% }
[data-focal$=" 48"] { --fy:48% }
[data-focal$=" 49"] { --fy:49% }
[data-focal$=" 50"] { --fy:50% }
[data-focal$=" 51"] { --fy:51% }
[data-focal$=" 52"] { --fy:52% }
[data-focal$=" 53"] { --fy:53% }
[data-focal$=" 54"] { --fy:54% }
[data-focal$=" 55"] { --fy:55% }
[data-focal$=" 56"] { --fy:56% }
[data-focal$=" 57"] { --fy:57% }
[data-focal$=" 58"] { --fy:58% }
[data-focal$=" 59"] { --fy:59% }
[data-focal$=" 60"] { --fy:60% }
[data-focal$=" 61"] { --fy:61% }
[data-focal$=" 62"] { --fy:62% }
[data-focal$=" 63"] { --fy:63% }
[data-focal$=" 64"] { --fy:64% }
[data-focal$=" 65"] { --fy:65% }
[data-focal$=" 66"] { --fy:66% }
[data-focal$=" 67"] { --fy:67% }
[data-focal$=" 68"] { --fy:68% }
[data-focal$=" 69"] { --fy:69% }
[data-focal$=" 70"] { --fy:70% }
[data-focal$=" 71"] { --fy:71% }
[data-focal$=" 72"] { --fy:72% }
[data-focal$=" 73"] { --fy:73% }
[data-focal$=" 74"] { --fy:74% }
[data-focal$=" 75"] { --fy:75% }
[data-focal$=" 76"] { --fy:76% }
[data-focal$=" 77"] { --fy:77% }
[data-focal$=" 78"] { --fy:78% }
[data-focal$=" 79"] { --fy:79% }
[data-focal$=" 80"] { --fy:80% }
[data-focal$=" 81"] { --fy:81% }
[data-focal$=" 82"] { --fy:82% }
[data-focal$=" 83"] { --fy:83% }
[data-focal$=" 84"] { --fy:84% }
[data-focal$=" 85"] { --fy:85% }
[data-focal$=" 86"] { --fy:86% }
[data-focal$=" 87"] { --fy:87% }
[data-focal$=" 88"] { --fy:88% }
[data-focal$=" 89"] { --fy:89% }
[data-focal$=" 90"] { --fy:90% }
[data-focal$=" 91"] { --fy:91% }
[data-focal$=" 92"] { --fy:92% }
[data-focal$=" 93"] { --fy:93% }
[data-focal$=" 94"] { --fy:94% }
[data-focal$=" 95"] { --fy:95% }
[data-focal$=" 96"] { --fy:96% }
[data-focal$=" 97"] { --fy:97% }
[data-focal$=" 98"] { --fy:98% }
[data-focal$=" 99"] { --fy:99% }
[data-focal$=" 100"] { --fy:100% }
[data-focal-narrow^="0 "] { --nfx:0% }
[data-focal-narrow^="1 "] { --nfx:1% }
[data-focal-narrow^="2 "] { --nfx:2% }
[data-focal-narrow^="3 "] { --nfx:3% }
[data-focal-narrow^="4 "] { --nfx:4% }
[data-focal-narrow^="5 "] { --nfx:5% }
[data-focal-narrow^="6 "] { --nfx:6% }
[data-focal-narrow^="7 "] { --nfx:7% }
[data-focal-narrow^="8 "] { --nfx:8% }
[data-focal-narrow^="9 "] { --nfx:9% }
[data-focal-narrow^="10 "] { --nfx:10% }
[data-focal-narrow^="11 "] { --nfx:11% }
[data-focal-narrow^="12 "] { --nfx:12% }
[data-focal-narrow^="13 "] { --nfx:13% }
[data-focal-narrow^="14 "] { --nfx:14% }
[data-focal-narrow^="15 "] { --nfx:15% }
[data-focal-narrow^="16 "] { --nfx:16% }
[data-focal-narrow^="17 "] { --nfx:17% }
[data-focal-narrow^="18 "] { --nfx:18% }
[data-focal-narrow^="19 "] { --nfx:19% }
[data-focal-narrow^="20 "] { --nfx:20% }
[data-focal-narrow^="21 "] { --nfx:21% }
[data-focal-narrow^="22 "] { --nfx:22% }
[data-focal-narrow^="23 "] { --nfx:23% }
[data-focal-narrow^="24 "] { --nfx:24% }
[data-focal-narrow^="25 "] { --nfx:25% }
[data-focal-narrow^="26 "] { --nfx:26% }
[data-focal-narrow^="27 "] { --nfx:27% }
[data-focal-narrow^="28 "] { --nfx:28% }
[data-focal-narrow^="29 "] { --nfx:29% }
[data-focal-narrow^="30 "] { --nfx:30% }
[data-focal-narrow^="31 "] { --nfx:31% }
[data-focal-narrow^="32 "] { --nfx:32% }
[data-focal-narrow^="33 "] { --nfx:33% }
[data-focal-narrow^="34 "] { --nfx:34% }
[data-focal-narrow^="35 "] { --nfx:35% }
[data-focal-narrow^="36 "] { --nfx:36% }
[data-focal-narrow^="37 "] { --nfx:37% }
[data-focal-narrow^="38 "] { --nfx:38% }
[data-focal-narrow^="39 "] { --nfx:39% }
[data-focal-narrow^="40 "] { --nfx:40% }
[data-focal-narrow^="41 "] { --nfx:41% }
[data-focal-narrow^="42 "] { --nfx:42% }
[data-focal-narrow^="43 "] { --nfx:43% }
[data-focal-narrow^="44 "] { --nfx:44% }
[data-focal-narrow^="45 "] { --nfx:45% }
[data-focal-narrow^="46 "] { --nfx:46% }
[data-focal-narrow^="47 "] { --nfx:47% }
[data-focal-narrow^="48 "] { --nfx:48% }
[data-focal-narrow^="49 "] { --nfx:49% }
[data-focal-narrow^="50 "] { --nfx:50% }
[data-focal-narrow^="51 "] { --nfx:51% }
[data-focal-narrow^="52 "] { --nfx:52% }
[data-focal-narrow^="53 "] { --nfx:53% }
[data-focal-narrow^="54 "] { --nfx:54% }
[data-focal-narrow^="55 "] { --nfx:55% }
[data-focal-narrow^="56 "] { --nfx:56% }
[data-focal-narrow^="57 "] { --nfx:57% }
[data-focal-narrow^="58 "] { --nfx:58% }
[data-focal-narrow^="59 "] { --nfx:59% }
[data-focal-narrow^="60 "] { --nfx:60% }
[data-focal-narrow^="61 "] { --nfx:61% }
[data-focal-narrow^="62 "] { --nfx:62% }
[data-focal-narrow^="63 "] { --nfx:63% }
[data-focal-narrow^="64 "] { --nfx:64% }
[data-focal-narrow^="65 "] { --nfx:65% }
[data-focal-narrow^="66 "] { --nfx:66% }
[data-focal-narrow^="67 "] { --nfx:67% }
[data-focal-narrow^="68 "] { --nfx:68% }
[data-focal-narrow^="69 "] { --nfx:69% }
[data-focal-narrow^="70 "] { --nfx:70% }
[data-focal-narrow^="71 "] { --nfx:71% }
[data-focal-narrow^="72 "] { --nfx:72% }
[data-focal-narrow^="73 "] { --nfx:73% }
[data-focal-narrow^="74 "] { --nfx:74% }
[data-focal-narrow^="75 "] { --nfx:75% }
[data-focal-narrow^="76 "] { --nfx:76% }
[data-focal-narrow^="77 "] { --nfx:77% }
[data-focal-narrow^="78 "] { --nfx:78% }
[data-focal-narrow^="79 "] { --nfx:79% }
[data-focal-narrow^="80 "] { --nfx:80% }
[data-focal-narrow^="81 "] { --nfx:81% }
[data-focal-narrow^="82 "] { --nfx:82% }
[data-focal-narrow^="83 "] { --nfx:83% }
[data-focal-narrow^="84 "] { --nfx:84% }
[data-focal-narrow^="85 "] { --nfx:85% }
[data-focal-narrow^="86 "] { --nfx:86% }
[data-focal-narrow^="87 "] { --nfx:87% }
[data-focal-narrow^="88 "] { --nfx:88% }
[data-focal-narrow^="89 "] { --nfx:89% }
[data-focal-narrow^="90 "] { --nfx:90% }
[data-focal-narrow^="91 "] { --nfx:91% }
[data-focal-narrow^="92 "] { --nfx:92% }
[data-focal-narrow^="93 "] { --nfx:93% }
[data-focal-narrow^="94 "] { --nfx:94% }
[data-focal-narrow^="95 "] { --nfx:95% }
[data-focal-narrow^="96 "] { --nfx:96% }
[data-focal-narrow^="97 "] { --nfx:97% }
[data-focal-narrow^="98 "] { --nfx:98% }
[data-focal-narrow^="99 "] { --nfx:99% }
[data-focal-narrow^="100 "] { --nfx:100% }
[data-focal-narrow$=" 0"] { --nfy:0% }
[data-focal-narrow$=" 1"] { --nfy:1% }
[data-focal-narrow$=" 2"] { --nfy:2% }
[data-focal-narrow$=" 3"] { --nfy:3% }
[data-focal-narrow$=" 4"] { --nfy:4% }
[data-focal-narrow$=" 5"] { --nfy:5% }
[data-focal-narrow$=" 6"] { --nfy:6% }
[data-focal-narrow$=" 7"] { --nfy:7% }
[data-focal-narrow$=" 8"] { --nfy:8% }
[data-focal-narrow$=" 9"] { --nfy:9% }
[data-focal-narrow$=" 10"] { --nfy:10% }
[data-focal-narrow$=" 11"] { --nfy:11% }
[data-focal-narrow$=" 12"] { --nfy:12% }
[data-focal-narrow$=" 13"] { --nfy:13% }
[data-focal-narrow$=" 14"] { --nfy:14% }
[data-focal-narrow$=" 15"] { --nfy:15% }
[data-focal-narrow$=" 16"] { --nfy:16% }
[data-focal-narrow$=" 17"] { --nfy:17% }
[data-focal-narrow$=" 18"] { --nfy:18% }
[data-focal-narrow$=" 19"] { --nfy:19% }
[data-focal-narrow$=" 20"] { --nfy:20% }
[data-focal-narrow$=" 21"] { --nfy:21% }
[data-focal-narrow$=" 22"] { --nfy:22% }
[data-focal-narrow$=" 23"] { --nfy:23% }
[data-focal-narrow$=" 24"] { --nfy:24% }
[data-focal-narrow$=" 25"] { --nfy:25% }
[data-focal-narrow$=" 26"] { --nfy:26% }
[data-focal-narrow$=" 27"] { --nfy:27% }
[data-focal-narrow$=" 28"] { --nfy:28% }
[data-focal-narrow$=" 29"] { --nfy:29% }
[data-focal-narrow$=" 30"] { --nfy:30% }
[data-focal-narrow$=" 31"] { --nfy:31% }
[data-focal-narrow$=" 32"] { --nfy:32% }
[data-focal-narrow$=" 33"] { --nfy:33% }
[data-focal-narrow$=" 34"] { --nfy:34% }
[data-focal-narrow$=" 35"] { --nfy:35% }
[data-focal-narrow$=" 36"] { --nfy:36% }
[data-focal-narrow$=" 37"] { --nfy:37% }
[data-focal-narrow$=" 38"] { --nfy:38% }
[data-focal-narrow$=" 39"] { --nfy:39% }
[data-focal-narrow$=" 40"] { --nfy:40% }
[data-focal-narrow$=" 41"] { --nfy:41% }
[data-focal-narrow$=" 42"] { --nfy:42% }
[data-focal-narrow$=" 43"] { --nfy:43% }
[data-focal-narrow$=" 44"] { --nfy:44% }
[data-focal-narrow$=" 45"] { --nfy:45% }
[data-focal-narrow$=" 46"] { --nfy:46% }
[data-focal-narrow$=" 47"] { --nfy:47% }
[data-focal-narrow$=" 48"] { --nfy:48% }
[data-focal-narrow$=" 49"] { --nfy:49% }
[data-focal-narrow$=" 50"] { --nfy:50% }
[data-focal-narrow$=" 51"] { --nfy:51% }
[data-focal-narrow$=" 52"] { --nfy:52% }
[data-focal-narrow$=" 53"] { --nfy:53% }
[data-focal-narrow$=" 54"] { --nfy:54% }
[data-focal-narrow$=" 55"] { --nfy:55% }
[data-focal-narrow$=" 56"] { --nfy:56% }
[data-focal-narrow$=" 57"] { --nfy:57% }
[data-focal-narrow$=" 58"] { --nfy:58% }
[data-focal-narrow$=" 59"] { --nfy:59% }
[data-focal-narrow$=" 60"] { --nfy:60% }
[data-focal-narrow$=" 61"] { --nfy:61% }
[data-focal-narrow$=" 62"] { --nfy:62% }
[data-focal-narrow$=" 63"] { --nfy:63% }
[data-focal-narrow$=" 64"] { --nfy:64% }
[data-focal-narrow$=" 65"] { --nfy:65% }
[data-focal-narrow$=" 66"] { --nfy:66% }
[data-focal-narrow$=" 67"] { --nfy:67% }
[data-focal-narrow$=" 68"] { --nfy:68% }
[data-focal-narrow$=" 69"] { --nfy:69% }
[data-focal-narrow$=" 70"] { --nfy:70% }
[data-focal-narrow$=" 71"] { --nfy:71% }
[data-focal-narrow$=" 72"] { --nfy:72% }
[data-focal-narrow$=" 73"] { --nfy:73% }
[data-focal-narrow$=" 74"] { --nfy:74% }
[data-focal-narrow$=" 75"] { --nfy:75% }
[data-focal-narrow$=" 76"] { --nfy:76% }
[data-focal-narrow$=" 77"] { --nfy:77% }
[data-focal-narrow$=" 78"] { --nfy:78% }
[data-focal-narrow$=" 79"] { --nfy:79% }
[data-focal-narrow$=" 80"] { --nfy:80% }
[data-focal-narrow$=" 81"] { --nfy:81% }
[data-focal-narrow$=" 82"] { --nfy:82% }
[data-focal-narrow$=" 83"] { --nfy:83% }
[data-focal-narrow$=" 84"] { --nfy:84% }
[data-focal-narrow$=" 85"] { --nfy:85% }
[data-focal-narrow$=" 86"] { --nfy:86% }
[data-focal-narrow$=" 87"] { --nfy:87% }
[data-focal-narrow$=" 88"] { --nfy:88% }
[data-focal-narrow$=" 89"] { --nfy:89% }
[data-focal-narrow$=" 90"] { --nfy:90% }
[data-focal-narrow$=" 91"] { --nfy:91% }
[data-focal-narrow$=" 92"] { --nfy:92% }
[data-focal-narrow$=" 93"] { --nfy:93% }
[data-focal-narrow$=" 94"] { --nfy:94% }
[data-focal-narrow$=" 95"] { --nfy:95% }
[data-focal-narrow$=" 96"] { --nfy:96% }
[data-focal-narrow$=" 97"] { --nfy:97% }
[data-focal-narrow$=" 98"] { --nfy:98% }
[data-focal-narrow$=" 99"] { --nfy:99% }
[data-focal-narrow$=" 100"] { --nfy:100% }
[data-point^="0 "] { --px:0% }
[data-point^="1 "] { --px:1% }
[data-point^="2 "] { --px:2% }
[data-point^="3 "] { --px:3% }
[data-point^="4 "] { --px:4% }
[data-point^="5 "] { --px:5% }
[data-point^="6 "] { --px:6% }
[data-point^="7 "] { --px:7% }
[data-point^="8 "] { --px:8% }
[data-point^="9 "] { --px:9% }
[data-point^="10 "] { --px:10% }
[data-point^="11 "] { --px:11% }
[data-point^="12 "] { --px:12% }
[data-point^="13 "] { --px:13% }
[data-point^="14 "] { --px:14% }
[data-point^="15 "] { --px:15% }
[data-point^="16 "] { --px:16% }
[data-point^="17 "] { --px:17% }
[data-point^="18 "] { --px:18% }
[data-point^="19 "] { --px:19% }
[data-point^="20 "] { --px:20% }
[data-point^="21 "] { --px:21% }
[data-point^="22 "] { --px:22% }
[data-point^="23 "] { --px:23% }
[data-point^="24 "] { --px:24% }
[data-point^="25 "] { --px:25% }
[data-point^="26 "] { --px:26% }
[data-point^="27 "] { --px:27% }
[data-point^="28 "] { --px:28% }
[data-point^="29 "] { --px:29% }
[data-point^="30 "] { --px:30% }
[data-point^="31 "] { --px:31% }
[data-point^="32 "] { --px:32% }
[data-point^="33 "] { --px:33% }
[data-point^="34 "] { --px:34% }
[data-point^="35 "] { --px:35% }
[data-point^="36 "] { --px:36% }
[data-point^="37 "] { --px:37% }
[data-point^="38 "] { --px:38% }
[data-point^="39 "] { --px:39% }
[data-point^="40 "] { --px:40% }
[data-point^="41 "] { --px:41% }
[data-point^="42 "] { --px:42% }
[data-point^="43 "] { --px:43% }
[data-point^="44 "] { --px:44% }
[data-point^="45 "] { --px:45% }
[data-point^="46 "] { --px:46% }
[data-point^="47 "] { --px:47% }
[data-point^="48 "] { --px:48% }
[data-point^="49 "] { --px:49% }
[data-point^="50 "] { --px:50% }
[data-point^="51 "] { --px:51% }
[data-point^="52 "] { --px:52% }
[data-point^="53 "] { --px:53% }
[data-point^="54 "] { --px:54% }
[data-point^="55 "] { --px:55% }
[data-point^="56 "] { --px:56% }
[data-point^="57 "] { --px:57% }
[data-point^="58 "] { --px:58% }
[data-point^="59 "] { --px:59% }
[data-point^="60 "] { --px:60% }
[data-point^="61 "] { --px:61% }
[data-point^="62 "] { --px:62% }
[data-point^="63 "] { --px:63% }
[data-point^="64 "] { --px:64% }
[data-point^="65 "] { --px:65% }
[data-point^="66 "] { --px:66% }
[data-point^="67 "] { --px:67% }
[data-point^="68 "] { --px:68% }
[data-point^="69 "] { --px:69% }
[data-point^="70 "] { --px:70% }
[data-point^="71 "] { --px:71% }
[data-point^="72 "] { --px:72% }
[data-point^="73 "] { --px:73% }
[data-point^="74 "] { --px:74% }
[data-point^="75 "] { --px:75% }
[data-point^="76 "] { --px:76% }
[data-point^="77 "] { --px:77% }
[data-point^="78 "] { --px:78% }
[data-point^="79 "] { --px:79% }
[data-point^="80 "] { --px:80% }
[data-point^="81 "] { --px:81% }
[data-point^="82 "] { --px:82% }
[data-point^="83 "] { --px:83% }
[data-point^="84 "] { --px:84% }
[data-point^="85 "] { --px:85% }
[data-point^="86 "] { --px:86% }
[data-point^="87 "] { --px:87% }
[data-point^="88 "] { --px:88% }
[data-point^="89 "] { --px:89% }
[data-point^="90 "] { --px:90% }
[data-point^="91 "] { --px:91% }
[data-point^="92 "] { --px:92% }
[data-point^="93 "] { --px:93% }
[data-point^="94 "] { --px:94% }
[data-point^="95 "] { --px:95% }
[data-point^="96 "] { --px:96% }
[data-point^="97 "] { --px:97% }
[data-point^="98 "] { --px:98% }
[data-point^="99 "] { --px:99% }
[data-point^="100 "] { --px:100% }
[data-point$=" 0"] { --py:0% }
[data-point$=" 1"] { --py:1% }
[data-point$=" 2"] { --py:2% }
[data-point$=" 3"] { --py:3% }
[data-point$=" 4"] { --py:4% }
[data-point$=" 5"] { --py:5% }
[data-point$=" 6"] { --py:6% }
[data-point$=" 7"] { --py:7% }
[data-point$=" 8"] { --py:8% }
[data-point$=" 9"] { --py:9% }
[data-point$=" 10"] { --py:10% }
[data-point$=" 11"] { --py:11% }
[data-point$=" 12"] { --py:12% }
[data-point$=" 13"] { --py:13% }
[data-point$=" 14"] { --py:14% }
[data-point$=" 15"] { --py:15% }
[data-point$=" 16"] { --py:16% }
[data-point$=" 17"] { --py:17% }
[data-point$=" 18"] { --py:18% }
[data-point$=" 19"] { --py:19% }
[data-point$=" 20"] { --py:20% }
[data-point$=" 21"] { --py:21% }
[data-point$=" 22"] { --py:22% }
[data-point$=" 23"] { --py:23% }
[data-point$=" 24"] { --py:24% }
[data-point$=" 25"] { --py:25% }
[data-point$=" 26"] { --py:26% }
[data-point$=" 27"] { --py:27% }
[data-point$=" 28"] { --py:28% }
[data-point$=" 29"] { --py:29% }
[data-point$=" 30"] { --py:30% }
[data-point$=" 31"] { --py:31% }
[data-point$=" 32"] { --py:32% }
[data-point$=" 33"] { --py:33% }
[data-point$=" 34"] { --py:34% }
[data-point$=" 35"] { --py:35% }
[data-point$=" 36"] { --py:36% }
[data-point$=" 37"] { --py:37% }
[data-point$=" 38"] { --py:38% }
[data-point$=" 39"] { --py:39% }
[data-point$=" 40"] { --py:40% }
[data-point$=" 41"] { --py:41% }
[data-point$=" 42"] { --py:42% }
[data-point$=" 43"] { --py:43% }
[data-point$=" 44"] { --py:44% }
[data-point$=" 45"] { --py:45% }
[data-point$=" 46"] { --py:46% }
[data-point$=" 47"] { --py:47% }
[data-point$=" 48"] { --py:48% }
[data-point$=" 49"] { --py:49% }
[data-point$=" 50"] { --py:50% }
[data-point$=" 51"] { --py:51% }
[data-point$=" 52"] { --py:52% }
[data-point$=" 53"] { --py:53% }
[data-point$=" 54"] { --py:54% }
[data-point$=" 55"] { --py:55% }
[data-point$=" 56"] { --py:56% }
[data-point$=" 57"] { --py:57% }
[data-point$=" 58"] { --py:58% }
[data-point$=" 59"] { --py:59% }
[data-point$=" 60"] { --py:60% }
[data-point$=" 61"] { --py:61% }
[data-point$=" 62"] { --py:62% }
[data-point$=" 63"] { --py:63% }
[data-point$=" 64"] { --py:64% }
[data-point$=" 65"] { --py:65% }
[data-point$=" 66"] { --py:66% }
[data-point$=" 67"] { --py:67% }
[data-point$=" 68"] { --py:68% }
[data-point$=" 69"] { --py:69% }
[data-point$=" 70"] { --py:70% }
[data-point$=" 71"] { --py:71% }
[data-point$=" 72"] { --py:72% }
[data-point$=" 73"] { --py:73% }
[data-point$=" 74"] { --py:74% }
[data-point$=" 75"] { --py:75% }
[data-point$=" 76"] { --py:76% }
[data-point$=" 77"] { --py:77% }
[data-point$=" 78"] { --py:78% }
[data-point$=" 79"] { --py:79% }
[data-point$=" 80"] { --py:80% }
[data-point$=" 81"] { --py:81% }
[data-point$=" 82"] { --py:82% }
[data-point$=" 83"] { --py:83% }
[data-point$=" 84"] { --py:84% }
[data-point$=" 85"] { --py:85% }
[data-point$=" 86"] { --py:86% }
[data-point$=" 87"] { --py:87% }
[data-point$=" 88"] { --py:88% }
[data-point$=" 89"] { --py:89% }
[data-point$=" 90"] { --py:90% }
[data-point$=" 91"] { --py:91% }
[data-point$=" 92"] { --py:92% }
[data-point$=" 93"] { --py:93% }
[data-point$=" 94"] { --py:94% }
[data-point$=" 95"] { --py:95% }
[data-point$=" 96"] { --py:96% }
[data-point$=" 97"] { --py:97% }
[data-point$=" 98"] { --py:98% }
[data-point$=" 99"] { --py:99% }
[data-point$=" 100"] { --py:100% }
[data-point-narrow^="0 "] { --pnx:0% }
[data-point-narrow^="1 "] { --pnx:1% }
[data-point-narrow^="2 "] { --pnx:2% }
[data-point-narrow^="3 "] { --pnx:3% }
[data-point-narrow^="4 "] { --pnx:4% }
[data-point-narrow^="5 "] { --pnx:5% }
[data-point-narrow^="6 "] { --pnx:6% }
[data-point-narrow^="7 "] { --pnx:7% }
[data-point-narrow^="8 "] { --pnx:8% }
[data-point-narrow^="9 "] { --pnx:9% }
[data-point-narrow^="10 "] { --pnx:10% }
[data-point-narrow^="11 "] { --pnx:11% }
[data-point-narrow^="12 "] { --pnx:12% }
[data-point-narrow^="13 "] { --pnx:13% }
[data-point-narrow^="14 "] { --pnx:14% }
[data-point-narrow^="15 "] { --pnx:15% }
[data-point-narrow^="16 "] { --pnx:16% }
[data-point-narrow^="17 "] { --pnx:17% }
[data-point-narrow^="18 "] { --pnx:18% }
[data-point-narrow^="19 "] { --pnx:19% }
[data-point-narrow^="20 "] { --pnx:20% }
[data-point-narrow^="21 "] { --pnx:21% }
[data-point-narrow^="22 "] { --pnx:22% }
[data-point-narrow^="23 "] { --pnx:23% }
[data-point-narrow^="24 "] { --pnx:24% }
[data-point-narrow^="25 "] { --pnx:25% }
[data-point-narrow^="26 "] { --pnx:26% }
[data-point-narrow^="27 "] { --pnx:27% }
[data-point-narrow^="28 "] { --pnx:28% }
[data-point-narrow^="29 "] { --pnx:29% }
[data-point-narrow^="30 "] { --pnx:30% }
[data-point-narrow^="31 "] { --pnx:31% }
[data-point-narrow^="32 "] { --pnx:32% }
[data-point-narrow^="33 "] { --pnx:33% }
[data-point-narrow^="34 "] { --pnx:34% }
[data-point-narrow^="35 "] { --pnx:35% }
[data-point-narrow^="36 "] { --pnx:36% }
[data-point-narrow^="37 "] { --pnx:37% }
[data-point-narrow^="38 "] { --pnx:38% }
[data-point-narrow^="39 "] { --pnx:39% }
[data-point-narrow^="40 "] { --pnx:40% }
[data-point-narrow^="41 "] { --pnx:41% }
[data-point-narrow^="42 "] { --pnx:42% }
[data-point-narrow^="43 "] { --pnx:43% }
[data-point-narrow^="44 "] { --pnx:44% }
[data-point-narrow^="45 "] { --pnx:45% }
[data-point-narrow^="46 "] { --pnx:46% }
[data-point-narrow^="47 "] { --pnx:47% }
[data-point-narrow^="48 "] { --pnx:48% }
[data-point-narrow^="49 "] { --pnx:49% }
[data-point-narrow^="50 "] { --pnx:50% }
[data-point-narrow^="51 "] { --pnx:51% }
[data-point-narrow^="52 "] { --pnx:52% }
[data-point-narrow^="53 "] { --pnx:53% }
[data-point-narrow^="54 "] { --pnx:54% }
[data-point-narrow^="55 "] { --pnx:55% }
[data-point-narrow^="56 "] { --pnx:56% }
[data-point-narrow^="57 "] { --pnx:57% }
[data-point-narrow^="58 "] { --pnx:58% }
[data-point-narrow^="59 "] { --pnx:59% }
[data-point-narrow^="60 "] { --pnx:60% }
[data-point-narrow^="61 "] { --pnx:61% }
[data-point-narrow^="62 "] { --pnx:62% }
[data-point-narrow^="63 "] { --pnx:63% }
[data-point-narrow^="64 "] { --pnx:64% }
[data-point-narrow^="65 "] { --pnx:65% }
[data-point-narrow^="66 "] { --pnx:66% }
[data-point-narrow^="67 "] { --pnx:67% }
[data-point-narrow^="68 "] { --pnx:68% }
[data-point-narrow^="69 "] { --pnx:69% }
[data-point-narrow^="70 "] { --pnx:70% }
[data-point-narrow^="71 "] { --pnx:71% }
[data-point-narrow^="72 "] { --pnx:72% }
[data-point-narrow^="73 "] { --pnx:73% }
[data-point-narrow^="74 "] { --pnx:74% }
[data-point-narrow^="75 "] { --pnx:75% }
[data-point-narrow^="76 "] { --pnx:76% }
[data-point-narrow^="77 "] { --pnx:77% }
[data-point-narrow^="78 "] { --pnx:78% }
[data-point-narrow^="79 "] { --pnx:79% }
[data-point-narrow^="80 "] { --pnx:80% }
[data-point-narrow^="81 "] { --pnx:81% }
[data-point-narrow^="82 "] { --pnx:82% }
[data-point-narrow^="83 "] { --pnx:83% }
[data-point-narrow^="84 "] { --pnx:84% }
[data-point-narrow^="85 "] { --pnx:85% }
[data-point-narrow^="86 "] { --pnx:86% }
[data-point-narrow^="87 "] { --pnx:87% }
[data-point-narrow^="88 "] { --pnx:88% }
[data-point-narrow^="89 "] { --pnx:89% }
[data-point-narrow^="90 "] { --pnx:90% }
[data-point-narrow^="91 "] { --pnx:91% }
[data-point-narrow^="92 "] { --pnx:92% }
[data-point-narrow^="93 "] { --pnx:93% }
[data-point-narrow^="94 "] { --pnx:94% }
[data-point-narrow^="95 "] { --pnx:95% }
[data-point-narrow^="96 "] { --pnx:96% }
[data-point-narrow^="97 "] { --pnx:97% }
[data-point-narrow^="98 "] { --pnx:98% }
[data-point-narrow^="99 "] { --pnx:99% }
[data-point-narrow^="100 "] { --pnx:100% }
[data-point-narrow$=" 0"] { --pny:0% }
[data-point-narrow$=" 1"] { --pny:1% }
[data-point-narrow$=" 2"] { --pny:2% }
[data-point-narrow$=" 3"] { --pny:3% }
[data-point-narrow$=" 4"] { --pny:4% }
[data-point-narrow$=" 5"] { --pny:5% }
[data-point-narrow$=" 6"] { --pny:6% }
[data-point-narrow$=" 7"] { --pny:7% }
[data-point-narrow$=" 8"] { --pny:8% }
[data-point-narrow$=" 9"] { --pny:9% }
[data-point-narrow$=" 10"] { --pny:10% }
[data-point-narrow$=" 11"] { --pny:11% }
[data-point-narrow$=" 12"] { --pny:12% }
[data-point-narrow$=" 13"] { --pny:13% }
[data-point-narrow$=" 14"] { --pny:14% }
[data-point-narrow$=" 15"] { --pny:15% }
[data-point-narrow$=" 16"] { --pny:16% }
[data-point-narrow$=" 17"] { --pny:17% }
[data-point-narrow$=" 18"] { --pny:18% }
[data-point-narrow$=" 19"] { --pny:19% }
[data-point-narrow$=" 20"] { --pny:20% }
[data-point-narrow$=" 21"] { --pny:21% }
[data-point-narrow$=" 22"] { --pny:22% }
[data-point-narrow$=" 23"] { --pny:23% }
[data-point-narrow$=" 24"] { --pny:24% }
[data-point-narrow$=" 25"] { --pny:25% }
[data-point-narrow$=" 26"] { --pny:26% }
[data-point-narrow$=" 27"] { --pny:27% }
[data-point-narrow$=" 28"] { --pny:28% }
[data-point-narrow$=" 29"] { --pny:29% }
[data-point-narrow$=" 30"] { --pny:30% }
[data-point-narrow$=" 31"] { --pny:31% }
[data-point-narrow$=" 32"] { --pny:32% }
[data-point-narrow$=" 33"] { --pny:33% }
[data-point-narrow$=" 34"] { --pny:34% }
[data-point-narrow$=" 35"] { --pny:35% }
[data-point-narrow$=" 36"] { --pny:36% }
[data-point-narrow$=" 37"] { --pny:37% }
[data-point-narrow$=" 38"] { --pny:38% }
[data-point-narrow$=" 39"] { --pny:39% }
[data-point-narrow$=" 40"] { --pny:40% }
[data-point-narrow$=" 41"] { --pny:41% }
[data-point-narrow$=" 42"] { --pny:42% }
[data-point-narrow$=" 43"] { --pny:43% }
[data-point-narrow$=" 44"] { --pny:44% }
[data-point-narrow$=" 45"] { --pny:45% }
[data-point-narrow$=" 46"] { --pny:46% }
[data-point-narrow$=" 47"] { --pny:47% }
[data-point-narrow$=" 48"] { --pny:48% }
[data-point-narrow$=" 49"] { --pny:49% }
[data-point-narrow$=" 50"] { --pny:50% }
[data-point-narrow$=" 51"] { --pny:51% }
[data-point-narrow$=" 52"] { --pny:52% }
[data-point-narrow$=" 53"] { --pny:53% }
[data-point-narrow$=" 54"] { --pny:54% }
[data-point-narrow$=" 55"] { --pny:55% }
[data-point-narrow$=" 56"] { --pny:56% }
[data-point-narrow$=" 57"] { --pny:57% }
[data-point-narrow$=" 58"] { --pny:58% }
[data-point-narrow$=" 59"] { --pny:59% }
[data-point-narrow$=" 60"] { --pny:60% }
[data-point-narrow$=" 61"] { --pny:61% }
[data-point-narrow$=" 62"] { --pny:62% }
[data-point-narrow$=" 63"] { --pny:63% }
[data-point-narrow$=" 64"] { --pny:64% }
[data-point-narrow$=" 65"] { --pny:65% }
[data-point-narrow$=" 66"] { --pny:66% }
[data-point-narrow$=" 67"] { --pny:67% }
[data-point-narrow$=" 68"] { --pny:68% }
[data-point-narrow$=" 69"] { --pny:69% }
[data-point-narrow$=" 70"] { --pny:70% }
[data-point-narrow$=" 71"] { --pny:71% }
[data-point-narrow$=" 72"] { --pny:72% }
[data-point-narrow$=" 73"] { --pny:73% }
[data-point-narrow$=" 74"] { --pny:74% }
[data-point-narrow$=" 75"] { --pny:75% }
[data-point-narrow$=" 76"] { --pny:76% }
[data-point-narrow$=" 77"] { --pny:77% }
[data-point-narrow$=" 78"] { --pny:78% }
[data-point-narrow$=" 79"] { --pny:79% }
[data-point-narrow$=" 80"] { --pny:80% }
[data-point-narrow$=" 81"] { --pny:81% }
[data-point-narrow$=" 82"] { --pny:82% }
[data-point-narrow$=" 83"] { --pny:83% }
[data-point-narrow$=" 84"] { --pny:84% }
[data-point-narrow$=" 85"] { --pny:85% }
[data-point-narrow$=" 86"] { --pny:86% }
[data-point-narrow$=" 87"] { --pny:87% }
[data-point-narrow$=" 88"] { --pny:88% }
[data-point-narrow$=" 89"] { --pny:89% }
[data-point-narrow$=" 90"] { --pny:90% }
[data-point-narrow$=" 91"] { --pny:91% }
[data-point-narrow$=" 92"] { --pny:92% }
[data-point-narrow$=" 93"] { --pny:93% }
[data-point-narrow$=" 94"] { --pny:94% }
[data-point-narrow$=" 95"] { --pny:95% }
[data-point-narrow$=" 96"] { --pny:96% }
[data-point-narrow$=" 97"] { --pny:97% }
[data-point-narrow$=" 98"] { --pny:98% }
[data-point-narrow$=" 99"] { --pny:99% }
[data-point-narrow$=" 100"] { --pny:100% }
.cinehero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgb(var(--cinehero-scrim) / var(--ch-flat)), rgb(var(--cinehero-scrim) / var(--ch-flat))), var(--ch-scrim-v, linear-gradient(to top, rgb(var(--cinehero-scrim) / calc(.9 * var(--ch-a))) 0%, rgb(var(--cinehero-scrim) / calc(.64 * var(--ch-a))) 34%, rgb(var(--cinehero-scrim) / calc(.22 * var(--ch-a))) 62%, rgb(var(--cinehero-scrim) / 0) 100%)), var(--ch-scrim-h, linear-gradient(100deg, rgb(var(--cinehero-scrim) / calc(.58 * var(--ch-a))) 0%, rgb(var(--cinehero-scrim) / calc(.22 * var(--ch-a))) 45%, rgb(var(--cinehero-scrim) / 0) 75%)); }
.cinehero[data-position^="top"] { --ch-scrim-v: linear-gradient(to bottom, rgb(var(--cinehero-scrim) / calc(.9 * var(--ch-a))) 0%, rgb(var(--cinehero-scrim) / calc(.64 * var(--ch-a))) 34%, rgb(var(--cinehero-scrim) / calc(.22 * var(--ch-a))) 62%, rgb(var(--cinehero-scrim) / 0) 100%); }
.cinehero[data-position^="middle"] { --ch-scrim-v: linear-gradient(to top, rgb(var(--cinehero-scrim) / calc(.55 * var(--ch-a))), rgb(var(--cinehero-scrim) / calc(.35 * var(--ch-a))) 50%, rgb(var(--cinehero-scrim) / calc(.55 * var(--ch-a)))); }
.cinehero[data-position$="end"] { --ch-scrim-h: linear-gradient(260deg, rgb(var(--cinehero-scrim) / calc(.58 * var(--ch-a))) 0%, rgb(var(--cinehero-scrim) / calc(.22 * var(--ch-a))) 45%, rgb(var(--cinehero-scrim) / 0) 75%); }
.cinehero[data-position$="center"] { --ch-scrim-h: linear-gradient(90deg, rgb(var(--cinehero-scrim) / 0) 0%, rgb(var(--cinehero-scrim) / calc(.4 * var(--ch-a))) 50%, rgb(var(--cinehero-scrim) / 0) 100%); }
.cinehero__copy { position: relative; z-index: 1; min-width: 0; align-self: var(--ch-y); justify-self: var(--ch-x); text-align: var(--ch-align); width: min(100%, var(--cinehero-copy-w)); padding: clamp(1.25rem, 4cqi, 4rem); padding-bottom: calc(clamp(4.5rem, 7cqi, 6rem) + var(--ch-safe-bottom)); }
.cinehero__copy > * { position: relative; z-index: 1; }
.cinehero__eyebrow { display: flex; align-items: center; justify-content: var(--ch-x); gap: .6em; margin: 0 0 .9rem; font-size: var(--text-xs, .75rem); font-weight: var(--weight-semibold, 600); letter-spacing: var(--eyebrow-tracking, .16em); text-transform: uppercase; color: var(--cinehero-text); opacity: .92; }
.cinehero__eyebrow::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--cinehero-accent); box-shadow: 0 0 0 3px rgb(255 255 255 / .2); }
.cinehero__title { margin: 0 0 .9rem; overflow-wrap: anywhere; font-family: var(--font-display, var(--font-body, Georgia, serif)); font-weight: var(--display-weight, 700); letter-spacing: var(--display-tracking, -.02em); text-transform: var(--display-transform, none); font-size: clamp(2rem, 1rem + 4.2cqi, 4.5rem); line-height: 1.04; color: var(--cinehero-text); text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.cinehero__line { display: block; position: relative; }
.cinehero__text { margin: 0 0 1.4rem; max-width: 54ch; font-size: clamp(1rem, .92rem + .5cqi, 1.2rem); line-height: 1.5; color: var(--cinehero-text); opacity: .92; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.cinehero[data-position$="center"] .cinehero__text { margin-inline: auto; }
.cinehero[data-position$="end"] .cinehero__text { margin-inline-start: auto; }
.cinehero__cta { display: flex; flex-wrap: wrap; gap: .6rem .75rem; justify-content: var(--ch-x); }
.cinehero__cta .btn:not(.btn--primary) { --btn-bg: rgb(20 16 20 / .3); --btn-fg: var(--cinehero-text); --btn-bd: rgb(255 255 255 / .75); color: var(--cinehero-text); }
.cinehero__cta .btn:not(.btn--primary):is(:hover, :active) { --btn-bg: var(--secondary-hover, #7A2E3B); --btn-fg: var(--on-secondary-hover, #FFFFFF); --btn-bd: var(--secondary-hover, #7A2E3B); color: var(--btn-fg); }
.cinehero__controls { position: absolute; z-index: 5; inset-inline-end: clamp(.75rem, 2cqi, 1.75rem); bottom: calc(.9rem + var(--ch-safe-bottom)); display: flex; align-items: center; gap: .15rem; padding: .2rem; border-radius: var(--radius-pill, 999px); background: rgb(var(--cinehero-chip) / var(--cinehero-chip-alpha)); }
.cinehero[data-position$="end"] .cinehero__controls { inset-inline-end: auto; inset-inline-start: clamp(.75rem, 2cqi, 1.75rem); }
.cinehero:not(.is-ready) .cinehero__controls, .cinehero:not(.is-ready) .cinehero__progress, .cinehero__status:empty { display: none; }
.cinehero__btn { display: inline-grid; place-items: center; width: var(--touch, 2.75rem); height: var(--touch, 2.75rem); padding: 0; margin: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; color: #fff; cursor: pointer; font: inherit; }
.cinehero__btn { transition: background-color var(--duration-fast, 160ms) ease, color var(--duration-fast, 160ms) ease; }
@media (prefers-reduced-motion: reduce) {
.cinehero__btn { transition: none; }
}
.cinehero__btn:is(:hover, :active) { background: var(--secondary-hover, #7A2E3B); color: var(--on-secondary-hover, #FFFFFF); }
.cinehero__btn:focus-visible { outline: var(--focus-width, 3px) solid #fff; outline-offset: -4px; }
.cinehero__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cinehero__btn--play svg { stroke: none; fill: currentColor; }
.cinehero__btn--play .ico-play, .cinehero.is-paused .cinehero__btn--play .ico-pause { display: none; }
.cinehero.is-paused .cinehero__btn--play .ico-play { display: block; }
.cinehero[data-arrows="off"] .cinehero__btn--prev, .cinehero[data-arrows="off"] .cinehero__btn--next, .cinehero.is-single .cinehero__controls { display: none; }
.cinehero__dots { display: flex; gap: .15rem; margin: 0 .2rem; padding: 0; list-style: none; }
.cinehero__dot { display: grid; place-items: center; width: 1.75rem; height: var(--touch, 2.75rem); padding: 0; border: 0; background: transparent; cursor: pointer; }
.cinehero__dot::before { content: ""; width: 100%; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .62); }
.cinehero__dot[aria-current="true"]::before { background: #fff; height: 4px; }
.cinehero__dot:focus-visible { outline: var(--focus-width, 3px) solid #fff; outline-offset: -3px; border-radius: 4px; }
.cinehero__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; background: rgb(255 255 255 / .14); pointer-events: none; }
.cinehero__progress i { position: absolute; inset: 0; background: var(--primary, #b5473f); transform-origin: left center; transform: scaleX(0); }
.cinehero__status, .cinehero .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cinehero__fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; overflow: hidden; }
.cinehero__fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"] { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__media { position: relative; order: 2; min-height: 100%; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__media::after { opacity: .3; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__copy { justify-self: stretch; align-self: stretch; width: auto; display: flex; flex-direction: column; justify-content: var(--ch-y); overflow: hidden; background: var(--cinehero-panel); color: var(--cinehero-panel-text); padding: clamp(1.25rem, 4cqi, 4rem); padding-bottom: calc(clamp(4.5rem, 7cqi, 6rem) + var(--ch-safe-bottom)); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) :is(.cinehero__eyebrow, .cinehero__title, .cinehero__text) { color: var(--cinehero-panel-text); text-shadow: none; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__eyebrow { color: var(--cinehero-accent); opacity: 1; }
.cinehero .accent-word { color: var(--cinehero-accent-text); }
.cinehero[data-eyebrow="accent"] .cinehero__eyebrow { color: var(--cinehero-accent-text); opacity: 1; width: fit-content; padding: .35em .85em; border-radius: var(--radius-pill, 999px); background: rgb(var(--cinehero-scrim) / var(--cinehero-chip-alpha)); }
.cinehero[data-eyebrow="accent"][data-position$="center"] .cinehero__eyebrow { margin-inline: auto; }
.cinehero[data-eyebrow="accent"][data-position$="end"] .cinehero__eyebrow { margin-inline-start: auto; }
:is(.cinehero[data-eyebrow="accent"][data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero[data-eyebrow="accent"] .cinehero__slide[data-style="bigword"]) .cinehero__eyebrow { padding: 0; background: none; }
.cinehero[data-scrim="deep"] .cinehero__copy::before { content: ""; position: absolute; z-index: 0; inset: -3rem; pointer-events: none; background: rgb(var(--cinehero-scrim) / var(--cinehero-deep-alpha)); -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent), linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent), linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-composite: intersect; }
:is(.cinehero[data-scrim="deep"][data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero[data-scrim="deep"] .cinehero__slide[data-style="bigword"]) .cinehero__copy::before { content: none; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .accent-word { color: var(--cinehero-accent); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__eyebrow::before { box-shadow: none; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__text { color: var(--cinehero-panel-muted); opacity: 1; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__title { font-size: clamp(1.1rem, .9rem + 1cqi, 1.5rem); font-weight: var(--weight-semibold, 600); letter-spacing: -.01em; line-height: 1.3; text-transform: none; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__cta .btn:not(.btn--primary) { --btn-bg: transparent; --btn-fg: var(--cinehero-panel-text); --btn-bd: currentColor; color: var(--cinehero-panel-text); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__cta .btn:not(.btn--primary):is(:hover, :active) { --btn-bg: var(--secondary-hover, #7A2E3B); --btn-fg: var(--on-secondary-hover, #FFFFFF); --btn-bd: var(--secondary-hover, #7A2E3B); color: var(--btn-fg); }
.cinehero[data-position$="end"] :is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__media { order: 0; }
.cinehero__big { position: relative; z-index: 1; margin: 0 0 .14em; display: none; font-family: var(--cinehero-big-font, var(--font-display, var(--font-body, Arial, sans-serif))); font-weight: var(--cinehero-big-weight, var(--display-weight, 800)); font-size: clamp(3rem, .6rem + 6.4cqi, 7.2rem); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; color: var(--cinehero-panel-text); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__big, :is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__shape { display: block; }
.cinehero__big .b-face { position: relative; z-index: 2; display: block; }
.cinehero__big .b-ex { position: absolute; inset: 0; z-index: 1; color: var(--cinehero-accent); transform: translate(.08em, .08em); text-shadow: .01em .01em 0 var(--cinehero-accent), .02em .02em 0 var(--cinehero-accent), .03em .03em 0 var(--cinehero-accent), .04em .04em 0 var(--cinehero-accent), .05em .05em 0 var(--cinehero-accent), .06em .06em 0 var(--cinehero-accent), .07em .07em 0 var(--cinehero-accent), .08em .08em 0 var(--cinehero-accent); }
.cinehero__shape { display: none; position: absolute; z-index: 0; top: -6%; right: -14%; width: 62%; max-width: 27rem; aspect-ratio: 1; border-radius: 50%; background: var(--cinehero-accent); opacity: var(--cinehero-shape-opacity, .32); pointer-events: none; }
.cinehero[data-position$="end"] .cinehero__shape { right: auto; left: -14%; }
@container (max-width: 40rem) {
.cinehero > .cinehero__slides { --ch-h: clamp(34rem, 88svh, 45rem); }
.cinehero[data-height="full"] > .cinehero__slides { --ch-h: 100svh; }
.cinehero[data-height="medium"] > .cinehero__slides { --ch-h: clamp(28rem, 72svh, 36rem); }
.cinehero[data-height="short"] > .cinehero__slides { --ch-h: clamp(22rem, 56svh, 28rem); }
.cinehero__copy { width: 100%; }
.cinehero__text { max-width: none; }
.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(11rem, 46fr) minmax(0, 54fr); }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__media { order: 0; min-height: 0; }
:is(.cinehero[data-style="bigword"] > .cinehero__slides > .cinehero__slide:not([data-style]), .cinehero__slide[data-style="bigword"]) .cinehero__copy { justify-content: flex-start; padding-top: 1.5rem; }
.cinehero__shape { width: 46%; top: auto; bottom: -10%; }
}
@keyframes ch-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-fade-out { to { opacity: 0; } }
.cinehero[data-level="calm"] .is-active:not(.no-anim) .cinehero__media { animation: ch-fade-in calc(.5s * var(--ch-spd)) ease both; }
.cinehero[data-level="calm"] .is-active:not(.no-anim) .cinehero__copy { animation: ch-fade-in calc(.5s * var(--ch-spd)) ease calc(.15s * var(--ch-spd)) both; }
.cinehero[data-level="calm"] .is-leaving .cinehero__copy { animation: ch-fade-out calc(.3s * var(--ch-spd)) ease both; }
@media (prefers-reduced-motion: reduce) {
.cinehero[data-level="calm"] .is-active:not(.no-anim) :is(.cinehero__media, .cinehero__copy) { animation-duration: calc(.5s * var(--ch-spd)) !important; }
.cinehero[data-level="calm"] .is-leaving .cinehero__copy { animation-duration: calc(.3s * var(--ch-spd)) !important; }
}
.splithero { --splithero-panel: var(--accent, #9a4f31); --splithero-panel-alpha: .14; --splithero-badge: var(--accent, #9a4f31); --splithero-on-badge: var(--on-accent, #ffffff); --splithero-radius: var(--radius-media, 12px); display: grid; gap: var(--space-8, 2rem); align-items: center; overflow-x: clip; padding-block: var(--space-12, 3rem) var(--space-16, 4rem); padding-inline: max(var(--space-4, 1rem), calc((100% - var(--container, 72rem)) / 2)); background: var(--bg, #f6f1e7); color: var(--text, #1a1820); }
@media (min-width: 48rem) {
.splithero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12, 3rem); }
}
.splithero__copy { display: grid; gap: var(--space-4, 1rem); justify-items: start; min-width: 0; order: 2; }
@media (min-width: 48rem) {
.splithero__copy { order: 0; }
}
.splithero__eyebrow { margin: 0; color: var(--accent-text, var(--accent, #9a4f31)); font-size: var(--text-sm, .875rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.splithero__title { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); line-height: 1.08; overflow-wrap: break-word; }
.splithero__text { margin: 0; max-width: 34rem; color: var(--text-muted, #5d5964); font-size: var(--text-lg, 1.125rem); }
.splithero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.splithero__points { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem) var(--space-6, 1.5rem); margin: var(--space-3, .75rem) 0 0; padding: 0; list-style: none; font-weight: 600; }
.splithero__points li { display: flex; align-items: baseline; gap: var(--space-2, .5rem); min-width: 0; overflow-wrap: anywhere; }
.splithero__points li::before { content: ""; flex: none; width: .4em; height: .75em; margin-inline: .2em .15em; border: solid var(--accent, currentColor); border-width: 0 .16em .16em 0; transform: translateY(-.1em) rotate(45deg); }
.splithero__media { position: relative; min-width: 0; isolation: isolate; }
.splithero__frame { margin: 0; position: relative; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--splithero-radius); background: var(--sunken, #e4dacb); }
.splithero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
@media (max-width: 40rem) {
.splithero__frame[data-focal-narrow] img { object-position: var(--nfx, var(--fx, 50%)) var(--nfy, var(--fy, 50%)); }
}
.splithero__frame[data-focal^="top"] { --fy: 20%; }
.splithero__frame[data-focal^="bottom"] { --fy: 80%; }
.splithero__frame[data-focal$="left"] { --fx: 22%; }
.splithero__frame[data-focal$="right"] { --fx: 78%; }
.splithero__panel { display: none; }
.splithero[data-edge="angled"] .splithero__frame { border-radius: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.splithero:is([data-backdrop="panel"], [data-backdrop="angled-panel"]) .splithero__panel { display: block; position: absolute; z-index: 0; inset: -6% -5% -6% 12%; background: var(--splithero-panel); border-radius: var(--splithero-radius); }
.splithero[data-backdrop="panel"][data-edge="angled"] .splithero__panel { opacity: var(--splithero-panel-alpha); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); border-radius: 0; }
.splithero[data-backdrop="angled-panel"] .splithero__panel { border-radius: 0; inset: -8% -6% -8% 18%; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.splithero[data-frame="round"] .splithero__frame { aspect-ratio: 1; width: min(100%, 30rem); margin-inline: auto; border-radius: 999px; clip-path: none; outline: .6rem solid var(--surface, #fffdf9); outline-offset: 0; }
.splithero[data-frame="round"] .splithero__panel { display: block; position: absolute; z-index: 0; inset: -4%; margin-inline: auto; width: min(108%, 32.4rem); aspect-ratio: 1; border-radius: 999px; clip-path: none; background: radial-gradient(circle at 50% 50%, var(--sunken, #e4dacb) 0 62%, transparent 63%); opacity: 1; }
.splithero__badge { position: relative; z-index: 2; margin: var(--space-4, 1rem) 0 0; display: inline-grid; justify-items: center; align-content: center; gap: .1rem; min-width: 6.5rem; padding: var(--space-3, .75rem) var(--space-4, 1rem); border-radius: 1.25rem; background: var(--splithero-badge); color: var(--splithero-on-badge); box-shadow: var(--shadow-raised, 0 12px 32px rgb(0 0 0 / .18)); text-align: center; }
@media (min-width: 48rem) {
.splithero__badge { position: absolute; margin: 0; top: 4%; right: -2%; }
}
.splithero__badge-rating { font-family: var(--font-display, inherit); font-size: 1.6rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.splithero__star { margin-inline-start: .15em; font-size: .85em; }
.splithero__badge-count { font-size: var(--text-sm, .875rem); font-weight: 600; line-height: 1.25; max-width: 9rem; }
.splithero .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.splithero .accent-word { color: var(--splithero-accent-word, var(--accent, #9a4f31)); }
.splithero__stripes { display: none; }
.splithero[data-stripes][data-edge="angled"] .splithero__stripes { display: block; position: absolute; z-index: 2; top: 0; left: -6%; width: 106%; aspect-ratio: 106 / 75; pointer-events: none; }
.splithero[data-stripes] .splithero__stripes::before, .splithero[data-stripes] .splithero__stripes::after { content: ""; position: absolute; inset: 0; }
.splithero[data-stripes] .splithero__stripes::before { background: var(--splithero-stripe-outer, var(--accent, #9a4f31)); clip-path: polygon(14.34% 0, 15.66% 0, 2.45% 100%, 1.13% 100%); }
.splithero[data-stripes] .splithero__stripes::after { background: var(--splithero-stripe-inner, var(--primary, #2f5245)); clip-path: polygon(16.6% 0, 17.92% 0, 4.72% 100%, 3.4% 100%); }
/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body, var(--font-ui)); font-size: var(--text-md); line-height: var(--leading-normal); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight, 600); letter-spacing: var(--display-tracking, -0.01em); text-transform: var(--display-transform, none); line-height: var(--leading-tight); margin: 0 0 var(--space-4); overflow-wrap: anywhere; text-wrap: balance; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
small { font-size: var(--text-sm); }
code, kbd, samp { overflow-wrap: anywhere; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 50; background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--space-4); }
[hidden] { display: none !important; }
.container { width: min(100% - 2 * var(--space-4), var(--container-wide)); margin-inline: auto; }
.container--text { width: min(100% - 2 * var(--space-4), var(--container-text)); margin-inline: auto; }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
:where(.stack, .stack-sm) > :is(b, small, span:not([class])) { display: block; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
:where(.flow, .flow__main, .notice, .grid, .confirm-hero, .widget__body, .field, .card, .team__card, .quick__item, .stack, .stack-sm, .cluster, .split, .alert, .kv, .compare, .site-footer__grid) > * { min-width: 0; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--eyebrow-tracking, 0.12em); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
.accent-word { color: var(--accent); }
.cms-cta .accent-word { color: inherit; }
.lead { font-size: var(--text-lg); color: var(--text-muted); max-width: 38rem; }
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-2) var(--space-5); border: 1px solid var(--btn-bd); border-radius: var(--radius-control); background: var(--btn-bg); color: var(--btn-fg); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.btn:hover { color: var(--btn-fg); }
.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: var(--primary); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--primary); color: var(--primary); }
.btn--danger { --btn-bg: var(--surface); --btn-fg: var(--danger); --btn-bd: var(--danger); }
.btn--primary:is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--primary-hover); --btn-fg: var(--on-primary-hover); --btn-bd: var(--primary-hover); }
.btn:not(.btn--primary, .btn--accent, .btn--danger):is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--secondary-hover); --btn-fg: var(--on-secondary-hover); --btn-bd: var(--secondary-hover); color: var(--btn-fg); }
.btn--accent:is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: var(--primary); }
.btn--danger:is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--danger); --btn-fg: var(--surface); --btn-bd: var(--danger); }
.btn--sm { min-height: var(--touch); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--pill { border-radius: var(--radius-pill); }
.icon-btn { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.icon-btn:is(:hover, :active):not([disabled]) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__error { font-size: var(--text-sm); color: var(--danger); font-weight: var(--weight-medium); }
.input, .select, .textarea { width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.input-group { display: flex; gap: 0; }
.input-group > .select { width: auto; flex: 0 0 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group > .input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--primary); flex: 0 0 auto; }
.code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 2.75rem)); gap: var(--space-2); }
.code-boxes span { display: grid; place-items: center; height: 3.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.code-boxes span.is-filled { border-color: var(--primary); }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.segmented > * { padding: var(--space-2) var(--space-4); min-height: var(--touch); display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface); border: 0; border-right: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.segmented > *:last-child { border-right: 0; }
.segmented > [aria-pressed="true"], .segmented > .is-on { background: var(--primary); color: var(--on-primary); }
.segmented > :focus-visible { outline-offset: calc(-1 * var(--focus-width) - 2px); }
.segmented > :is([aria-pressed="true"], .is-on):focus-visible { outline-color: var(--on-primary); }
.segmented > :is(a, button) { transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.segmented > :is(a, button):not([aria-pressed="true"], .is-on):is(:hover, :active) { background: var(--secondary-hover); color: var(--on-secondary-hover); }
.segmented > :is(a, button):is([aria-pressed="true"], .is-on):is(:hover, :active) { background: var(--selected-hover); color: var(--on-selected-hover); }
.switch { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); }
.switch__track { width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--border-strong); position: relative; flex: 0 0 auto; }
.switch__track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--surface); transition: transform var(--duration-fast) var(--easing-standard); }
.switch.is-on .switch__track { background: var(--primary); }
.switch.is-on .switch__track::after { transform: translateX(1.25rem); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-card, none); }
.card--flat { box-shadow: none; }
.card--sunken { background: var(--surface-2); box-shadow: none; }
.panel-title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; margin-bottom: var(--space-3); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.list > li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kv .kv__total { font-weight: var(--weight-bold); color: var(--text); font-size: var(--text-lg); }
.avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: var(--weight-semibold); font-size: var(--text-sm); border: 1px solid var(--border); flex: 0 0 auto; }
.avatar--lg { width: 4rem; height: 4rem; font-size: var(--text-lg); }
.avatar--any { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); text-decoration: none; }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.badge { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); overflow-wrap: anywhere; }
.badge--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.status::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.status--booked { color: var(--st-booked-fg); background: var(--st-booked-bg); }
.status--arrived { color: var(--st-arrived-fg); background: var(--st-arrived-bg); }
.status--in-progress { color: var(--st-in-progress-fg); background: var(--st-in-progress-bg); }
.status--completed { color: var(--st-completed-fg); background: var(--st-completed-bg); }
.status--no-show { color: var(--st-no-show-fg); background: var(--st-no-show-bg); }
.status--cancelled { color: var(--st-cancelled-fg); background: var(--st-cancelled-bg); text-decoration: line-through; }
.status--hold { color: var(--st-hold-fg); background: var(--st-hold-bg); outline: 1px dashed currentColor; outline-offset: -1px; }
.alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.alert__icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: var(--weight-bold); font-size: var(--text-sm); grid-row: span 2; }
.alert__title { font-weight: var(--weight-semibold); margin: 0; }
.alert__body { margin: 0; color: var(--text-muted); }
.alert__actions { grid-column: 2; margin-top: var(--space-2); }
.alert--info { border-left: 4px solid var(--info); }
.alert--info .alert__icon { background: var(--info); color: var(--surface); }
.alert--warning { border-left: 4px solid var(--warning); }
.alert--warning .alert__icon { background: var(--warning); color: var(--surface); }
.alert--danger { border-left: 4px solid var(--danger); }
.alert--danger .alert__icon { background: var(--danger); color: var(--surface); }
.alert--success { border-left: 4px solid var(--success); }
.alert--success .alert__icon { background: var(--success); color: var(--surface); }
.notice { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-control); }
.toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--text); color: var(--bg); box-shadow: var(--shadow-raised, 0 10px 30px rgb(0 0 0 / 0.2)); max-width: 28rem; }
.toast strong { display: block; }
.stepper { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; margin: 0 0 var(--space-5); padding: 0; font-size: var(--text-sm); }
.stepper li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-subtle); }
.stepper li::after { content: "\203A"; color: var(--text-subtle); }
.stepper li:last-child::after { content: none; }
.stepper .is-done { color: var(--text-muted); }
.stepper .is-current { color: var(--text); font-weight: var(--weight-semibold); }
.service-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.service-row.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.service-row__name { font-weight: var(--weight-semibold); margin: 0; }
.service-row__meta { grid-column: 2; color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.service-row__price { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.service-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); margin-top: 0.15rem; }
.date-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.date-strip .day { display: grid; justify-items: center; gap: 0.1rem; padding: var(--space-2) 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); font-size: var(--text-xs); color: var(--text-muted); }
.date-strip .day b { font-size: var(--text-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.date-strip .day.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.date-strip .day.is-on b { color: var(--on-primary); }
:is(a.day, button.day, a.slot, .slot--button) { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.date-strip :is(a.day, button.day):not(.is-on, .is-full):is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.date-strip :is(a.day, button.day).is-on:is(:hover, :active) { background: var(--selected-hover); border-color: var(--selected-hover); color: var(--on-selected-hover); }
.date-strip :is(a.day, button.day):not(.is-on, .is-full):is(:hover, :active) b { color: var(--on-secondary-hover); }
.date-strip :is(a.day, button.day).is-on:is(:hover, :active) b { color: var(--on-selected-hover); }
.date-strip .day.is-full { background: var(--sunken); color: var(--text-subtle); }
.date-strip .day.is-full b { color: var(--text-subtle); text-decoration: line-through; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.slot { display: grid; place-items: center; min-height: var(--touch); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.slot.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
:is(a.slot, .slot--button):not(.is-on, .is-gone):is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
:is(a.slot, .slot--button).is-on:is(:hover, :active) { background: var(--selected-hover); border-color: var(--selected-hover); color: var(--on-selected-hover); }
.slot.is-gone { border-style: dashed; color: var(--text-subtle); text-decoration: line-through; background: var(--sunken); }
.slot-group { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.hold-timer { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--st-hold-bg); color: var(--st-hold-fg); font-weight: var(--weight-semibold); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pay-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.pay-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pay-option.is-disabled { background: var(--sunken); color: var(--text-subtle); }
.pay-option__logo { font-weight: var(--weight-heavy); font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); min-width: 4.5rem; text-align: center; }
.summary-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--border); }
.summary-bar__total { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ref { font-family: var(--font-mono); letter-spacing: 0.08em; font-weight: var(--weight-semibold); }
.ph { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-media); }
.ph picture { display: block; width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__tag { position: absolute; left: var(--space-2); bottom: var(--space-2); max-width: calc(100% - var(--space-4)); padding: 0.15rem 0.5rem; font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / 0.66); border-radius: 4px; }
.phone { --pw: 18rem; width: var(--pw); max-width: 100%; aspect-ratio: 9 / 19.5; border-radius: 2.6rem; padding: 0.55rem; background: #121214; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 20px 50px rgb(0 0 0 / 0.28); position: relative; }
.phone__screen { width: 100%; height: 100%; border-radius: 2.1rem; overflow: hidden; background: var(--bg); position: relative; }
.phone__notch { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); width: 5.5rem; height: 1.45rem; border-radius: 1rem; background: #121214; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 36rem) {
.date-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(3.75rem, 1fr); overflow-x: auto; padding-bottom: var(--space-1); }
}
/* site */
.site-header { --header-line: color-mix(in srgb, var(--on-header) 18%, var(--header)); --header-hover: var(--on-header); --header-hover-deco: underline 2px var(--on-header); position: relative; z-index: 10; border-bottom: 1px solid var(--header-line, var(--border)); background: var(--header, var(--bg)); }
.site-header :focus-visible { outline-color: var(--on-header, var(--focus)); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 4.5rem; padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-header, var(--text)); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--on-header, var(--text)); }
.brand__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-control); background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-size: var(--text-xl); flex: 0 0 auto; }
.brand__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: var(--text-xl); line-height: 1.1; overflow-wrap: normal; }
.site-nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--on-header, var(--text)); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm); }
.site-nav a:hover { color: var(--header-hover, var(--primary)); text-decoration: var(--header-hover-deco, none); text-underline-offset: 0.35em; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-header .btn--ghost { --btn-fg: var(--on-header, var(--primary)); color: var(--on-header, var(--primary)); }
.site-header .site-header__actions .btn--primary { --btn-bd: var(--on-header, var(--primary)); }
[data-theme] .site-header[data-header-role] .brand__mark { background: transparent; color: var(--on-header); border: 1px solid var(--on-header); }
.mode-toggle { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.mode-toggle:is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.mode-toggle__icon { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-grid; place-items: center; min-width: var(--touch); height: var(--touch); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.menu > summary:is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(16rem, 80vw); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.menu__panel a { display: block; padding: var(--space-2) var(--space-3); color: var(--text); text-decoration: none; border-radius: var(--radius-control); }
@media (min-width: 64rem) {
.menu { display: none; }
}
@media (max-width: 63.99rem) {
.site-nav { display: none; }
}
@media (max-width: 30rem) {
.site-header__actions .btn--primary:not(.site-header__cta) { display: none; }
}
.section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section--alt { background: var(--surface-2); }
.section__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); max-width: 44rem; }
.section__head h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); margin: 0; }
.home-title { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
.home-title__name { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); margin: 0; overflow-wrap: anywhere; }
.section__head p { margin: 0; color: var(--text-muted); }
.eyebrow.section-eyebrow { color: var(--eyebrow-colour, var(--accent)); }
.section__head .section-eyebrow { margin: 0; color: var(--eyebrow-colour, var(--accent)); }
.cms-cta .eyebrow.section-eyebrow { color: inherit; }
.cinehero { --cinehero-copy-w: 46rem; }
.quick { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.quick__item { display: grid; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-decoration: none; }
.quick__item:hover { color: var(--text); border-color: var(--primary); }
.quick__item h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; margin: 0; }
.quick__meta { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.quick__price { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.prices { display: grid; gap: var(--space-8) var(--space-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.prices h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.price-list { list-style: none; margin: 0; padding: 0; }
.prices__where { display: grid; gap: var(--space-2); justify-items: start; margin-bottom: var(--space-4); }
.prices__where-label { margin: 0; font-weight: var(--weight-semibold); }
.prices__where .segmented > a:not(.is-on, :hover, :active) { color: var(--text); }
.prices__where .segmented > a.is-on:not(:hover, :active) { color: var(--on-primary); }
.prices__filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.prices__empty { margin: 0 0 var(--space-6); }
.prices__filter .chip:not(.is-on):is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.prices__filter .chip.is-on:is(:hover, :active) { background: var(--selected-hover); border-color: var(--selected-hover); color: var(--on-selected-hover); }
.price-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.price-list .name { font-weight: var(--weight-medium); }
.price-list .meta { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--text-sm); margin-top: -0.2rem; }
.price-list .price { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; }
.price-list .variants { grid-column: 1 / -1; list-style: none; margin: var(--space-1) 0 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--border); }
.price-list .variants li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding: var(--space-1) 0; border-bottom: 0; font-size: var(--text-sm); }
.price-list .variants .meta { grid-column: 1 / -1; margin: 0; }
.price-list .home-tag { grid-column: 1 / -1; justify-self: start; }
.price-list li:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.price-list li:has(> .btn) > .name { flex: 1 1 auto; min-width: 0; }
.price-list li:has(> .btn) > .meta { flex-basis: 100%; }
.home-tag { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1rem 0.5rem; border-radius: min(var(--radius-pill), 1em); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.5; white-space: normal; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.home-tag::before { content: ""; width: 0.75em; height: 0.75em; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 86% 45%, 86% 100%, 14% 100%, 14% 45%, 0 45%); }
.catalogue-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.quick__item--picture { align-content: start; padding: 0 0 var(--space-5); overflow: hidden; }
.quick__item--picture > :not(.quick__media) { margin-inline: var(--space-5); }
.quick__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--space-2); background: var(--surface-2); }
.quick__book { justify-self: start; margin-top: var(--space-2); }
.quick__media--tile { display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-2), color-mix(in oklab, var(--primary) 22%, var(--surface-2))); }
.quick__tile-mark { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--primary); }
.price-group__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.price-group__head h3 { margin-bottom: 0; }
.price-group__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-2); }
@media (min-width: 40rem) {
.price-group__head { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; }
}
.price-group__about { margin: 0 0 var(--space-3); color: var(--text-muted); }
.price-group__head .price-group__about { margin: var(--space-1) 0 0; }
.price-list li.has-picture { grid-template-columns: 3.5rem minmax(0, 1fr) auto; column-gap: var(--space-3); }
.price-list__thumb { grid-row: span 2; width: 3.5rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-2); }
.price-list li.has-picture > .meta, .price-list li.has-picture > .home-tag, .price-list li.has-picture > .variants { grid-column: 2 / -1; }
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.gallery .ph { aspect-ratio: 4 / 5; }
.theme-slot__caption { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: var(--space-8) var(--space-4) var(--space-3); color: #fff; font: 600 var(--text-sm)/1.35 var(--font-ui); background: linear-gradient(to top, rgb(0 0 0 / 0.74), rgb(0 0 0 / 0.58) 55%, rgb(0 0 0 / 0)); overflow-wrap: anywhere; }
.team { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.team__card { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.team__card h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; margin: 0; }
.team__card p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.showcase { display: grid; gap: var(--space-10); align-items: center; }
.showcase__phones { display: flex; gap: var(--space-4); justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.showcase__phones .phone { --pw: clamp(9.5rem, 5rem + 12vw, 15rem); }
.store-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.store-badge { display: inline-flex; flex-direction: column; justify-content: center; min-height: 3.25rem; padding: var(--space-2) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); color: var(--text-muted); font-size: var(--text-xs); line-height: 1.3; }
.store-badge b { color: var(--text); font-size: var(--text-sm); }
@media (min-width: 64rem) {
.showcase { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.visit { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.visit__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 28rem; border-radius: var(--radius-media); }
.visit__photo picture, .visit__photo .place-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 48rem) {
.visit--2, .visit--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visit--2 .visit__photo { aspect-ratio: auto; max-height: none; min-height: 18rem; }
.visit--3 .visit__photo { grid-column: 1 / -1; aspect-ratio: 2 / 1; max-height: 22rem; }
}
@media (min-width: 64rem) {
.visit--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit--3 .visit__photo { grid-column: auto; aspect-ratio: auto; max-height: none; min-height: 18rem; }
}
@media (min-width: 48rem) {
.visit--cards > .visit__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: var(--shadow-card, none); }
}
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hours li.is-today { font-weight: var(--weight-semibold); }
.map-ph { min-height: 14rem; display: grid; place-items: center; text-align: center; padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--text-muted); background: var(--surface); }
.faq { max-width: var(--container-text); }
.faq details { border-bottom: 1px solid var(--border); padding: var(--space-4) 0; }
.faq summary { cursor: pointer; font-weight: var(--weight-semibold); list-style-position: outside; }
.faq details p { margin: var(--space-3) 0 0; color: var(--text-muted); }
.site-footer { --footer-soft: color-mix(in srgb, var(--on-footer) 82%, var(--footer)); --footer-line: color-mix(in srgb, var(--on-footer) 24%, var(--footer)); border-top: 1px solid var(--footer-line, var(--border)); padding-block: var(--space-10) var(--space-8); background: var(--footer, var(--bg)); color: var(--footer-soft, var(--text-muted)); font-size: var(--text-sm); }
.site-footer :focus-visible { outline-color: var(--on-footer, var(--focus)); }
.site-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-footer, var(--text)); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--footer-soft, var(--text-muted)); }
.site-footer__base { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--footer-line, var(--border)); }
.powered { color: var(--footer-soft, var(--text-muted)); }
.powered a { color: var(--on-footer, var(--text)); font-weight: var(--weight-semibold); }
.flow-page { padding-block: var(--space-8) var(--space-16); }
.flow-step { scroll-margin-top: var(--space-8); padding-block: var(--space-8); border-top: 2px dashed var(--border); }
.flow-step:first-child { border-top: 0; }
.flow { display: grid; gap: var(--space-6); align-items: start; }
.flow__main { display: grid; gap: var(--space-4); min-width: 0; }
.flow__main h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin-bottom: var(--space-2); }
.flow__summary { position: sticky; top: var(--space-6); }
.flow__summary .summary-bar { position: static; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); margin-top: var(--space-3); background: transparent; }
@media (min-width: 64rem) {
.flow { grid-template-columns: minmax(0, 1fr) 22rem; }
}
@media (max-width: 63.99rem) {
.flow__summary { position: static; }
}
.staff-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.staff-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.staff-option.is-disabled { background: var(--sunken); color: var(--text-subtle); }
.staff-option__name { font-weight: var(--weight-semibold); margin: 0; }
.staff-option__meta { margin: 0; color: var(--text-muted); font-size: var(--text-sm); grid-column: 2; }
.compare { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.compare__col { padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.compare__col--new { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.confirm-hero { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface-2); }
.confirm-hero__check { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--success); color: var(--surface); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.widget { width: min(100%, 25rem); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-body); box-shadow: 0 18px 44px rgb(0 0 0 / 0.16); overflow: hidden; }
.widget__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.widget__body { padding: var(--space-4); display: grid; gap: var(--space-3); }
.widget__foot { padding: var(--space-2) var(--space-4) var(--space-3); font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.widget__foot a { color: var(--text); font-weight: var(--weight-semibold); }
[data-theme] .cinehero { --cinehero-scrim: var(--scrim, 12 10 14); --cinehero-accent-text: var(--scrim-accent, var(--cinehero-text)); }
.site-topline { background: var(--topline, var(--surface-2, #ece5d8)); color: var(--on-topline, var(--text, #17130f)); font-size: var(--text-sm, .875rem); }
.site-topline :focus-visible { outline-color: var(--on-topline, var(--focus)); }
.site-topline__row { display: flex; flex-wrap: wrap; gap: var(--space-1, .25rem) var(--space-6, 1.5rem); padding-block: var(--space-2, .5rem); }
.site-topline__part { min-width: 0; overflow-wrap: break-word; white-space: normal; }
.site-topline a { color: inherit; font-weight: 600; }
@media (max-width: 47.99rem) {
.site-footer .site-footer__menu a { min-height: 2.75rem; }
.faq details { padding-block: var(--space-2); }
.faq summary { min-height: 2.75rem; padding-block: .625rem; }
.visit address a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-topline a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: calc(-1 * var(--space-2, .5rem)); }
}
/* adapters */
[data-theme] { --ink: var(--text); --muted: var(--text-muted); --link: var(--primary); --radius: var(--radius-card); --shadow: var(--shadow-card, none); --accent-ink: var(--on-accent); --accent-wash: color-mix(in oklab, var(--primary) 12%, var(--surface)); --pass: var(--success); --warn: var(--warning); --fail: var(--danger); --pass-bg: color-mix(in oklab, var(--success) 14%, var(--surface)); --warn-bg: color-mix(in oklab, var(--warning) 16%, var(--surface)); --fail-bg: color-mix(in oklab, var(--danger) 14%, var(--surface)); --info-bg: color-mix(in oklab, var(--info) 14%, var(--surface)); --font: var(--font-body); }
[data-width="wide"] { --container-wide: 88rem; }
[data-header="sticky"] .site-header { position: sticky; top: 0; }
.site-main { display: block; min-height: 50vh; }
.flash-container:empty { display: none; }
.flash-container { padding-top: var(--space-4); }
.brand__logo { display: block; height: 2.75rem; width: auto; max-width: min(12rem, 48vw); object-fit: contain; }
.brand picture { display: block; }
.brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: none; }
[data-mode="dark"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--light) { display: none; }
[data-mode="dark"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: block; }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--light) { display: none; }
[data-mode="auto"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: block; }
}
:is([data-mode="light"], [data-mode="auto"], :not([data-mode])) .site-header[data-header-light="dark"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--light) { display: none; }
:is([data-mode="light"], [data-mode="auto"], :not([data-mode])) .site-header[data-header-light="dark"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: block; }
[data-mode="dark"] .site-header[data-header-dark="light"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--light) { display: block; }
[data-mode="dark"] .site-header[data-header-dark="light"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: none; }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .site-header[data-header-dark="light"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--light) { display: block; }
[data-mode="auto"] .site-header[data-header-dark="light"] .brand:has(.brand__logo--dark) picture:has(.brand__logo--dark) { display: none; }
}
.site-nav ul { align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.site-header .site-nav { display: none; flex: 0 1 auto; min-width: 0; }
.site-header .menu { display: block; }
@media (min-width: 80rem) {
.site-header[data-nav="auto"][data-nav-length="short"] .site-nav { display: block; }
.site-header[data-nav="auto"][data-nav-length="short"] .menu { display: none; }
}
.site-header[data-nav="inline"] .site-nav { display: block; }
.site-header[data-nav="inline"] .menu { display: none; }
.site-header[data-nav="folded"] .site-nav { display: none; }
.site-header[data-nav="folded"] .menu { display: block; }
.site-header[data-nav="measure"] .site-nav { display: block; position: absolute; visibility: hidden; width: max-content; pointer-events: none; }
.site-header[data-nav="measure"] .menu { display: block; }
.site-nav a[aria-current] { color: var(--on-header, var(--primary)); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.site-nav__branch { position: relative; }
.site-nav__branch summary { list-style: none; cursor: pointer; font-weight: var(--weight-medium); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch); }
.site-nav__branch summary::-webkit-details-marker { display: none; }
.site-nav__branch summary::after { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.site-nav__branch ul { position: absolute; left: 0; top: 100%; z-index: 20; display: grid; gap: 0; min-width: 14rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.site-nav__branch ul a { display: block; padding: var(--space-2) var(--space-3); }
.menu__panel { z-index: 20; display: grid; }
.menu__panel a { min-height: var(--touch); display: flex; align-items: center; }
.menu__panel a[aria-current] { font-weight: var(--weight-semibold); color: var(--primary); }
.menu__group { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.menu__child { padding-left: var(--space-6) !important; }
.site-header__actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; min-width: 0; }
@media (max-width: 63.99rem) {
.site-header__account { display: none; }
}
@media (max-width: 30rem) {
.site-header__actions .site-header__cta { min-height: 44px; padding: 0 12px; font-size: var(--text-sm); white-space: nowrap; }
}
@media (max-width: 30rem) {
.site-header__actions { gap: 6px; }
.site-header__actions .mode-toggle { width: 44px; height: 44px; }
.site-header__actions .menu > summary { min-width: 44px; height: 44px; padding: 0 10px; }
.site-header__actions .account-trigger { min-height: 44px; padding: 0 6px; gap: 0; }
.site-header__actions .account-trigger .avatar { width: 30px; height: 30px; font-size: 14px; }
.site-header__actions .account-chevron { display: none; }
}
@media (max-width: 63.99rem) {
.site-header:not([data-nav="inline"]):not([data-nav="measure"]) .brand { flex: 1 1 0; max-width: max-content; }
}
html[data-js] .mode-toggle[data-mode-toggle][hidden] { display: inline-grid !important; }
.account-menu { position: relative; }
.account-trigger { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.account-trigger:is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.account-trigger .avatar { width: 2rem; height: 2rem; }
.account-name { display: none; }
@media (min-width: 64rem) {
.account-name { display: inline; }
}
.account-panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30; min-width: 14rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.account-panel a, .account-logout button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); text-decoration: none; cursor: pointer; font: inherit; }
.account-panel a:is(:hover, :active), .account-logout button:is(:hover, :active) { background: var(--secondary-hover); color: var(--on-secondary-hover); }
.account-caption, .account-note { margin: var(--space-1) var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }
.account-logout { margin: 0; }
.public-demo-banner { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); text-align: center; background: var(--warn-bg); color: var(--text); border-bottom: 1px solid var(--border); }
.message { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: var(--radius-card); background: var(--surface); color: var(--text); }
.message.success { border-left-color: var(--success); }
.message.error { border-left-color: var(--danger); }
.message.warning { border-left-color: var(--warning); }
.post-card { position: relative; display: grid; gap: var(--space-2); align-content: start; }
.post-card__media { aspect-ratio: 3 / 2; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-2); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.post-card__date, .cms-card .cms-date { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--eyebrow-tracking, 0.12em); text-transform: uppercase; color: var(--text-muted); }
.post-card__title { font-size: var(--text-xl); margin: 0; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:hover { color: var(--primary); text-decoration: underline; }
.post-card:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.post-card__title a:focus-visible { outline: none; }
.post-card p { margin: 0; }
.post-card__excerpt { color: var(--text-muted); }
.post-card--text, .cms-card:not(:has(picture)) { display: grid; gap: var(--space-2); align-content: start; min-height: 11rem; padding: var(--space-6) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card, none); }
.post-card--text .post-card__title, .cms-card:not(:has(picture)) h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); margin: 0; }
.cms-card:not(:has(picture)) p { margin: 0; }
.section__more { margin: var(--space-8) 0 0; }
.faq .cms-rich { margin-top: var(--space-3); color: var(--text-muted); }
.site-footer__menu ul ul { margin-top: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--footer-line, var(--border)); }
.site-footer a { display: inline-flex; align-items: center; min-height: 2rem; }
.site-footer a:hover { color: var(--on-footer, var(--primary)); }
.site-footer p { margin: 0 0 var(--space-3); }
.social-links { display: flex !important; flex-wrap: wrap; gap: var(--space-2) var(--space-4) !important; margin-top: var(--space-4) !important; }
.social-links a { gap: var(--space-2); min-height: var(--touch); color: var(--on-footer, var(--text)); }
.social-mark { flex: 0 0 auto; }
.cms-page { width: min(100% - 2 * var(--space-4), var(--container-text)); max-width: none; margin-inline: auto; padding-block: var(--space-8) var(--space-16); }
.cms-page h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.cms-page.cms-contact { width: min(100% - 2 * var(--space-4), var(--container-wide)); }
.cms-section { width: min(100% - 2 * var(--space-4), var(--container-wide)); margin: var(--space-12) auto; }
.cms-home > .cms-empty { padding-block: var(--space-16); }
.cms-card a { color: var(--text); }
.cms-card a:hover h2, .cms-card a:hover h3 { color: var(--primary); }
.cms-card h2, .cms-card h3 { font-size: var(--text-xl); }
.cms-image, .cms-cover, .cms-card img, .place-photo { border-radius: var(--radius-media); }
.cms-faq-list details { border-radius: var(--radius-card); border-color: var(--border); background: var(--surface); }
.cms-rich { line-height: var(--leading-relaxed); }
.cms-rich a, .breadcrumbs a, .text-link { color: var(--primary); }
.cms-rich blockquote { border-left-color: var(--primary); }
.cms-contact-details, .cms-contact-form, .legal-consent { border-radius: var(--radius-card); border-color: var(--border); background: var(--surface); }
label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--space-1) 0 var(--space-1); }
label.choice { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-regular); font-size: var(--text-md); }
input:not([type]), input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], select, textarea { width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 1.15rem; height: 1.15rem; }
input[type=file] { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: var(--touch); padding: var(--space-1); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; }
input[type=file]::file-selector-button { min-height: calc(var(--touch) - 2 * var(--space-1) - 2px); margin-inline-end: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
fieldset { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); }
.button { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-2) var(--space-5); border: 1px solid var(--btn-bd); border-radius: var(--radius-control); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: var(--weight-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.button:hover { color: var(--btn-fg); }
.button.outline, .button.secondary { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.button.subtle { --btn-bg: transparent; --btn-fg: var(--primary); --btn-bd: transparent; }
.button:not(.outline, .secondary, .subtle):is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--primary-hover); --btn-fg: var(--on-primary-hover); --btn-bd: var(--primary-hover); }
.button:is(.outline, .secondary, .subtle):is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--secondary-hover); --btn-fg: var(--on-secondary-hover); --btn-bd: var(--secondary-hover); }
.button.small { min-height: var(--touch); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.icon-button { display: inline-grid; place-items: center; min-width: var(--touch); min-height: var(--touch); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.icon-button:is(:hover, :active):not([disabled]) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
input[type=file]:hover::file-selector-button, input[type=file]:active::file-selector-button { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.cms-cta .btn:is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.cms-cta .btn--primary:is(:hover, :active) { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary-hover); }
.preview-bar { background: var(--surface-2); border-bottom: 2px solid var(--primary); font-size: var(--text-sm); }
.preview-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
.preview-bar__inner p { margin: 0; }
.preview-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.preview-bar__form { display: inline; margin: 0; }
.theme-slot { display: grid; place-items: center; min-height: var(--touch); border: 1px solid var(--border-strong); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.theme-slot img { object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
@media (max-width: 40rem) {
.theme-slot img { object-position: var(--focal-nx, var(--focal-x, 50%)) var(--focal-ny, var(--focal-y, 50%)); }
}
.ph--empty { background: linear-gradient(135deg, var(--surface-2), color-mix(in oklab, var(--primary) 14%, var(--surface-2))); }
.gallery .theme-slot { margin: 0; }
.avatar--photo { overflow: hidden; padding: 0; }
.avatar--photo picture, .avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.section__head h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); margin: 0; }
.team__bio { display: grid; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.team__bio ul, .team__bio ol { margin: 0; padding-inline-start: 1.25rem; }
.team__more { margin: var(--space-6) 0 0; }
.team__card h2 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; margin: 0; }
.people-page { width: min(100% - 2 * var(--space-4), var(--container-text)); margin-inline: auto; padding-block: var(--space-8) var(--space-16); }
.people-page h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.people-panel { display: grid; gap: var(--space-3); margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-top: 1px solid var(--border); }
.people-panel h2 { margin: 0; font-size: var(--text-xl); }
.people-panel .field { margin-block-end: var(--space-3); }
.people-panel .button + .button { margin-inline-start: var(--space-2); }
.people-panel h3 { margin: var(--space-5) 0 0; font-size: var(--text-lg); }
@media (max-width: 19.99rem) {
:root { --scrollbar-allowance: 9px; }
.home-tag { white-space: normal; max-width: 100%; min-width: 0; border-radius: var(--radius-control); }
.price-list .price, .service-row__price { white-space: normal; text-align: end; }
.price-list .variants { padding-left: var(--space-2); }
.booking-flow .service-row.service-row--picture { grid-template-columns: auto minmax(0, 1fr) auto; }
.booking-flow .service-row.service-row--picture .service-row__thumb { display: none; }
.booking-flow .service-row.service-row--picture .service-row__meta { grid-column: 2; }
.booking-flow .service-row.service-row--picture .home-tag { grid-column: 2 / -1; }
.price-list li.has-picture { grid-template-columns: minmax(0, 1fr) auto; }
.price-list li.has-picture > .price-list__thumb { display: none; }
.price-list li.has-picture > .meta, .price-list li.has-picture > .home-tag, .price-list li.has-picture > .variants { grid-column: 1 / -1; }
.booking-flow .service-row.service-row, .booking-flow .service-row.service-row--picture { grid-template-columns: auto minmax(0, 1fr); }
.booking-flow .service-row .service-row__price { grid-column: 2; text-align: start; }
.price-list li, .price-list li.has-picture, .price-list .variants li { grid-template-columns: minmax(0, 1fr); }
.price-list li .price { text-align: start; }
.visit .btn { white-space: normal; text-align: center; padding-inline: var(--space-3); }
.confirm-hero { --display-box: calc(100vw - var(--scrollbar-allowance) - 2 * var(--space-4) - 2 * var(--space-6)); }
.card, .cms-card, .cms-contact-details, .cms-contact-form, .widget__body { --display-box: calc(100vw - var(--scrollbar-allowance) - 2 * var(--space-4) - 2 * var(--space-5) - 2px); }
.cms-page .cms-section { --display-box: calc(100vw - var(--scrollbar-allowance) - 4 * var(--space-4)); }
.cms-faq-list details { --display-box: calc(100vw - var(--scrollbar-allowance) - 2 * var(--space-4) - 2rem - 2px); }
h1, h2, h3, h4 { --display-cap: max(var(--text-sm), var(--display-box, calc(100vw - var(--scrollbar-allowance) - 2 * var(--space-4))) / var(--display-measure, 8)); }
@supports (hyphenate-limit-chars: 11 4 4) {
h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 11 4 4; }
}
h1 { font-size: min(2em, var(--display-cap)); }
h2 { font-size: min(1.5em, var(--display-cap)); }
h3 { font-size: min(1.17em, var(--display-cap)); }
.cinehero__title, .section__head h1, .cms-page h1, .people-page h1, .home-title__name { font-size: min(2rem, var(--display-cap)); }
.section__head h2 { font-size: min(1.75rem, var(--display-cap)); }
.flow__main h2, .prices h3, .post-card--text .post-card__title, .cms-card:not(:has(picture)) h2 { font-size: min(var(--text-2xl), var(--display-cap)); }
.cms-section h2 { font-size: min(1.35rem, var(--display-cap)); }
.post-card__title, .cms-card h2, .cms-card h3, .people-panel h2 { font-size: min(var(--text-xl), var(--display-cap)); }
.cms-card h2, .cms-card h3 { overflow-wrap: anywhere; }
}
/* booking-flow */
.booking-flow .list-reset { list-style: none; margin: 0; padding: 0; }
.booking-flow fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.booking-flow legend { padding: 0; }
.booking-flow .date-strip li, .booking-flow .slots li { display: grid; min-width: 0; }
.booking-flow .date-strip li > form, .booking-flow .slots li > form { display: grid; }
.booking-flow a.day, .booking-flow button.day { position: relative; text-decoration: none; font: inherit; font-size: var(--text-xs); cursor: pointer; width: 100%; }
.booking-flow a.slot, .booking-flow .slot--button { text-decoration: none; color: var(--text); font: inherit; font-weight: var(--weight-semibold); width: 100%; cursor: pointer; }
.booking-flow :is(a.slot, .slot--button):not(.is-on):is(:hover, :active) { color: var(--on-secondary-hover); }
.booking-flow :is(a.slot, .slot--button).is-on:is(:hover, :active) { color: var(--on-selected-hover); }
.booking-flow .slot.is-on, .booking-flow a.slot.is-on { color: var(--on-primary); }
.booking-flow .date-strip .day.is-full { color: var(--text-muted); }
.booking-flow .date-strip .day.is-full b { color: var(--text-muted); }
.booking-flow label.service-row, .booking-flow label.staff-option { cursor: pointer; }
.booking-flow .service-row:has(input:checked), .booking-flow .staff-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.booking-flow .staff-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.booking-flow .service-row__name, .booking-flow .staff-option__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.booking-flow .code-input { max-width: 12rem; font-size: var(--text-xl); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; }
.booking-flow .alert ul.alert__body { margin: 0; padding-left: 1.1rem; }
.booking-flow .card--sunken .muted, .booking-flow .card--sunken dt { color: var(--text-muted); }
.booking-flow .inline-form { display: inline; }
.booking-flow .flow__summary .list > li { gap: var(--space-2); }
.booking-flow .confirm-hero h1 { margin: 0; }
.booking-flow .flow__main h2.panel-title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; margin: 0 0 var(--space-2); }
.booking-flow .kv { grid-template-columns: max-content minmax(0, 1fr); }
.booking-flow .kv dd { overflow-wrap: anywhere; }
@media (max-width: 47.99rem) {
.booking-flow .kv { grid-template-columns: minmax(0, 1fr); }
.booking-flow .kv dd { text-align: start; }
.booking-flow .kv dd + dt { margin-top: var(--space-2); }
}
.booking-flow .input-group > .select { min-width: 0; }
@media (max-width: 47.99rem) {
.booking-flow .input-group { flex-wrap: wrap; gap: var(--space-2); }
.booking-flow .input-group > .select, .booking-flow .input-group > .input { flex: 1 1 100%; border-radius: var(--radius-control); }
.booking-flow .input-group > .select { border-right: 1px solid var(--border-strong); }
}
@media (min-width: 48rem) {
.booking-flow .input-group > .select { flex: 0 1 auto; max-width: 40%; }
.booking-flow .input-group > .input { flex: 1 1 60%; }
}
.booking-flow .my-bookings__email { text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.booking-flow .my-bookings { list-style: none; padding: 0; margin-bottom: 0; display: grid; gap: var(--space-4); }
.booking-flow .booking-card .panel-title, .booking-flow .booking-card > :last-child { margin: 0; }
.booking-flow .stepper__compact { display: none; }
@media (max-width: 47.99rem) {
.booking-flow .stepper__compact { display: block; margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.booking-flow .stepper__compact b { color: var(--text); font-weight: var(--weight-semibold); }
.booking-flow .stepper { flex-wrap: nowrap; gap: 0; height: 0.25rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--border); }
.booking-flow .stepper li { position: relative; flex: 1 1 0; min-width: 0; padding: 0; }
.booking-flow .stepper li::after { content: none; }
.booking-flow .stepper .is-done, .booking-flow .stepper .is-current { background: var(--primary); }
.booking-flow .stepper__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 47.99rem) and (forced-colors: active) {
.booking-flow .stepper { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
.booking-flow .stepper .is-done, .booking-flow .stepper .is-current { background: Highlight; }
}
.booking-flow .flow-bar { position: static; display: inline-flex; vertical-align: top; padding: 0; border-top: 0; background: none; }
.booking-flow .flow-bar__summary { display: none; }
.booking-flow .flow-bar + .flow-back { display: inline-flex; vertical-align: top; margin-left: var(--space-3); }
.booking-flow .flow-back { margin-bottom: 0; }
.booking-flow .flow-times { display: grid; gap: var(--space-4); }
.booking-flow .flow-times-block > * + * { margin-top: var(--space-4); }
@media (max-width: 47.99rem) {
html:has(.booking-flow .flow-bar) { scroll-padding-bottom: calc(var(--touch) + 2 * var(--space-3) + var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.booking-flow .flow-bar { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-inline: calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid transparent; }
.booking-flow .flow-bar + .flow-back { display: block; margin-left: 0; }
.booking-flow .flow-bar__summary { display: grid; flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--text-sm); line-height: 1.35; }
.booking-flow .flow-bar__summary > span { overflow-wrap: anywhere; }
.booking-flow .flow-bar__summary > .summary-bar__total { white-space: nowrap; }
.booking-flow .flow-bar .btn { flex: none; }
.booking-flow form:has(input:checked) > .flow-bar, .booking-flow .flow-bar--on { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top-color: var(--border); }
.booking-flow form:has(input[checked]:not(:checked), input:not([checked]):checked) > .flow-bar--live:not([data-live]) .flow-bar__summary { visibility: hidden; }
}
@media (forced-colors: active) {
.booking-flow a.slot.is-on, .booking-flow .day.is-on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
.booking-flow .day.is-on b, .booking-flow .day.is-on span { color: HighlightText; }
}
.booking-flow .place-choice { display: grid; gap: var(--space-3); margin: 0; }
.booking-flow .place-choice > legend { font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-2); }
.booking-flow .place-choice__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.booking-flow label.choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; min-height: 2.75rem; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); cursor: pointer; }
.booking-flow label.choice-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.booking-flow .choice-card input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); margin-top: 0.15rem; }
.booking-flow .choice-card__name { font-weight: var(--weight-semibold); }
.booking-flow .choice-card__meta { grid-column: 2; color: var(--text-muted); font-size: var(--text-sm); }
.booking-flow .place-choice__switch { display: inline-flex; flex-wrap: wrap; justify-self: start; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.booking-flow .place-choice__option { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch); margin: 0; padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.booking-flow .place-choice__option + .place-choice__option { border-inline-start: 1px solid var(--border); }
.booking-flow .place-choice__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.booking-flow .place-choice__option:has(input:checked) { background: var(--primary); color: var(--on-primary); }
.booking-flow .place-choice__option:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width) - 2px); }
.booking-flow .place-choice__option:has(input:checked):has(input:focus-visible) { outline-color: var(--on-primary); }
.booking-flow .place-choice__option:has(input:not(:checked)):is(:hover, :active) { background: var(--secondary-hover); color: var(--on-secondary-hover); }
@supports not selector(:has(*)) {
.booking-flow .place-choice__option input { position: static; width: auto; height: auto; opacity: 1; }
}
.booking-flow .place-choice__note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.booking-flow .booking-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.booking-flow .booking-filter .chip { font-family: inherit; line-height: 1.3; text-align: start; cursor: pointer; }
.booking-flow .booking-filter .chip:not([aria-pressed="true"]):is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.booking-flow .booking-filter .chip[aria-pressed="true"]:is(:hover, :active) { background: var(--selected-hover); border-color: var(--selected-hover); color: var(--on-selected-hover); }
.booking-flow .area-field { display: grid; gap: var(--space-1); max-width: 26rem; }
.booking-flow .area-field .select { width: 100%; }
.booking-flow .place-choice:has(input[name="place"][value="location"]:checked) :is(.area-field, .place-choice__fee) { display: none; }
.booking-flow .flow__summary-pending { display: none; }
.booking-flow .flow__summary-pending.is-on { display: block; }
.booking-flow .flow:has(> .flow__main input[checked]:not(:checked), > .flow__main input:not([checked]):checked) > .flow__summary[data-flow-summary]:not([data-live]) > :not(.panel-title, .flow__summary-pending) { display: none; }
.booking-flow .flow:has(> .flow__main input[checked]:not(:checked), > .flow__main input:not([checked]):checked) > .flow__summary[data-flow-summary]:not([data-live]) > .flow__summary-pending { display: block; }
.booking-flow .service-row .home-tag { grid-column: 2 / -1; justify-self: start; margin-top: var(--space-1); }
.booking-flow .service-item { display: grid; gap: 0; }
.booking-flow .service-item:has(.service-row input:checked) > .service-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.booking-flow .service-item:not(:has(.service-row input:checked)) > .service-options:not(.is-invalid) { display: none; }
.booking-flow .service-options { margin: 0; padding: var(--space-2) var(--space-4) var(--space-4) calc(var(--space-4) + 1.25rem + var(--space-3)); border: 1px solid var(--primary); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--surface); display: grid; gap: var(--space-2); }
.booking-flow .service-options > legend { float: left; width: 100%; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin: 0 0 var(--space-1); padding: 0; }
.booking-flow label.option-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--space-3); align-items: start; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; }
.booking-flow label.option-row:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.booking-flow .option-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); margin-top: 0.15rem; }
.booking-flow .option-row__name { font-weight: var(--weight-medium); }
.booking-flow .option-row__price { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-flow .option-row__meta { grid-column: 2 / -1; color: var(--text-muted); font-size: var(--text-sm); }
.booking-flow .service-options.is-invalid { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.booking-flow .service-options .field__error { margin: 0; }
.booking-flow .charge-line { color: var(--text-muted); font-size: var(--text-sm); }
.booking-flow .charge-line .num { color: var(--text); }
.booking-flow .where-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.booking-flow .where-line dt { color: var(--text-muted); }
.booking-flow .where-line dd { margin: 0; overflow-wrap: anywhere; }
.booking-flow .address-block { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--sunken); }
.booking-flow .address-block > legend { float: left; width: 100%; font-weight: var(--weight-semibold); margin: 0 0 var(--space-1); padding: 0; }
.booking-flow .address-block .textarea { min-height: 6rem; }
.booking-flow form.stack > :nth-child(1 of :not([hidden], input[type="hidden"])) { margin-top: 0; }
.booking-flow .flow__main > .staff-note { margin-bottom: 0; }
.booking-flow .flow__main > .alert + form:has(> fieldset > .staff-option) { margin-top: calc(-1 * var(--space-4)); }
.booking-flow .address-block__area { margin: 0; align-items: baseline; }
.booking-flow .address-block__change { font-weight: var(--weight-semibold); text-decoration: none; }
.booking-flow .address-block__change:hover { text-decoration: underline; }
.booking-flow .area-list { margin: 0; padding-left: 1.2em; }
.booking-flow .area-list li { margin: 0.1rem 0; }
@media (max-width: 63.99rem) {
.booking-flow .flow--review > .flow__summary { display: none; }
}
.booking-flow .service-row--picture { grid-template-columns: auto 3rem minmax(0, 1fr) auto; }
.booking-flow .service-row__thumb { grid-column: 2; grid-row: 1 / span 2; width: 3rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-2); }
.booking-flow .service-row--picture .service-row__meta { grid-column: 3; }
.booking-flow .service-row--picture .home-tag { grid-column: 3 / -1; }
.booking-flow .staff-people { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.booking-flow .staff-person { display: inline-flex; align-items: center; gap: var(--space-2); }
.booking-flow .flow__main { container: osdot-flow / inline-size; }
@container osdot-flow (max-width: 17em) {
.booking-flow .service-row.service-row, .booking-flow .service-row.service-row--picture { grid-template-columns: auto minmax(0, 1fr); }
.booking-flow .service-row.service-row--picture .service-row__thumb { display: none; }
.booking-flow .service-row.service-row--picture .service-row__meta { grid-column: 2; }
.booking-flow .service-row .service-row__price { grid-column: 2; text-align: start; white-space: normal; }
.booking-flow .service-row .home-tag { grid-column: 1 / -1; white-space: normal; max-width: 100%; min-width: 0; }
.booking-flow .flow-bar { flex-wrap: wrap; }
.booking-flow .flow-bar__summary { flex-basis: 100%; }
.booking-flow .service-row .service-row__rating { grid-column: 1 / -1; }
}
/* OsDot/Hero.hero-motion */
@keyframes ch-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ch-copy-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ch-settle { from { transform: scale(1.04); } to { transform: none; } }
.cinehero[data-level="subtle"] .is-active:not(.no-anim) .cinehero__media { animation: ch-fade-in calc(.9s * var(--ch-spd)) var(--easing-enter, ease-out) both; }
.cinehero[data-level="subtle"] .is-active:not(.no-anim) .cinehero__media > picture > img { animation: ch-settle calc(1.6s * var(--ch-spd)) var(--easing-expressive, ease-out) both; }
.cinehero[data-level="subtle"] .is-active:not(.no-anim) .cinehero__copy > * { animation: ch-rise calc(.7s * var(--ch-spd)) var(--easing-expressive, ease-out) calc(.25s * var(--ch-spd)) both; }
.cinehero[data-level="subtle"] .is-active:not(.no-anim) .cinehero__text { animation-delay: calc(.4s * var(--ch-spd)); }
.cinehero[data-level="subtle"] .is-active:not(.no-anim) .cinehero__cta { animation-delay: calc(.55s * var(--ch-spd)); }
.cinehero[data-level="subtle"] .is-leaving .cinehero__copy { animation: ch-copy-out calc(.35s * var(--ch-spd)) ease both; }
.cinehero[data-level="cinematic"] .is-active:not(.no-anim) .cinehero__eyebrow { animation: ch-rise calc(.7s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(.15s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .is-active:not(.no-anim) .cinehero__text { animation: ch-rise calc(.7s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(.95s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .is-active:not(.no-anim) .cinehero__cta { animation: ch-rise calc(.7s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(1.1s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .is-leaving .cinehero__copy { animation: ch-copy-out calc(.35s * var(--ch-spd)) ease both; }
.cinehero .anim .w, .cinehero .lit .w { display: inline-block; white-space: nowrap; }
.cinehero .lit { position: absolute; inset: 0; color: #fff; text-shadow: 0 0 22px rgb(255 236 200 / .95), 0 0 4px rgb(255 255 255 / .8); clip-path: inset(0 100% 0 0); pointer-events: none; }
@keyframes ch-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.6%, 1.2%); } }
@keyframes ch-drift-in { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: blur(0); } }
@keyframes ch-drift-out { from { filter: blur(0); transform: scale(1); } to { filter: blur(12px); transform: scale(1.04); } }
@keyframes ch-word-rise { from { opacity: 0; transform: translateY(.6em); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ch-sweep { from { clip-path: polygon(-38% 0, -16% 0, -28% 100%, -50% 100%); } to { clip-path: polygon(116% 0, 138% 0, 126% 100%, 104% 100%); } }
.cinehero[data-level="cinematic"] .fx-drift:is(.is-active, .is-leaving) .cinehero__media > picture { animation: ch-kenburns 11s linear both; }
.cinehero[data-level="cinematic"] .fx-drift.is-active:not(.no-anim) .cinehero__media { animation: ch-drift-in calc(1.3s * var(--ch-spd)) cubic-bezier(.2, .6, .2, 1) both; }
.cinehero[data-level="cinematic"][data-fx="drift"] .is-leaving .cinehero__media > picture > img { animation: ch-drift-out calc(1.3s * var(--ch-spd)) ease both; }
.cinehero[data-level="cinematic"] .fx-drift.is-active:not(.no-anim) .anim .w { animation: ch-word-rise calc(.85s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc((.3s + var(--i, 0) * 75ms) * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .fx-drift.is-active:not(.no-anim) .lit { animation: ch-sweep calc(1s * var(--ch-spd)) cubic-bezier(.4, 0, .2, 1) calc(1.3s * var(--ch-spd)) both; }
@keyframes ch-slat-open { from { clip-path: inset(0 calc(var(--r) + var(--h)) 0 calc(var(--l) + var(--h))); } to { clip-path: inset(0 var(--r) 0 var(--l)); } }
@keyframes ch-slat-img { from { transform: scale(1.1); } to { transform: none; } }
@keyframes ch-cut-a { from { transform: translateY(-105%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ch-cut-b { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
.cinehero__slats { position: absolute; inset: 0; pointer-events: none; }
.cinehero__slat { position: absolute; inset: 0; clip-path: inset(0 var(--r) 0 var(--l)); animation: ch-slat-open calc(.7s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) * var(--ch-spd)) both; }
.cinehero__slat img { animation: ch-slat-img calc(.75s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) * var(--ch-spd)) both; }
.cinehero .has-slats .cinehero__media > picture { opacity: 0; }
.cinehero[data-level="cinematic"][data-fx="shutter"] .is-leaving .cinehero__media::after { animation: ch-fade-out calc(1s * var(--ch-spd)) ease both; }
.cinehero .ch { position: relative; display: inline-block; }
.cinehero .ch-a { display: inline-block; clip-path: inset(-.2em 0 50% 0); }
.cinehero .ch-b { position: absolute; inset: 0; clip-path: inset(50% 0 -.2em 0); }
.cinehero .ch-a > span, .cinehero .ch-b > span { display: inline-block; }
.cinehero[data-level="cinematic"] .fx-shutter.is-active:not(.no-anim) .ch-a > span { animation: ch-cut-a calc(.5s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc((.35s + var(--i, 0) * 22ms) * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .fx-shutter.is-active:not(.no-anim) .ch-b > span { animation: ch-cut-b calc(.5s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc((.35s + var(--i, 0) * 22ms) * var(--ch-spd)) both; }
@keyframes ch-panel-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ch-panel-wipe-end { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ch-panel-img { from { transform: scale(1.15); } to { transform: none; } }
@keyframes ch-big-in { 0% { opacity: 0; transform: scale(1.7); filter: blur(8px); } 60% { opacity: 1; transform: scale(.97); filter: blur(0); } 80% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes ch-ex-pop { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(.08em, .08em); } }
@keyframes ch-shape-glide { from { opacity: 0; transform: translate(-160%, 40%) rotate(-25deg) scale(.6); } to { opacity: var(--cinehero-shape-opacity, .32); transform: none; } }
@keyframes ch-shape-glide-end { from { opacity: 0; transform: translate(160%, 40%) rotate(25deg) scale(.6); } to { opacity: var(--cinehero-shape-opacity, .32); transform: none; } }
.cinehero[data-level="cinematic"] .fx-bigword .cinehero__media > picture { transition: transform calc(.5s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1); }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__media { animation: ch-panel-wipe calc(.9s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) both; }
.cinehero[data-level="cinematic"][data-position$="end"] .fx-bigword.is-active:not(.no-anim) .cinehero__media { animation-name: ch-panel-wipe-end; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__media > picture > img { animation: ch-panel-img calc(1.2s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) both; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .b-face { animation: ch-big-in calc(.75s * var(--ch-spd)) cubic-bezier(.2, .8, .2, 1) calc(.2s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .b-ex { animation: ch-ex-pop calc(.55s * var(--ch-spd)) cubic-bezier(.3, 1.6, .4, 1) calc(.85s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__shape { animation: ch-shape-glide calc(1.3s * var(--ch-spd)) cubic-bezier(.2, .8, .2, 1) calc(.1s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"][data-position$="end"] .fx-bigword.is-active:not(.no-anim) .cinehero__shape { animation-name: ch-shape-glide-end; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__line { animation: ch-rise calc(.7s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc(.9s * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__text { animation-delay: calc(1.05s * var(--ch-spd)); }
.cinehero[data-level="cinematic"] .fx-bigword.is-active:not(.no-anim) .cinehero__cta { animation-delay: calc(1.2s * var(--ch-spd)); }
@keyframes ch-lens-in { from { opacity: 0; transform: scale(1.12); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ch-lens-out { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
@keyframes ch-ghost-1 { from { opacity: .5; transform: scale(1.3); filter: blur(10px); } to { opacity: 0; transform: scale(1.04); filter: blur(2px); } }
@keyframes ch-blur-in { from { opacity: 0; transform: scale(1.06); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ch-glow { from { transform: translate(0, 0) scale(1); opacity: .8; } to { transform: translate(45%, 38%) scale(1.25); opacity: 1; } }
.cinehero[data-level="cinematic"] .fx-lens.is-active:not(.no-anim) .cinehero__media > picture > img { animation: ch-lens-in calc(1.15s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) both; }
.cinehero[data-level="cinematic"][data-fx="lens"] .is-leaving .cinehero__media > picture > img { animation: ch-lens-out calc(1.1s * var(--ch-spd)) ease both; }
.cinehero__ghost { pointer-events: none; mix-blend-mode: screen; }
.cinehero__ghost--1 { animation: ch-ghost-1 calc(1.25s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) both; }
.cinehero[data-level="cinematic"] .fx-lens.is-active:not(.no-anim) .anim .w { animation: ch-blur-in calc(.9s * var(--ch-spd)) cubic-bezier(.2, .7, .2, 1) calc((.45s + var(--i, 0) * 65ms) * var(--ch-spd)) both; }
.cinehero[data-level="cinematic"][data-fx="lens"] .cinehero__fx { display: block; }
.cinehero__fx::before { content: ""; position: absolute; border-radius: 50%; mix-blend-mode: screen; width: 70cqi; aspect-ratio: 1; left: -12%; top: -24%; background: radial-gradient(closest-side, rgb(var(--cinehero-glow) / .6), rgb(var(--cinehero-glow) / 0)); animation: ch-glow 22s ease-in-out infinite alternate; }
.cinehero.is-paused[data-level] .cinehero__slide .cinehero__media > picture, .cinehero.is-paused .cinehero__fx::before { animation-play-state: paused; }
@keyframes splithero-wipe { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes splithero-slide { from { transform: translateX(12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splithero-pop { 0% { transform: scale(.8); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
html:is([data-motion="subtle"], [data-motion="cinematic"]) .splithero__copy > * { animation: ch-rise .7s var(--easing-expressive, ease-out) both; }
html:is([data-motion="subtle"], [data-motion="cinematic"]) .splithero__copy > :nth-child(2) { animation-delay: .1s; }
html:is([data-motion="subtle"], [data-motion="cinematic"]) .splithero__copy > :nth-child(n + 3) { animation-delay: .2s; }
html[data-motion="cinematic"] .splithero[data-edge="angled"] .splithero__frame { animation: splithero-wipe .9s cubic-bezier(.2, .7, .2, 1) both; }
html[data-motion="cinematic"] .splithero:is([data-backdrop="panel"], [data-backdrop="angled-panel"]) .splithero__panel { animation: splithero-slide .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
html[data-motion="cinematic"] .splithero__badge { animation: splithero-pop .6s cubic-bezier(.2, .7, .2, 1) .5s both; }
}
/* motion */
@keyframes reveal-up { from { transform: translateY(var(--reveal-shift, 1.25rem)); } to { transform: none; } }
@keyframes fan-1 { from { transform: rotate(0) translateX(0); } to { transform: rotate(var(--fan, -10deg)) translateX(calc(var(--fan-x, -1.5rem))); } }
@keyframes fan-3 { from { transform: rotate(0) translateX(0); } to { transform: rotate(calc(var(--fan, -10deg) * -1)) translateX(calc(var(--fan-x, -1.5rem) * -1)); } }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
html:is([data-motion="subtle"], [data-motion="cinematic"]) .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry var(--reveal-range, 9rem); }
}
html:is([data-motion="subtle"], [data-motion="cinematic"]) .btn:active { transform: scale(0.98); }
}
/* demo */
.demo-look { position: relative; flex: none; }
.demo-look__button { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); cursor: pointer; list-style: none; }
.demo-look__button::-webkit-details-marker { display: none; }
.demo-look__button:is(:hover, :active) { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--on-secondary-hover); }
.demo-look__button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.demo-look__panel { box-sizing: border-box; width: min(22rem, calc(100vw - 2rem)); max-height: calc(100dvh - 6rem); overflow: auto; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-card, 0.75rem); background: var(--surface); color: var(--text); box-shadow: 0 12px 32px rgb(0 0 0 / 0.22); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.4; text-align: start; }
.demo-look__panel[popover] { position: fixed; inset: var(--demo-look-top, 4.75rem) max(1rem, env(safe-area-inset-right)) auto auto; }
.demo-look--details .demo-look__panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 50; }
.demo-look__title { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); font-weight: var(--weight-semibold); color: var(--text); }
.demo-look__title:first-child { margin-top: 0; }
.demo-look__tag { display: inline-block; padding: 0 0.45rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.demo-look__themes, .demo-look__styles { margin: 0; padding: 0; list-style: none; }
.demo-look__themes li { display: grid; grid-template-columns: minmax(4.5rem, 1fr) auto auto; align-items: center; gap: var(--space-1); }
.demo-look__name { font-weight: var(--weight-semibold); }
.demo-look__styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.demo-look__panel .demo-look__styles a { display: flex; justify-content: center; width: 100%; text-align: center; text-wrap: balance; }
.demo-look__panel a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--touch); padding: 0 0.6rem; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.demo-look__panel a:hover { text-decoration-thickness: 2px; }
.demo-look__panel a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.demo-look__panel a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: var(--weight-semibold); text-decoration: none; }
.demo-look__swatch { flex: none; width: 1.25rem; height: 1.25rem; }
.demo-look__note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-xs); }
@supports selector(:popover-open) {
.demo-look--details { display: none; }
}
@supports not selector(:popover-open) {
.demo-look--popover { display: none; }
}
@media (max-width: 39.99rem) {
.demo-look__panel[popover] { inset: var(--demo-look-top, 4.5rem) 1rem auto 1rem; width: auto; }
.demo-look--details .demo-look__panel { position: fixed; top: var(--demo-look-top, 4.5rem); right: 1rem; left: 1rem; width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="off"]) .demo-look__panel[popover] { transition: opacity 0.16s ease, transform 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete; }
:root:not([data-motion="off"]) .demo-look__panel[popover]:not(:popover-open) { opacity: 0; transform: translateY(-4px); }
@starting-style { :root:not([data-motion="off"]) .demo-look__panel[popover]:popover-open { opacity: 0; transform: translateY(-4px); } }
}
@supports (position-anchor: --demo-look) {
.demo-look--popover .demo-look__button { anchor-name: --demo-look; }
.demo-look--popover .demo-look__panel[popover] { position-anchor: --demo-look; top: calc(anchor(bottom) + 0.5rem); }
}