@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-latin-ext-wght-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: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-latin-wght-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: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/instrument-serif-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: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/instrument-serif-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: 'Instrument Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/instrument-serif-latin-ext-400-italic.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: 'Instrument Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/instrument-serif-latin-400-italic.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-display: swap; font-weight: 500; src: url(https://static.wixstatic.com/ufonts/82c06e_d0cdc572029a42db8f57bc9e43d603c9/file.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-display: swap; font-weight: 500; src: url(https://static.wixstatic.com/ufonts/82c06e_5e705f4c2aeb4669b42f80a7f4945eb4/file.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: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_da70d3e6ed0f4880aaf60e7532bc9f55/file.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: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_45180be2e61b42a58d95b963b7e1cdb6/file.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: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_d811b4a00f8f4715a033ff4f39db341e/file.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: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/rajdhani-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: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(https://static.wixstatic.com/ufonts/82c06e_45c37e543f894cdd9d4dbe0f12bc2d5f/file.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: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/open-sans-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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/cormorant-garamond-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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/cormorant-garamond-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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/cormorant-garamond-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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/cormorant-garamond-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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_c3af81ab0c9040c2b6457381b46c698e/file.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: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_e737c440f9be417ba4d358da1c1b1cd7/file.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: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/cormorant-garamond-latin-ext-400-italic.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: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/cormorant-garamond-latin-400-italic.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: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(fonts/cormorant-garamond-latin-ext-500-italic.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: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(fonts/cormorant-garamond-latin-500-italic.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: 'Onest'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/onest-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: 'Onest'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/onest-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: 'Onest'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/onest-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: 'Onest'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/onest-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: 'Onest'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/onest-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: 'Onest'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/onest-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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 400; src: url(https://static.wixstatic.com/ufonts/82c06e_a510415409f54dddab81be6d1ef53ebd/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 400; src: url(https://static.wixstatic.com/ufonts/82c06e_0f38b254efa1400689a7076a7b99e269/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_1acb73e8a08e4d5887e162c9eb9db9ba/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://static.wixstatic.com/ufonts/82c06e_442013bb3e1041c099f5633e50396d5d/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700; src: url(https://static.wixstatic.com/ufonts/82c06e_6cce7b9d71bd446485d41d4aa9c57b3f/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700; src: url(https://static.wixstatic.com/ufonts/82c06e_07677135afd9465e8ee6e5ed9c067772/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 800; src: url(https://static.wixstatic.com/ufonts/82c06e_b0c163579b4c400498d8f9f9136ae778/file.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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 800; src: url(https://static.wixstatic.com/ufonts/82c06e_c9b3338ea6984e0c80e441ca7a978884/file.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; } 

:root{
  --bg:#FFFFFF; --bg-2:#F2F2F1; --bg-3:#E6E6E5; --ink:#161616; --ink-2:#5F5F5F; --line:rgba(0,0,0,.1);
  --accent:#2340FF; --accent-ink:#FFFFFF; --black:#000;
  --gutter:148px; --node-x:96px; --pad-r:clamp(20px,5vw,72px);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --bg-2:#161616; --bg-3:#222; --ink:#F2F2F2; --ink-2:#A3A3A3; --line:rgba(255,255,255,.12);
    --accent:#4F66FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --bg-2:#161616; --bg-3:#222; --ink:#F2F2F2; --ink-2:#A3A3A3; --line:rgba(255,255,255,.12);
  --accent:#4F66FF; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:500;line-height:1.02;letter-spacing:-.045em}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:transform .6s var(--ease)}
.nav.is-hidden{transform:translateY(-110%)}
.nav-in{display:flex;align-items:center;gap:32px;padding:16px var(--pad-r) 16px 32px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:.08em}
.logo-img{height:30px;width:auto}
:root[data-theme="dark"] .logo-img,:root[data-theme="dark"] .clogo{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-img,:root:not([data-theme="light"]) .clogo{filter:invert(1)}}
.nav-links{display:flex;gap:30px;margin:0 0 0 auto;list-style:none;padding:0}
.nav-links a{position:relative;display:block;padding:6px 0;text-decoration:none;font-size:15px;color:var(--ink-2);transition:color .35s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.is-current{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a.is-current::before{content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent)}
.btn{position:relative;display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:#fff;border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.nav .btn{min-height:44px;padding:0 20px}
.theme{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .6s var(--ease)}
.theme:hover{transform:rotate(180deg)}
.theme svg{width:18px;height:18px}

/* ---------- flow line ---------- */
main{position:relative}
.flowline{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1;overflow:visible}
.flowline .track{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}
.flowline .drawn{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.dot-core{fill:var(--accent)}
.dot-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.dot-tag rect{fill:var(--ink)}
.dot-tag text{fill:var(--bg);font:600 12px var(--sans)}
.node{position:absolute;left:var(--node-x);top:var(--node-top,8.2rem);width:16px;height:16px;transform:translate(-50%,-50%);z-index:2;background:var(--bg);border:2px solid var(--bg-3);border-radius:50%;transition:border-color .5s,background .5s}
.node::after{content:attr(data-label);position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);font-size:12px;font-weight:500;white-space:nowrap;color:var(--ink-2);opacity:.5;transition:opacity .5s,color .5s}
.node.is-visited{border-color:var(--accent);background:var(--accent)}
.node.is-visited::after{opacity:1;color:var(--ink)}
.node--pill{width:32px;border-radius:999px}
.node--diamond{border-radius:3px;transform:translate(-50%,-50%) rotate(45deg)}
.node--diamond::after{transform:translateY(-50%) rotate(-45deg);right:calc(100% + 8px);top:auto;bottom:-6px}
.node--rect{border-radius:4px;width:24px}
.node--end{width:24px;height:24px;box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--bg-3)}
.node--end.is-visited{box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--accent)}

/* ---------- layout ---------- */
.sec{position:relative;padding:clamp(96px,12vw,170px) var(--pad-r) clamp(96px,12vw,170px) var(--gutter)}
.sec--grey{background:var(--bg-2)}
.in{position:relative;z-index:3;max-width:1240px}
.kicker{font-size:15px;color:var(--ink-2);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.h2{font-size:clamp(2.6rem,5.6vw,5rem);max-width:16ch}
.lead{font-size:clamp(1.08rem,1.4vw,1.25rem);color:var(--ink-2);max-width:46ch;line-height:1.6}

/* word reveal */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .08em .26em;margin:-.12em -.08em -.26em}
.wi{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
.in-view .wi{transform:none}
.rise{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.in-view.rise,.in-view .rise{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:80px}
.hero .in{max-width:none}
.hero h1{font-size:clamp(2.7rem,5.2vw,5rem);font-weight:500;letter-spacing:-.05em;line-height:.98}
.hero-lead{margin-top:30px}
.flow-word{position:relative;display:inline-block}
.flow-word .wm{padding:.18em .18em .26em .14em;margin:-.18em -.18em -.26em -.14em}
.flow-word .wi{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent);padding-right:.04em}
.flow-wave{position:absolute;left:0;right:.1em;bottom:-.3em;height:.22em;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) 1s;pointer-events:none}
.in-view .flow-wave{clip-path:inset(0 0 0 0)}
.flow-wave svg{display:block;width:200%;height:100%;animation:waveFlow 3.2s linear infinite}
.flow-wave path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
@keyframes waveFlow{to{transform:translateX(-50%)}}
/* subtle ripple travelling through the letters of the accent word */
.flow-word .fl{display:inline-block}
.in-view .flow-word .fl{animation:letterFlow 5.5s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(2.4s + var(--l) * 85ms)}
@keyframes letterFlow{0%,34%,100%{transform:none}12%{transform:translateY(-.07em) rotate(-1.5deg)}22%{transform:translateY(.015em)}}
@media (prefers-reduced-motion:reduce){.in-view .flow-word .fl{animation:none}}
.flow-dot{display:inline-block;width:.12em;height:.12em;margin-left:.04em;border-radius:50%;background:var(--accent);vertical-align:baseline;opacity:0;transform:scale(0);transition:opacity .4s,transform .8s cubic-bezier(.34,1.8,.64,1) 1.6s}
.in-view .flow-dot{opacity:1;transform:none;animation:dotBeat 2.4s ease-in-out 2.6s infinite}
@keyframes dotBeat{0%,100%{transform:none}50%{transform:scale(1.35)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:56px;font-size:14px;color:var(--ink-2)}
.hero-meta b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.stage{position:relative;height:min(72svh,600px);min-height:460px;z-index:3}
.layer{position:absolute;will-change:transform}
.layer--web{left:9%;top:10%;width:100%}
.layer--phone{left:0;right:0;top:8%;bottom:8%;display:flex;justify-content:center;align-items:center}
.layer--phone>div{height:100%}
.layer--phone .hero-phones{height:100%;width:auto;max-width:none}

.hero-phones{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.28)) drop-shadow(0 8px 14px rgba(0,0,0,.14))}
.layer--chip{display:none}
.stage-tag{display:flex;position:absolute;left:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:4;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--ink-2);box-shadow:0 18px 36px -22px rgba(0,0,0,.35)}
.stage-tag b{font-weight:500;color:var(--ink);font-size:14px}
.float-a{animation:floatA 9s ease-in-out infinite}
.float-b{animation:floatB 7s ease-in-out infinite}
@keyframes floatA{50%{transform:translateY(-12px)}}
@keyframes floatB{50%{transform:translateY(10px)}}
.chip-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:0 24px 50px -24px rgba(0,0,0,.35)}
.chip-card i{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff}
.chip-card i svg{width:18px;height:18px}
.chip-card b{display:block;font-weight:600}
.chip-card span{color:var(--ink-2);font-size:13px}
.hero-intro{opacity:0;transition:opacity .01s}
.loaded .hero-intro{opacity:1}
.stage-in{opacity:0;transform:translateY(40px) scale(.97);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);transition-delay:var(--d,0ms)}
.loaded .stage-in{opacity:1;transform:none}



@media (max-width:1100px){ .hero{padding-left:calc(var(--gutter) + clamp(6px,2vw,24px))} }

/* ---------- hero flow demo ---------- */
.layer--fd{inset:0}
.fd{position:relative;width:100%;height:100%;border-radius:32px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;padding:clamp(20px,2.4vw,32px)}
.fd::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px);background-size:22px 22px;opacity:.9;pointer-events:none}
.fd-head{position:relative;z-index:2;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.fd-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.fd-count{margin-left:auto;font-variant-numeric:tabular-nums}
.fd-count b{color:var(--ink);font-weight:600}
.fd-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.fd-track{fill:none;stroke:var(--ink-2);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.fd-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.fd-user{fill:var(--accent);stroke:var(--bg);stroke-width:3}
.fd-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s var(--ease) infinite}
.fd-step{position:absolute;z-index:2;width:min(54%,290px);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(0,0,0,.35);transition:border-color .5s,box-shadow .5s,transform .6s var(--ease)}
.fd-step[data-i="0"]{left:7%;top:20%}
.fd-step[data-i="1"]{right:7%;top:36%}
.fd-step[data-i="2"]{left:9%;top:55%}
.fd-step[data-i="3"]{right:9%;top:72%}
.fd-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--bg-2);color:var(--ink);display:grid;place-items:center;transition:background .5s,color .5s}
.fd-ic svg{width:20px;height:20px}
.fd-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fd-t b{font-size:15px;font-weight:600;color:var(--ink)}
.fd-t small{font-size:12.5px;color:var(--ink-2)}
.fd-ok{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.8,.64,1)}
.fd-ok svg{width:13px;height:13px}
.fd-step.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 22px 44px -24px color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-3px)}
.fd-step.on .fd-ic{background:var(--accent);color:#fff}
.fd-step.done .fd-ok{transform:scale(1)}
.fd-foot{position:absolute;z-index:2;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(18px,2.2vw,28px);display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.fd-bar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.fd-bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}

/* ---------- hero v4 ---------- */
.h-pill{display:inline-block;vertical-align:middle;position:relative;top:-.06em;width:1.9em;height:.82em;margin:0 .06em;border-radius:999px;overflow:hidden;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#8FD3FF));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .8s var(--ease) .5s,transform 1s cubic-bezier(.34,1.5,.64,1) .5s}
.h-pill img{position:absolute;left:50%;top:14%;width:78%;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 .06em .08em rgba(0,0,0,.35))}
.in-view .h-pill{opacity:1;transform:none}
.hero-panel{position:absolute;left:0;right:0;bottom:0;height:74%;border-radius:32px;background:var(--accent);color:#fff;text-decoration:none;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(22px,2.6vw,34px);isolation:isolate}
.hero-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.22),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(0,0,40,.25),transparent 60%);z-index:-1}
.hp-rings{position:absolute;right:-18%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.22);z-index:-1}
.hp-rings::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.hp-meta{display:flex;flex-direction:column;gap:2px;max-width:48%;line-height:1.3}
.hp-meta span{font-size:13px;opacity:.75}
.hp-meta b{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:500;letter-spacing:-.03em}
.hp-meta small{font-size:14px;opacity:.85}
.hp-go{position:absolute;left:clamp(22px,2.6vw,34px);top:clamp(22px,2.6vw,34px);flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;transition:transform .6s var(--ease)}
.hp-go svg{width:20px;height:20px}
.hero-panel:hover .hp-go{transform:rotate(45deg) scale(1.06)}
.stage .layer--phone{left:auto;right:6%;top:0;bottom:6%;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;z-index:2;padding:0}
.stage .layer--phone>div{height:100%}
.stage .layer--phone .hero-phones{height:100%;width:auto;max-width:none;filter:drop-shadow(0 40px 36px rgba(0,0,40,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.18))}
@media (min-width:1101px){
  .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"kick kick" "head head" "copy media";align-items:end;column-gap:clamp(48px,6vw,104px);row-gap:0;padding-left:calc(var(--gutter) + clamp(12px,2.4vw,40px));padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(72px,8vw,120px);min-height:0}
  #heroIntro{display:contents}
  .hero .kicker{grid-area:kick}
  .hero h1{grid-area:head;font-size:clamp(3.2rem,5.3vw,5.8rem);max-width:none;margin-bottom:clamp(36px,4vw,60px)}
  .hero-copy{grid-area:copy;padding-bottom:6px}
  .hero-copy .hero-lead{margin-top:0}
  .hero .stage{grid-area:media;height:clamp(400px,48vh,520px);min-height:0}
}
@media (max-width:1100px){
  .hero .stage{height:auto;min-height:0;aspect-ratio:16/11;margin-top:64px}
}
@media (max-width:760px){
  .hero .stage{aspect-ratio:1/1.05;margin-top:40px}
  .hero-panel{height:62%;border-radius:26px;padding:18px}
  .hp-meta{max-width:58%}
  .hp-meta small{display:none}
  .hp-go{width:44px;height:44px}
  .stage .layer--phone{right:4%;bottom:10%}
}
/* ---------- device frames & mock UI ---------- */
.fw{container-type:inline-size;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.08);overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.4),0 10px 30px -15px rgba(0,0,0,.15);color:#161616}
.fw-bar{display:flex;align-items:center;gap:6px;height:calc(100cqw/64*2.2);padding:0 calc(100cqw/64*1);background:#F1F1F0;border-bottom:1px solid rgba(0,0,0,.06)}
.fw-bar i{width:calc(100cqw/64*.7);height:calc(100cqw/64*.7);border-radius:50%;background:#D2D2D0}
.fw-bar span{margin:0 auto;padding:0 calc(100cqw/64*3);height:calc(100cqw/64*1.3);border-radius:99px;background:#fff;font-size:calc(100cqw/64*.7);display:flex;align-items:center;color:#888}
.fw-screen{font-size:calc(100cqw/64);aspect-ratio:64/38;position:relative;overflow:hidden;background:#fff}
.fp{container-type:inline-size;border-radius:16%/7.4%;background:#0A0A0A;padding:3.2%;box-shadow:0 50px 90px -30px rgba(0,0,0,.5),0 10px 25px -10px rgba(0,0,0,.25);color:#161616}
.fp-screen{font-size:calc(100cqw/31);aspect-ratio:9/19.3;border-radius:13%/6%;background:#fff;overflow:hidden;position:relative}
.fp-screen::before{content:"";position:absolute;top:1em;left:50%;width:8em;height:2em;border-radius:1em;background:#0A0A0A;transform:translateX(-50%);z-index:5}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.u{position:absolute;inset:0;display:flex;flex-direction:column}
.u-pad{padding:4.2em 1.8em 1.4em;display:flex;flex-direction:column;gap:1.2em;flex:1}
.u-sm{font-size:.95em;color:#8A8A8A}
.u-h{font-size:2.3em;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.u-search{height:3.4em;border-radius:1.7em;background:#F2F2F1;display:flex;align-items:center;gap:.8em;padding:0 1.2em;color:#9A9A9A;font-size:1em}
.u-search svg{width:1.3em;height:1.3em}
.u-chips{display:flex;gap:.6em}
.u-chips b{font-weight:500;font-size:.95em;padding:.6em 1.1em;border-radius:1.5em;background:#F2F2F1}
.u-chips b.on{background:#161616;color:#fff}
.u-card{border-radius:1.4em;background:#fff;box-shadow:0 .4em 1.8em rgba(0,0,0,.08);overflow:hidden}
.u-img{height:11em;background:linear-gradient(160deg,#DADAD8,#B9B9B6);position:relative}
.u-img svg{position:absolute;left:50%;top:50%;width:4em;height:4em;transform:translate(-50%,-50%);color:rgba(255,255,255,.85)}
.u-body{padding:1em 1.2em 1.2em;display:flex;flex-direction:column;gap:.35em}
.u-t{font-weight:600;font-size:1.15em}
.u-row{display:flex;align-items:center;justify-content:space-between;margin-top:.6em}
.u-btn{position:relative;display:inline-flex;align-items:center;height:2.8em;padding:0 1.2em;border-radius:1.4em;background:var(--accent);color:#fff;font-weight:600;font-size:.95em}
.u-tab{display:flex;justify-content:space-around;padding:1.1em 1.4em 2em;border-top:1px solid #EFEFEE}
.u-tab i{width:1.7em;height:1.7em;border-radius:.5em;background:#DADAD8}
.u-tab i.on{background:#161616}
.u-bar{height:.7em;border-radius:.35em;background:#E4E4E2}
/* web mock */
.w-nav{display:flex;align-items:center;gap:2em;padding:1.4em 2.4em;font-size:.9em}
.w-logo{font-weight:700;font-size:1.25em;letter-spacing:-.03em;margin-right:auto}
.w-nav span{color:#777}
.w-cart{width:2.2em;height:2.2em;border-radius:50%;background:#161616}
.w-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4em;padding:1.6em 2.4em;align-items:center}
.w-h{font-size:3.4em;font-weight:600;letter-spacing:-.05em;line-height:.98}
.w-p{font-size:1em;color:#777;margin:1.2em 0 1.6em;max-width:22em}
.w-img{height:15em;border-radius:1.2em;background:linear-gradient(150deg,#E9E9E7,#C9C9C6);position:relative}
.w-img svg{position:absolute;left:50%;top:50%;width:5em;height:5em;transform:translate(-50%,-50%);color:#fff}
.w-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2em;padding:.4em 2.4em 2em}
.w-grid div{display:flex;flex-direction:column;gap:.5em}
.w-grid i{display:block;aspect-ratio:1;border-radius:.9em;background:#F0F0EF}
.w-grid b{height:.6em;width:70%;border-radius:.3em;background:#DCDCDA}
.w-grid s{height:.6em;width:35%;border-radius:.3em;background:var(--accent);opacity:.9}
.w-photo{position:absolute;inset:0;background:linear-gradient(180deg,#2B2B2B 0%,#555 60%,#8A8A87 100%)}
.w-photo .w-nav{color:#fff}.w-photo .w-nav span{color:rgba(255,255,255,.7)}
.w-photo-t{position:absolute;left:2.4em;bottom:6.5em;color:#fff}
.w-photo-t h4{margin:0;font:400 4.2em/0.95 var(--serif);letter-spacing:-.02em}
.w-photo-t p{margin-top:.8em;font-size:1em;opacity:.8}
.w-strip{position:absolute;left:2.4em;right:2.4em;bottom:1.6em;display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.w-strip i{height:3.6em;border-radius:.6em;background:rgba(255,255,255,.18)}
.w-cms{position:absolute;inset:0;display:grid;grid-template-columns:13em 1fr}
.w-side{background:#161616;padding:2em 1.4em;display:flex;flex-direction:column;gap:1em}
.w-side b{color:#fff;font-size:1.05em;margin-bottom:1em}
.w-side i{height:.7em;border-radius:.35em;background:rgba(255,255,255,.18)}
.w-side i.on{background:var(--accent)}
.w-main{padding:2em 2.4em;display:flex;flex-direction:column;gap:1em}
.w-main-h{display:flex;align-items:center;justify-content:space-between}
.w-main-h b{font-size:1.8em;letter-spacing:-.04em;font-weight:600}
.w-row{display:grid;grid-template-columns:3em 1fr 7em 6em;gap:1.2em;align-items:center;padding:.9em 0;border-bottom:1px solid #EEE}
.w-row i{height:3em;border-radius:.6em;background:#EDEDEB}
.w-tag{height:1.8em;border-radius:1em;background:#F0F0EF}
.w-tag.on{background:color-mix(in srgb,var(--accent) 16%,#fff)}
/* edu */
.e-days{display:flex;gap:.5em}
.e-days div{flex:1;border-radius:1em;background:#F2F2F1;padding:.7em 0;text-align:center;font-size:.85em;color:#777}
.e-days div b{display:block;font-size:1.3em;color:#161616}
.e-days div.on{background:var(--accent);color:rgba(255,255,255,.8)}
.e-days div.on b{color:#fff}
.e-item{display:flex;gap:1em;align-items:center;padding:1em;border-radius:1.2em;background:#F7F7F6}
.e-item i{width:3.2em;height:3.2em;border-radius:.9em;background:#161616;flex:none}
.e-item i.a{background:var(--accent)}
.e-item div{flex:1;display:flex;flex-direction:column;gap:.2em}
.e-item b{font-weight:600}
.e-item span{font-size:.85em;color:#888}
/* research */
.r-board{position:absolute;inset:0;padding:2em 2.4em;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto repeat(3,1fr);gap:1em;background:#F4F4F3}
.r-board h5{grid-column:1/-1;margin:0;font-size:1.6em;font-weight:600;letter-spacing:-.03em}
.r-board i{border-radius:.4em;background:#fff;box-shadow:0 .3em .8em rgba(0,0,0,.06);transform:rotate(var(--r,0deg))}
.r-board i.a{background:var(--accent)}
.r-board i.k{background:#161616}

/* cursor demo */
.demo-cursor{position:absolute;left:60%;top:55%;width:2.2em;height:2.2em;z-index:4;pointer-events:none;animation:cur 6s var(--ease) infinite;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.3))}
@keyframes cur{0%,12%{transform:translate(5em,8em);opacity:0}22%{opacity:1}45%{transform:translate(0,0)}50%{transform:translate(0,0) scale(.85)}55%{transform:translate(0,0) scale(1)}85%{transform:translate(0,0);opacity:1}100%{transform:translate(5em,8em);opacity:0}}
.u-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:rip 6s var(--ease) infinite}
@keyframes rip{0%,48%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 1.2em transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- clients ---------- */
.clients{position:relative;z-index:3;padding:clamp(72px,9vw,128px) 0 20px var(--gutter)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 45s linear infinite;-webkit-transform:translateZ(0)}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex;flex:none;list-style:none;margin:0;padding:0}
.marquee li{flex:none;padding:34px clamp(30px,3.6vw,60px);display:flex;align-items:center}
.clogo{height:var(--h,46px);width:auto;max-width:none;flex:none;opacity:.55;transition:opacity .4s,transform .6s var(--ease)}
.marquee li:hover .clogo{opacity:1;transform:scale(1.06)}
/* touch: logos become a horizontal picker wheel (drag, momentum, snap to centre, cylinder-like 3D falloff) */
.marquee.wheel{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.marquee.wheel .marquee-track{animation:none;will-change:transform}
.marquee.wheel .clogo{transition:none;will-change:transform,opacity;-webkit-user-drag:none;pointer-events:none}
.marquee.wheel li{padding-left:18px;padding-right:18px}
.marquee.wheel li:hover .clogo{transform:none}
.clients-label{padding:0 var(--pad-r) 18px 0;font-size:15px;color:var(--ink-2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- video band ---------- */
.vband{position:relative;height:190svh}
.vband-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vband-media{position:absolute;inset:0;clip-path:inset(var(--cy,18%) var(--cx,22%) var(--cy,18%) var(--cx,22%) round var(--cr,36px));background:#0d0d0d;will-change:clip-path}
.vband-media video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--vs,1.15))}
.vband-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.vband-text{position:relative;z-index:3;color:#fff;margin:0;padding:0 var(--pad-r) 0 var(--gutter);max-width:1240px;width:100%;opacity:var(--vo,0);transform:translateY(calc((1 - var(--vo,0)) * 30px))}
.vband-text blockquote{margin:0;font-family:var(--serif);font-size:clamp(2.2rem,5.4vw,5rem);line-height:1.04;max-width:18ch;letter-spacing:-.01em}
.vband-text figcaption{margin-top:24px;font-size:15px;color:rgba(255,255,255,.75)}
.vtoggle{position:absolute;z-index:4;right:var(--pad-r);bottom:32px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:var(--vo,0)}
.vtoggle svg{width:18px;height:18px}

/* ---------- horizontal projects ---------- */
.hs{position:relative;padding:0}
.hs-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px);overflow:hidden;padding:calc(90px + env(safe-area-inset-top,0px)) 0 40px}
@media (max-height:820px) and (min-width:981px){.hs-head .h2{font-size:clamp(2.2rem,4.2vw,3.6rem)}}
.hs-head{position:relative;z-index:3;padding:0 var(--pad-r) 0 var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hs-prog{width:180px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hs-prog i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.hs-view{flex:none;padding-bottom:8px;position:relative;z-index:3;margin-left:var(--gutter);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px);mask-image:linear-gradient(90deg,transparent 0,#000 40px)}
.hs-track{display:flex;gap:clamp(20px,2.4vw,36px);padding:0 var(--pad-r) 0 40px;width:max-content;will-change:transform}
.hs{--cs:max(220px,min(calc((100vw - var(--gutter) - 40px) / 3.5 - clamp(20px,2.4vw,36px)),620px))}
@media (min-width:981px){.hs-head .h2{font-size:clamp(2.2rem,3.4vw,4.2rem);white-space:nowrap}.hs-head .h2 br{display:none}}
@media (max-height:820px) and (min-width:981px){.hs .pcard{gap:14px}}
.pcard{width:var(--cs);flex:none;display:flex;flex-direction:column;gap:22px;text-decoration:none}
.pcard-visual{position:relative;height:var(--cs);border-radius:28px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;perspective:1200px}
.pcard-visual .dev{transition:transform .9s var(--ease)}
.pcard-visual .dev.web{width:78%}
.pcard-visual .dev.phone{width:min(34%,250px)}
.pcard:hover .pcard-visual .dev{transform:translateY(-10px) scale(1.02)}
.pcard-meta{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start}
.pcard-cat{font-size:14px;color:var(--ink-2)}
.pcard-name{font-size:clamp(1.35rem,1.9vw,1.9rem);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.pcard-desc{grid-column:1/2;color:var(--ink-2);font-size:15px;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-go{grid-row:1/4;grid-column:2;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s,color .4s,transform .6s var(--ease)}
.pcard-go svg{width:20px;height:20px}
.pcard:hover .pcard-go{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-45deg)}
.pcard-visual.has-img{display:block;background:var(--ibg,var(--bg-2))}
.pcard-visual.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,contain);transform:translateX(var(--px,0px)) scale(1.06);transition:transform 1.2s var(--ease)}
.pcard:hover .pcard-visual.has-img img{transform:translateX(var(--px,0px)) scale(1.1)}
.pv-img{width:380px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.45);background:var(--ibg,#eee)}
.pv-img img{width:100%;height:260px;object-fit:var(--fit,contain)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#111}
.workshop{margin:clamp(60px,8vw,110px) 0 0;position:relative;border-radius:32px;overflow:hidden;aspect-ratio:2/1;background:#151515}
.workshop img{width:100%;height:100%;object-fit:cover;transform:translateY(var(--wy,0px)) scale(1.12)}
.workshop figcaption{position:absolute;left:clamp(24px,4vw,48px);bottom:clamp(24px,4vw,44px);color:#fff;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.1;max-width:18ch}
.pcard--end .pcard-visual{background:var(--ink);color:var(--bg);place-items:end start;padding:clamp(28px,4vw,56px)}
.pcard--end h3{font-size:clamp(2.2rem,4vw,3.8rem);max-width:10ch}

/* ---------- other projects list ---------- */
.plist{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.prow{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1.1fr) 48px;gap:24px;align-items:center;padding:28px 12px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .6s var(--ease)}
.prow:hover{padding-left:28px}
.prow-cat{font-size:14px;color:var(--ink-2)}
.prow-name{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.035em;transition:color .4s}
.prow:hover .prow-name{color:var(--accent)}
.prow-desc{font-size:16px;color:var(--ink-2)}
.prow-go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .6s var(--ease),background .4s,color .4s,border-color .4s}
.prow-go svg{width:18px;height:18px}
.prow:hover .prow-go{transform:rotate(-45deg);background:var(--ink);color:var(--bg);border-color:var(--ink)}
.preview{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;width:340px;transition:opacity .35s var(--ease)}
.preview.on{opacity:1}
.preview .fp{width:170px;margin-left:auto;margin-right:auto}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.tabs{display:flex;flex-direction:column;margin-top:44px;border-top:1px solid var(--line)}
.tab{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 clamp(1.25rem,2vw,1.6rem) var(--sans);letter-spacing:-.03em;text-align:left;cursor:pointer;transition:color .4s,padding .6s var(--ease)}
.tab::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);padding-left:16px}
.tab[aria-selected="true"]::before{transform:none}
.tab svg{width:20px;height:20px;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .6s var(--ease)}
.tab[aria-selected="true"] svg{opacity:1;transform:none;color:var(--accent)}
.panels{position:relative;border-radius:32px;background:var(--bg);padding:clamp(30px,4vw,56px);min-height:440px;box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.panel{display:flex;flex-direction:column;gap:24px}
.panel[hidden]{display:none}
.panel.enter>*{animation:rise .8s var(--ease) both}
.panel.enter>*:nth-child(2){animation-delay:.06s}
.panel.enter>*:nth-child(3){animation-delay:.12s}
.panel.enter>*:nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.panel h3{font-size:clamp(2rem,3.6vw,3.2rem)}
.panel p{color:var(--ink-2);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tags li{padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:15px}
.panel-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px)}
.proc-side{position:sticky;top:130px;align-self:start;display:flex;flex-direction:column;gap:24px}
.roll-wrap{display:flex;align-items:flex-end;gap:14px;margin-top:12px}
.roll{height:1.2em;overflow:hidden;padding:0 .12em 0 .04em;font-size:clamp(7rem,13vw,11rem);line-height:1.2;font-weight:300;letter-spacing:-.04em;color:var(--accent)}
.roll-col{display:flex;flex-direction:column;transition:transform 1s var(--ease)}
.roll-col span{height:1.2em;display:block}
.roll-of{font-size:16px;color:var(--ink-2);padding-bottom:2.2em}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.step{position:relative;padding:40px 0;min-height:clamp(260px,46vh,440px);display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);opacity:.28;transition:opacity .7s var(--ease)}
.step::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.step.is-active::before{transform:none}
.step:last-child{border-bottom:1px solid var(--line)}
.step.is-active{opacity:1}
.step h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:12px;transition:transform .7s var(--ease)}
.step.is-active h3{transform:translateX(12px)}
.step p{color:var(--ink-2);max-width:44ch;transition:transform .7s var(--ease)}
.step.is-active p{transform:translateX(12px)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,100px);align-items:center}
.portrait{position:relative}
.portrait-frame{position:relative;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:var(--bg-2);clip-path:inset(18% 0 0 0 round 32px);transition:clip-path 1.6s var(--ease)}
.in-view .portrait-frame{clip-path:inset(0 0 0 0 round 32px)}
.portrait-frame{background:#000}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.18);transition:transform 2s var(--ease)}
.in-view .portrait-frame img{transform:scale(1)}
/* portrait parallax: image is taller than the frame and drifts on scroll (translate is separate from the reveal transform) */
.portrait-frame img{position:absolute;left:0;top:-11%;height:122%;translate:0 var(--ppy,0px)}
.portrait{translate:0 var(--pfy,0px)}
@media (prefers-reduced-motion:reduce){.portrait-frame img{translate:none}.portrait{translate:none}}
.portrait-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-2);font-size:15px;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,var(--bg-2) 0 14px,var(--bg-3) 14px 15px)}
.portrait-ph svg{width:44px;height:44px}
.persona{position:absolute;right:-28px;bottom:-34px;width:min(300px,80%);background:var(--accent);color:#fff;border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;font-size:14px;box-shadow:0 40px 70px -30px rgba(0,0,0,.5)}
.persona-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;opacity:.6}
.persona dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.persona dt{opacity:.55}
.persona dd{margin:0}
.about-text{display:flex;flex-direction:column;gap:26px}
.about-text .note{font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.3}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;border-top:1px solid var(--line);padding-top:28px;margin-top:6px}
.facts h3{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-bottom:10px}
.facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16px}
.links-row{display:flex;flex-wrap:wrap;gap:12px}
.facts ul.certs{gap:12px}
.certs li{display:flex;align-items:center;gap:14px;font-size:15px}
.cert-logo{flex:none;width:116px;height:58px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:8px}
.cert-logo img{max-width:100%;width:auto;filter:grayscale(1);opacity:.85;transition:filter .5s var(--ease),opacity .5s}
.certs li:hover .cert-logo img{filter:none;opacity:1}

.facts--one{grid-template-columns:1fr}
.certs-band{margin-top:clamp(90px,10vw,140px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:24px clamp(32px,5vw,80px);align-items:start;max-width:none}
.certs-head .kicker{margin-bottom:10px}
.certs-note{font-size:15px;color:var(--ink-2);max-width:26ch}
.cert-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cert-grid li{display:flex;flex-direction:column;gap:18px;padding:18px 18px 22px;border-radius:24px;background:var(--bg);border:1px solid var(--line);font-size:16px;font-weight:500;line-height:1.35;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cert-grid li:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(0,0,0,.3)}
.cert-grid .cert-logo{width:100%;height:96px;border-radius:16px;padding:14px}
.cert-grid li:hover .cert-logo img{filter:none;opacity:1}
.certs-band.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.certs-band.reveal.in-view{opacity:1;transform:none}
.tool-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 24px;align-items:center}
.tool-rows dt{font-size:14px;color:var(--ink-2)}
.tool-rows dd{margin:0}
.facts ul.tool-pills{flex-direction:row;flex-wrap:wrap;gap:8px}
.tool-pills li{padding:7px 16px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:15px;line-height:1.3;transition:border-color .4s,color .4s,transform .5s var(--ease)}
.tool-pills li:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
/* ---------- testimonial ---------- */
.testi-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.testi-head .kicker{margin:0}
.testi-nav{display:flex;align-items:center;gap:10px}
.testi-count{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-right:10px}
.testi-count b{color:var(--ink);font-weight:500}
.tnav{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .4s var(--ease),color .4s,border-color .4s}
.tnav:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.tnav svg{width:20px;height:20px}
.testi-stage{display:grid;touch-action:pan-y}
.tslide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease),visibility 0s .8s}
.tslide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease) .1s,transform .9s var(--ease) .1s,visibility 0s}
.testi blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.24;letter-spacing:-.01em;max-width:38ch}
.testi-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.tdots{display:flex;gap:8px}
.tdots button{position:relative;overflow:hidden;width:28px;height:4px;border:0;padding:0;border-radius:4px;background:var(--line);cursor:pointer;transition:width .6s var(--ease)}
.tdots button[aria-current="true"]{width:56px}
.tdots button::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tdots button[aria-current="true"]::after{transform:scaleX(1)}
.testi.is-auto .tdots button[aria-current="true"]::after{animation:tprog var(--tdur,7s) linear both}
.testi.is-paused .tdots button[aria-current="true"]::after{animation-play-state:paused}
@keyframes tprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.greview{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;padding:14px 14px 14px 26px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.greview-t{display:flex;flex-direction:column;line-height:1.3}
.greview-t b{font-weight:500;font-size:16px;color:var(--ink)}
.greview-t span{font-size:14px;color:var(--ink-2)}
.gstars{display:flex;gap:2px;color:#F5B400}
.gstars svg{width:18px;height:18px}
.greview .btn{min-height:48px}
.testi figcaption{margin-top:32px;display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink-2)}
.testi figcaption b{color:var(--ink);font-weight:500;font-size:17px}

/* ---------- contact ---------- */
.contact{padding-top:40px;padding-bottom:120px}
.cta-block{position:relative;overflow:hidden;border-radius:40px;background:var(--accent);color:#fff;padding:clamp(40px,7vw,110px)}
.cta-block h2{font-size:clamp(3rem,8.5vw,8rem);line-height:.92;letter-spacing:-.06em;max-width:11ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;margin-top:56px}
.cta-row p{max-width:40ch;color:rgba(255,255,255,.85);font-size:18px}
.mega{min-height:88px;padding:0 44px;font-size:18px;background:#fff;color:#000;border-color:#fff}
.mega::before{background:#000}
.mega:hover{color:#fff;border-color:#000}
.cta-ring{position:absolute;right:-12vw;top:-12vw;width:40vw;height:40vw;border-radius:50%;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.cta-ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.foot{position:relative;z-index:3;padding:34px var(--pad-r) 34px var(--gutter);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:14px;color:var(--ink-2)}


/* ---------- arrival celebration ---------- */
.dot-tag rect,.dot-tag text{transition:fill .5s var(--ease)}
.node--end .arr-ring{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none}
.node--end.arrived .arr-ring{animation:arrRing 1.6s var(--ease) forwards}
@keyframes arrRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(7);opacity:0}}
.node--end.arrived{animation:arrPop .7s cubic-bezier(.34,1.8,.64,1)}
@keyframes arrPop{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1)}}
.mega-wrap{position:relative;display:inline-flex;border-radius:999px}
.mega-trace{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.mega-trace rect{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:0}
.cta-block.arrived .mega-trace rect{opacity:.9;animation:traceDraw 1.4s var(--ease) .45s both}
@keyframes traceDraw{from{stroke-dashoffset:var(--tl)}to{stroke-dashoffset:0}}
.cta-block.arrived .mega{animation:megaGlow 2.2s var(--ease) 1.5s}
@keyframes megaGlow{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.flowline.arrived .dot-tag{opacity:0;transition:opacity .5s var(--ease)}
.dot-tag{transition:opacity .5s var(--ease)}
.cta-block.arrived .cta-ring{animation:ctaRing 1.8s var(--ease)}
@keyframes ctaRing{0%{transform:scale(.85);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}

.cta-block::after{content:"";position:absolute;left:0;top:50%;width:180%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 45%,transparent 70%);pointer-events:none;opacity:0}
.cta-block.arrived::after{animation:ctaWave 1.6s var(--ease)}
@keyframes ctaWave{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.cta-block.arrived h2 .wi{animation:wordHop .9s cubic-bezier(.34,1.6,.64,1) both;animation-delay:calc(.2s + var(--i,0) * 70ms)}
@keyframes wordHop{0%{transform:none}40%{transform:translateY(-14%)}100%{transform:none}}

/* ---------- contact page ---------- */
.route-contact #flow,.route-contact .preview{display:none}
.cpage{display:block}
.cpage[hidden]{display:none}
.cp-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,5vw,64px);padding-left:calc(var(--gutter) + clamp(0px,2vw,32px))}
.cp-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;font-size:14px;color:var(--ink-2);text-decoration:none;transition:color .3s,gap .4s var(--ease)}
.cp-back svg{width:16px;height:16px}
.cp-back:hover{color:var(--ink);gap:12px}
.cp-h{font-size:clamp(3rem,7vw,7rem);font-weight:500;letter-spacing:-.05em;line-height:1.02;max-width:12ch;padding-bottom:.08em}
.cp-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent)}
.cp-hero .lead{margin-top:28px}
.cp-body{padding-top:0;padding-left:calc(var(--gutter) + clamp(0px,2vw,32px))}
.cp-grid{max-width:1240px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:start}
.cp-info{display:flex;flex-direction:column;gap:12px}
.cp-card{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .4s,transform .5s var(--ease),box-shadow .5s var(--ease)}
a.cp-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-2px);box-shadow:0 20px 40px -28px color-mix(in srgb,var(--accent) 60%,transparent)}
.cp-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--bg-2);display:grid;place-items:center;color:var(--ink);transition:background .4s,color .4s}
.cp-ic svg{width:21px;height:21px}
a.cp-card:hover .cp-ic{background:var(--accent);color:#fff}
.cp-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cp-t small{font-size:13px;color:var(--ink-2)}
.cp-t b{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.cp-t em{font-style:normal;font-size:14px;color:var(--ink-2);margin-top:4px}
.cp-card--main{background:var(--accent);border-color:var(--accent);color:#fff;padding:24px}
.cp-card--main .cp-ic{background:rgba(255,255,255,.16);color:#fff}
.cp-card--main .cp-t small{color:rgba(255,255,255,.75)}
.cp-card--main .cp-t b{font-size:clamp(17px,1.5vw,20px);overflow-wrap:normal;word-break:normal}
a.cp-card--main:hover .cp-ic{background:#fff;color:var(--accent)}
.cp-copy{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:500 13px var(--sans);cursor:pointer;transition:background .3s,color .3s}
.cp-copy svg{width:15px;height:15px}
.cp-copy:hover{background:#fff;color:var(--accent)}
.cp-company{margin:14px 0 0;padding:20px 4px 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:15px}
.cp-company div{display:grid;grid-template-columns:72px 1fr;gap:12px}
.cp-company dt{color:var(--ink-2)}
.cp-company dd{margin:0}
.cp-formwrap{border-radius:32px;background:var(--bg-2);padding:clamp(22px,3.4vw,44px)}
.cp-form{display:flex;flex-direction:column;gap:18px}
.cp-topics{border:0;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-topics legend{font-size:15px;font-weight:500;margin-bottom:12px;padding:0}
.cp-topics label{position:relative;cursor:pointer}
.cp-topics input{position:absolute;opacity:0;pointer-events:none}
.cp-topics span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:14px;transition:background .3s,color .3s,border-color .3s}
.cp-topics label:hover span{border-color:var(--ink-2)}
.cp-topics input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cp-topics input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cp-field{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--ink-2)}
.cp-field small{opacity:.7}
.cp-field input,.cp-field textarea{width:100%;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);padding:14px 16px;transition:border-color .3s,box-shadow .3s}
.cp-field textarea{resize:vertical;min-height:140px}
.cp-field input:focus,.cp-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.cp-field ::placeholder{color:color-mix(in srgb,var(--ink-2) 70%,transparent)}
.cp-err{display:none;font-style:normal;font-size:13px;color:#D23B2B}
.cp-field.bad input,.cp-field.bad textarea{border-color:#D23B2B}
.cp-field.bad .cp-err{display:block}
.cp-submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.cp-note{font-size:13px;color:var(--ink-2);max-width:46ch;line-height:1.5}
.cp-note a,.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot a:hover,.cp-note a:hover{color:var(--accent)}
/* privacy policy page */
.pv-doc{max-width:760px}
.pv-doc h2{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:500;letter-spacing:-.02em;margin:44px 0 12px;padding-bottom:.08em}
.pv-doc h2:first-child{margin-top:0}
.pv-doc p,.pv-doc li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.pv-doc p+p{margin-top:10px}
.pv-doc ul{margin:10px 0 0;padding-left:1.2em}
.pv-doc li+li{margin-top:6px}
.pv-doc b{color:var(--ink);font-weight:500}
.pv-doc a{color:var(--accent)}
.pv-meta{margin-top:44px;font-size:14px!important}
/* cookie consent banner (opt-in; equal-weight accept / reject; reopen from the footer) */
.ck{position:fixed;left:20px;bottom:20px;z-index:80;width:min(440px,calc(100vw - 40px));max-height:calc(100svh - 40px);overflow:auto;display:flex;flex-direction:column;gap:14px;padding:20px 22px;border-radius:22px;background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 60px -28px rgba(0,0,0,.45);font-size:14px;line-height:1.55;transform:translateY(16px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.ck.on{transform:none;opacity:1}
.ck[hidden]{display:none!important}.ck:not(.on){pointer-events:none}
.ck-t{margin:0;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.ck p{margin:0;color:var(--ink-2)}
.ck a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ck-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ck-row .btn{flex:1 1 0;min-height:44px;padding:0 18px;font-size:14px}
.ck-set{align-self:flex-start;background:none;border:0;padding:2px 0;font:inherit;font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-set:hover{color:var(--accent)}
.ck-opts{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ck-opts[hidden]{display:none}
.ck-opt{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.ck-opt b{display:block;font-weight:500;color:var(--ink)}
.ck-opt small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.ck-sw{position:relative;flex:none;width:42px;height:24px;margin-top:2px}
.ck-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ck-sw i{position:absolute;inset:0;border-radius:99px;background:var(--bg-2);border:1px solid var(--line);transition:background .3s}
.ck-sw i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.ck-sw input:checked+i{background:var(--accent);border-color:var(--accent)}
.ck-sw input:checked+i::after{transform:translateX(18px)}
.ck-sw input:disabled{cursor:default}.ck-sw input:disabled+i{opacity:.55}
.ck-sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.foot .ck-open{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot .ck-open:hover{color:var(--accent)}
html.mnav-on .ck{display:none}
@media (max-width:600px){.ck{left:12px;right:12px;bottom:12px;width:auto}}
@media print{.ck{display:none}}
.cp-done{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;background:var(--bg);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.cp-done[hidden]{display:none}
.cp-done-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.cp-done-ic svg{width:18px;height:18px}
.cp-done b{font-weight:600}
.cp-done p{font-size:14px;color:var(--ink-2);margin-top:4px}
.cp-done a{color:var(--accent)}
.cp-next{padding-left:calc(var(--gutter) + clamp(0px,2vw,32px));padding-top:0}
/* contact page has no flow line: on mobile/tablet use symmetric side padding */
@media (max-width:980px){.cp-hero,.cp-body,.cp-next{padding-left:var(--pad-r)}}
.cp-steps{list-style:none;margin:0;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);border-top:1px solid var(--line)}
.cp-steps li{padding-top:26px;display:flex;flex-direction:column;gap:8px}
.cp-steps span{font-size:14px;color:var(--accent);font-weight:500}
.cp-steps b{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500;letter-spacing:-.03em}
.cp-steps p{color:var(--ink-2);font-size:16px;max-width:32ch}
.cpage .rise-c{animation:rise .9s var(--ease) both}
@media (max-width:980px){
  .cp-grid{grid-template-columns:1fr}
  .cp-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cp-hero{padding-top:calc(120px + env(safe-area-inset-top,0px))}
  .cp-row{grid-template-columns:1fr}
  .cp-card--main{flex-wrap:wrap}
  .cp-copy{margin-left:62px}
  .cp-formwrap{border-radius:26px}
}

/* ---------- case study ---------- */
.route-case #flow,.route-case .preview{display:none}
.case{--cs-green:#1a3a37;--cs-copper:#8d642f}
.case .sec{padding-left:calc(var(--gutter) + clamp(0px,2vw,32px))}
.cs-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(36px,4vw,56px)}
.cs-h{font-size:clamp(3.4rem,9vw,9rem);font-weight:500;letter-spacing:-.06em;line-height:.95;padding-bottom:.06em}
.cs-h span{display:block;margin-top:.18em;font-size:.34em;letter-spacing:-.03em;line-height:1.1;color:var(--ink-2);font-weight:400}
.cs-h em{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:-.01em}
.cs-meta{margin:clamp(36px,4vw,56px) 0 0;max-width:1240px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;border-top:1px solid var(--line);padding-top:22px}
.cs-meta dt{font-size:13px;color:var(--ink-2);margin-bottom:6px}
.cs-meta dd{margin:0;font-size:16px;line-height:1.4}
.cs-cover{position:relative;z-index:3;padding:0 var(--pad-r) 0 calc(var(--gutter) + clamp(0px,2vw,32px))}
.cs-cover-in{max-width:1240px;border-radius:36px;overflow:hidden;background:#fafafa}
.cs-cover-in img{width:100%;height:auto}
.cs-two{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.cs-two--media{align-items:center}
.cs-lead{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.25;letter-spacing:-.02em}
.cs-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start;color:var(--ink-2)}
.cs-stats{max-width:1240px;margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.cs-stats div{padding:26px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.cs-stats div+div{padding-left:24px;border-left:1px solid var(--line)}
.cs-stats b{font-size:clamp(2.4rem,5vw,4.4rem);font-weight:400;letter-spacing:-.05em;line-height:1.05;color:var(--accent)}
.cs-stats span{color:var(--ink-2);font-size:15px}
.cs-h2{font-size:clamp(2.2rem,4.4vw,3.8rem);letter-spacing:-.045em;line-height:1.05;margin-bottom:22px;max-width:18ch;padding-bottom:.04em}
.cs-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cs-copy p{color:var(--ink-2);max-width:52ch}
.cs-copy h3{font-size:1.4rem;font-weight:500;letter-spacing:-.02em;margin-top:10px}
.cs-copy .kicker{margin-bottom:6px}
.cs-retro{background:var(--bg-2)}
.cs-retro-art{position:relative;aspect-ratio:1/1}
.cs-retro-art .r1{position:absolute;left:0;top:6%;width:78%;border-radius:22px;filter:grayscale(1)}
.cs-retro-art .r2{position:absolute;right:-2%;bottom:0;width:48%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.25))}
.cs-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap;max-width:1240px;margin-bottom:clamp(28px,3vw,44px)}
.cs-headrow .cs-h2{margin-bottom:0}
.cs-note{color:var(--ink-2);max-width:40ch}
.tl{max-width:1240px}
.tl-stage{position:relative;aspect-ratio:16/10;border-radius:32px;overflow:hidden;background:#f2f2f2}
.tl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.tl-img.on{opacity:1;transform:none}
.tl-bar{margin-top:18px;overflow-x:auto;scrollbar-width:none}
.tl-bar::-webkit-scrollbar{display:none}
.tl-years{position:relative;display:flex;gap:6px;min-width:max-content;padding:4px 0}
.tl-y{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 15px var(--sans);cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.tl-y sup{font-size:10px;margin-left:2px;opacity:.6}
.tl-y:hover{color:var(--ink);border-color:var(--ink-2)}
.tl-y.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cs-features .cs-h2{margin-bottom:clamp(32px,4vw,56px)}
.cs-feat{max-width:1240px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:center}
.cs-feat--rev{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);margin-top:clamp(40px,5vw,72px)}
.cs-feat--rev .cs-feat-media{order:2}
.cs-feat-media{position:relative;border-radius:28px;overflow:hidden;background:#000;aspect-ratio:16/9}
.cs-feat-media video{width:100%;height:100%;object-fit:cover;display:block}
.cs-video--dark{background:#0b0b0b}
.cs-video--dark video{object-fit:contain}
.cs-play{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);transition:transform .4s var(--ease)}
.cs-play:hover{transform:scale(1.06)}
.cs-play i{width:0;height:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.cs-video.playing .cs-play i{width:12px;height:14px;border:0;margin:0;background:linear-gradient(90deg,var(--ink) 0 35%,transparent 35% 65%,var(--ink) 65%)}
.cs-feat-copy h3,.cs-mini h3{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:500;letter-spacing:-.03em;margin:8px 0 12px}
.cs-feat-copy p,.cs-mini p{color:var(--ink-2)}
.cs-num{font-size:14px;color:var(--accent);font-weight:500}
.cs-mini{max-width:1240px;margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-mini article{padding:26px;border-radius:26px;background:var(--bg-2)}
.cs-mini--accent{background:var(--accent)!important;color:#fff}
.cs-mini--accent p,.cs-mini--accent .cs-num{color:rgba(255,255,255,.85)}
.cs-big{display:block;font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:400;letter-spacing:-.05em;line-height:1;color:#fff;margin-bottom:10px}
.cs-ia{background:var(--cs-green);color:#fff}
.cs-ia .cs-copy p{color:rgba(255,255,255,.75)}
.cs-ia .kicker{color:rgba(255,255,255,.7)}
.cs-ia .kicker::before{background:#c79a5c}
.cs-sort{border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:clamp(20px,3vw,34px)}
.cs-sort-h{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:14px}
.cs-sort ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-sort li{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:#fff;color:var(--cs-green);font-weight:500;font-size:16px;box-shadow:0 10px 24px -16px rgba(0,0,0,.6);transform:translateX(calc(var(--off,0) * 1px)) rotate(var(--rot,0deg));opacity:var(--op,1);transition:transform .9s var(--ease),opacity .6s;transition-delay:calc(var(--i) * 70ms)}
.cs-sort li::after{content:"›";font-size:20px;color:var(--cs-copper)}
.cs-sort:not(.sorted) li{--op:.0}
.cs-sort:not(.sorted) li:nth-child(odd){--off:40;--rot:-4deg}
.cs-sort:not(.sorted) li:nth-child(even){--off:-30;--rot:3deg}
.cs-sort-f{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:#e7c493}
.cs-shot{border-radius:28px;overflow:hidden;background:var(--bg-2);box-shadow:0 40px 80px -50px rgba(0,0,0,.45);max-height:640px}
.cs-shot img{width:100%;height:auto}
.cs-ds-grid{max-width:1240px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cs-sw{grid-column:span 2;aspect-ratio:4/3;border-radius:24px;background:var(--c);color:var(--t);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line)}
.cs-sw b{font-weight:500}
.cs-sw span{font-size:14px;opacity:.8;font-variant-numeric:tabular-nums}
.cs-font{grid-column:span 3;border-radius:24px;background:var(--bg-2);padding:24px;display:flex;flex-direction:column;gap:8px}
.cs-font span{font-size:14px;color:var(--ink-2)}
.cs-font b{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.15;font-weight:500;color:var(--ink)}
.cs-font--a b{font-family:"Poppins",var(--sans)}
.cs-font--b b{font-family:"Playfair Display",Georgia,serif;font-weight:600}
.cs-font small{font-size:14px;color:var(--ink-2)}
.cs-end{padding-top:0}
.cs-end-in{max-width:1240px;border-radius:40px;background:var(--accent);color:#fff;padding:clamp(36px,6vw,90px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cs-end .cs-h2{color:#fff;margin:0;max-width:none}
.cs-end-cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cs-end-link{color:#fff;opacity:.85;font-size:15px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.cs-end-link svg{width:16px;height:16px}
.cs-end-link:hover{opacity:1}
.cs-next{margin-top:28px}
.cs-next a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none}
.cs-next a svg{width:16px;height:16px}
.cs-next a:hover{color:var(--ink)}
.case .btn svg{width:17px;height:17px}
@media (max-width:980px){
  .cs-meta{grid-template-columns:1fr 1fr}
  .cs-two,.cs-feat,.cs-feat--rev{grid-template-columns:1fr}
  .cs-feat--rev .cs-feat-media{order:0}
  .cs-mini{grid-template-columns:1fr}
  .cs-ds-grid{grid-template-columns:1fr 1fr}
  .cs-sw{grid-column:span 1}
  .cs-sw:last-of-type{grid-column:span 2;aspect-ratio:auto;min-height:120px}
  .cs-font{grid-column:span 2}
}
@media (max-width:760px){
  .cs-hero{padding-top:calc(120px + env(safe-area-inset-top,0px))}
  .cs-meta{grid-template-columns:1fr}
  .cs-cover{padding-right:16px}
  .cs-cover-in{border-radius:24px}
  .cs-stats{grid-template-columns:1fr}
  .cs-stats div,.cs-stats div+div{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}
  .tl-stage{border-radius:22px;aspect-ratio:1/1}
  .cs-end-in{border-radius:28px}
}
/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .stage{height:auto;min-height:0;aspect-ratio:16/12}

  .nav-links{gap:20px}
  .nav-links a{white-space:nowrap}
  .nav-in{gap:20px}
}
@media (max-width:980px){
  .certs-band{grid-template-columns:1fr}
  :root{--gutter:60px;--node-x:28px}
  .vband{height:150svh}
  .pv-img{display:none}
  .node::after,.dot-tag{display:none}
  .svc,.proc,.about{grid-template-columns:1fr}
  .proc-side{position:relative;top:0}
  .roll-wrap{display:none}
  .step{opacity:1}
  .hs-sticky{position:relative;height:auto;padding:110px 0 60px}
  .hs-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .hs-view::-webkit-scrollbar{display:none}
  .hs-track{transform:none!important;padding-left:0}
  .pcard{width:min(78vw,420px);scroll-snap-align:start}
  .pcard-visual{height:min(78vw,420px);min-height:0}
  .hs-prog{display:none}
  .prow{grid-template-columns:minmax(0,1fr) 48px;gap:6px 16px}
  .prow-cat,.prow-desc{grid-column:1/2}
  .prow-go{grid-column:2;grid-row:1/4}
  .persona{right:12px;bottom:-40px}
  .about .portrait{margin-bottom:40px}
}
@media (max-width:760px){
  .mega{min-height:64px;padding:0 26px;font-size:16px}
  .cta-row{margin-top:36px;gap:24px}
  .persona{position:relative;right:auto;bottom:auto;margin:-36px 14px 0 auto;width:min(320px,86%);padding:18px 20px;font-size:13.5px}
  .about .portrait{margin-bottom:8px}
  .logo{gap:9px;font-size:15px;letter-spacing:.06em}
  .logo-img{height:26px}
  .nav .btn{padding:0 16px;font-size:14px;margin-left:0}
  .theme{margin-left:auto}
  .greview{border-radius:24px;padding:20px;width:100%;gap:14px}
  .greview .btn{width:100%}
  .tool-rows{grid-template-columns:1fr;gap:6px}
  .tool-rows dd{margin-bottom:10px}
  .certs-band{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
  .cert-grid li{flex-direction:row;align-items:center;padding:12px;gap:14px}
  .cert-grid .cert-logo{width:112px;height:64px;flex:none}
  :root{--gutter:40px;--node-x:18px}
  .nav-links{display:none}
  .nav-in{gap:10px;padding-left:18px}
  .nav .btn{margin-left:auto}
  body{font-size:17px}
  .node--pill{width:24px}
  .stage{height:auto;min-height:0;aspect-ratio:1/1.18;margin-top:12px}
  .stage .layer{transform:none!important}
  .fd{border-radius:26px;padding:18px}
  .fd-step{width:66%;padding:10px 12px;gap:10px;border-radius:15px}
  .fd-step[data-i="0"]{left:5%;top:15%}
  .fd-step[data-i="1"]{right:5%;top:34%}
  .fd-step[data-i="2"]{left:5%;top:53%}
  .fd-step[data-i="3"]{right:5%;top:72%}
  .fd-ic{width:34px;height:34px;border-radius:10px}
  .fd-t b{font-size:14px}
  .facts{grid-template-columns:1fr}
  .cta-block{border-radius:28px}
  .gal{gap:6px}
  .workshop{aspect-ratio:4/3}
  .clogo{height:calc(var(--h,46px) * .75)}
}
@media (max-width:370px){.nav .btn{display:none}.theme{margin-left:auto}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .demo-cursor{display:none}
}

/* ================= ZWN case study: "karta obiektu" ================= */
.zw{--zn:#091951;--zg:#A0906B;--bp:var(--accent)}
.zw .cs-h2{max-width:20ch}
.zw-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,5vw,72px)}
.zw-hero-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:clamp(32px,5vw,80px);align-items:end}
.zw-h{font-size:clamp(2.8rem,6.4vw,6.6rem);font-weight:500;letter-spacing:-.055em;line-height:.98;padding-bottom:.08em;max-width:11ch}
.zw-h span{display:block;margin-top:.3em;font-size:.36em;letter-spacing:-.025em;line-height:1.15;color:var(--ink-2);font-weight:400;max-width:none}
.zw-h em{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:-.01em;padding-right:.06em}
.zw-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:22px 24px 26px;box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.zw-card-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:14px;border-bottom:1.5px solid var(--ink);margin-bottom:4px}
.zw-card dl{margin:0}
.zw-card dl div{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}.zw-card dl div:last-child{border-bottom:0;padding-bottom:0}
.zw-card dt{font-size:13px;color:var(--ink-2)}
.zw-card dd{margin:0;font-size:15.5px;line-height:1.35}
.zw-stamp{position:absolute;right:-30px;top:-46px;width:118px;height:118px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;transform:rotate(-14deg) scale(.6);opacity:0;
  text-align:center;font:600 12px/1.15 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 88%,transparent);transition:transform .7s cubic-bezier(.34,1.6,.64,1) 1s,opacity .3s 1s}
.zw-stamp::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed var(--accent)}
.zw-stamp.on{transform:rotate(-14deg) scale(1);opacity:.92}

.zw-cover-wrap{padding:0 var(--pad-r) 0 var(--gutter)}
.zw-cover{position:relative;margin:0;max-width:1240px;border-radius:32px;overflow:hidden;aspect-ratio:16/8.4;background:var(--bg-2)}
.zw-cover>img{width:100%;height:100%;object-fit:cover}
.zw-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.4) 100%);pointer-events:none}
.zw-marq{position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);display:flex;flex-direction:column;gap:.1em;pointer-events:none;opacity:.6}
.zw-row{white-space:nowrap;font:500 clamp(2.6rem,7vw,6.8rem)/1.15 var(--sans);letter-spacing:-.03em;color:#fff;filter:url(#zwOutline);padding:.08em 0 .14em;transform:translate3d(var(--x,0px),0,0)}
.zw-row--s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.zw-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:64px 64px;mix-blend-mode:overlay;pointer-events:none}
.zw-coord{position:absolute;left:26px;top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);padding:8px 12px;border-radius:999px}

.zw-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.zw-lead p{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--ink-2);margin:0 0 1em;max-width:56ch}
.zw-lead p:first-child{color:var(--ink)}
.zw-lead-s{color:var(--ink-2);max-width:48ch}
.zw-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--line)}
.zw-facts div{padding:26px 22px 0 0;border-right:1px solid var(--line);margin-right:22px}
.zw-facts div:last-child{border-right:0;margin-right:0}
.zw-facts b{display:block;color:var(--accent);font-size:clamp(2.6rem,5vw,4.6rem);font-weight:500;letter-spacing:-.05em;line-height:1.05;font-variant-numeric:tabular-nums;padding-bottom:.05em}
.zw-facts span{display:block;font-size:15px;color:var(--ink-2);max-width:24ch;margin-top:6px}
.zw-facts small{display:block;margin-top:4px;font-size:15px;color:var(--ink-2);max-width:26ch;line-height:1.6}

.zw-brief{background:var(--bg-2)}
.zw-legend{list-style:none;margin:clamp(36px,4vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.zw-legend li{position:relative;background:var(--bg);border-radius:24px;padding:28px 26px 30px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.zw-tag{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font:500 18px/1 var(--sans);margin-bottom:26px}
.zw-legend h3{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.03em;margin-bottom:10px;line-height:1.15}
.zw-legend p{margin:0;color:var(--ink-2);font-size:16px}

.zw-plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.zw-note{max-width:40ch;color:var(--ink-2);font-size:15px;margin:0 0 22px}
.zw-key-i{display:inline-block;width:20px;height:10px;vertical-align:middle;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%232340FF' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='9' cy='12' r='7'/%3E%3Cpath d='M16 12h28M36 12v6M42 12v4'/%3E%3C/g%3E%3C/svg%3E")}
.zw-plan{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.8fr);gap:clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,40px);align-items:stretch}
.zw-plan-svg{border-radius:28px;background:color-mix(in srgb,var(--accent) 6%,var(--bg));padding:clamp(10px,2vw,24px);
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px);background-size:25px 25px}
.zw-plan-svg svg{display:block;width:100%;height:auto;overflow:visible}
.zw-hatch{stroke:color-mix(in srgb,var(--accent) 35%,transparent);stroke-width:2}
.zw-dim line{stroke:var(--accent);stroke-width:1.2}
.zw-dim text,.zw-entry text{fill:var(--accent);font:500 17px var(--sans);letter-spacing:.06em}
.zw-entry path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zw-room{cursor:pointer;outline:none}
.zw-room rect.f{fill:var(--bg);stroke:var(--ink);stroke-width:5;transition:fill .35s var(--ease)}
.zw-room .door{stroke:var(--bg);stroke-width:7}
.zw-room .arc{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
.zw-room text{pointer-events:none}
.zw-room .nm{fill:var(--ink);font:500 27px var(--sans);letter-spacing:-.02em}
.zw-room .mt{fill:var(--ink-2);font:400 19px var(--sans)}
.zw-room .no{fill:var(--accent);font:500 18px var(--sans);letter-spacing:.1em}
.zw-room .key{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.zw-room:hover rect.f{fill:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.zw-room.on rect.f{fill:var(--accent)}
.zw-room.on .nm,.zw-room.on .mt,.zw-room.on .no{fill:#fff}
.zw-room.on .key{stroke:#fff}
.zw-room:focus-visible rect.f{stroke:var(--accent)}
.zw-room .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.zw-plan-sec.drawn .zw-room .draw{animation:zwDraw 1.4s var(--ease) forwards;animation-delay:calc(var(--d) * 90ms)}
@keyframes zwDraw{to{stroke-dashoffset:0}}
.zw-panel{border:1px solid var(--line);border-radius:28px;padding:26px 26px 22px;display:flex;flex-direction:column;background:var(--bg)}
.zw-panel-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-2);margin-bottom:18px}
.zw-panel-no{font-weight:500;color:var(--accent);letter-spacing:.1em}
.zw-panel-m{background:var(--bg-2);border-radius:999px;padding:5px 12px}
.zw-panel h3{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:12px}
.zw-panel p{margin:0 0 20px;color:var(--ink-2);font-size:16px;line-height:1.55}
.zw-panel.swap h3,.zw-panel.swap p,.zw-panel.swap .zw-wire{animation:rise .6s var(--ease) both}
.zw-wire{margin-top:auto;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);padding:12px}
.zw-wire svg{display:block;width:100%;height:auto}
.zw-wire .b{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.zw-wire .s{fill:none;stroke:var(--accent);stroke-width:.6}
.zw-wire .l{fill:color-mix(in srgb,var(--accent) 45%,transparent)}
.zw-wire .a{fill:var(--accent)}

.zw-keys-sec{background:var(--zn);color:#fff}
.zw-keys-sec .kicker{color:rgba(255,255,255,.7)}
.zw-keys-sec .kicker::before{background:var(--zg)}
.zw-keys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.zw-keys-txt>p{color:rgba(255,255,255,.75);max-width:46ch}
.zw-keylist{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px}
.zw-keylist li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.15);font-size:17px}
.zw-keylist svg{width:44px;height:22px;flex:none;fill:none;stroke:var(--zg);stroke-width:2.6;stroke-linecap:round;transform-origin:9px 12px;transition:transform .5s cubic-bezier(.34,1.6,.64,1)}
.zw-keylist li:hover svg{transform:rotate(-18deg)}
.zw-cms{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:18px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.zw-cms-form,.zw-cms-list{background:#fff;color:#161616;border-radius:16px;padding:16px;font-size:13px}
.zw-cms-h{font-weight:600;font-size:14px;margin-bottom:12px}
.zw-cms-form label{display:block;margin-bottom:10px}
.zw-cms-form label span{display:block;color:#777;font-size:11.5px;margin-bottom:4px}
.zw-cms-form i{display:block;height:32px;border:1px solid #ddd;border-radius:8px;padding:6px 10px;font-style:normal;white-space:nowrap;overflow:hidden}
.zw-cms-form i.typing::after{content:"";display:inline-block;width:1px;height:14px;background:#161616;vertical-align:-2px;margin-left:1px;animation:zwBlink .8s steps(1) infinite}
@keyframes zwBlink{50%{opacity:0}}
.zw-cms-btn{display:block;text-align:center;margin-top:14px;background:var(--zn);color:#fff;border-radius:999px;padding:9px;font-weight:500;transition:transform .2s,background .3s}
.zw-cms-btn.press{transform:scale(.94);background:var(--zg)}
.zw-cms-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.zw-cms-filters span{border:1px solid #ddd;border-radius:999px;padding:3px 10px;font-size:11.5px}
.zw-cms-filters em{font-style:normal;margin-left:auto;font-size:11.5px;color:#777}
.zw-offer{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px;border:1px solid #eee;margin-bottom:8px;background:#fff}
.zw-offer .ph{width:54px;height:40px;border-radius:8px;flex:none;background:linear-gradient(135deg,#c9b99a,#8a7a5a)}
.zw-offer:not(.zw-offer--new) .ph{background:linear-gradient(135deg,#9aa6c9,#4a5a8a)}
.zw-offer b{display:block;font-size:13px;font-weight:600}
.zw-offer small{color:#777;font-size:11.5px}
.zw-offer--new{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0;transform:translateY(-8px);transition:all .6s var(--ease)}
.zw-offer--new.in{max-height:80px;opacity:1;padding-top:8px;padding-bottom:8px;margin-bottom:8px;border-width:1px;transform:none;box-shadow:0 0 0 2px var(--zg)}
.zw-cms-cap{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.6);text-align:right}

.zw-notes{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,48px);align-items:start}
.zw-shot{position:relative;border-radius:20px;overflow:visible}
.zw-shot img{width:100%;border-radius:20px;border:1px solid var(--line)}
.zw-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:#fff;font:600 14px/1 var(--sans);cursor:pointer;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent);transition:transform .35s cubic-bezier(.34,1.6,.64,1),box-shadow .35s}
.zw-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:zwPing 2.6s ease-out infinite;animation-delay:calc(var(--k,0) * .4s)}
@keyframes zwPing{0%{transform:scale(.8);opacity:.7}70%,100%{transform:scale(1.8);opacity:0}}
.zw-pin.on{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.zw-notes-list{list-style:none;margin:0;padding:0;counter-reset:n}
.zw-notes-list li{position:relative;padding:18px 0 18px 52px;border-top:1px solid var(--line);color:var(--ink-2);font-size:16px;cursor:default;transition:color .3s}
.zw-notes-list li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:16px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font:600 13px/1 var(--sans);transition:background .3s,color .3s}
.zw-notes-list li b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}
.zw-notes-list li.on{color:var(--ink)}
.zw-notes-list li.on::before{background:var(--accent);color:#fff}

.zw-dev{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:clamp(28px,4vw,48px)}
.zw-dev figure{margin:0;border-radius:28px;overflow:hidden;background:#EEEEEE}
.zw-dev img{width:100%;height:100%;object-fit:cover}

.zw-mat-sec{padding-top:0}
.zw-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.zw-sw div{display:flex;flex-direction:column;gap:2px}
.zw-sw span{display:block;aspect-ratio:3/4;border-radius:22px;background:var(--c);border:1px solid var(--line);margin-bottom:12px}
.zw-sw b{font-weight:500;font-size:16px}
.zw-sw small{color:var(--ink-2);font-size:13px;font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .zw-hero-in,.zw-2col,.zw-plan,.zw-keys,.zw-notes,.zw-dev{grid-template-columns:minmax(0,1fr)}
  .zw-h{max-width:none}
  .zw-card{max-width:520px}
  .zw-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zw-facts div:nth-child(2){border-right:0;margin-right:0}
  .zw-facts div:nth-child(n+3){border-top:1px solid var(--line);margin-top:22px}
  .zw-legend{grid-template-columns:minmax(0,1fr)}
  .zw-cover{aspect-ratio:4/4.6;border-radius:24px}.zw-cover>img{object-position:30% center}
  .zw-cms{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .zw-card dl div{grid-template-columns:96px 1fr}
  .zw-stamp{width:92px;height:92px;font-size:10px;right:-6px;top:-40px}
  .zw-pin{width:26px;height:26px;font-size:12px}
  .zw-room .nm,.zw-room .mt{display:none}.zw-room .no{font-size:34px}.zw-dim text,.zw-entry text{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .zw-room .draw{stroke-dashoffset:0!important;animation:none!important}
  .zw-pin::after{animation:none}
}

/* ================= Cennik grafiki ================= */
.gf-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(56px,7vw,110px)}
.gf-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center}
.gf-h{font-size:clamp(2.8rem,5.6vw,5.8rem);font-weight:500;letter-spacing:-.055em;line-height:1;padding-bottom:.1em;max-width:12ch}
.gf-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.015em;padding-right:.06em}
.gf-lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:var(--ink-2);max-width:46ch;margin:26px 0 34px}
.gf-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.gf-hero-cta .btn svg{width:18px;height:18px}
.gf-hero-img{position:relative;margin:0;padding:22px}
.gf-hero-ph{border-radius:24px;overflow:hidden;aspect-ratio:4/3.3;background:#111}
.gf-hero-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:transform 1.4s var(--ease)}
.gf-hero-img:hover .gf-hero-ph img{transform:scale(1.08)}
.gf-crop{position:absolute;width:26px;height:26px;border-color:var(--accent);border-style:solid;border-width:0}
.gf-crop.tl{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.gf-crop.tr{right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.gf-crop.bl{left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.gf-crop.br{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.gf-chip{position:absolute;left:-8px;bottom:56px;display:flex;align-items:baseline;gap:10px;background:var(--accent);color:#fff;border-radius:999px;padding:12px 20px;box-shadow:0 20px 40px -18px color-mix(in srgb,var(--accent) 80%,transparent);animation:gfFloat 5s ease-in-out infinite}
.gf-chip span{font-size:14px;opacity:.85}.gf-chip b{font-size:18px;font-weight:500}
@keyframes gfFloat{50%{transform:translateY(-8px)}}

.gf-why{background:var(--ink);color:var(--bg)}
.gf-why .kicker{color:color-mix(in srgb,var(--bg) 65%,transparent)}
.gf-big{font-size:clamp(2.4rem,5.4vw,5.2rem);letter-spacing:-.05em;line-height:1.02;max-width:16ch;padding-bottom:.08em}
.gf-big em{font-family:var(--serif);font-style:italic;font-weight:400;color:color-mix(in srgb,var(--accent) 70%,#fff);letter-spacing:-.01em;padding-right:.06em}
.gf-why-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,70px);align-items:start}
.gf-why-cols>p{color:color-mix(in srgb,var(--bg) 72%,transparent);margin:0;max-width:48ch}
.gf-q{list-style:none;margin:0;padding:0}
.gf-q li{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.02em}
.gf-q li:last-child{border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.gf-q i{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--bg) 40%,transparent);position:relative;transition:background .4s,border-color .4s}
.gf-q i::after{content:"";position:absolute;left:9px;top:5px;width:7px;height:13px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .5s cubic-bezier(.34,1.6,.64,1)}
.gf-q li.on i{background:var(--accent);border-color:var(--accent)}
.gf-q li.on i::after{transform:rotate(45deg) scale(1)}
.gf-why-end{margin:clamp(40px,5vw,64px) 0 0;max-width:40ch;font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--bg)}

.gf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,56px)}
.gf-card{display:flex;flex-direction:column;border-radius:28px;background:var(--bg-2);overflow:hidden;text-decoration:none;color:inherit;transition:transform .6s var(--ease)}
.gf-card:hover{transform:translateY(-6px)}
.gf-card-img{aspect-ratio:1/0.82;overflow:hidden;background:#111}
.gf-card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1.2s var(--ease)}
.gf-card:hover .gf-card-img img{transform:scale(1.06)}
.gf-card-b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.gf-n{font-size:13px;color:var(--accent);letter-spacing:.1em;font-weight:500}
.gf-card h3{font-size:clamp(1.4rem,1.9vw,1.75rem);letter-spacing:-.035em;margin:10px 0 10px;line-height:1.1}
.gf-card p{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.gf-card ul{list-style:none;margin:0 0 22px;padding:0}
.gf-card li{font-size:15px;padding:8px 0;border-top:1px solid var(--line)}
.gf-from{margin-top:auto;align-self:flex-start;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--bg);transition:background .3s,color .3s,border-color .3s}
.gf-card:hover .gf-from{background:var(--accent);border-color:var(--accent);color:#fff}

.gf-price{padding-top:clamp(40px,5vw,80px)}
.gf-price-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.gf-note{max-width:40ch;color:var(--ink-2);font-size:15px;margin:0 0 22px}
.gf-filters{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,3vw,36px) 0 18px}
.gf-filters button{font:500 15px/1 var(--sans);border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:12px 18px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.gf-filters button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gf-price-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);gap:clamp(20px,3vw,40px);align-items:start}
.gf-group{margin-bottom:10px}
.gf-group h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500;padding:22px 0 10px;display:flex;justify-content:space-between}
.gf-group[hidden]{display:none}
.gf-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line);padding:16px 6px;cursor:pointer;transition:background .25s}
.gf-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.gf-box{width:24px;height:24px;border-radius:7px;border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);position:relative;transition:background .3s,border-color .3s}
.gf-box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.gf-row[aria-pressed="true"] .gf-box{background:var(--accent);border-color:var(--accent)}
.gf-row[aria-pressed="true"] .gf-box::after{transform:rotate(45deg) scale(1)}
.gf-nm{font-size:clamp(1.05rem,1.3vw,1.2rem);letter-spacing:-.01em}
.gf-nm small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.gf-pr{font-size:clamp(1.05rem,1.3vw,1.2rem);white-space:nowrap;font-variant-numeric:tabular-nums}
.gf-pr span{color:var(--ink-2);font-size:.82em;margin-right:4px}
.gf-row[aria-pressed="true"] .gf-pr{color:var(--accent)}
.gf-nm{display:block}
.gf-qty{display:flex;width:max-content;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.gf-qty[hidden]{display:none}
.gf-qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer}
.gf-qty b{min-width:22px;text-align:center;color:var(--ink);font-weight:500}
.gf-sum{position:sticky;top:96px;border-radius:28px;background:var(--bg-2);padding:26px}
.gf-sum-k{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.gf-sum-total{display:flex;align-items:baseline;gap:8px;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:500;letter-spacing:-.05em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--accent);padding-bottom:.05em}
.gf-sum-total span{font-size:.4em;letter-spacing:0;color:var(--ink-2);font-weight:400}
.gf-sum-c{margin:4px 0 14px;font-size:14px;color:var(--ink-2)}
.gf-sum-list{list-style:none;margin:0 0 18px;padding:0;max-height:240px;overflow:auto}
.gf-sum-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;border-top:1px solid var(--line)}
.gf-sum-list li span:last-child{color:var(--ink-2);white-space:nowrap}
.gf-send{width:100%}
.gf-send[disabled]{opacity:.35;cursor:not-allowed}
.gf-sum-f{margin:12px 0 0;font-size:12.5px;color:var(--ink-2)}
.gf-bump{animation:gfBump .45s cubic-bezier(.34,1.6,.64,1)}
@keyframes gfBump{40%{transform:scale(1.06)}}

.gf-inc{padding-top:0}
.gf-inc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gf-inc-grid>div{border:1px solid var(--line);border-radius:24px;padding:26px}
.gf-inc-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,transparent);margin-bottom:22px}
.gf-inc-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gf-inc-grid h3{font-size:1.3rem;letter-spacing:-.03em;margin-bottom:8px}
.gf-inc-grid p{margin:0;color:var(--ink-2);font-size:15.5px}

@media (max-width:980px){
  .gf-hero-in,.gf-why-cols,.gf-price-grid{grid-template-columns:minmax(0,1fr)}
  .gf-cards,.gf-inc-grid{grid-template-columns:minmax(0,1fr)}
  .gf-sum{position:sticky;bottom:12px;top:auto;z-index:20;padding:18px 20px;box-shadow:0 20px 50px -20px rgba(0,0,0,.35);background:color-mix(in srgb,var(--bg-2) 92%,transparent);backdrop-filter:blur(12px)}
  .gf-sum-list,.gf-sum-f,.gf-sum-k{display:none}
  .gf-sum-total{font-size:2.2rem}
  .gf-sum-c{margin:0 0 12px}
}
@media (prefers-reduced-motion:reduce){.gf-chip{animation:none}}

/* ================= Michalina Oleksy case study: "stykówka" ================= */
.mo{--film:#141210;--paper:#F4F1EC}
.mo .cs-h2{max-width:20ch}
.mo-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(36px,4vw,56px)}
.mo-h{font-size:clamp(2.8rem,6.6vw,6.8rem);font-weight:500;letter-spacing:-.055em;line-height:.98;padding-bottom:.08em;max-width:13ch}
.mo-h span{display:block;margin-top:.32em;font-size:.36em;letter-spacing:-.025em;line-height:1.15;color:var(--ink-2);font-weight:400}
.mo-h em{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:-.01em;padding-right:.06em}
.mo-exif{margin:clamp(36px,4vw,56px) 0 0;max-width:1240px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mo-exif div{padding:16px 16px 18px 0;border-right:1px solid var(--line);margin-right:16px}
.mo-exif div:last-child{border-right:0}
.mo-exif dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.mo-exif dd{margin:0;font-size:14px;line-height:1.4;font-family:var(--sans)}

.mo-cover-wrap{padding:0 var(--pad-r) 0 var(--gutter)}
.mo-cover{margin:0;max-width:1240px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -50px rgba(0,0,0,.5);border:1px solid var(--line)}
.mo-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#EFEDEA}
.mo-bar i{width:10px;height:10px;border-radius:50%;background:#D2CFCA}
.mo-bar span{margin-left:12px;font-size:12px;color:#6b6b6b;background:#fff;border-radius:6px;padding:3px 14px}
.mo-site{position:relative;aspect-ratio:16/8.6;background:#222;overflow:hidden}
.mo-slides figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.mo-slides figure.on{opacity:1}
.mo-slides img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s linear}
.mo-slides figure.on img{transform:scale(1)}
.mo-slides figcaption{position:absolute;left:7%;bottom:14%;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.mo-slides figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.05;letter-spacing:-.01em;padding-bottom:.08em}
.mo-slides figcaption span{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.7vw,1.5rem);opacity:.92}
.mo-nav{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 4%;background:rgba(255,255,255,.94);color:#222}
.mo-logo{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.3rem);padding-right:.1em}
.mo-links{display:flex;gap:clamp(10px,2vw,26px);font-size:clamp(10px,1vw,13px)}
.mo-links i{font-style:normal}
.mo-dots{position:absolute;right:5%;bottom:8%;display:flex;gap:8px}
.mo-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .4s,transform .4s}
.mo-dots i.on{background:#fff;transform:scale(1.3)}

.mo-who-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,90px);align-items:center}
.mo-portrait{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/4;background:var(--bg-2);position:relative}
.mo-portrait img{width:100%;height:100%;object-fit:cover}
.mo-portrait::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.55);border-radius:18px;pointer-events:none}
.mo-lead{color:var(--ink-2);font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:52ch;margin:0}
.mo-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line);padding-top:22px}
.mo-facts b{display:block;font-size:clamp(2rem,3.4vw,3rem);font-weight:500;letter-spacing:-.045em;line-height:1.05;color:var(--accent);padding-bottom:.05em}
.mo-facts span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:6px;max-width:22ch}

.mo-rules{background:var(--bg-2)}
.mo-rule-list{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mo-rule-list li{background:var(--bg);border-radius:6px;padding:26px 24px 28px;box-shadow:0 1px 0 var(--line),0 24px 40px -34px rgba(0,0,0,.4);position:relative}
.mo-fr{display:inline-block;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#E0562B;border:1px solid currentColor;border-radius:4px;padding:5px 7px;margin-bottom:24px}
.mo-rule-list h3{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.03em;margin-bottom:10px;line-height:1.15}
.mo-rule-list p{margin:0;color:var(--ink-2);font-size:16px}

.mo-film-sec{background:var(--film);color:#F2EFEA}
.mo-film-sec .kicker{color:rgba(242,239,234,.6)}
.mo-film-sec .kicker::before{background:#E0562B}
.mo-film-note{color:rgba(242,239,234,.6);font-size:15px;margin:0}
.mo-film{margin:clamp(28px,4vw,48px) calc(-1 * var(--pad-r)) 0 calc(-1 * var(--gutter));overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.mo-film::-webkit-scrollbar{display:none}
.mo-film.drag{cursor:grabbing}
.mo-strip{display:flex;gap:10px;width:max-content;padding:30px var(--pad-r) 30px var(--gutter);position:relative;background:#0B0A09;
  background-image:radial-gradient(circle,var(--film) 0 3.5px,transparent 4px),radial-gradient(circle,var(--film) 0 3.5px,transparent 4px);
  background-size:22px 22px;background-repeat:repeat-x;background-position:0 6px,0 calc(100% - 6px)}
.mo-strip figure{margin:0;flex:none;height:clamp(220px,30vw,380px);aspect-ratio:3/2;position:relative;border-radius:3px;overflow:hidden;background:#222}
.mo-strip figure.v{aspect-ratio:2/3}
.mo-strip img{width:100%;height:100%;object-fit:cover;pointer-events:none;filter:saturate(.92);transition:transform .9s var(--ease),filter .6s}
.mo-strip figure:hover img{transform:scale(1.05);filter:saturate(1.05)}
.mo-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));display:flex;gap:10px;align-items:baseline}
.mo-strip figcaption span{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#F2A27F;letter-spacing:.1em}

.mo-offer-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mo-offer-head p{max-width:42ch;color:var(--ink-2);font-size:15.5px;margin:0 0 22px}
.mo-tiles{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,220px);gap:12px}
.mo-tiles li{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-2)}
.mo-tiles li.big{grid-column:span 2;grid-row:span 2}
.mo-tiles li:nth-child(6),.mo-tiles li:nth-child(7){grid-column:span 2}
.mo-tiles img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mo-tiles li:hover img{transform:scale(1.05)}
.mo-tiles span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:#161616;border-radius:999px;padding:7px 14px;font-size:14px}
.mo-tiles li.big span{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.4rem);padding:9px 18px}

.mo-path-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,48px);align-items:center}
.mo-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.mo-steps li{position:relative;padding:16px 0 16px 56px;border-top:1px solid var(--line)}
.mo-steps li:last-child{border-bottom:1px solid var(--line)}
.mo-steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:18px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--accent)}
.mo-steps b{display:block;font-weight:500;font-size:1.15rem;letter-spacing:-.02em}
.mo-steps span{display:block;color:var(--ink-2);font-size:15px}
.mo-ui{position:relative;background:var(--paper);border-radius:28px;padding:clamp(22px,3vw,36px);color:#2a2622}
.mo-ui-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;box-shadow:0 10px 24px -16px rgba(0,0,0,.4)}
.mo-ui-badge i{width:8px;height:8px;border-radius:50%;background:#3BB273;box-shadow:0 0 0 4px rgba(59,178,115,.2)}
.mo-ui-banner{margin:16px 0;border-radius:16px;background:#2a2622;color:#F4F1EC;padding:20px 22px}
.mo-ui-banner span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.mo-ui-banner b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:4px;padding-bottom:.06em}
.mo-ui-form{background:#fff;border-radius:16px;padding:18px}
.mo-ui-form p{margin:0 0 12px;font-family:var(--serif);font-size:1.3rem}
.mo-ui-form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.mo-ui-form .row.one{grid-template-columns:1fr}
.mo-ui-form .row span{border:1px solid #E3DED7;border-radius:8px;padding:9px 10px;font-size:12px;color:#8a837b}
.mo-ui-form b{display:block;text-align:center;margin-top:6px;background:#2a2622;color:#fff;border-radius:999px;padding:10px;font-weight:500;font-size:13px}
.mo-ui-cap{margin:12px 0 0;font-size:12.5px;color:#8a837b;text-align:right}

@media (max-width:980px){
  .mo-exif{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-exif div:nth-child(2){border-right:0}
  .mo-who-in,.mo-path-grid{grid-template-columns:minmax(0,1fr)}
  .mo-portrait{max-width:420px}
  .mo-rule-list{grid-template-columns:minmax(0,1fr)}
  .mo-site{aspect-ratio:4/4.4}
  .mo-links{display:none}
  .mo-tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
}
@media (max-width:560px){.mo-facts{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.mo-slides img{transition:none;transform:none}}
/* ---------- Michalina: small photographic touches on scroll ---------- */
.mox-up{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.mox-up.in{opacity:1;transform:none}
/* headings come into focus like a lens */
.mox-focus{opacity:0;filter:blur(10px);transform:scale(1.015);transition:opacity .9s var(--ease),filter 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.mox-focus.in{opacity:1;filter:none;transform:none}
/* photos develop like a print in the darkroom */
.mox-dev{filter:brightness(1.9) contrast(.55) saturate(0) blur(4px);transition:filter 2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.mox-dev.in{filter:none}
/* film strip slides in, frames expose one by one */
.mo-strip.mox-strip{transform:translateX(90px);opacity:.001;transition:transform 1.4s var(--ease),opacity .8s var(--ease)}
.mo-strip.mox-strip.in{transform:none;opacity:1}
/* offer tiles open like a camera aperture */
.mo-tiles li.mox-ap{clip-path:circle(0% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1);transition-delay:var(--d,0ms)}
.mo-tiles.in li.mox-ap{clip-path:circle(75% at 50% 50%)}
.mo-tiles li.mox-ap span{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0ms) + .7s)}
.mo-tiles.in li.mox-ap span{opacity:1;transform:none}
/* frame labels blink like a film counter */
.mo-rule-list li.mox-up.in .mo-fr{animation:moxBlink .9s steps(2,jump-none) 2;animation-delay:calc(var(--d,0ms) + .5s)}
@keyframes moxBlink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
/* booking path: steps slide in, then the UI builds itself */
.mo-steps li.mox-step{opacity:0;transform:translateX(-16px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.mo-steps li.mox-step.in{opacity:1;transform:none}
.mo-ui.mox-ui>*{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .7s var(--ease),transform .9s cubic-bezier(.34,1.4,.64,1)}
.mo-ui.mox-ui>*:nth-child(2){transition-delay:.15s}.mo-ui.mox-ui>*:nth-child(3){transition-delay:.3s}.mo-ui.mox-ui>*:nth-child(4){transition-delay:.45s}
.mo-ui.mox-ui.in>*{opacity:1;transform:none}
.mo-ui.mox-ui.in .mo-ui-badge i{animation:moxPulse 2.4s ease-in-out 1s infinite}
@keyframes moxPulse{0%,100%{box-shadow:0 0 0 4px rgba(59,178,115,.2)}50%{box-shadow:0 0 0 9px rgba(59,178,115,0)}}
@media (prefers-reduced-motion:reduce){
  .mox-up,.mox-focus,.mo-strip.mox-strip,.mo-steps li.mox-step,.mo-ui.mox-ui>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .mox-dev{filter:none!important;transition:none!important}
  .mo-tiles li.mox-ap{clip-path:none!important}.mo-tiles li.mox-ap span{opacity:1!important;transform:none!important}
  .mo-rule-list li .mo-fr,.mo-ui .mo-ui-badge i{animation:none!important}
}

/* case pages: no flow line, so center the content column symmetrically */
.cpage.case{--cw:max(clamp(20px,5vw,72px),calc((100vw - 1240px) / 2));--gutter:var(--cw);--pad-r:var(--cw)}
.cpage.case .cs-cover{padding-left:var(--cw);padding-right:var(--cw)}
.cpage.case .sec{padding-left:var(--cw);padding-right:var(--cw)}
.live-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px}
.live-link svg{width:18px;height:18px}
.cover-cap{max-width:1240px;margin:14px auto 0;text-align:right;font-size:14px}
.cover-cap a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.cover-cap a:hover{color:var(--accent)}
.cover-cap svg{width:15px;height:15px}

/* work-in-progress marker (Crazyshop) */
.wip-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.wip-row .kicker{margin:0}
.wip-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);border-radius:999px;padding:5px 12px 5px 10px}
.wip-pill i{width:7px;height:7px;border-radius:50%;background:#F5A524;box-shadow:0 0 0 0 rgba(245,165,36,.5);animation:wipPulse 2.2s ease-out infinite}
@keyframes wipPulse{0%{box-shadow:0 0 0 0 rgba(245,165,36,.45)}70%,100%{box-shadow:0 0 0 8px rgba(245,165,36,0)}}
.cs-meta--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wip-sec{padding-top:0}
.wip-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:center;border:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent);border-radius:32px;padding:clamp(28px,4vw,56px)}
.wip-copy p:last-child{color:var(--ink-2);margin:0;max-width:52ch}
.wip-lines{display:grid;gap:14px}
.wip-lines i{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 40%,var(--bg-2) 80%);background-size:250% 100%;animation:wipShimmer 2.4s ease-in-out infinite}
.wip-lines i:nth-child(1){width:70%;height:22px}.wip-lines i:nth-child(2){width:100%}.wip-lines i:nth-child(3){width:88%}.wip-lines i:nth-child(4){width:55%}
@keyframes wipShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (max-width:980px){.wip-card{grid-template-columns:minmax(0,1fr)}.cs-meta--3{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.wip-pill i,.wip-lines i{animation:none}}

/* ================= Alchemia Współpracy case study: "układ okresowy" ================= */
.al{--ag:#1D2122;--aa:#FFAA17;--am:#F5F9FA}
.al .cs-h2{max-width:20ch}
.al-hero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(36px,4vw,56px)}
.al-hero-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(200px,.6fr);gap:clamp(24px,4vw,60px);align-items:end}
.al-h{font-size:clamp(2.8rem,6.4vw,6.6rem);font-weight:500;letter-spacing:-.055em;line-height:.98;padding-bottom:.08em;max-width:12ch}
.al-h span{display:block;margin-top:.3em;font-size:.34em;letter-spacing:-.025em;line-height:1.2;color:var(--ink-2);font-weight:400;max-width:28ch}
.al-h em{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:-.01em;padding-right:.06em}
.al-hexes{width:100%;max-width:300px;display:block;margin-left:auto;overflow:visible}
.al-hexes polygon{fill:none;stroke-width:2;stroke-linejoin:round}
.al-hexes .h1{stroke:var(--ink);animation:alFloat 7s ease-in-out infinite}
.al-hexes .h2{stroke:var(--aa);fill:color-mix(in srgb,var(--aa) 14%,transparent);animation:alFloat 7s ease-in-out -2.3s infinite}
.al-hexes .h3{stroke:var(--accent);animation:alFloat 7s ease-in-out -4.6s infinite}
@keyframes alFloat{50%{transform:translateY(-8px)}}

.al-cover-wrap{padding:0 var(--cw)}
.al-cover{margin:0 auto;max-width:1240px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(0,0,0,.45);background:#fff}
.al-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#EEF1F2}
.al-bar i{width:10px;height:10px;border-radius:50%;background:#CDD3D5}
.al-bar span{margin-left:12px;font-size:12px;color:#6b6b6b;background:#fff;border-radius:6px;padding:3px 14px}
.al-cover img{width:100%;display:block}

.al-who-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,90px);align-items:center}
.al-lead{color:var(--ink-2);font-size:clamp(1.05rem,1.3vw,1.18rem);max-width:54ch;margin:0}
.al-quote{margin:clamp(28px,3vw,40px) 0 0;padding:0 0 0 22px;border-left:3px solid var(--aa);font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.3;max-width:30ch;padding-right:.1em}
.al-photo{margin:0;position:relative;aspect-ratio:1/1.1;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--bg-2)}
.al-photo img{width:100%;height:100%;object-fit:cover;object-position:62% center}

.al-table-sec{background:var(--ag);color:#F2F4F5}
.al-table-sec .kicker{color:rgba(242,244,245,.6)}
.al-table-sec .kicker::before{background:var(--aa)}
.al-table-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.al-table-head p{max-width:44ch;color:rgba(242,244,245,.65);font-size:15.5px;margin:0 0 22px}
.al-table{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:clamp(28px,3vw,44px)}
.al-el{position:relative;aspect-ratio:1/1.08;border-radius:14px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:#F2F4F5;text-align:left;padding:14px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;font:inherit;transition:background .35s,border-color .35s,transform .45s cubic-bezier(.34,1.6,.64,1)}
.al-el:hover{transform:translateY(-4px);border-color:rgba(255,170,23,.6)}
.al-el .n{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;opacity:.6}
.al-el b{font-size:clamp(2.2rem,4.2vw,3.8rem);font-weight:500;letter-spacing:-.04em;line-height:1;padding-bottom:.05em}
.al-el .nm{font-size:13.5px;opacity:.85;line-height:1.25}
.al-el.on{background:var(--aa);border-color:var(--aa);color:#1D2122}
.al-el.on .n,.al-el.on .nm{opacity:1}
.al-formula{display:flex;gap:clamp(18px,3vw,36px);align-items:center;margin-top:18px;padding:clamp(20px,3vw,32px);border-radius:18px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18);min-height:120px}
.al-formula .sym{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:1.5px solid var(--aa);color:var(--aa);font-size:2rem;font-weight:500;letter-spacing:-.03em}
.al-formula h3{font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.03em;margin-bottom:6px}
.al-formula p{margin:0;color:rgba(242,244,245,.75);max-width:62ch}
.al-formula.swap .sym,.al-formula.swap h3,.al-formula.swap p{animation:rise .55s var(--ease) both}

.al-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,48px)}
.al-col{border-radius:24px;background:var(--bg-2);padding:26px}
.al-col h3{font-size:1.35rem;letter-spacing:-.03em;padding-bottom:14px;margin-bottom:6px;border-bottom:2px solid var(--aa);display:inline-block}
.al-col ul{list-style:none;margin:0;padding:0}
.al-col li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.4}
.al-col li:last-child{border-bottom:0}
.al-col em{display:inline-block;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--aa);color:#1D2122;border-radius:999px;padding:3px 9px;margin:0 0 8px;font-weight:600}
.al-col em+br{display:none}
.al-col li em{display:table}
.al-note{margin:20px 0 0;color:var(--ink-2);font-size:15px;max-width:60ch}

.al-gal-sec{padding-top:0}
.al-gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.al-gal-head p{max-width:44ch;color:var(--ink-2);font-size:15.5px;margin:0 0 22px}
.al-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.al-gal figure{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:1/1;background:var(--bg-2)}
.al-gal figure:nth-child(even){transform:translateY(28px)}
.al-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.al-gal figure:hover img{transform:scale(1.05)}

.al-trust{padding-top:clamp(96px,10vw,140px)}
.al-trust-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.al-firms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.al-firms li{border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-size:15px;background:var(--bg)}
.al-firms li:nth-child(3n+1){border-color:color-mix(in srgb,var(--aa) 60%,transparent)}

.al-id{padding-top:0}
.al-id-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.al-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.al-sw>div{display:flex;flex-direction:column;gap:2px}
.al-sw>div:not(.al-type)>span{display:block;aspect-ratio:3/4;border-radius:20px;background:var(--c);border:1px solid var(--line);margin-bottom:12px}
.al-sw b{font-weight:500;font-size:15.5px}
.al-sw small{color:var(--ink-2);font-size:13px}
.al-type{border:1px solid var(--line);border-radius:20px;padding:14px;aspect-ratio:3/4;justify-content:center;margin-bottom:auto;overflow:hidden}
.al-type span{display:block}
.al-type .r{font-family:Rajdhani,var(--sans);font-weight:600;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:0;text-transform:uppercase;line-height:1.1}
.al-type .o{font-family:"Open Sans",var(--sans);font-size:1rem;margin:8px 0 6px}

@media (max-width:980px){
  .al-hero-in,.al-who-in,.al-trust-in,.al-id-in{grid-template-columns:minmax(0,1fr)}
  .al-hex-wrap{display:none}
  .al-photo{max-width:420px}
  .al-table{grid-template-columns:repeat(3,minmax(0,1fr))}
  .al-cols{grid-template-columns:minmax(0,1fr)}
  .al-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .al-gal figure:nth-child(even){transform:none}
  .al-sw{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.al-hexes polygon{animation:none}
}
/* ---------- Alchemia: scroll animations (classes added by JS; .in when on screen) ---------- */
.alx-up{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.alx-up.in{opacity:1;transform:none}
.al-quote.alx-q{border-left-color:transparent;position:relative;opacity:0;transform:translateX(-12px);transition:opacity .9s var(--ease) .25s,transform 1s var(--ease) .25s}
.al-quote.alx-q::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--aa);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease)}
.al-quote.alx-q.in{opacity:1;transform:none}.al-quote.alx-q.in::before{transform:none}
.al-photo.alx-hex{transform:scale(.82) rotate(-8deg);opacity:0;transition:transform 1.3s var(--ease),opacity .9s var(--ease)}
.al-photo.alx-hex.in{transform:none;opacity:1}
.al-photo.alx-hex img{transform:scale(1.15);will-change:transform}
.al-el.alx-el{opacity:0;transform:translateY(18px) scale(.86);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.34,1.5,.64,1),border-color .4s,background .4s;transition-delay:var(--d,0ms)}
.al-el.alx-el.in{opacity:1;transform:none}
.al-el.alx-el.in b{animation:alxGlow 1.2s var(--ease) both;animation-delay:calc(var(--d,0ms) + .25s)}
@keyframes alxGlow{0%{text-shadow:0 0 0 rgba(255,170,23,0)}35%{text-shadow:0 0 22px rgba(255,170,23,.85);color:var(--aa)}100%{text-shadow:0 0 0 rgba(255,170,23,0)}}
.al-formula.alx-up{transition-delay:.55s}
.al-col.alx-col{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.al-col.alx-col li{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0ms) + 250ms + var(--i,0) * 70ms)}
.al-col.alx-col.in,.al-col.alx-col.in li{opacity:1;transform:none}
.al-gal figure.alx-fig{clip-path:inset(100% 0 0 0 round 20px);transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0ms)}
.al-gal figure.alx-fig img{transform:scale(1.18);transition:transform 1.6s var(--ease);transition-delay:var(--d,0ms)}
.al-gal figure.alx-fig.in{clip-path:inset(0 0 0 0 round 20px)}
.al-gal figure.alx-fig.in img{transform:none}
.al-gal figure.alx-fig.in:hover img{transform:scale(1.05)}
.al-firms li.alx-chip{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.34,1.5,.64,1);transition-delay:var(--d,0ms)}
.al-firms li.alx-chip.in{opacity:1;transform:none}
.al-sw>div.alx-sw{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.al-sw>div.alx-sw>span{transform:scaleY(.3);transform-origin:bottom;transition:transform 1s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--d,0ms) + 150ms)}
.al-sw>div.alx-sw.in{opacity:1;transform:none}.al-sw>div.alx-sw.in>span{transform:none}
.cs-meta>div.alx-up{transition-duration:.7s,.8s}
@media (prefers-reduced-motion:reduce){
  .alx-up,.al-quote.alx-q,.al-photo.alx-hex,.al-el.alx-el,.al-col.alx-col,.al-col.alx-col li,.al-firms li.alx-chip,.al-sw>div.alx-sw{opacity:1!important;transform:none!important;transition:none!important}
  .al-quote.alx-q::before,.al-sw>div.alx-sw>span{transform:none!important}
  .al-gal figure.alx-fig{clip-path:none!important}.al-gal figure.alx-fig img,.al-photo.alx-hex img{transform:none!important}
}

/* case pages: tighter vertical rhythm */
.cpage.case .sec{padding-top:clamp(64px,7.5vw,112px);padding-bottom:clamp(64px,7.5vw,112px)}
.cpage.case .sec + .sec:not([class*="-sec"]):not(.cs-end):not(.al-trust){padding-top:clamp(40px,5vw,80px)}

/* ================= LIOVA case study: w stylu marki ================= */
.lv{--bg:#F2F3F1;--bg-2:#E7E9E6;--ink:#1E2226;--ink-2:#5A6066;--line:rgba(30,34,38,.13);--accent:#6E1C30;--lvd:#561425;--lvs:"Cormorant Garamond","Cormorant",Georgia,serif;--lvn:"Onest",var(--sans);background:var(--bg);color:var(--ink);font-family:var(--lvn)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv{--bg:#15181B;--bg-2:#1E2226;--ink:#F2F3F1;--ink-2:#A9AFB4;--line:rgba(242,243,241,.13);--accent:#C9677F}}
:root[data-theme="dark"] .lv{--bg:#15181B;--bg-2:#1E2226;--ink:#F2F3F1;--ink-2:#A9AFB4;--line:rgba(242,243,241,.13);--accent:#C9677F}
.lv em{font-family:var(--lvs);font-style:italic;font-weight:500;letter-spacing:-.01em;padding-right:.08em}
.lv .kicker{font-family:var(--lvn);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.lv .kicker::before{width:7px;height:7px;border-radius:0;transform:rotate(45deg)}
.lv-h2{font-family:var(--lvs);font-weight:500;font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;max-width:16ch;padding-bottom:.08em}
.lv-h2 em{color:var(--accent)}
.lv-p{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:50ch;margin:0}
.lv-headrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.lv-headrow .lv-h2{margin-bottom:0}

/* hero */
.cpage.case .lv-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(32px,4vw,52px)}
.lv-hero .cp-back{margin-bottom:28px}
.lv-hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}
.lv-eyebrow{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lv-status{display:inline-flex;align-items:center;gap:9px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 12px;color:var(--ink-2)}
.lv-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:lvPulse 2.2s ease-out infinite}
@keyframes lvPulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.lv-h{margin:clamp(28px,4vw,52px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;font-weight:400}
.lv-logo{display:block;width:100%;max-width:620px;height:auto;color:var(--accent);overflow:visible}
.lv-h-sub{display:block;font-family:var(--lvs);font-weight:500;font-size:clamp(2.1rem,4.4vw,4.4rem);line-height:1.04;letter-spacing:-.02em;padding-bottom:.1em;max-width:11ch}
.lv-h-sub em{color:var(--accent)}
.lv-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);margin-top:clamp(28px,4vw,48px);align-items:start}
.lv-lead{margin:0;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.6;color:var(--ink-2);max-width:46ch}
.lv-meta{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lv-meta div{border-top:1px solid var(--ink);padding-top:12px}
.lv-meta dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.lv-meta dd{margin:0;font-size:15px;line-height:1.4}

/* cover */
.lv-cover-wrap{padding:0 var(--cw)}
.lv-cover{position:relative;margin:0 auto;max-width:1240px;border-radius:6px;overflow:hidden;aspect-ratio:16/8.4;background:#1E2226;color:#F2F3F1}
.lv-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--p,0) * .08));transition:transform .2s linear}
.lv-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,14,12,.78) 0%,rgba(18,14,12,.35) 45%,transparent 70%)}
.lv-cover figcaption{position:absolute;z-index:2;left:clamp(22px,4vw,64px);bottom:clamp(22px,4vw,56px);right:clamp(22px,4vw,64px)}
.lv-cover-h{font-family:var(--lvs);font-weight:500;font-size:clamp(2.2rem,5.6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 clamp(16px,2.4vw,32px);padding-bottom:.08em}
.lv-cover-h em{color:#E6C9A0}
.lv-cover-stats{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,44px)}
.lv-cover-stats li{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;display:flex;flex-direction:column;gap:2px}
.lv-cover-stats b{font-family:var(--lvs);font-weight:500;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:0;text-transform:none;line-height:1.05;padding-bottom:.06em}

/* brief */
.lv-brief-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:start}
.lv-goals{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.lv-goals li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(1.02rem,1.3vw,1.15rem)}
.lv-goals span{font-family:var(--lvs);font-style:italic;color:var(--accent);font-size:1.3em;min-width:2ch}

/* strike label */
.lv-label-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,100px);align-items:center}
.lv-replay{margin-top:26px;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);border-radius:999px;padding:10px 18px;color:var(--ink);font:500 14px var(--lvn);cursor:pointer;transition:border-color .3s,background .3s}
.lv-replay:hover{border-color:var(--accent)}
.lv-replay svg{width:16px;height:16px}
.lv-tag{position:relative;background:#FBFBFA;color:#1E2226;border-radius:6px;padding:clamp(26px,4vw,52px);border:1px solid rgba(30,34,38,.12);box-shadow:0 30px 70px -40px rgba(30,34,38,.35)}
.lv-tag::before{content:"";position:absolute;inset:10px;border:1px solid rgba(110,28,48,.22);border-radius:3px;pointer-events:none}
.lv-tag-h{margin:0 0 14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6E1C30}
.lv-tag-list{margin:0;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.6;color:#3a3f44}
.lv-tag-list s{text-decoration:none;position:relative;transition:color .5s,opacity .5s}
.lv-tag-list s::after{content:"";position:absolute;left:-2px;right:-2px;top:55%;height:2px;background:#6E1C30;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.lv-tag.run .lv-tag-list s{color:rgba(58,63,68,.4)}
.lv-tag.run .lv-tag-list s::after{transform:scaleX(1)}
.lv-tag-final{margin:18px 0 0;font-family:var(--lvs);font-weight:500;font-size:clamp(3rem,7vw,6rem);line-height:1.05;letter-spacing:-.02em;color:#6E1C30;padding-bottom:.08em;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.lv-tag.done .lv-tag-final{opacity:1;transform:none}
.lv-tag-note{margin:6px 0 0;font-size:14px;color:#5A6066;opacity:0;transition:opacity .8s .3s}
.lv-tag.done .lv-tag-note{opacity:1}

/* system bento */
.lv-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:12px}
.lv-b{border-radius:6px;background:var(--bg-2);padding:clamp(20px,2.4vw,30px);margin:0;overflow:hidden;position:relative}
.lv-b-k{margin:0 0 14px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.lv-b-label{grid-column:span 2;grid-row:span 2;padding:0;min-height:420px}
.lv-b-label img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lv-b-label:hover img{transform:scale(1.04)}
.lv-b-type{background:#6E1C30;color:#F6EFE6}
.lv-b-type .lv-b-k{color:rgba(246,239,230,.65)}
.lv-type-a{margin:0;font-family:var(--lvs);font-size:clamp(4rem,7vw,6.4rem);line-height:1.08;font-weight:500;padding-bottom:.06em}
.lv-type-a em{color:#E6C9A0;margin-left:.08em}
.lv-type-n{margin:6px 0 2px;font-family:var(--lvs);font-size:1.5rem;line-height:1.2}
.lv-type-o{margin:0;font-size:13.5px;opacity:.8}
.lv-pal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;height:120px}
.lv-pal span{background:var(--c);border-radius:3px;transition:flex .4s,transform .4s var(--ease);position:relative}
.lv-pal span:hover{transform:translateY(-6px)}
.lv-base{display:flex;gap:8px;margin-top:12px}
.lv-base span{flex:1;display:flex;flex-direction:column;font-size:13px;padding:10px 12px;border-radius:3px;background:var(--c);color:#1E2226;border:1px solid var(--line)}
.lv-base span+span{color:#F2F3F1}
.lv-base small{opacity:.7;font-size:11.5px}
.lv-b-ui{grid-column:span 2}
.lv-ui{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lv-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:#6E1C30;color:#F6EFE6;font-size:14.5px;font-weight:500}
.lv-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.lv-chip{display:inline-flex;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px}
.lv-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lv-price{font-size:14px;color:var(--ink-2);margin-left:auto}
.lv-price b{font-family:var(--lvs);font-size:1.5rem;font-weight:500;color:var(--ink)}

/* end */
.lv .lv-end .cs-end-in{background:#6E1C30;border-radius:6px}
.lv .lv-end .cs-h2{font-family:var(--lvs);font-weight:500;letter-spacing:-.015em;line-height:1.06;max-width:16ch}
.lv .lv-end .cs-h2 em{color:#E6C9A0}
.lv .lv-end .btn.mega{background:#F6EFE6;color:#6E1C30;border-color:#F6EFE6}
.lv .lv-end .kicker::before{background:#E6C9A0}

@media (max-width:980px){
  .lv-h,.lv-hero-foot,.lv-brief-in,.lv-label-in,.lv-headrow,.lv-proc{grid-template-columns:minmax(0,1fr)}
  .lv-logo{max-width:420px}
  .lv-h-sub{max-width:none}
  .lv-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lv-cover{aspect-ratio:4/5}
  .lv-cover img{object-position:68% center}
  .lv-cover::after{background:linear-gradient(0deg,rgba(18,14,12,.85) 0%,rgba(18,14,12,.3) 55%,transparent 75%)}
  .lv-stage{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:150px}
  .lv-stage-jar{padding-bottom:0}
  .lv-stage-jar img{width:min(62%,280px)}
  .lv-stage-info{padding:8px 24px 0;text-align:center}
  .lv-stage-sk{margin-left:auto;margin-right:auto}
  .lv-stage-word{top:32%}
  .lv-proc-stage{top:72px;z-index:2;box-shadow:0 18px 30px -24px rgba(0,0,0,.4)}
  .lv-proc-img{max-height:none;width:min(100%,46vh)}
  .lv-steps li,.lv-steps li:first-child,.lv-steps li:last-child{min-height:44vh;padding-top:20px;justify-content:center}
  .lv-bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lv-b-label{min-height:320px}
  .lv-b-ui{grid-column:span 2}
  .lv-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lv-life{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto}
  .lv-life figure{aspect-ratio:3/4}
  .lv-life .a{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
  .lv-life .b,.lv-life .c,.lv-life .d{grid-column:auto;grid-row:auto}
  .lv-life .e{display:block}
}
@media (max-width:620px){
  .lv-meta{grid-template-columns:minmax(0,1fr)}
  .lv-bento,.lv-map{grid-template-columns:minmax(0,1fr)}
  .lv-b-label,.lv-b-ui{grid-column:auto}
  .lv-price{margin-left:0}
  .lv-pills button{padding:7px 11px 7px 9px;font-size:12.5px}
  .lv-cover-stats{gap:18px}
}
@media (prefers-reduced-motion:reduce){.lv-ticker-t,.lv-status i{animation:none}.lv-cover img{transform:none}}

/* ---- Liova v2: fan, PDP, zestawy, quiz, Journal ---- */
.lv-fan-sec{position:relative;height:230vh}
.lv-fan-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(80px,9vh,110px) var(--cw) clamp(24px,4vh,48px)}
.lv-fan-pin>.in{padding:0}
.lv-fan-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;width:100%;max-width:1240px}
.lv-fan-head .lv-h2{margin:0}
.lv-fan{position:relative;flex:1;min-height:240px;max-height:440px;width:100%;max-width:1240px}
.lv-fj{position:absolute;left:50%;bottom:8%;width:clamp(64px,10.5vw,160px);margin-left:calc(clamp(64px,10.5vw,160px) / -2);transform-origin:50% 120%;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .25s linear;cursor:pointer;z-index:var(--z);background:none;border:0;padding:0}
.lv-fj img{width:100%;display:block;filter:drop-shadow(0 18px 18px rgba(30,34,38,.18));transition:transform .5s var(--ease)}
.lv-fj span{position:absolute;left:50%;top:-30px;transform:translate(-50%,6px);white-space:nowrap;font-family:var(--lvs);font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.2;padding-bottom:.08em;opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;color:var(--ink)}
.lv-fan.open .lv-fj:hover,.lv-fan.open .lv-fj:focus-visible{z-index:30}
.lv-fan.open .lv-fj:hover img,.lv-fan.open .lv-fj:focus-visible img{transform:translateY(-22px) scale(1.06)}
.lv-fan.open .lv-fj:hover span,.lv-fan.open .lv-fj:focus-visible span{opacity:1;transform:translate(-50%,-30px)}
.lv-fan-floor{position:absolute;left:8%;right:8%;bottom:6%;height:1px;background:var(--line)}

/* PDP demo */
.lv-pdp{--c:#6E1C30;border-radius:8px;border:1px solid var(--line);overflow:hidden;background:#F2F3F1;color:#1E2226;box-shadow:0 40px 90px -50px rgba(30,34,38,.4)}
.lv-pdp-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#E7E9E6;border-bottom:1px solid #D5D8D5}
.lv-pdp-bar i{width:10px;height:10px;border-radius:50%;background:#C9CDC9}
.lv-pdp-bar span{margin-left:12px;font-size:12px;color:#545A60;background:#fff;border-radius:6px;padding:3px 14px;transition:color .4s}
.lv-pdp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:clamp(440px,42vw,560px)}
.lv-pdp-stage{position:relative;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 9%,#F2F3F1);transition:background-color .8s var(--ease);overflow:hidden}
.lv-pdp-halo{position:absolute;left:50%;top:58%;width:70%;aspect-ratio:1.5;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 22%,transparent),transparent);transition:background .8s}
.lv-pdp-stage img{position:relative;width:min(52%,280px);filter:drop-shadow(0 30px 30px color-mix(in srgb,var(--c) 45%,rgba(0,0,0,.2)));transition:opacity .4s var(--ease),transform .6s var(--ease)}
.lv-pdp-stage img.out{opacity:0;transform:translateY(30px) scale(.94)}
.lv-pdp-gname{position:absolute;left:24px;top:20px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,#1E2226)}
.lv-pdp-buy{padding:clamp(24px,3.4vw,52px)}
.lv-pdp-crumbs{margin:0;font-size:13px;color:#545A60}
.lv-pdp-kick{margin:22px 0 0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c);transition:color .6s}
.lv-pdp-name{margin:6px 0 0;font-family:var(--lvs);font-weight:500;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.04;letter-spacing:-.01em;white-space:nowrap;padding-bottom:.08em}
.lv-pdp-name .ch{display:inline-block;animation:lvCh .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 32ms)}
@keyframes lvCh{from{opacity:0;transform:translateY(.3em)}}
.lv-pdp-desc{margin:12px 0 0;color:#545A60;font-size:15.5px;line-height:1.55;max-width:34ch;min-height:3.1em}
.lv-pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 0}
.lv-pdp-price b{font-family:var(--lvs);font-weight:500;font-size:2.2rem;line-height:1.1}
.lv-pdp-price span{font-size:13px;color:#545A60}
.lv-pdp-opt{margin-top:20px;padding-top:18px;border-top:1px solid #D5D8D5}
.lv-pdp-opt p{margin:0;font-size:14px;color:#545A60}
.lv-pdp-opt b{color:#1E2226;font-weight:600}
.lv-sw{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.lv-sw button{--sc:#6E1C30;width:34px;height:34px;border-radius:50%;border:0;background:var(--sc);position:relative;cursor:pointer;padding:0;transition:transform .35s var(--ease)}
.lv-sw button::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--sc);opacity:0;transform:scale(.85);transition:opacity .3s,transform .35s var(--ease)}
.lv-sw button:hover{transform:translateY(-3px)}
.lv-sw button[aria-checked="true"]::after{opacity:1;transform:none}
.lv-pdp-act{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.lv-qty{display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border:1px solid #D5D8D5;border-radius:999px;font-weight:500}
.lv-pdp-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--c);color:#fff;font-weight:500;transition:background-color .6s;min-width:160px}
.lv-pdp-sk{margin:16px 0 0;font-size:13.5px;color:#545A60}
.lv-pdp-sk b{color:var(--c);transition:color .6s}
.lv-notes{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.lv-notes li{border-top:1px solid var(--line);padding-top:16px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.lv-notes span{display:block;font-family:var(--lvs);font-style:italic;font-size:1.3rem;color:var(--accent);margin-bottom:4px}
.lv-notes b{color:var(--ink);font-weight:600}

/* set + quiz */
.lv-set-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.lv-set{position:relative;background:#fff;color:#1E2226;border-radius:6px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px}
.lv-set-k{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6E1C30}
.lv-set-h{margin:-10px 0 0;font-family:var(--lvs);font-weight:500;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.08;padding-bottom:.06em}
.lv-trio{height:200px;display:flex;justify-content:center;align-items:flex-end}
.lv-trio img{width:118px;margin:0 -12px;position:relative;transform-origin:50% 100%;filter:drop-shadow(0 16px 16px rgba(30,34,38,.14));transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.lv-trio img.enter{transform:translateY(40px) scale(.85);opacity:0}
.lv-trio img:nth-child(2){z-index:2}
.lv-trio .slot{width:96px;height:124px;margin:0 8px;border:1.5px dashed #C9CDC9;border-radius:14px;display:grid;place-items:center;color:#8A9095;font-size:13px}
.lv-picks{display:flex;flex-wrap:wrap;gap:8px}
.lv-picks button{--c:#6E1C30;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px 0 10px;border-radius:999px;border:1px solid #D5D8D5;background:#fff;color:#1E2226;cursor:pointer;font:500 14px var(--lvn);transition:background .3s,color .3s,border-color .3s,opacity .3s}
.lv-picks button i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.lv-picks button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.lv-picks button[aria-pressed="true"] i{background:#fff}
.lv-picks button:disabled{opacity:.4;cursor:not-allowed}
.lv-set-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid #E1E3E0;margin-top:auto}
.lv-set-price{margin:0;font-family:var(--lvs);font-size:1.9rem;font-weight:500;line-height:1.1}
.lv-set-price s{font-family:var(--lvn);font-size:14px;color:#8A9095;margin-left:8px}
.lv-set-note{margin:2px 0 0;font-size:13px;color:#545A60}
.lv-set-btn{min-height:50px;padding:0 26px;border-radius:999px;border:0;background:#6E1C30;color:#fff;font:500 15px var(--lvn);cursor:pointer;transition:background .3s,opacity .3s}
.lv-set-btn:hover{background:#561425}
.lv-set-btn:disabled{opacity:.4;cursor:not-allowed}
.lv-set-toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);margin:0;background:#1E2226;color:#F2F3F1;font-size:13.5px;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.lv-set-toast.on{opacity:1;transform:translate(-50%,0)}
.lv-quiz{background:#23282D;color:#F2F3F1;border-radius:6px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:24px;min-height:420px}
.lv-qprog{display:flex;gap:6px}
.lv-qprog i{flex:1;height:2px;border-radius:2px;background:rgba(242,243,241,.18);position:relative;overflow:hidden}
.lv-qprog i::after{content:"";position:absolute;inset:0;background:#F2F3F1;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.lv-qprog i.on::after{transform:scaleX(1)}
.lv-qstep{flex:1;display:flex;flex-direction:column;justify-content:center;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.lv-qstep.out{opacity:0;transform:translateX(-20px)}
.lv-qstep small{display:block;font-size:12.5px;color:rgba(242,243,241,.55);margin-bottom:8px}
.lv-qstep h3{margin:0;font-family:var(--lvs);font-weight:500;font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.1;padding-bottom:.06em}
.lv-qopts{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lv-qopts button{display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 18px;border-radius:6px;border:1px solid rgba(242,243,241,.2);background:transparent;color:inherit;cursor:pointer;font:15px var(--lvn);text-align:left;transition:background .3s,color .3s,border-color .3s}
.lv-qopts button:hover{background:#F2F3F1;color:#1E2226;border-color:#F2F3F1}
.lv-qres{display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px;align-items:center}
.lv-qres img{width:110px;filter:drop-shadow(0 20px 22px rgba(0,0,0,.35));animation:lvPop .8s cubic-bezier(.2,.8,.2,1)}
@keyframes lvPop{from{transform:translateY(30px) rotate(-6deg) scale(.8);opacity:0}}
.lv-qres h3{font-size:clamp(2.2rem,3.4vw,3rem)}
.lv-qres p{margin:8px 0 0;color:rgba(242,243,241,.75);font-size:14.5px;line-height:1.55}
.lv-qres button{margin-top:14px;background:none;border:0;color:rgba(242,243,241,.8);cursor:pointer;text-decoration:underline;text-underline-offset:4px;font:14px var(--lvn);padding:0}

/* Journal */
.lv-jr{background:#F7F5F1;color:#1E2226;border-radius:6px;padding:clamp(20px,3.4vw,48px);border:1px solid var(--line)}
.lv-jr-top,.lv-jr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#545A60}
.lv-jr-top{padding-bottom:12px;border-bottom:1px solid #1E2226}
.lv-jr-top b{color:#1E2226}
.lv-jr-title{margin:clamp(6px,1.4vw,18px) 0 0;text-align:center;font-family:var(--lvs);font-weight:500;font-size:clamp(4.4rem,15vw,13rem);line-height:1;letter-spacing:-.035em;white-space:nowrap;padding:0 .04em .1em}
.lv-jr-title .l{display:inline-block;opacity:0;transform:translateY(.25em);transition:opacity .9s var(--ease),transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 70ms)}
.lv-jr.in .lv-jr-title .l{opacity:1;transform:none}
.lv-jr-bot{align-items:center;padding:12px 0;border-top:1px solid #D5D8D5;border-bottom:1px solid #1E2226}
.lv-jr-bot em{font-family:var(--lvs);font-style:italic;font-size:1.15rem;color:#1E2226}
.lv-jr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,3.4vw,48px);margin-top:clamp(20px,3vw,36px)}
.lv-jr-cover figure{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:16/10;background:#1b1714}
.lv-jr-cover img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:transform 1.2s var(--ease)}
.lv-jr-cover:hover img{transform:scale(1.04)}
.lv-vb{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;background:rgba(20,16,13,.55);backdrop-filter:blur(8px);color:#fff;font-size:12px}
.lv-vb i{width:20px;height:20px;border-radius:50%;background:#fff;color:#1E2226;display:grid;place-items:center;font-style:normal;font-size:8px}
.lv-jr-k{margin:18px 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E1C30}
.lv-jr-h{margin:6px 0 0;font-family:var(--lvs);font-weight:500;font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.05;padding-bottom:.06em}
.lv-jr-h em{color:#6E1C30}
.lv-jr-d{margin:10px 0 0;color:#545A60;font-size:15px;line-height:1.55;max-width:46ch}
.lv-jr-m{margin:10px 0 0;font-size:12.5px;color:#545A60}
.lv-jr-list{list-style:none;margin:0;padding:0;border-top:1px solid #D5D8D5}
.lv-jr-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid #D5D8D5}
.lv-jr-list span{grid-column:1/-1;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E1C30}
.lv-jr-list b{font-family:var(--lvs);font-weight:500;font-size:1.45rem;line-height:1.15}
.lv-jr-list small{font-size:12.5px;color:#545A60;align-self:end}
.lv-jr-list .lv-jr-num{grid-template-columns:auto minmax(0,1fr);align-items:center;background:#6E1C30;color:#F4EDEE;border-radius:4px;padding:16px 18px;margin-top:14px;border:0}
.lv-jr-num b{font-size:3.6rem;line-height:1;grid-row:span 2}
.lv-jr-num span{grid-column:auto;font-size:14px;letter-spacing:0;text-transform:none;color:#F4EDEE;font-family:var(--lvs);font-style:italic}
.lv-jr-num small{color:rgba(244,237,238,.7);align-self:start}
.lv-jr-extra{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:16px}
.lv-issues,.lv-paws-card{border-radius:6px;padding:clamp(20px,2.6vw,32px)}
.lv-issues{background:var(--bg-2)}
.lv-small{font-size:14px;margin-top:16px}
.lv-covers{display:flex;gap:clamp(10px,1.6vw,20px)}
.lv-mag{position:relative;flex:1;max-width:170px;aspect-ratio:3/4;background:#F4F1EC;color:#1E2226;border-radius:2px 5px 5px 2px;box-shadow:-2px 0 0 #D8D3CB inset,0 22px 36px -22px rgba(30,24,20,.45);transition:transform .5s var(--ease)}
.lv-mag:hover{transform:translateY(-6px) rotate(-1.5deg)}
.lv-mag.on{box-shadow:-2px 0 0 #D8D3CB inset,0 0 0 2px var(--bg-2),0 0 0 4px #6E1C30,0 26px 40px -22px rgba(30,24,20,.5)}
.lv-mag .mt{position:absolute;left:0;right:0;top:4%;text-align:center;font-family:var(--lvs);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.03em}
.lv-mag .mi{position:absolute;left:9%;right:9%;top:26%;bottom:22%;overflow:hidden;border-radius:2px;background:#E3DED6}
.lv-mag .mi img{width:100%;height:100%;object-fit:cover}
.lv-mag.soon .mi img{filter:grayscale(1);opacity:.55}
.lv-mag .ml{position:absolute;left:9%;right:9%;bottom:4%;display:flex;justify-content:space-between;align-items:flex-end;gap:6px;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.lv-mag .ml b{font-family:var(--lvs);font-size:clamp(.72rem,1vw,.9rem);letter-spacing:0;text-transform:none;font-weight:500;line-height:1.1;max-width:66%}
.lv-mag .stamp{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-8deg);padding:4px 10px;border:1.5px solid #1E2226;border-radius:999px;background:rgba(244,241,236,.92);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.lv-paws-card{background:#6E1C30;color:#F4EDEE;text-align:center}
.lv-paws-card .lv-b-k{color:rgba(244,237,238,.65)}
.lv-paws-h{margin:0;font-family:var(--lvs);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.12;padding-bottom:.06em}
.lv-paws{display:flex;justify-content:center;gap:clamp(4px,1vw,10px);margin-top:18px}
.lv-paws button{width:clamp(42px,4vw,54px);aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;color:#F4EDEE;transition:transform .4s var(--ease)}
.lv-paws button:hover{transform:translateY(-3px)}
.lv-paws svg{width:100%;height:100%;display:block;fill:rgba(244,237,238,0);stroke:rgba(244,237,238,.55);stroke-width:.8;transition:fill .3s,stroke .3s}
.lv-paws button.lit svg{fill:#F4EDEE;stroke:#F4EDEE}
.lv-paws-l{margin:10px 0 0;font-family:var(--lvs);font-style:italic;font-size:1.35rem;min-height:1.5em;line-height:1.3}
.lv-paws-card .lv-p{color:rgba(244,237,238,.75);margin-left:auto;margin-right:auto}

@media (max-width:980px){
  .lv-fan-head{grid-template-columns:minmax(0,1fr);gap:12px}
  .lv-fan-head .lv-p{font-size:.95rem}
  .lv-fan-sec{height:200vh}
  .lv-pdp-grid,.lv-set-grid,.lv-jr-grid,.lv-jr-extra{grid-template-columns:minmax(0,1fr)}
  .lv-pdp-stage{min-height:300px}
  .lv-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .lv-trio img{width:92px}
  .lv-trio .slot{width:76px;height:100px}
  .lv-jr-bot em{display:none}
}
.cpage.case.lv .sec:not(.lv-hero){padding-top:clamp(48px,5.5vw,88px);padding-bottom:clamp(48px,5.5vw,88px)}
.lv-map figure img[src$="r2.webp"]{object-position:center 30%}
@media (max-width:980px){.lv-proc-img{width:min(100%,32vh)}.lv-proc-stage{box-shadow:0 -90px 0 var(--bg),0 18px 30px -24px rgba(0,0,0,.4)}}
.lv-proc-cap{display:none}
@media (max-width:980px){.lv-steps li,.lv-steps li:first-child,.lv-steps li:last-child{min-height:42vh;padding:0;opacity:0;pointer-events:none}.lv-steps li:last-child{min-height:30vh}
.lv-proc-cap{display:block;padding:14px 18px 16px;border-top:1px solid var(--line);min-height:128px}
.lv-proc-cap span{font-family:var(--lvs);font-style:italic;font-size:1.1rem;color:var(--accent)}
.lv-proc-cap h3{font-family:var(--lvs);font-weight:500;font-size:1.6rem;line-height:1.1;margin:0 0 4px;padding-bottom:.06em}
.lv-proc-cap p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.lv-proc-cap.swap>*{animation:rise .5s var(--ease) both}
.lv-proc-img{width:min(100%,26vh)}}
.lv-mag .ml{flex-direction:column;align-items:flex-start;gap:2px}.lv-mag .ml b{max-width:100%}
@media (max-width:620px){.lv-mag .ml b{display:none}.lv-mag .mi{bottom:14%}}
.lv-mag .mi{bottom:28%}
.gf-chip span,.gf-chip b{display:inline-block;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.gf-chip.swap span,.gf-chip.swap b{opacity:0;transform:translateY(8px)}
.gf-chip{white-space:nowrap}
/* ---- Liova: anatomia systemu ---- */
.lv-an-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.lv-an-label,.lv-an-color,.lv-scale,.lv-kit-c{border-radius:6px;background:var(--bg-2);padding:clamp(20px,2.6vw,32px)}
.lv-an-img{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:1/.82}
.lv-an-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.lv-pin{position:absolute;left:var(--x);top:var(--y);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid #fff;background:rgba(30,34,38,.55);backdrop-filter:blur(6px);color:#fff;font:600 13px var(--lvn);cursor:pointer;transition:background .3s,transform .4s var(--ease)}
.lv-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:lvPinP 2.4s ease-out infinite}
@keyframes lvPinP{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
.lv-pin.on,.lv-pin:hover{background:#E6C9A0;color:#1E2226;border-color:#E6C9A0;transform:scale(1.12)}
.lv-an-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;counter-reset:lg}
.lv-an-legend li{counter-increment:lg;padding:10px 0 10px 30px;border-top:1px solid var(--line);position:relative;font-size:13.5px;line-height:1.45;color:var(--ink-2);transition:color .3s}
.lv-an-legend li::before{content:counter(lg);position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink);transition:background .3s,color .3s}
.lv-an-legend b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.lv-an-legend li.on::before{background:var(--accent);border-color:var(--accent);color:#fff}
.lv-an-legend li.on b{color:var(--accent)}
.lv-an-color{display:flex;flex-direction:column;gap:16px;transition:background-color .6s}
.lv-an-h{margin:-6px 0 0;font-family:var(--lvs);font-weight:500;font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.1;padding-bottom:.06em}
.lv-an-h em{color:var(--c);transition:color .6s}
.lv-eng-sw{display:flex;flex-wrap:wrap;gap:8px}
.lv-eng-sw button{--sc:#000;width:30px;height:30px;border-radius:50%;border:0;padding:0;background:var(--sc);cursor:pointer;position:relative;transition:transform .3s var(--ease)}
.lv-eng-sw button::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--sc);opacity:0;transition:opacity .3s}
.lv-eng-sw button[aria-checked="true"]::after{opacity:1}
.lv-eng-sw button:hover{transform:translateY(-2px)}
.lv-tones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lv-tones div{border-radius:4px;padding:30px 10px 10px;color:#1E2226;display:flex;flex-direction:column;transition:background-color .7s var(--ease);border:1px solid rgba(30,34,38,.08)}
.lv-tones div.dk{color:#fff}
.lv-tones b{font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.lv-tones small{font-size:11px;opacity:.75}
.lv-eng-prev{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.lv-mini-pc{background:var(--c);color:#fff;border-radius:6px;padding:0 12px 12px;margin-top:30px;transition:background-color .7s var(--ease)}
.lv-mini-pc img{width:78%;margin:-30px auto 0;display:block;transform:rotate(-3deg);filter:drop-shadow(0 12px 12px rgba(0,0,0,.25))}
.lv-mini-pc .t{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.28)}
.lv-mini-pc .t b{font-family:var(--lvs);font-weight:500;font-size:1.3rem;line-height:1.1}
.lv-mini-pc .t span{font-size:11.5px}
.lv-mini-pc .d{margin:4px 0 0;font-size:10.5px;opacity:.8}
.lv-eng-uses{list-style:none;margin:0;padding:0}
.lv-eng-uses li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.lv-eng-uses i{flex:none;width:16px;height:16px;border-radius:50%;border:1px solid rgba(30,34,38,.12);transition:background-color .7s var(--ease)}
.lv-an-note{margin:auto 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.lv-an-note code{font-size:12px;background:var(--bg);padding:1px 6px;border-radius:4px}
.lv-scale{margin-top:16px}
.lv-sc-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.lv-sc-row .m{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.lv-sc-row .s{min-width:0}
.lv-sc-row .h1{font-family:var(--lvs);font-weight:500;font-size:clamp(3rem,7.2vw,6.6rem);line-height:1.02;letter-spacing:-.012em;padding-bottom:.08em}
.lv-sc-row .h2{font-family:var(--lvs);font-weight:500;font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.012em;padding-bottom:.08em}
.lv-sc-row .h2 em{color:var(--accent)}
.lv-sc-row .h3{font-family:var(--lvs);font-weight:500;font-size:30px;line-height:1.1;padding-bottom:.06em}
.lv-sc-row .ld{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--ink-2)}
.lv-sc-row .kk{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lv-kit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);gap:16px;margin-top:16px}
.lv-kit-btn{display:flex;flex-direction:column;gap:16px}
.lv-btn.light{background:#fff;color:#1E2226}
.lv-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line);align-self:flex-start}
.lv-tabs span{padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.lv-tabs span.on{background:var(--ink);color:var(--bg)}
.lv-qty2{display:inline-flex;align-items:center;gap:16px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px}
.lv-qty2 b{font-weight:600}
.lv-tagc{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.lv-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#6E1C30;color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center}
.lv-kit-card{display:flex;flex-direction:column}
.lv-pc{margin-top:48px;background:#fff;color:#1E2226;border-radius:6px;padding:0 18px 18px;transition:background-color .5s var(--ease),color .5s}
.lv-pc .jar{width:62%;margin:-44px auto 0;transition:transform .6s var(--ease)}
.lv-pc .jar img{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(30,34,38,.12))}
.lv-pc .top{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(30,34,38,.12);transition:border-color .5s}
.lv-pc .top b{font-family:var(--lvs);font-weight:500;font-size:1.7rem;line-height:1.1}
.lv-pc .top span{font-size:13.5px;font-weight:500}
.lv-pc .desc{margin:4px 0 0;font-size:13px;color:#545A60;transition:color .5s}
.lv-pc:hover{background:var(--c);color:#fff}
.lv-pc:hover .jar{transform:translateY(-12px) rotate(-3deg)}
.lv-pc:hover .desc{color:rgba(255,255,255,.82)}
.lv-pc:hover .top{border-color:rgba(255,255,255,.28)}
.lv-kit-tok dl{margin:0}
.lv-kit-tok dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.lv-kit-tok dt{color:var(--ink-2)}
.lv-kit-tok dd{margin:0;display:flex;align-items:center;gap:6px;text-align:right;font-weight:500}
.lv-kit-tok i{display:inline-block;width:16px;height:16px;border:1px solid var(--line)}
.lv-kit-tok i.r6{border-radius:4px;border:1.5px solid var(--ink)}
.lv-kit-tok i.rp{width:26px;border-radius:999px;border:1.5px solid var(--ink)}
.lv-kit-tok dd i[style]{border-radius:50%}
@media (max-width:980px){
  .lv-an-row,.lv-kit{grid-template-columns:minmax(0,1fr)}
  .lv-sc-row{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:620px){
  .lv-an-legend{grid-template-columns:minmax(0,1fr)}
  .lv-eng-prev{grid-template-columns:120px minmax(0,1fr)}
  .lv-tones small{display:none}
}
.lv-an-img{aspect-ratio:1/.9}.lv-an-img img{object-position:center top}
.lv-an-row{align-items:start}
.lv-eng-prev{grid-template-columns:200px minmax(0,1fr)}
.lv-mini-pc .t b{font-size:1.6rem}
.lv-an-note{margin-top:4px}
@media (max-width:620px){.lv-eng-prev{grid-template-columns:130px minmax(0,1fr)}}
.lv-an-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.lv-scale--in{margin-top:0}
.lv-scale--in .lv-sc-row{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
.lv-scale--in .h1{font-size:clamp(2.8rem,4.6vw,4.4rem)}
.lv-scale--in .h2{font-size:clamp(2rem,3vw,2.8rem)}
.lv-mini-pc .t{flex-wrap:wrap}
.lv-an-label{position:sticky;top:96px}
@media (max-width:980px){.lv-an-label{position:static}}

/* ================= Terra Travel case study: badania UX ================= */
.tt{--tn:#0B2A33;--tg:#C99516;--tb:#1A6E93;--tgl:color-mix(in srgb,var(--tg) 16%,transparent)}
.tt .cs-h2 em,.tt-h em{font-family:var(--serif);font-style:italic;color:var(--tb);padding-right:.06em}
.tt-p{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:52ch;margin:0}
.tt-note{color:var(--ink-2);font-size:13.5px;margin:18px 0 0;max-width:80ch}
.tt-headrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.tt-headrow .cs-h2{margin-bottom:0}
.cpage.case .tt-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,3vw,44px)}
.tt-hero-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.tt-h{font-size:clamp(3rem,7vw,6.8rem);font-weight:500;letter-spacing:-.05em;line-height:1;padding-bottom:.08em;margin:0}
.tt-h span{display:block;margin-top:.35em;font-size:.3em;letter-spacing:-.02em;line-height:1.25;font-weight:400;color:var(--ink-2);max-width:26ch}
.tt-meta{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.tt-meta div{border-top:1px solid var(--line);padding-top:10px}
.tt-meta dt{font-size:13px;color:var(--ink-2)}
.tt-meta dd{margin:2px 0 0;font-size:15.5px}

.tt-cover-wrap{padding:0 var(--cw)}
.tt-cover{position:relative;margin:0 auto;max-width:1240px;border-radius:28px;overflow:hidden;aspect-ratio:1920/744;background:var(--tn)}
.tt-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tt-route{position:absolute;inset:8% 4% 20%;width:92%;height:72%;overflow:visible}
.tt-route path{stroke:#fff;stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;opacity:.85;vector-effect:non-scaling-stroke}
.tt-plane{position:absolute;left:0;top:0;width:30px;height:30px;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
.tt-cover figcaption{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(16px,2.6vw,34px);background:#fff;color:var(--tn);border-radius:999px;padding:10px 20px;font-size:clamp(14px,1.3vw,17px);font-weight:500}

.tt-steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:s}
.tt-steps li{position:relative;border-radius:18px;background:var(--bg-2);padding:18px 16px 18px;display:flex;flex-direction:column;gap:4px;font-size:15.5px;font-weight:500;line-height:1.3}
.tt-steps li b{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tb);margin-bottom:18px}
.tt-steps li small{font-size:13px;font-weight:400;color:var(--ink-2)}
.tt-steps li::after{content:"";position:absolute;right:-8px;top:50%;width:6px;height:6px;border-top:1.5px solid var(--ink-2);border-right:1.5px solid var(--ink-2);transform:translateY(-50%) rotate(45deg);opacity:.5}
.tt-steps li:last-child::after{display:none}
.tt-steps li{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.tt-steps.in li{opacity:1;transform:none}

.tt-matrix-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.tt-matrix{width:100%;min-width:760px;border-collapse:collapse;font-size:14.5px}
.tt-matrix th,.tt-matrix td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.tt-matrix thead th{height:84px;background:var(--bg)}
.tt-matrix thead img{display:inline-block;width:auto;max-width:150px;vertical-align:middle}
.tt-matrix tbody th{text-align:left;font-weight:500;width:22%;background:var(--bg-2)}
.tt-matrix tr:last-child th,.tt-matrix tr:last-child td{border-bottom:0}
.tt-matrix td.y,.tt-matrix td.n{font-weight:500;font-size:13.5px}
.tt-matrix td.y::before,.tt-matrix td.n::before{content:"";display:inline-block;vertical-align:-3px;width:16px;height:16px;margin-right:6px;border-radius:50%;background:#1E8E5A;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.6,.64,1);transition-delay:var(--d,0s)}
.tt-matrix td.y{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-4.8' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tt-matrix td.n{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.2 4.1L4.1 5.2 6.9 8l-2.8 2.8 1.1 1.1L8 9.1l2.8 2.8 1.1-1.1L9.1 8l2.8-2.8-1.1-1.1L8 6.9z'/%3E%3C/svg%3E")}
.tt-matrix td.n::before{background:#C8462E}
.tt-matrix.in td.y::before,.tt-matrix.in td.n::before{transform:scale(1)}
.tt-matrix td.t{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.tt-matrix tr.gap th,.tt-matrix tr.gap td{background:color-mix(in srgb,#C8462E 7%,var(--bg))}
.tt-matrix tr.gap th{background:color-mix(in srgb,#C8462E 12%,var(--bg-2))}
.tt-bar{display:block;height:6px;border-radius:3px;background:var(--line);margin:0 auto 6px;max-width:90px;position:relative;overflow:hidden}
.tt-bar::after{content:"";position:absolute;inset:0;background:var(--tb);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .3s}
.tt-matrix.in .tt-bar::after{transform:scaleX(var(--v))}
.tt-gaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.tt-gaps div{display:flex;gap:16px;align-items:center;border-radius:18px;background:color-mix(in srgb,#C8462E 9%,var(--bg));padding:18px 22px}
.tt-gaps b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;line-height:1.1;padding-bottom:.04em}
.tt-gaps span{font-size:15px;line-height:1.45;color:var(--ink-2)}

.tt-persona-sec{background:var(--tn);color:#EEF3F4}
.tt-persona-sec .kicker{color:rgba(238,243,244,.6)}
.tt-persona-sec .kicker::before{background:var(--tg)}
.tt-persona{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.tt-ph{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:#163945}
.tt-ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.tt-ph figcaption{position:absolute;left:14px;top:14px;background:var(--tg);color:var(--tn);font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 12px}
.tt-quote{margin:0 0 26px;padding:18px 22px;border-radius:0 18px 18px 0;border-left:3px solid var(--tg);background:rgba(201,149,22,.12);font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.3;padding-right:1em}
.tt-facts{margin:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tt-facts div{border-top:1px solid rgba(238,243,244,.18);padding-top:10px}
.tt-facts dt{font-size:12.5px;color:rgba(238,243,244,.55)}
.tt-facts dd{margin:3px 0 0;font-size:15px}
.tt-persona .tt-p{color:rgba(238,243,244,.78);max-width:60ch}
.tt-persona .tt-note{color:rgba(238,243,244,.5)}

.tt-survey-sec{background:var(--tn);color:#EEF3F4;padding-top:0}
.tt-survey-sec .kicker{color:rgba(238,243,244,.6)}
.tt-survey-sec .kicker::before{background:var(--tg)}
.tt-survey-sec .tt-p{color:rgba(238,243,244,.7)}
.tt-rings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tt-ring{border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.tt-ring svg{width:min(118px,100%);height:auto;transform:rotate(-90deg)}
.tt-ring circle{fill:none;stroke-width:9}
.tt-ring .bg{stroke:rgba(255,255,255,.1)}
.tt-ring .fg{stroke:var(--tg);stroke-linecap:round;stroke-dasharray:0 302;transition:stroke-dasharray 1.4s var(--ease)}
.tt-ring .val{position:relative;margin-top:-86px;height:64px;display:grid;place-items:center;font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.02em}
.tt-ring .q{font-size:12.5px;color:rgba(238,243,244,.55);margin-top:8px}
.tt-ring .a{font-size:15px;line-height:1.3}

.tt-brand{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.tt-logos{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tt-logos li{height:86px;border-radius:18px;background:var(--bg-2);display:grid;place-items:center;transition:transform .5s var(--ease)}
.tt-logos li:hover{transform:translateY(-4px)}
.tt-logos img{height:30px;width:auto;opacity:.75;filter:grayscale(1)}
.tt-logos img.wide{height:24px}.tt-logos img.wide2{height:34px}
.tt-logos li:hover img{opacity:1;filter:none}
:root[data-theme="dark"] .tt-logos img{filter:grayscale(1) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt-logos img{filter:grayscale(1) invert(1)}}
.tt-chan{width:100%;height:auto;overflow:visible;margin-top:8px}
.tt-chan .rec{fill:color-mix(in srgb,var(--tb) 9%,transparent);stroke:color-mix(in srgb,var(--tb) 40%,transparent);stroke-dasharray:4 5}
.tt-chan .rect{font-size:13px;fill:var(--tb);text-anchor:middle;font-weight:500}
.tt-chan .ln{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s var(--ease)}
.tt-chan circle{fill:var(--ink-2);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.6,.64,1)}
.tt-chan circle.hi{fill:var(--tb)}
.tt-chan text{font-size:13px;fill:var(--ink-2);text-anchor:middle}
.tt-chan.in .ln{stroke-dashoffset:0}
.tt-chan.in circle{transform:scale(1)}
.tt-chan.in circle:nth-of-type(2){transition-delay:.4s}.tt-chan.in circle:nth-of-type(3){transition-delay:.8s}.tt-chan.in circle:nth-of-type(4){transition-delay:1.2s}

.tt-emp{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:12px}
.tt-emp-tabs{display:grid;gap:8px;align-content:start}
.tt-emp-tabs button{display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:16px;padding:16px 18px;font:500 15.5px var(--sans);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.tt-emp-tabs button span{font-size:12.5px;color:var(--ink-2);font-weight:400}
.tt-emp-tabs button:hover{border-color:var(--tb)}
.tt-emp-tabs button[aria-selected="true"]{background:var(--tn);color:#EEF3F4;border-color:var(--tn)}
.tt-emp-tabs button[aria-selected="true"] span{color:var(--tg)}
.tt-emp-tabs button.risk[aria-selected="true"]{background:#8E3220;border-color:#8E3220}
.tt-emp-panel{border-radius:22px;background:var(--bg-2);padding:clamp(22px,3vw,40px);min-height:300px}
.tt-emp-panel h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;margin:0 0 18px}
.tt-emp-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tt-emp-panel li{position:relative;padding:14px 16px 14px 44px;border-radius:14px;background:var(--bg);font-size:15.5px;line-height:1.45;animation:rise .5s var(--ease) both}
.tt-emp-panel li::before{content:"";position:absolute;left:18px;top:21px;width:10px;height:10px;border-radius:50%;background:var(--tg)}
.tt-emp-panel.risk li::before{background:#C8462E}

.tt-uj{border-radius:26px;border:1px solid var(--line);padding:clamp(18px,2.6vw,34px)}
.tt-uj-phases{display:flex;gap:6px;margin-bottom:10px}
.tt-uj-phases span{flex:var(--w);padding:8px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;background:#A9531F}
.tt-uj-phases span:nth-child(2){background:var(--tg)}
.tt-uj-phases span:nth-child(3){background:#9A8A2C}
.tt-curve{display:block;width:100%;height:150px;overflow:visible}
.tt-curve .mid{stroke:var(--line);stroke-dasharray:4 6}
.tt-curve .cv{fill:none;stroke:var(--tb);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 2s var(--ease)}
.tt-uj.in .tt-curve .cv{stroke-dashoffset:0}
.tt-uj-stages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;position:relative;margin-top:-150px;height:150px;margin-bottom:16px}
.tt-st{position:relative;border:0;background:none;cursor:pointer;padding:0;color:var(--ink)}
.tt-st .dot{position:absolute;left:50%;top:var(--y);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg);border:2px solid var(--c);box-shadow:0 6px 16px -8px rgba(0,0,0,.35);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.6,.64,1),background .3s;transition-delay:var(--d)}
.tt-uj.in .tt-st .dot{transform:scale(1)}
.tt-st:hover .dot,.tt-st[aria-selected="true"] .dot{background:var(--c);color:#fff}
.tt-st .nm{position:absolute;left:0;right:0;bottom:-30px;font-size:13px;font-weight:500;text-align:center}
.tt-st[aria-selected="true"] .nm{color:var(--tb)}
.tt-uj-detail{margin-top:42px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tt-uj-detail>div{border-radius:18px;padding:18px 18px 20px;background:var(--bg-2);animation:rise .5s var(--ease) both}
.tt-uj-detail>div:nth-child(2){animation-delay:.06s;background:color-mix(in srgb,#C8462E 9%,var(--bg))}
.tt-uj-detail>div:nth-child(3){animation-delay:.12s;background:color-mix(in srgb,#1E8E5A 10%,var(--bg))}
.tt-uj-detail h4{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tt-uj-detail blockquote{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.3;padding-right:.1em}
.tt-uj-detail ul{margin:0;padding:0 0 0 18px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tt-uj-detail li+li{margin-top:5px}

.tt-usp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tt-card{border-radius:26px;background:var(--tn);color:#EEF3F4;padding:clamp(24px,3vw,40px);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.tt-card.in{opacity:1;transform:none}
.tt-card--g{background:var(--tg);color:var(--tn)}
.tt-card-k{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.tt-card h3{margin:8px 0 22px;font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.035em;line-height:1.1;padding-bottom:.04em}
.tt-card-big{display:flex;align-items:flex-end;gap:14px;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.tt-card-big b{font-size:clamp(3.4rem,6vw,5.4rem);font-weight:500;letter-spacing:-.05em;line-height:1;padding-bottom:.06em}
.tt-card-big span{font-size:14.5px;line-height:1.4;max-width:24ch;opacity:.8;padding-bottom:10px}
.tt-trips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tt-trips li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 7%,transparent)}
.tt-trips li b{font-weight:600}
.tt-dest{margin-top:12px;border-radius:22px;background:var(--bg-2);padding:16px 0;overflow:hidden}
.tt-dest p{margin:0 22px 8px;font-size:13px;color:var(--ink-2)}
.tt-dest-track{display:flex;gap:36px;width:max-content;animation:ttDest 30s linear infinite}
.tt-dest-track span{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;line-height:1.25}
.tt-dest-track span:nth-child(odd){color:var(--tb)}
@keyframes ttDest{to{transform:translateX(-50%)}}

.tt-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.tt-kpis div{border-radius:22px;background:var(--tn);color:#EEF3F4;padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.tt-kpis b{font-size:clamp(2.6rem,4.6vw,4rem);font-weight:500;letter-spacing:-.05em;line-height:1.05;padding-bottom:.04em}
.tt-kpis span{font-size:14.5px;opacity:.8}
.tt-kpis small{font-size:12.5px;color:var(--tg);font-weight:500}
.tt-charts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tt-ch{margin:0;grid-column:span 2;border-radius:22px;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:16px}
.tt-ch--w{grid-column:span 3}
.tt-ch figcaption{font-size:14.5px;font-weight:500}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.tt-donut{--p:0;width:min(170px,80%);aspect-ratio:1;margin:0 auto;border-radius:50%;background:conic-gradient(var(--tb) calc(var(--p) * 1%),transparent 0 calc(var(--p) * 1% + .6%),var(--tg) 0 99.4%,transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 63%);mask:radial-gradient(farthest-side,transparent 62%,#000 63%);transition:--p 1.6s var(--ease);position:relative}
.tt-donut span{display:none}
.tt-ch .tt-dwrap{position:relative}
.tt-ch.in .tt-donut{--p:var(--a)}
.tt-dlab{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--ink-2);pointer-events:none}
.tt-dlab b{display:block;font-size:1.5rem;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.tt-leg{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.tt-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.c1{background:var(--tb)}.c2{background:var(--tg)}
.tt-cols{display:flex;justify-content:center;align-items:flex-end;gap:28px;height:210px}
.tt-cols>div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.tt-cols .col{width:58px;height:calc(var(--v) * 150px);border-radius:8px 8px 3px 3px;transform:scaleY(0);transform-origin:bottom;transition:transform 1.2s var(--ease)}
.tt-ch.in .tt-cols .col{transform:scaleY(1)}
.tt-cols .v{font-size:15px;font-weight:500}
.tt-cols .l{font-size:13px;color:var(--ink-2)}
.tt-hbars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tt-hbars li{display:grid;grid-template-columns:86px minmax(0,1fr) 56px;align-items:center;gap:12px;font-size:14px}
.tt-hbars span{color:var(--ink-2)}
.tt-hbars i{display:block;height:14px;border-radius:3px 7px 7px 3px;background:var(--tb);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);width:calc(var(--v) * 100%)}
.tt-hbars li:nth-child(2) i{transition-delay:.1s}.tt-hbars li:nth-child(3) i{transition-delay:.2s}.tt-hbars li:nth-child(4) i{transition-delay:.3s}
.tt-ch.in .tt-hbars i{transform:scaleX(1)}
.tt-hbars b{font-weight:500;text-align:right}

.tt-motto{background:var(--tg);color:var(--tn);padding:clamp(48px,7vw,100px) var(--cw);text-align:center;margin-top:clamp(40px,5vw,72px)}
.tt-motto-k{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.tt-motto-t{margin:0;font-size:clamp(2.4rem,6vw,5.6rem);font-weight:500;letter-spacing:-.05em;line-height:1.06;padding-bottom:.08em}
.tt-motto-t em{font-family:var(--serif);font-style:italic;letter-spacing:-.01em;padding-right:.08em}
.tt-motto .in{margin:0 auto}
.tt .tt-end{padding-top:clamp(56px,6vw,96px)}
.tt .tt-end .cs-end-in{background:var(--tn)}

@media (max-width:980px){
  .tt-hero-in,.tt-headrow,.tt-persona,.tt-brand,.tt-emp,.tt-usp{grid-template-columns:minmax(0,1fr)}
  .tt-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-steps li::after{display:none}
  .tt-rings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-ph{max-width:420px}
  .tt-gaps,.tt-kpis{grid-template-columns:minmax(0,1fr)}
  .tt-charts{grid-template-columns:minmax(0,1fr)}
  .tt-ch,.tt-ch--w{grid-column:auto}
  .tt-uj-detail{grid-template-columns:minmax(0,1fr)}
  .tt-cover{aspect-ratio:4/3}
}
@media (max-width:620px){
  .tt-uj-stages{gap:2px}
  .tt-st .dot{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:15px}
  .tt-st .nm{font-size:10.5px;bottom:-34px;line-height:1.1}
  .tt-uj-phases span{font-size:11px;padding:6px 8px}
  .tt-logos li{height:70px}
}
@media (prefers-reduced-motion:reduce){.tt-dest-track{animation:none}}
.tt-cover{aspect-ratio:1920/544}
.tt-curve .cv{--len:4000 !important}
.tt-dwrap{position:relative;width:min(170px,80%);margin:0 auto}
.tt-dwrap .tt-donut{width:100%}
.tt-dlab{font-size:11.5px;line-height:1.25;padding:0 26%}
.tt-dlab b{font-size:1.35rem}
@media (max-width:980px){.tt-cover{aspect-ratio:16/10}.tt-cover img{object-position:30% center}}
.tt-h span{font-size:max(.3em,1.05rem)}
@media (max-width:620px){.tt-st .nm{display:none}.tt-uj-stages{margin-bottom:0}.tt-uj-detail{margin-top:16px}.tt-chan text{font-size:20px}.tt-chan .rect{font-size:19px}}
.tt-asof{display:inline-block;font-size:12px;font-weight:600;color:var(--tb);background:color-mix(in srgb,var(--tb) 10%,transparent);border-radius:999px;padding:5px 11px;white-space:nowrap}
.tt-asof-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.tt-asof-note svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--tb)}
.tt-rw{position:relative;width:min(118px,100%);aspect-ratio:1}
.tt-rw svg{width:100%;height:100%;display:block}
.tt-ring .tt-rw .val{position:absolute;inset:0;margin:0;height:auto;display:grid;place-items:center;text-align:center;font-variant-numeric:tabular-nums}
.tt-ring .fg{transition:none}
.tt-ph img{transform:scale(1.2);will-change:transform}
.tt-curve .cv{stroke:url(#ttCvG);stroke-dasharray:none;stroke-dashoffset:0;transition:none;stroke-width:3.5}
.tt-curve .ar{fill:url(#ttArG);stroke:none}
.tt-st .dot{width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;background:var(--c);border:3px solid var(--bg);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--c) 80%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);transition:transform .55s cubic-bezier(.34,1.6,.64,1),box-shadow .3s;transition-delay:0s}
.tt-uj.in .tt-st .dot{transform:scale(0)}
.tt-uj .tt-st.on .dot{transform:scale(1)}
.tt-st:hover .dot,.tt-st[aria-selected="true"] .dot{background:var(--c);color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 10px 22px -8px color-mix(in srgb,var(--c) 80%,transparent)}
.tt-uj .tt-st.on:hover .dot,.tt-uj .tt-st.on[aria-selected="true"] .dot{transform:scale(1.12)}
.tt-st .emo{position:absolute;left:50%;top:var(--y);transform:translate(-50%,calc(-100% - 30px)) scale(.9);background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.tt-st:hover .emo,.tt-st[aria-selected="true"] .emo{opacity:1;transform:translate(-50%,calc(-100% - 30px))}
@media (max-width:620px){.tt-st .dot{width:32px;height:32px;margin:-16px 0 0 -16px;border-width:2px}.tt-st .emo{display:none}}
.tt-st .dot svg{display:block;width:92%;height:92%;flex:none}
.tt-st .dot{display:flex;align-items:center;justify-content:center}

/* ================= BloodDrop case study ================= */
.bd{--br:#CC0808;--brd:#A80606;--bn:#1E1240;--bgn:#1B6B3A;--bnu:"Nunito",var(--sans)}
.bd .cs-h2 em,.bd-h em{font-family:var(--serif);font-style:italic;color:var(--br);padding-right:.06em}
.bd-p{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:52ch;margin:0}
.bd-note{color:var(--ink-2);font-size:13px;margin:16px 0 0}
.bd-k{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.bd-headrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.bd-headrow .cs-h2{margin-bottom:0}
.bd-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.bd-rv.in{opacity:1;transform:none}

.cpage.case .bd-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,3vw,44px)}
.bd-hero-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.bd-h{font-family:var(--bnu);font-size:clamp(3rem,7vw,6.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;padding-bottom:.08em;margin:0;color:var(--br)}
.bd-h span{display:block;margin-top:.35em;font-family:var(--sans);font-size:max(.3em,1.05rem);letter-spacing:-.02em;line-height:1.3;font-weight:400;color:var(--ink-2);max-width:30ch}
.bd-proto{border-radius:22px;padding:20px 22px;background:color-mix(in srgb,var(--br) 8%,var(--bg));border:1.5px dashed color-mix(in srgb,var(--br) 45%,transparent)}
.bd-proto-tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--br);margin-bottom:8px}
.bd-proto-tag i{width:8px;height:8px;border-radius:50%;background:var(--br);animation:bdPulse 2s ease-out infinite}
@keyframes bdPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--br) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.bd-proto p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bd-proto b{color:var(--ink);font-weight:600}
.bd-meta{margin:clamp(24px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;max-width:1240px}
.bd-meta div{border-top:1px solid var(--line);padding-top:10px}
.bd-meta dt{font-size:13px;color:var(--ink-2)}
.bd-meta dd{margin:2px 0 0;font-size:15.5px}

.bd-cover-wrap{padding:0 var(--cw)}
.bd-cover{position:relative;margin:0 auto;max-width:1240px;border-radius:28px;overflow:hidden;background:#EDEDED;aspect-ratio:1400/760}
.bd-cover img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.bd-cover-chip{position:absolute;left:18px;top:18px;background:#fff;color:var(--br);font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px;box-shadow:0 6px 20px -10px rgba(0,0,0,.3)}

.bd-goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.bd-goals{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bd-goals li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;align-items:start;border-radius:20px;background:var(--bg-2);padding:18px 20px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.bd-goals li:nth-child(2){transition-delay:.1s}.bd-goals li:nth-child(3){transition-delay:.2s}
.bd-goals .ic{grid-row:span 2;width:48px;height:48px;border-radius:14px;background:var(--br);color:#fff;display:grid;place-items:center}
.bd-goals .ic svg{width:24px;height:24px}
.bd-goals b{color:var(--ink);font-size:16px;font-weight:600}

.bd-res{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
.bd-drops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bd-dp{position:relative;border:1px solid var(--line);background:var(--bg);border-radius:20px;padding:14px 10px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);font:inherit;transition:border-color .3s,transform .4s var(--ease),box-shadow .3s}
.bd-dp:hover{transform:translateY(-3px)}
.bd-dp[aria-selected="true"]{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.bd-dp svg{width:58px;height:76px;overflow:visible}
.bd-dp .bg{fill:color-mix(in srgb,var(--c) 14%,var(--bg));stroke:color-mix(in srgb,var(--c) 40%,transparent);stroke-width:1.5}
.bd-dp .fill{fill:var(--c);transition:y 1.4s var(--ease)}
.bd-dp .grp{position:absolute;left:0;right:0;top:46px;text-align:center;font-family:var(--bnu);font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none}
.bd-dp .pc{font-family:var(--bnu);font-weight:700;font-size:15px}
.bd-dp .st{font-size:11px;color:var(--ink-2)}
.bd-res-detail{border-radius:22px;padding:clamp(20px,2.6vw,30px);color:#fff;display:flex;flex-direction:column;gap:12px;transition:background-color .5s var(--ease);background:var(--c,#CC0808)}
.bd-res-detail .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.bd-res-detail .g{font-family:var(--bnu);font-weight:800;font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.05;letter-spacing:-.02em;padding-bottom:.04em}
.bd-res-detail .r{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600}
.bd-res-detail .bar{height:10px;border-radius:5px;background:rgba(255,255,255,.25);overflow:hidden}
.bd-res-detail .bar i{display:block;height:100%;background:#fff;border-radius:5px;width:var(--v);animation:bdBar 1s var(--ease) both}
@keyframes bdBar{from{width:0}}
.bd-res-detail .pop{font-size:14.5px;opacity:.9}
.bd-res-detail .fb{margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#fff;color:var(--c,#CC0808);border:0;border-radius:999px;padding:11px 18px;font:600 14px var(--sans);cursor:pointer}
.bd-res-detail .fb svg{width:18px;height:18px}
.bd-res-detail .fb.done{background:rgba(255,255,255,.2);color:#fff}

.bd-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.bd-ctrl{margin-top:26px;display:grid;gap:18px}
.bd-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--bg-2);justify-self:start}
.bd-seg button{border:0;background:transparent;color:var(--ink-2);border-radius:999px;padding:10px 18px;font:500 14.5px var(--sans);cursor:pointer;transition:background .3s,color .3s}
.bd-seg button[aria-checked="true"]{background:var(--bn);color:#fff}
.bd-range{display:grid;gap:10px;font-size:15px}
.bd-range b{font-family:var(--bnu);font-size:1.2em;color:var(--br)}
.bd-range input{width:100%;accent-color:var(--br);height:28px}
.bd-calc-card{border-radius:28px;background:var(--bn);color:#fff;padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 24px;align-items:center}
.bd-big-drop{grid-row:span 2}
.bd-big-drop svg{width:110px;height:auto;display:block;overflow:visible}
.bd-big-drop .bg{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.25);stroke-width:1.2}
.bd-big-drop .fill{fill:url(#bdG);fill:#E21A1A;transition:y .8s var(--ease)}
.bd-total{margin:0;font-family:var(--bnu);font-size:1.6rem;font-weight:700;line-height:1.1}
.bd-total b{font-size:clamp(3rem,5vw,4rem);font-weight:800;letter-spacing:-.03em}
.bd-total span{display:block;font-family:var(--sans);font-size:14px;font-weight:400;opacity:.7}
.bd-levels{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-column:2}
.bd-levels li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13.5px}
.bd-levels li i{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.bd-levels li i u{display:block;height:100%;background:#E21A1A;width:var(--v);transition:width .6s var(--ease)}
.bd-levels li.ok i u{background:#3BC17A}
.bd-levels li.ok span:last-child{color:#7FE0AC}
.bd-next{grid-column:1/-1;margin:10px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px;opacity:.85}

.bd-user{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.bd-user-img{margin:0;border-radius:28px;overflow:hidden;background:#fff}
.bd-user-img img{width:100%;display:block}
.bd-dec{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bd-dec li{border-radius:18px;background:var(--bg-2);padding:16px 18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.bd-dec b{color:var(--ink);font-size:15px;font-weight:600}

.bd-demo{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;justify-content:center}
.bd-phone{position:relative;width:100%;max-width:340px;margin:0 auto;border-radius:44px;background:#fff;color:#1E1240;border:10px solid #111;box-shadow:0 40px 80px -40px rgba(0,0,0,.5);overflow:hidden;font-family:var(--bnu)}
.bd-ph-top{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(160deg,#CC0808,#A80606);padding:20px 18px 14px}
.bd-burger{display:grid;gap:4px}.bd-burger i{display:block;width:20px;height:2px;border-radius:1px;background:#fff}
.bd-ava{width:32px;height:32px;border-radius:50%;background:#fff;color:#A80606;display:grid;place-items:center;font-weight:800;font-size:14px}
.bd-ph-body{padding:18px 20px 22px;transition:opacity .3s}
.bd-ph-h{margin:0;font-size:24px;font-weight:700;line-height:1.2}
.bd-ph-sub{margin:2px 0 0;font-size:14px;color:#6B6585}
.bd-ph-l{margin:16px 0 8px;font-size:13px;font-weight:700}
.bd-pills{display:flex;gap:6px;flex-wrap:wrap}
.bd-pills button{border:1px solid #DCD9E6;background:#fff;color:#6B6585;border-radius:999px;padding:8px 13px;font:600 13px var(--bnu);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.bd-pills button[aria-checked="true"]{background:#1E1240;border-color:#1E1240;color:#fff}
.bd-ml{display:inline-flex;align-items:center;gap:10px;border:1px solid #DCD9E6;border-radius:999px;padding:4px 6px}
.bd-ml button{width:32px;height:32px;border-radius:50%;border:0;background:#F3F3F3;color:#1E1240;font:700 18px var(--bnu);cursor:pointer}
.bd-ml output{min-width:44px;text-align:center;font-weight:700;font-size:16px}
.bd-ml span{font-size:13px;color:#6B6585;margin-right:4px}
.bd-moods{display:flex;gap:10px}
.bd-moods button{width:42px;height:42px;border-radius:50%;border:1.5px solid #DCD9E6;background:#fff;color:#A9A4BC;padding:6px;cursor:pointer;transition:all .25s}
.bd-moods button svg{width:100%;height:100%}
.bd-moods button[aria-checked="true"]{border-color:#1E1240;color:#1E1240;transform:scale(1.08)}
.bd-place{border-radius:12px;background:#1E1240;color:#fff;padding:10px 12px;font-size:12.5px;line-height:1.35}
.bd-place b{display:block;font-size:13.5px}
.bd-save{display:block;width:100%;margin-top:18px;border:0;border-radius:999px;background:#1B6B3A;color:#fff;padding:14px;font:700 15px var(--bnu);cursor:pointer;transition:transform .2s}
.bd-save:active{transform:scale(.98)}
.bd-ph-done{position:absolute;inset:62px 0 0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s}
.bd-ph-done.on{opacity:1;pointer-events:auto}
.bd-ph-done svg{width:64px;height:84px;fill:#CC0808;animation:bdDropIn .7s cubic-bezier(.34,1.6,.64,1)}
@keyframes bdDropIn{from{transform:translateY(-30px) scale(.6);opacity:0}}
.bd-ph-done b{font-size:20px}
.bd-ph-done p{margin:0;font-size:14px;color:#6B6585}
.bd-ph-done button{margin-top:6px;border:1px solid #DCD9E6;background:#fff;border-radius:999px;padding:9px 16px;font:600 13px var(--bnu);color:#1E1240;cursor:pointer}
.bd-flow{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:420px}
.bd-flow li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding:12px 0;font-size:15.5px}
.bd-flow b{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--br)}

.bd-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bd-steps li{border-radius:18px;background:var(--bg-2);padding:16px;display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:500}
.bd-steps b{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--br);margin-bottom:14px}
.bd-steps small{font-size:13px;font-weight:400;color:var(--ink-2)}
.bd-flowimg{margin:0;border-radius:28px;overflow:hidden;background:#E9E9E9}
.bd-flowimg img{width:100%;display:block;transition:transform 1.4s var(--ease)}
.bd-flowimg:hover img{transform:scale(1.03)}

.bd-gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bd-gal figure{margin:0;border-radius:24px;overflow:hidden;background:#EDEDED}
.bd-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.bd-gal figure:hover img{transform:scale(1.04)}
.bd-gal .a{grid-column:span 4;aspect-ratio:1400/843}
.bd-gal .b{grid-column:span 2;grid-row:span 2}
.bd-gal .c,.bd-gal .d{grid-column:span 2;aspect-ratio:4/3}

.bd-sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
.bd-type,.bd-cols{border-radius:24px;background:var(--bg-2);padding:clamp(20px,2.6vw,32px)}
.bd-type-a{margin:0;font-family:var(--bnu);font-weight:800;font-size:clamp(4rem,8vw,7rem);line-height:1.05;color:var(--br);padding-bottom:.06em}
.bd-type-n{margin:4px 0 10px;font-family:var(--bnu);font-weight:700;font-size:1.5rem}
.bd-type-c{margin:0;font-family:var(--bnu);font-size:14.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.04em}
.bd-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bd-sw div{display:flex;flex-direction:column;gap:2px}
.bd-sw span{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid var(--line);margin-bottom:10px;transition:transform .5s var(--ease)}
.bd-sw div:hover span{transform:scale(1.05)}
.bd-sw b{font-size:15px;font-weight:600}
.bd-sw small{font-size:12.5px;color:var(--ink-2)}
.bd-slogan{margin:22px 0 0;font-family:var(--bnu);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.2;color:var(--ink)}
.bd-slogan em{font-style:normal;color:var(--br)}
.bd .bd-end .cs-end-in{background:linear-gradient(150deg,#CC0808,#8E0505)}

@media (max-width:980px){
  .bd-hero-in,.bd-headrow,.bd-goal,.bd-res,.bd-calc,.bd-user,.bd-demo,.bd-sys{grid-template-columns:minmax(0,1fr)}
  .bd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-gal .a{grid-column:span 2}.bd-gal .b{grid-column:span 2;grid-row:auto;aspect-ratio:1}
  .bd-gal .c,.bd-gal .d{grid-column:span 1}
  .bd-cover{aspect-ratio:4/3}
}
@media (max-width:620px){
  .bd-drops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-dec{grid-template-columns:minmax(0,1fr)}
  .bd-calc-card{grid-template-columns:80px minmax(0,1fr)}
  .bd-big-drop svg{width:76px}
  .bd-levels{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.bd-proto-tag i{animation:none}}
.bd-dp .grp{top:auto;bottom:auto;position:absolute;left:0;right:0;top:calc(14px + 40px)}
.bd-dp .grp{position:static;color:var(--ink);text-shadow:none;font-size:16px;margin-top:2px}
.bd-dp .pc{color:var(--c);font-size:14px}
.bd-dp .fill,.bd-big-drop .fill{transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.bd-dp .fill path,.bd-big-drop .fill path{animation:bdWave 2.8s linear infinite}
.bd-dp .fill .w1{fill:var(--c)}
.bd-dp .fill .w2{fill:var(--c);opacity:.45;animation-duration:4.2s;animation-direction:reverse}
.bd-big-drop .fill .w1{fill:#E21A1A}
.bd-big-drop .fill .w2{fill:#E21A1A;opacity:.45;animation-duration:4.2s;animation-direction:reverse}
.bd-dp:nth-child(2n) .fill path{animation-delay:-1.3s}.bd-dp:nth-child(3n) .fill path{animation-delay:-.6s}
@keyframes bdWave{from{transform:translateX(0)}to{transform:translateX(-64px)}}
@media (prefers-reduced-motion:reduce){.bd-dp .fill path,.bd-big-drop .fill path{animation:none}}

/* ================= MyEdu case study ================= */
.me{--mg:#E8AB03;--mp:#9C0565;--mk:#313131;--mnu:"Nunito",var(--sans)}
.me .cs-h2 em{font-family:var(--serif);font-style:italic;color:var(--mp);padding-right:.06em}
:root[data-theme="dark"] .me .cs-h2 em{color:#E070B0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .me .cs-h2 em{color:#E070B0}}
.me-p{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:52ch;margin:0}
.me-k{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.me-headrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.me-headrow .cs-h2{margin-bottom:0}
.me-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.me-rv.in{opacity:1;transform:none}

.cpage.case .me-hero{padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:clamp(24px,3vw,40px)}
.me-stage{position:relative;border-radius:32px;background:var(--mk);color:#fff;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;padding:clamp(28px,4.5vw,64px);overflow:hidden;min-height:clamp(420px,42vw,560px);align-items:center}
.me-kick{margin:0 0 18px;font-size:14px;color:rgba(255,255,255,.65)}
.me-h{margin:0;font-family:var(--mnu);font-weight:700;font-size:clamp(3.6rem,9vw,8rem);line-height:1.02;letter-spacing:-.03em;padding-bottom:.08em}
.me-h span{display:block;margin-top:.35em;font-family:var(--sans);font-weight:400;font-size:max(.17em,1.05rem);letter-spacing:-.01em;line-height:1.35;color:rgba(255,255,255,.75);max-width:30ch}
.me-proto{margin-top:26px;border-radius:18px;padding:16px 18px;background:rgba(232,171,3,.1);border:1.5px dashed rgba(232,171,3,.55);max-width:46ch}
.me-proto span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mg);margin-bottom:6px}
.me-proto span i{width:8px;height:8px;border-radius:50%;background:var(--mg);animation:mePulse 2s ease-out infinite}
@keyframes mePulse{0%{box-shadow:0 0 0 0 rgba(232,171,3,.6)}100%{box-shadow:0 0 0 10px transparent}}
.me-proto p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.75)}
.me-proto b{color:#fff;font-weight:600}
.me-bust{position:relative;height:100%;min-height:340px;display:grid;place-items:center}
.me-bust img{position:relative;z-index:2;width:min(78%,300px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:meFloat 7s ease-in-out infinite}
@keyframes meFloat{50%{transform:translateY(-12px) rotate(-1deg)}}
.me-word{position:absolute;z-index:1;font-family:var(--mnu);font-weight:300;font-size:clamp(3rem,7vw,6.4rem);line-height:1.1;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.35);letter-spacing:.02em;white-space:nowrap;padding:0 .05em .08em}
.me-word.w1{top:16%;left:50%;transform:translateX(-50%) translateX(calc(var(--mx,0) * -1px))}
.me-word.w2{top:40%;left:50%;transform:translateX(-50%) translateX(calc(var(--mx,0) * 1px))}
.me-plus{position:absolute;z-index:3;width:18px;height:18px}
.me-plus::before,.me-plus::after{content:"";position:absolute;background:var(--mg);border-radius:1px}
.me-plus::before{left:8px;top:0;width:2px;height:18px}.me-plus::after{top:8px;left:0;height:2px;width:18px}
.me-plus.p1{top:12%;left:18%;animation:meSpin 9s linear infinite}.me-plus.p2{top:30%;right:12%;transform:scale(.7);animation:meSpin 12s linear infinite reverse}.me-plus.p3{bottom:14%;left:12%;opacity:.6;animation:meSpin 10s linear infinite}
.me-plus.p1::before,.me-plus.p1::after{background:#fff}
@keyframes meSpin{to{transform:rotate(180deg)}}
.me-dots{position:absolute;z-index:1;top:16%;left:24%;width:90px;height:90px;opacity:.9}
.me-meta{margin:clamp(20px,2.6vw,32px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;max-width:1240px}
.me-meta div{border-top:1px solid var(--line);padding-top:10px}
.me-meta dt{font-size:13px;color:var(--ink-2)}
.me-meta dd{margin:2px 0 0;font-size:15.5px}

.me-cover-wrap{padding:0 var(--cw)}
.me-cover{position:relative;margin:0 auto;max-width:1240px;border-radius:28px;overflow:hidden;background:#EDEDED;aspect-ratio:1400/740}
.me-cover img{width:100%;height:100%;object-fit:cover}
.me-chip{position:absolute;left:18px;top:18px;background:var(--mk);color:var(--mg);font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px}

.me-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.me-feats li{border-radius:22px;background:var(--bg-2);padding:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2);transition:transform .5s var(--ease),background .4s,opacity .8s var(--ease)}
.me-feats li:nth-child(2){transition-delay:.06s}.me-feats li:nth-child(3){transition-delay:.12s}.me-feats li:nth-child(4){transition-delay:.18s}.me-feats li:nth-child(5){transition-delay:.24s}.me-feats li:nth-child(6){transition-delay:.3s}
.me-feats li:hover{transform:translateY(-4px)}
.me-feats .ic{width:46px;height:46px;border-radius:14px;background:var(--mk);color:var(--mg);display:grid;place-items:center;margin-bottom:10px;transition:background .4s,color .4s}
.me-feats li:hover .ic{background:var(--mg);color:var(--mk)}
.me-feats .ic svg{width:22px;height:22px}
.me-feats b{color:var(--ink);font-size:16px;font-weight:600}

.me-role{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.me-seg{display:inline-flex;gap:6px;margin-top:24px}
.me-seg button{min-width:150px;border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:12px 22px;font:600 15px var(--mnu);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.me-seg button[aria-checked="true"]{background:var(--mk);border-color:var(--mk);color:#fff}
:root[data-theme="dark"] .me-seg button[aria-checked="true"]{background:var(--mg);border-color:var(--mg);color:#1a1a1a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .me-seg button[aria-checked="true"]{background:var(--mg);border-color:var(--mg);color:#1a1a1a}}
.me-role-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:r}
.me-role-list li{counter-increment:r;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;border-radius:18px;background:var(--bg-2);padding:14px 18px;animation:rise .5s var(--ease) both}
.me-role-list li::before{content:counter(r,decimal-leading-zero);grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--mg);color:var(--mk);display:grid;place-items:center;font:700 14px var(--mnu)}
.me-role-list b{font-size:15.5px;font-weight:600}
.me-role-list span{font-size:14px;color:var(--ink-2);line-height:1.45}

.me-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,60px)}
.me-demo{display:flex;flex-direction:column;align-items:center;gap:18px}
.me-demo-cap{margin:0;font-size:15px;color:var(--ink-2);text-align:center;max-width:36ch}
.me-demo-cap b{display:block;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mp);margin-bottom:4px}
.me-phone{position:relative;width:100%;max-width:330px;border-radius:42px;border:10px solid #111;background:#fff;color:#313131;overflow:hidden;font-family:var(--mnu);box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.me-ph-head{display:flex;justify-content:space-between;align-items:center;background:#313131;color:#fff;padding:18px 18px 14px;font-weight:700;font-size:17px}
.me-ph-head .bal{font-size:14px;font-weight:600}
.me-ph-body{padding:18px;min-height:470px}
.me-ph-h{margin:0;font-size:20px;font-weight:700;text-align:center}
.me-ph-s{margin:4px 0 14px;font-size:12px;color:#777;text-align:center}
.me-ph-l{margin:14px 0 8px;font-size:13px;font-weight:700}
.me-lv{display:grid;gap:12px}
.me-lv label{display:grid;gap:6px;font-size:14px;font-weight:600;border-bottom:1px solid #eee;padding-bottom:10px}
.me-lv label span{display:flex;justify-content:space-between}
.me-lv label small{font-weight:600;color:#9C0565}
.me-lv input{width:100%;accent-color:#9C0565}
.me-rec{margin-top:14px;border-radius:14px;background:#F6F1E3;padding:12px 14px;font-size:13px;line-height:1.45}
.me-rec b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9C0565;margin-bottom:4px}
.me-rec ul{margin:0;padding-left:16px}
.me-tutor{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #eee}
.me-tutor .ava{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#E8AB03,#9C0565);color:#fff;display:grid;place-items:center;font-weight:800}
.me-tutor b{display:block;font-size:16px}
.me-tutor small{font-size:12px;color:#777}
.me-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.me-days span{font-size:10.5px;color:#999;text-transform:uppercase}
.me-days button{aspect-ratio:1;border:0;border-radius:10px;background:transparent;font:600 13px var(--mnu);color:#313131;cursor:pointer;transition:background .2s,color .2s}
.me-days button:disabled{color:#ccc;text-decoration:line-through;cursor:not-allowed}
.me-days button[aria-checked="true"]{background:#F3DCEB;color:#9C0565}
.me-hours{display:flex;flex-wrap:wrap;gap:6px}
.me-hours button{border:1px solid #e3e3e3;background:#fff;border-radius:10px;padding:8px 12px;font:600 13px var(--mnu);color:#313131;cursor:pointer}
.me-hours button[aria-checked="true"]{background:#F3DCEB;border-color:#F3DCEB;color:#9C0565}
.me-book{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid #eee}
.me-book p{margin:0;display:flex;flex-direction:column;color:#9C0565}
.me-book b{font-size:20px}.me-book small{font-size:11px;color:#999}
.me-book button{border:0;border-radius:999px;background:#313131;color:#fff;padding:13px 18px;font:700 14px var(--mnu);cursor:pointer}
.me-book button:disabled{opacity:.4;cursor:not-allowed}
.me-ph-done{position:absolute;inset:52px 0 0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s}
.me-ph-done.on{opacity:1;pointer-events:auto}
.me-ph-done .ok{width:64px;height:64px;border-radius:50%;background:#E8AB03;color:#313131;display:grid;place-items:center;animation:mePop .6s cubic-bezier(.34,1.6,.64,1)}
.me-ph-done .ok svg{width:30px;height:30px}
@keyframes mePop{from{transform:scale(.4);opacity:0}}
.me-ph-done b{font-size:19px}
.me-ph-done p{margin:0;font-size:13.5px;color:#666}
.me-ph-done button{margin-top:6px;border:1px solid #ddd;background:#fff;border-radius:999px;padding:9px 16px;font:600 13px var(--mnu);cursor:pointer}

.me-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin;cursor:grab}
.me-strip figure{flex:0 0 clamp(200px,22vw,260px);margin:0;scroll-snap-align:start}
.me-strip img{width:100%;aspect-ratio:540/990;object-fit:cover;object-position:top;border-radius:22px;border:1px solid var(--line);display:block;background:#fff;transition:transform .5s var(--ease)}
.me-strip figure:hover img{transform:translateY(-6px)}
.me-strip figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.me-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.me-gal figure{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.me-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.me-gal figure:hover img{transform:scale(1.04)}
.me-gal figure:nth-child(2){transition-delay:.08s}.me-gal figure:nth-child(3){transition-delay:.16s}.me-gal figure:nth-child(4){transition-delay:.24s}

.me-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.me-steps li{border-radius:18px;background:var(--bg-2);padding:16px;display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:500}
.me-steps b{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mp);margin-bottom:14px}
.me-steps small{font-size:13px;font-weight:400;color:var(--ink-2)}
.me-flow{margin:0;border-radius:28px;overflow:hidden;background:#E9E9E9}
.me-flow img{width:100%;display:block}

.me-sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
.me-type,.me-cols{border-radius:24px;background:var(--bg-2);padding:clamp(20px,2.6vw,32px)}
.me-type-a{margin:0;font-family:var(--mnu);font-weight:700;font-size:clamp(4rem,8vw,7rem);line-height:1.05;color:var(--mg);padding-bottom:.06em}
.me-type-n{margin:4px 0 10px;font-family:var(--mnu);font-weight:700;font-size:1.5rem}
.me-type-c{margin:0;font-family:var(--mnu);font-size:14.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.04em}
.me-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.me-sw div{display:flex;flex-direction:column;gap:2px}
.me-sw span{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);margin-bottom:10px;transition:transform .5s var(--ease)}
.me-sw div:hover span{transform:scale(1.05)}
.me-sw b{font-size:15px;font-weight:600}.me-sw small{font-size:12.5px;color:var(--ink-2)}
.me-slogan{margin:22px 0 0;font-family:var(--mnu);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.2}
.me-slogan em{font-style:normal;color:var(--mg)}
.me .me-end .cs-end-in{background:var(--mk)}
.me .me-end .btn.mega{background:var(--mg);border-color:var(--mg);color:#1a1a1a}

@media (max-width:980px){
  .me-stage,.me-headrow,.me-role,.me-demos,.me-sys{grid-template-columns:minmax(0,1fr)}
  .me-bust{min-height:300px}
  .me-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-cover{aspect-ratio:4/3}
}
@media (max-width:620px){
  .me-feats{grid-template-columns:minmax(0,1fr)}
  .me-seg button{min-width:0}
}
@media (prefers-reduced-motion:reduce){.me-bust img,.me-plus,.me-proto span i{animation:none}}

/* ================= Piggy Bank case study ================= */
.pb{--pp:#DA086B;--pk:#282F39;--pseg:"Segoe UI","Segoe UI Variable",var(--sans)}
.pb .cs-h2 em{font-family:var(--serif);font-style:italic;color:var(--pp);padding-right:.06em}
.pb-p{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:52ch;margin:0}
.pb-k{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pb-headrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.pb-headrow .cs-h2{margin-bottom:0}
.pb-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.pb-rv.in{opacity:1;transform:none}

.cpage.case .pb-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,3vw,44px)}
.pb-hero-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.pb-h{margin:0;font-family:var(--pseg);font-weight:700;font-size:clamp(3rem,7vw,6.6rem);letter-spacing:-.04em;line-height:1.02;padding-bottom:.08em}
.pb-h span{display:block;margin-top:.35em;font-family:var(--sans);font-weight:400;font-size:max(.2em,1.05rem);letter-spacing:-.01em;line-height:1.35;color:var(--ink-2);max-width:32ch}
.pb-proto{border-radius:22px;padding:18px 20px;background:color-mix(in srgb,var(--pp) 7%,var(--bg));border:1.5px dashed color-mix(in srgb,var(--pp) 45%,transparent)}
.pb-proto span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pp);margin-bottom:6px}
.pb-proto span i{width:8px;height:8px;border-radius:50%;background:var(--pp);animation:pbPulse 2s ease-out infinite}
@keyframes pbPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pp) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.pb-proto p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pb-proto b{color:var(--ink);font-weight:600}
.pb-meta{margin:clamp(24px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;max-width:1240px}
.pb-meta div{border-top:1px solid var(--line);padding-top:10px}
.pb-meta dt{font-size:13px;color:var(--ink-2)}
.pb-meta dd{margin:2px 0 0;font-size:15.5px}
.pb-cover-wrap{padding:0 var(--cw)}
.pb-cover{position:relative;margin:0 auto;max-width:1240px;border-radius:28px;overflow:hidden;background:#EEE;aspect-ratio:1600/860}
.pb-cover img{width:100%;height:100%;object-fit:cover}
.pb-chip{position:absolute;left:18px;top:18px;background:var(--pp);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px}

.pb-goal{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.pb-ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pb-ticks li{position:relative;padding:12px 14px 12px 40px;border-radius:14px;background:var(--bg-2);font-size:14.5px}
.pb-ticks li::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--pp)}

.pb-finder{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.6fr);gap:12px}
.pb-side{display:flex;flex-direction:column;gap:10px}
.pb-filters{display:flex;flex-wrap:wrap;gap:6px}
.pb-filters button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 13px;font:500 13.5px var(--sans);cursor:pointer;transition:all .25s}
.pb-filters button[aria-pressed="true"]{background:var(--pk);border-color:var(--pk);color:#fff}
:root[data-theme="dark"] .pb-filters button[aria-pressed="true"]{background:var(--pp);border-color:var(--pp)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pb-filters button[aria-pressed="true"]{background:var(--pp);border-color:var(--pp)}}
.pb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:430px;overflow:auto}
.pb-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;transition:border-color .25s,background .25s,transform .3s var(--ease);animation:rise .4s var(--ease) both}
.pb-list li:hover{transform:translateX(3px)}
.pb-list li[aria-selected="true"]{border-color:var(--pp);background:color-mix(in srgb,var(--pp) 6%,var(--bg))}
.pb-list .ic{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--pk);color:#fff;font-size:11px;font-weight:700}
.pb-list li[aria-selected="true"] .ic{background:var(--pp)}
.pb-list b{font-size:14.5px;font-weight:600}
.pb-list small{font-size:12.5px;color:var(--ink-2)}
.pb-map{position:relative;border-radius:24px;overflow:hidden;min-height:440px;background:#E9EDE6}
.pb-map-svg{position:absolute;inset:0;width:100%;height:100%}
.pb-map .land{fill:#EEF0EA}
.pb-map .park{fill:#CFE6C4}
.pb-map .river{fill:none;stroke:#B9D8EE;stroke-width:26;stroke-linecap:round}
.pb-map .roads path{fill:none;stroke:#fff;stroke-width:9}
.pb-map .minor path{fill:none;stroke:#fff;stroke-width:4;opacity:.85}
.pb-map .route{fill:none;stroke:var(--pp);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l,0);stroke-dashoffset:var(--l,0)}
.pb-map .route.go{transition:stroke-dashoffset 1.6s var(--ease);stroke-dashoffset:0}
.pb-map .me-dot{fill:#2B7DE9;stroke:#fff;stroke-width:3}
.pb-map .me-ring{fill:none;stroke:#2B7DE9;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pbRing 2s ease-out infinite}
@keyframes pbRing{from{transform:scale(1);opacity:.8}to{transform:scale(3);opacity:0}}
.pb-pins{position:absolute;inset:0}
.pb-pin{position:absolute;left:var(--x);top:var(--y);width:34px;height:44px;margin:-44px 0 0 -17px;border:0;padding:0;background:none;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.6,.64,1),opacity .3s;animation:pbDrop .6s cubic-bezier(.34,1.6,.64,1) both}
@keyframes pbDrop{from{transform:translateY(-30px);opacity:0}}
.pb-pin svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.pb-pin path{fill:var(--pk)}
.pb-pin[aria-pressed="true"] path{fill:var(--pp)}
.pb-pin[aria-pressed="true"]{transform:scale(1.2)}
.pb-pin.off{opacity:0;pointer-events:none}
.pb-card{position:absolute;right:14px;top:14px;width:min(290px,calc(100% - 28px));background:#fff;color:#282F39;border-radius:20px;padding:16px 18px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);animation:rise .4s var(--ease) both}
.pb-card h3{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.pb-card .t{margin:2px 0 10px;font-size:13px;color:#6b7280}
.pb-card ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.pb-card li{display:flex;gap:8px;align-items:flex-start}
.pb-card li i{flex:none;width:18px;height:18px;border-radius:5px;background:#282F39;color:#fff;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center}
.pb-card .tel{margin-top:10px;padding-top:10px;border-top:1px solid #eee;font-size:12.5px;color:#6b7280}
.pb-card .tel b{display:block;color:#282F39;font-size:14px}
.pb-eta{position:absolute;left:14px;bottom:14px;background:var(--pk);color:#fff;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease)}
.pb-eta.on{opacity:1;transform:none}
.pb-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;border-radius:20px;background:var(--bg-2);padding:14px 16px}
.pb-nav-h{margin:0;font-weight:600;font-size:15px}
.pb-modes{display:flex;gap:8px;flex-wrap:wrap}
.pb-modes button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:9px 14px;font:500 14px var(--sans);cursor:pointer;transition:all .25s}
.pb-modes button svg{width:20px;height:20px}
.pb-modes button[aria-checked="true"]{border-color:var(--pk);background:var(--pk);color:#fff}
.pb-go{margin-left:auto;border:0;border-radius:999px;background:var(--pp);color:#fff;padding:13px 26px;font:600 15px var(--sans);cursor:pointer;transition:transform .2s,box-shadow .3s;box-shadow:0 10px 24px -12px var(--pp)}
.pb-go:hover{transform:translateY(-2px)}

.pb-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.pb-ctrl{display:grid;gap:22px;margin-top:26px}
.pb-ctrl label{display:grid;gap:10px;font-size:15px}
.pb-ctrl label span{display:flex;justify-content:space-between}
.pb-ctrl b{font-weight:700;color:var(--pp)}
.pb-ctrl input{width:100%;accent-color:#DA086B;height:28px}
.pb-res{border-radius:28px;background:var(--pk);color:#fff;padding:clamp(22px,3vw,36px);font-family:var(--pseg)}
.pb-res-k{margin:0;font-size:14px;opacity:.7}
.pb-rate{margin:4px 0 16px;font-size:1.6rem;font-weight:700}
.pb-rate b{font-size:clamp(3rem,6vw,4.6rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pb-split{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin-bottom:16px}
.pb-split i{display:block;height:100%;transition:flex-grow .5s var(--ease)}
.pb-split i:first-child{background:#fff}
.pb-split i:last-child{background:var(--pp)}
.pb-res-l{margin:0;display:grid;gap:8px}
.pb-res-l div{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.pb-res-l dt{opacity:.75;display:flex;align-items:center;gap:8px}
.pb-res-l dt i{width:10px;height:10px;border-radius:3px}
.pb-res-l dt i.k{background:#fff}.pb-res-l dt i.o{background:var(--pp)}
.pb-res-l dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.pb-cta{display:inline-block;margin-top:18px;background:var(--pp);border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px}
.pb-res-n{margin:12px 0 0;font-size:12.5px;opacity:.6}

.pb-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,40px)}
.pb-phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.pb-phones figure:nth-child(2){transition-delay:.1s}.pb-phones figure:nth-child(3){transition-delay:.2s}
.pb-ph{width:100%;max-width:280px;aspect-ratio:9/18.5;border-radius:38px;border:9px solid #111;overflow:hidden;background:#fff;box-shadow:0 30px 60px -36px rgba(0,0,0,.5)}
.pb-ph img{width:100%;display:block;transition:transform 4s cubic-bezier(.45,0,.55,1)}
.pb-ph:hover img{transform:translateY(calc(-100% + 100cqh))}
.pb-ph{container-type:size}
.pb-phones figcaption{font-size:14px;color:var(--ink-2)}

.pb-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pb-steps li{border-radius:18px;background:var(--bg-2);padding:16px;display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:500}
.pb-steps b{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pp);margin-bottom:14px}
.pb-steps small{font-size:13px;font-weight:400;color:var(--ink-2)}
.pb-dev{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,60px);align-items:center}
.pb-dev figure{margin:0;border-radius:28px;overflow:hidden}
.pb-dev img{width:100%;display:block}
.pb-dev-h{margin:0 0 14px;font-family:var(--pseg);font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.03em;padding-bottom:.04em}
.pb-dev-h em{font-style:normal;color:var(--pp)}

.pb-sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
.pb-type,.pb-cols{border-radius:24px;background:var(--bg-2);padding:clamp(20px,2.6vw,32px)}
.pb-type-a{margin:0;font-family:var(--pseg);font-weight:700;font-size:clamp(4rem,8vw,7rem);line-height:1.05;color:var(--pp);padding-bottom:.06em}
.pb-type-n{margin:4px 0 10px;font-family:var(--pseg);font-weight:700;font-size:1.4rem}
.pb-type-c{margin:0;font-family:var(--pseg);font-size:14.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.04em}
.pb-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pb-sw div{display:flex;flex-direction:column;gap:2px}
.pb-sw span{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid var(--line);margin-bottom:10px;transition:transform .5s var(--ease)}
.pb-sw div:hover span{transform:scale(1.05)}
.pb-sw b{font-size:15px;font-weight:600}.pb-sw small{font-size:12.5px;color:var(--ink-2)}
.pb-slogan{margin:22px 0 0;font-family:var(--pseg);font-weight:700;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.15}
.pb-slogan em{font-style:normal;color:var(--pp)}
.pb .pb-end .cs-end-in{background:var(--pk)}
.pb .pb-end .btn.mega{background:var(--pp);border-color:var(--pp);color:#fff}

@media (max-width:980px){
  .pb-hero-in,.pb-headrow,.pb-goal,.pb-finder,.pb-calc,.pb-dev,.pb-sys{grid-template-columns:minmax(0,1fr)}
  .pb-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-list{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-phones{grid-template-columns:repeat(3,minmax(200px,1fr));overflow-x:auto;padding-bottom:10px}
  .pb-cover{aspect-ratio:4/3}
  .pb-map{min-height:380px}
}
@media (max-width:620px){
  .pb-ticks,.pb-list{grid-template-columns:minmax(0,1fr)}
  .pb-go{margin-left:0;width:100%}
  .pb-card{top:auto;bottom:60px;right:10px;left:10px;width:auto}
}
@media (prefers-reduced-motion:reduce){.pb-map .me-ring,.pb-proto span i{animation:none}}
.pc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1.5px dashed currentColor;border-radius:999px;padding:3px 9px;margin-left:6px;line-height:1;vertical-align:middle}
.pc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* carousel hover */
@media (hover:hover) and (pointer:fine){
  .pcard-visual{transition:border-radius .6s var(--ease)}
  .pcard:hover .pcard-visual{border-radius:44px}
  .pc-pill{position:absolute;z-index:3;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;padding:12px 18px;border-radius:999px;white-space:nowrap;transition:opacity .35s var(--ease),transform .5s var(--ease);box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
  .pcard:hover .pc-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media not ((hover:hover) and (pointer:fine)){.pc-pill{display:none}}
@media (prefers-reduced-motion:reduce){.hs-track .pcard,.pc-pill,.pcard-visual{transition:none!important}}
.plist-group{display:flex;align-items:center;gap:12px;margin:34px 0 4px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.plist-group--c{margin-top:56px}
.prow .pc-tag{vertical-align:middle}
/* mobile/tablet: small thumbnails in the project list; the row nearest the screen centre lights up like a desktop hover */
.prow-th{display:none}
@media (max-width:980px){
  .prow{grid-template-columns:72px minmax(0,1fr) 40px;column-gap:16px;row-gap:4px;padding:20px 4px}
  .prow-th{display:block;grid-column:1;grid-row:1/4;align-self:start;margin-top:4px;width:72px;height:72px;border-radius:16px;overflow:hidden;background:var(--bg-2);transform:scale(.94);opacity:.8;transition:transform .5s var(--ease),opacity .5s,box-shadow .5s}
  .prow-th img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform .7s var(--ease)}
  .prow-cat,.prow-name{grid-column:2}
  .prow-desc{grid-column:2/4;font-size:15px}
  .prow-go{grid-column:3;grid-row:1/3;align-self:center;width:40px;height:40px}
  .prow:hover{padding-left:4px}
  .prow.is-near .prow-th{transform:scale(1);opacity:1;box-shadow:0 14px 28px -18px rgba(0,0,0,.45)}
  .prow.is-near .prow-th img{transform:scale(1.12)}
  .prow.is-near .prow-name{color:var(--accent)}
  .prow.is-near .prow-go{transform:rotate(-45deg);background:var(--ink);color:var(--bg);border-color:var(--ink)}
}

/* unified thumbnails: one grey, centred art with ~20% padding */
.pcard-visual.has-img.th{background:#EEEEEC}
.pcard-visual.has-img.th img{inset:20%;width:60%;height:60%;object-fit:contain;mix-blend-mode:multiply;transform:scale(1)}
@media (hover:hover) and (pointer:fine){.pcard:hover .pcard-visual.has-img.th img{transform:scale(1.05)}}

/* HOMEE up: coming soon */
/* ===== PetBox case study ===== */
@font-face{font-family:"Signika";font-style:normal;font-weight:600;font-display:swap;src:url(https://static.wixstatic.com/ufonts/82c06e_6416a0cad4f94711b65eaa09b11a28fc/file.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:"Signika";font-style:normal;font-weight:600;font-display:swap;src:url(https://static.wixstatic.com/ufonts/82c06e_58650f626a844b5bb4237aaf080dca9c/file.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:"PX Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAAbcAA8AAAAAC/wAAAaDAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbIBwwBmA/U1RBVEgAgRQRCAqPHIt/ATYCJANsCzgABCAFcgcgGyYJo6KC0wXxlwumytr9EaY2A7RgrA2GYWEHxOE11sZFKEJ/xfP8HMO1CJ6/H9+cc9/PoEqq8Coqrdz1os+L2gKLywtW9g7YXMfGDHBGB2gDC1bh+4s2+qM7G+AfX2BbVAAg7P8Af84lANgEDbzGf/5+r97zG6OtqBL8CxZo3Z9JkYtIerii0YQ/0CLSIkUaRzYQHPhs6VCTcu2kWPI8BJvBqXIC7UA+pdDa065fuM/aasiI2N7VGMBDBTWgAYps1rzyfYG3PTu1gei31V3aQTQd7F9lfkzAIz/NAhyZjcQFIsqoZbjU+bEoFn5ArI/lRDyq8zhKE2UHZ89eY4oQmiX6DTTV/O6xqcvp/x/MECRKqNxQRmb4xQQQjiGImdFTQ6Lip8fDZFVeH2ZIt6LdmFkrtmgZ1KrXrLUOuuhVBwicJRvUanE7nfQ8Qe+tJw7Y3saWtqSFF+fOb16zIKCQq+MDa5CfX8cUuQnKNDoXE6KSSvgSRIGIJHZwsmZU1N8/3tfDP9TX3Tc6BXVD0RBf3+Ft+Gb6oAGol3tUjJ8X3hpvxlrhTWaSn4fz+KOvwitXsAzTJ5thJnz0dWTgNQxDtnz1qGvKRAZex2D9qojaJ5lRVxoTXvWylhfQB67gPLwZa42jmMmswxowNB1DfABD+Uh4EhxRTCX2x7cCw6hs03AcsFEXYO8n4zZcqXYFCpl8pYaHcwxGMH984p/U9yIyK3madR5/JYvmaPOMmwJeCD81PsTM0XsKnoKazY24gbIMmvg2th4sQ/jm0FYYd2DUnOpaoKkgP6XRKh4OBiOn7tAEBRg1Dc0DY2SxlFzZzZCB+05du3bqULEkd1dcHe49KdmTB7P67moQwsU5Aw7KlIy8FScaED5kEKazK3fe/DxpDrHjTRsunDC7cCuONIZ5IXyoS+cDzsvCEBxFy/sPL14EBqULlRqjaBOrR11j2L1XFzxuT5CxlGL+3mk0R41a5YysRtBKqykzAg2tO1dwjBbsVl6FuqQJ0a+fu8s+3Q6dlt11gNNUkq+1pRS6s1WpBeWUdVD1kO/Ud0c1I5VUM47/9HODQyAQOhjDfVjI0w/Nr64sHKjVSqamcri9XjOUuPRudWMyJWidrtdlNpFxwyYe/t0CqjFl9btLQ0noNFoQF0vF0XvkWr+EzwlJnwO08KvPN2Gh8FsfWNMl/hCrkqtIe9zvLx3bJzIN7eoaZT/QMlNyliQrLVlsSVVvLdisWZqaJS0QUKZC8gNZQ0NH0raMoLvRJOzWlpaou4nZ7uV6tkc31oo+k3fxbHZrnne0pNhMkA6aIe1morjYQhB2hiYcFgIoVNdLIu2h00u792J1bGvyMbtcn5RTbCVIOxOBrJEcaJVl7KPW+SBS0ft4Uzpx9y4SpaqTWNRDz8PcThYs3lKSa2mZV1RozMuxluJUvs1F0LkVcZf6pjVlQG1yPswajthkaeZndzqe4D+TPyu/5XuNK4faJBNWjWgr1AircgtrNXny9JYVBnVxRWamgQqEYlTTo7wzd2e1uh6spLteJ+nRU6JhSswE4aAZ4o5YZoJkkg7zLh1J2jLCbiaToFtbWvpzSHroy9nug/acl8xza3qXXYd+70ADiUgy7SvoH2R8k72R0UrRDmhLZ53TC94TdU7Ev3+vjS9Si7JTooQblLjCZ580KyOHdSSzZH0470WKPjBVLs5NjhYdUuAK3zOSjGxCXJUIHqhKr1e+lb/MfpiZ82qQeGHwtTJpGTQ8SRzSHSWeRCUkV8Vpel1/JnNTV6hv1G//GKG6+hDSc5y7njeWzc927A7pVgbr5n08Kny7B1LI+MhuvS6H0BXSFowrKSRjfH9SL2/MLDaWxvuLchVvMV7ZJiGgPM2w3BGp/p2yJGaHWii0qWuIguves4cJD5HXvZMj+vVpbykrcnYogKKJGTt6hbwNDX0bHHK+1WNOtWkjl/Hqbt3hds6OM6MNTQZqOzCGU+Az5xkELcy/W6HSh/pznPsC8OsbrAHg9xfvsT1XwlXmM6BRguDZmSmfCYwvCAQS9SSDqZaaZ3Hyk055VH7ZbW7PqFKnKJepTdJ8Ok5R8OGUdZsmWFLsLJuSjYn7r3khPKbxy+j6eUmPZp5ZrDfztYQb8BMK8R+CQbOKbiloANJvsIkrKk/o9A/VENCuc6afC6KoA2eL1mrGiXqNumqjWifm5/DQRk26UH5Fq9uezWpVaK+tau1wHY7qIQAAAA==) format("woff2")}
.px{--bg:#FCF8F8;--bg-2:#F2ECEA;--ink:#1C1B1B;--ink-2:#5C5F60;--line:rgba(28,27,27,.12);--accent:#006769;--pxt:#006769;--pxa:#FFBA49;--pxm:#D9F2F3;--pxs:"Signika",var(--sans);--pxcard:#FFFFFF;background:var(--bg);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .px{--bg:#0F1515;--bg-2:#172020;--ink:#EEF2F1;--ink-2:#A6B1B0;--line:rgba(238,242,241,.12);--accent:#58BDB8;--pxm:#173335;--pxcard:#162020}}
:root[data-theme="dark"] .px{--bg:#0F1515;--bg-2:#172020;--ink:#EEF2F1;--ink-2:#A6B1B0;--line:rgba(238,242,241,.12);--accent:#58BDB8;--pxm:#173335;--pxcard:#162020}
.px .kicker::before{background:var(--pxa)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .px .px-ph::before{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -28px rgba(0,0,0,.6)}}
:root[data-theme="dark"] .px .px-ph::before{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -28px rgba(0,0,0,.6)}
.px .cs-end-in{background:var(--pxt)}
.px .cs-end .cs-h2{font-family:var(--pxs);font-weight:600;letter-spacing:-.02em}
.px .cs-end .btn.mega{background:var(--pxa);border-color:var(--pxa);color:#1C1B1B}

/* phone frame (sized by its container width) */
.px-ph{position:relative;container-type:inline-size;width:100%;margin:0;padding:0;background:none;border-radius:0}
.px-ph::before{content:"";position:absolute;inset:0;background:#141818;border-radius:15cqw;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -28px rgba(0,40,41,.45),0 12px 24px -16px rgba(0,0,0,.3)}
.px-ph::after{content:"";position:absolute;z-index:2;top:5.6cqw;left:50%;width:6.4cqw;height:6.4cqw;margin-left:-3.2cqw;border-radius:50%;background:#0b0d0d;box-shadow:0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.px-scr{position:relative;z-index:1;margin:3.6cqw;container-type:inline-size;aspect-ratio:412/917;border-radius:11.6cqw;overflow:hidden;background:#FCF8F8;transform:translateZ(0)}
.px-scr img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none;transform:translateY(var(--oy,0%))}
.px-scr img + img{opacity:0}
.px-scr img.on,.px-scr img:only-child{opacity:1}
[data-tabview] .px-scr img{transition:opacity .55s var(--ease),transform .8s var(--ease)}
[data-tabview] .px-scr img:not(.on){opacity:0;transform:translateY(var(--oy,0%)) scale(1.015)}
.px-auto img{animation:pxScroll 30s cubic-bezier(.45,0,.55,1) 1.2s infinite alternate}
@keyframes pxScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 222.57cqw))}}
.px-auto:hover img{animation-play-state:paused}

/* hero */
.cpage.case .px-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(36px,4vw,56px)}
.px-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.px-h{font-family:var(--pxs);font-weight:600;font-size:clamp(3.4rem,8vw,7rem);line-height:1.04;letter-spacing:-.03em;margin:6px 0 22px;padding-bottom:.06em;color:var(--pxt)}
:root[data-theme="dark"] .px-h{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .px-h{color:var(--accent)}}
.px-h span{display:block;margin-top:14px;font-family:var(--sans);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.18;letter-spacing:-.035em;color:var(--ink);max-width:19ch;padding-bottom:.08em}
.px-h em{font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--pxa) 60%,transparent) 62%,color-mix(in srgb,var(--pxa) 60%,transparent) 92%,transparent 92%);padding:0 .06em}
.px-status{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 15px 8px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.px-status i{width:8px;height:8px;border-radius:50%;background:var(--pxa);box-shadow:0 0 0 0 color-mix(in srgb,var(--pxa) 60%,transparent);animation:pxPulse 2.2s ease-out infinite}
@keyframes pxPulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.px-lead{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;max-width:52ch;margin:0}
.px-stage{position:relative;aspect-ratio:1/1.02;border-radius:40px;background:radial-gradient(120% 90% at 80% 0%,#0B8A86 0%,#006769 45%,#004F51 100%);overflow:hidden;isolation:isolate;--mx:0;--my:0;--sy:0px}
.px-blob{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--pxa);right:-16%;bottom:-20%;opacity:.95;transform:translate(calc(var(--mx)*-14px),calc(var(--my)*-14px + var(--sy)*-.4))}
.px-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.12) 1px,transparent 1.5px) 0 0/22px 22px;z-index:0}
.px-stage-logo{position:absolute;left:7%;top:7%;width:15%;height:auto;padding:2.2% 2.6%;background:#fff;border-radius:16px;z-index:4;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.px-stage .px-ph{position:absolute;width:34%;z-index:2;will-change:transform}
.px-ph--c{left:33%;top:12%;z-index:3!important;transform:translate(calc(var(--mx)*10px),calc(var(--my)*8px + var(--sy)*-.25))}
.px-ph--l{left:5%;top:30%;transform:translate(calc(var(--mx)*18px),calc(var(--my)*14px + var(--sy)*.1)) rotate(-8deg)}
.px-ph--r{left:61%;top:24%;transform:translate(calc(var(--mx)*22px),calc(var(--my)*16px + var(--sy)*-.5)) rotate(7deg)}
.px-stage.rise-c .px-ph{animation:pxFan 1.2s var(--ease) both}
.px-stage.rise-c .px-ph--c{animation-delay:.15s}
.px-stage.rise-c .px-ph--l{animation-delay:.32s}
.px-stage.rise-c .px-ph--r{animation-delay:.42s}
@keyframes pxFan{from{opacity:0;translate:0 60px;rotate:0deg}to{opacity:1;translate:0 0}}

/* shared section bits */
.px .sec + .sec{padding-top:clamp(40px,6vw,100px)}
.px-h2{font-family:var(--pxs);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.08;letter-spacing:-.025em;margin:0;max-width:17ch;padding-bottom:.08em}
.px-p{color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;max-width:54ch;margin:0}
.px-p + .px-p{margin-top:14px}
.px-headrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4.5vw,64px)}
.px-headrow .kicker{margin-bottom:14px}
.pxr{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.pxr.in{opacity:1;transform:none}

/* stats + modules */
.px-scope{padding-bottom:clamp(60px,8vw,120px)}
.px-stats{list-style:none;margin:0 0 clamp(56px,8vw,110px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--line)}
.px-stats li{padding-top:22px}
.px-stats b{display:block;font-family:var(--pxs);font-weight:600;font-size:clamp(3rem,6vw,5.2rem);line-height:1.05;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;padding-bottom:.06em}
.px-stats span{display:block;margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.45;max-width:24ch}
.px-mods{margin:0 calc(var(--pad-r)*-1) 0 calc(var(--gutter)*-1);display:grid;gap:12px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.px-mrow{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content;animation:pxMarq 46s linear infinite}
.px-mrow--b{animation-direction:reverse;animation-duration:52s}
.px-mrow li{flex:none;padding:13px 20px;border-radius:999px;background:var(--pxcard);border:1px solid var(--line);font-size:15px;white-space:nowrap}
.px-mrow li:nth-child(3n+1){background:var(--pxm);border-color:transparent}
.px-mrow li:nth-child(5n+3){background:var(--pxa);border-color:transparent;color:#1C1B1B}
@keyframes pxMarq{to{transform:translateX(-50%)}}

/* onboarding row */
.px-row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,36px);align-items:start}
.px-row4 .px-shot:nth-child(even){margin-top:clamp(24px,4vw,64px)}
.px-shot{margin:0}
.px-shot figcaption{margin-top:14px;font-size:14px;color:var(--ink-2);text-align:center}

/* split (calculator, product) */
.px-calc,.px-buy{background:var(--bg-2)}
.px-buy{background:var(--bg)}
.px-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,7vw,120px);align-items:center}
.px-split--rev{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.px-split-txt .px-h2{margin-bottom:22px}
.px-split-txt .kicker{margin-bottom:14px}
.px-split-vis{display:flex;justify-content:center;position:relative}
.px-split-vis::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--pxm);top:50%;left:50%;translate:-50% -50%;z-index:0}
.px-buy .px-split-vis::before{background:color-mix(in srgb,var(--pxa) 45%,transparent)}
.px-ph--big{width:min(100%,330px);z-index:1}
.px-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:30px;padding:4px;border-radius:999px;background:var(--pxcard);border:1px solid var(--line)}
.px-tabs button{appearance:none;border:0;background:transparent;color:var(--ink);font:500 15px/1 var(--sans);padding:12px 18px;border-radius:999px;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.px-tabs button em{font-style:normal;font-size:12px;font-weight:600;color:#1C1B1B;background:var(--pxa);border-radius:999px;padding:3px 7px;margin-left:4px}
.px-tabs button[aria-selected="true"]{background:var(--pxt);color:#fff}
.px-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.px-read{margin-top:26px;padding:22px 24px;border-radius:24px;background:var(--pxt);color:#fff;max-width:360px}
.px-read small{display:block;font-size:13px;opacity:.75}
.px-read b{display:block;font-family:var(--pxs);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.15;margin:6px 0 4px;padding-bottom:.04em}
.px-read span{font-size:14px;opacity:.85}
.px-read b.flip{animation:pxFlip .5s var(--ease)}
@keyframes pxFlip{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.px-note{margin:20px 0 0;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:46ch;min-height:3.1em}

/* cart */
.px-cart-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px);align-items:center}
.px-hints{list-style:none;margin:0;padding:0;counter-reset:h;display:grid;gap:10px}
.px-hints li{counter-increment:h;display:grid;grid-template-columns:38px 1fr;column-gap:14px;padding:16px 18px;border-radius:20px;background:var(--pxcard);border:1px solid var(--line)}
.px-hints li::before{content:counter(h);grid-row:span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pxm);color:var(--accent);font-weight:600;font-size:15px}
.px-hints b{font-weight:600;font-size:16px}
.px-hints span{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:3px}
.px-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:start}
.px-trio .px-shot:nth-child(2){margin-top:clamp(28px,5vw,72px)}

/* subscription steps */
.px-sub{background:var(--bg-2)}
.px-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,36px);position:relative}
.px-steps::before{content:"";position:absolute;left:0;right:0;top:calc(100% - 58px);height:2px;background:var(--line)}
.px-steps::after{content:"";position:absolute;left:0;top:calc(100% - 58px);height:2px;width:100%;background:var(--accent);transform:scaleX(var(--pp,0));transform-origin:0 50%;transition:transform 1.8s var(--ease) .3s}
.px-steps.on{--pp:1}
.px-steps li{display:flex;flex-direction:column}
.px-steps .px-ph{margin-bottom:24px}
.px-steps b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;position:relative;z-index:1}
.px-steps b i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--bg);font-style:normal;font-size:14px;box-shadow:0 0 0 6px var(--bg-2)}
.px-steps b i.ok{background:var(--pxa);color:#1C1B1B}
.px-steps b i svg{width:16px;height:16px}
.px-steps span{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:8px;min-height:3em}

/* ecosystem */
.px-eco-track{padding:0}
.px-eco-grid{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.px-eco-grid li{display:flex;flex-direction:column;border-radius:28px;background:var(--pxcard);border:1px solid var(--line);padding:12px 12px 22px;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.px-eco-vis{position:relative;height:clamp(220px,22vw,300px);border-radius:20px;overflow:hidden;background:var(--pxm);display:flex;justify-content:center;padding-top:22px;margin-bottom:18px}
.px-eco-grid li:nth-child(4n+2) .px-eco-vis{background:color-mix(in srgb,var(--pxa) 40%,var(--pxcard))}
.px-eco-grid li:nth-child(4n+3) .px-eco-vis{background:var(--pxt)}
.px-eco-grid li:nth-child(4n+4) .px-eco-vis{background:var(--bg-2)}
.px-eco-vis .px-ph{width:66%;flex:none;height:max-content;transition:transform .8s var(--ease)}
.px-eco-grid b{font-size:17px;font-weight:600;padding:0 10px}
.px-eco-grid span{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:6px;padding:0 10px}
@media (hover:hover) and (pointer:fine){
  .px-eco-grid li:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(0,60,62,.45)}
  .px-eco-grid li:hover .px-eco-vis .px-ph{transform:translateY(-14px) rotate(-2deg)}
}

/* design system */
.px-ds-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-bottom:clamp(20px,3vw,40px)}
.px-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.px-sw li{padding:12px;border-radius:22px;background:var(--pxcard);border:1px solid var(--line);display:flex;flex-direction:column}
.px-sw span{display:block;height:clamp(64px,7vw,96px);border-radius:14px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);margin-bottom:12px;transform-origin:50% 100%}
.px-sw b{font-size:15px;font-weight:600}
.px-sw small{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:2px}
.px-sw li.in span{animation:pxSw .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes pxSw{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.px-type{display:grid;gap:12px}
.px-type > div{border-radius:22px;background:var(--pxt);color:#fff;padding:22px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}
.px-type > div + div{background:var(--pxcard);color:var(--ink);border:1px solid var(--line)}
.px-type span{grid-row:span 2;font-size:clamp(3.4rem,5vw,4.6rem);line-height:1.1;padding-bottom:.05em}
.px-ty-s{font-family:var(--pxs);font-weight:600}
.px-ty-m,.px-ty-mn{font-family:"PX Montserrat",var(--sans);font-weight:400}
.px-type b{font-size:20px;font-weight:600}
.px-type b.px-ty-mn{font-weight:400}
.px-type small{font-size:14px;opacity:.75;margin-top:2px}
.px-ds-crops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.px-crop{margin:0;position:relative;aspect-ratio:var(--ar);border-radius:24px;overflow:hidden;background:#F4F1EF;border:1px solid var(--line)}
.px-crop img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transform:translateY(var(--oy))}
.px-crop figcaption{position:absolute;left:14px;bottom:14px;padding:8px 14px;border-radius:999px;background:rgba(20,24,24,.82);color:#fff;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.px-crop.pxr{clip-path:inset(12% 0 0 0 round 24px);transition:opacity .9s var(--ease),transform 1.05s var(--ease),clip-path 1.2s var(--ease)}
.px-crop.pxr.in{clip-path:inset(0 0 0 0 round 24px)}

/* role */
.px-role-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);border-top:1px solid var(--line)}
.px-role-list li{padding-top:24px;display:flex;flex-direction:column}
.px-role-list i{font-style:normal;font-family:var(--pxs);font-weight:600;font-size:15px;color:var(--accent);margin-bottom:16px}
.px-role-list b{font-size:19px;font-weight:600;line-height:1.3}
.px-role-list span{color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:8px}

/* home carousel card */
.pcard-visual.px-card{background:radial-gradient(110% 90% at 85% 0%,#0B8A86 0%,#006769 50%,#004F51 100%);display:block}
.px-card::before{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:#FFBA49;right:-14%;bottom:-18%}
.px-card .px-ph{position:absolute;width:30%;transition:transform 1.1s var(--ease)}
.px-card .px-ph:nth-child(1){left:9%;top:24%;transform:rotate(-7deg)}
.px-card .px-ph:nth-child(2){left:35%;top:12%;z-index:2}
.px-card .px-ph:nth-child(3){left:61%;top:22%;transform:rotate(6deg)}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .px-card .px-ph:nth-child(1){transform:rotate(-10deg) translate(-6px,-6px)}
  .pcard:hover .px-card .px-ph:nth-child(2){transform:translateY(-12px)}
  .pcard:hover .px-card .px-ph:nth-child(3){transform:rotate(9deg) translate(6px,-6px)}
}

@media (max-width:980px){
  .cpage.case .px-hero{padding-top:calc(118px + env(safe-area-inset-top,0px))}
  .px-hero-in,.px-headrow,.px-split,.px-split--rev,.px-cart-grid,.px-ds-top{grid-template-columns:1fr}
  .px-split--rev .px-split-vis{order:2}
  .px-stage{aspect-ratio:1/1.05;border-radius:30px}
  .px-stats{grid-template-columns:1fr 1fr;row-gap:8px}
  .px-row4{grid-template-columns:repeat(4,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad-r)*-1);padding:0 var(--pad-r) 12px;scrollbar-width:none}
  .px-row4::-webkit-scrollbar,.px-steps::-webkit-scrollbar,.px-eco-grid::-webkit-scrollbar{display:none}
  .px-row4 .px-shot{scroll-snap-align:center}
  .px-row4 .px-shot:nth-child(even){margin-top:0}
  .px-steps{grid-template-columns:repeat(4,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad-r)*-1);padding:0 var(--pad-r) 12px;scrollbar-width:none}
  .px-steps::before,.px-steps::after{display:none}
  .px-steps li{scroll-snap-align:center}
  .px-eco-track{margin:0 calc(var(--pad-r)*-1) 0 calc(var(--gutter)*-1)}
  .px-eco-grid{grid-template-columns:repeat(8,minmax(250px,72vw));overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad-r) 14px;scroll-padding:0 var(--pad-r);scrollbar-width:none}
  .px-eco-grid li{scroll-snap-align:start}
  .px-ph--big{width:min(78%,320px)}
  .px-trio{margin:0 calc(var(--pad-r)*-.5)}
  .px-sw{grid-template-columns:repeat(3,minmax(0,1fr))}
  .px-role-list{grid-template-columns:1fr 1fr;row-gap:12px}
}
@media (max-width:560px){
  .px-h{font-size:clamp(3.2rem,16vw,4.4rem)}
  .px-sw{grid-template-columns:1fr 1fr}
  .px-ds-crops{grid-template-columns:1fr}
  .px-role-list{grid-template-columns:1fr}
  .px-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:22px}
  .px-tabs button{padding:12px 4px;font-size:14px;border-radius:18px}
  .px-tabs button em{display:none}
  .px-stage-logo{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .pxr,.px-crop.pxr{opacity:1;transform:none;clip-path:none;transition:none}
  .px-auto img,.px-mrow,.px-status i,.px-sw li.in span,.px-stage.rise-c .px-ph{animation:none}
  .px-mods{overflow-x:auto}
  .px-steps::after{transition:none}
}

.hm-sec{min-height:100vh;display:flex;align-items:center;padding-top:120px;padding-bottom:80px}
.hm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.hm-h{margin:10px 0 18px;font-size:clamp(3rem,7vw,6.2rem);font-weight:500;letter-spacing:-.05em;line-height:1.05;padding-bottom:.08em}
.hm-soon{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.hm-soon i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:hmPulse 2s ease-out infinite}
@keyframes hmPulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hm-lead{margin:0;max-width:46ch;color:var(--ink-2);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6}
.hm-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.hm-cta .btn svg{width:18px;height:18px}
.hm-link{color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-weight:500}
.hm-vis{position:relative;aspect-ratio:1;border-radius:32px;background:#EEEEEC;display:grid;place-items:center;overflow:hidden}
.hm-vis img{width:60%;height:60%;object-fit:contain;mix-blend-mode:multiply;animation:hmFloat 6s ease-in-out infinite}
@keyframes hmFloat{50%{transform:translateY(-12px)}}
@media (max-width:980px){.hm-in{grid-template-columns:minmax(0,1fr)}.hm-sec{min-height:0;padding-top:130px!important}}
@media (prefers-reduced-motion:reduce){.hm-vis img,.hm-soon i{animation:none}}

/* about: hidden "more" panel */
.ab-more{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:inherit}
.ab-more small{font-size:12px;opacity:.6;font-weight:400}
.ab-more svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.ab-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.ab-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease),opacity .5s;opacity:0}
.ab-panel.open{grid-template-rows:1fr;opacity:1}
.ab-panel-in{overflow:hidden;min-height:0}
.ab-panel.open .ab-panel-in{animation:abShow .7s var(--ease) forwards}
@keyframes abShow{to{overflow:visible}}
.ab-time{list-style:none;margin:36px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line)}
.ab-time li{position:relative;padding-top:18px;display:flex;flex-direction:column;gap:6px}
.ab-time li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.ab-time b{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.04em;line-height:1.1;padding-bottom:.05em}
.ab-time span{font-size:14px;color:var(--ink-2);line-height:1.45}
.ab-blk{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px}
.ab-blk h3{margin:0;font-size:15px;font-weight:600;line-height:1.4}
.ab-blk p{margin:0;color:var(--ink-2);line-height:1.6}
.ab-blk .tool-pills{grid-column:2;margin:6px 0 0;padding:0;list-style:none;display:flex}
@media (min-width:981px){.about.ab-open{align-items:start}.about.ab-open .portrait{position:sticky;top:110px}}
.ab-c{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin:0 5px 0 2px;vertical-align:baseline}
.ab-end{margin:24px 0 0;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55}
.ab-end a{color:var(--accent);font-weight:500;text-underline-offset:4px}
@media (max-width:640px){.ab-blk{grid-template-columns:minmax(0,1fr)}.ab-blk .tool-pills{grid-column:1}.ab-time{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--line);padding-left:20px;gap:18px}.ab-time li{padding-top:0}.ab-time li::before{top:12px;left:-25px}}
.cp-fail{flex-basis:100%;margin:0;color:#c0282d;font-size:14px;line-height:1.5}.cp-fail a{color:inherit}
/* mobile menu */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:calc(76px + env(safe-area-inset-top,0px));bottom:0;z-index:59;background:var(--bg);padding:20px 18px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:28px;overflow-y:auto;opacity:0;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.mnav.open{opacity:1;transform:none}
.mnav-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mnav-links li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.mnav.open .mnav-links li{opacity:1;transform:none}
.mnav.open .mnav-links li:nth-child(2){transition-delay:.04s}.mnav.open .mnav-links li:nth-child(3){transition-delay:.08s}.mnav.open .mnav-links li:nth-child(4){transition-delay:.12s}.mnav.open .mnav-links li:nth-child(5){transition-delay:.16s}
.mnav-links a{display:flex;align-items:baseline;gap:14px;padding:16px 0;text-decoration:none;color:var(--ink);font-size:clamp(1.9rem,8vw,2.4rem);font-weight:500;letter-spacing:-.04em;line-height:1.15}
.mnav-links small{font-size:12px;letter-spacing:0;color:var(--accent);font-variant-numeric:tabular-nums}
.mnav-theme{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mnav-theme>span{font-size:15px;color:var(--ink-2)}
.mnav-seg{display:flex;padding:4px;border:1px solid var(--line);border-radius:999px}
.mnav-seg button{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;font-size:15px;cursor:pointer;transition:background .3s,color .3s}
.mnav-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.mnav-mail{margin-top:auto;color:var(--ink-2);font-size:15px;text-decoration:none}
html.mnav-on,html.mnav-on body{overflow:hidden}
@media (max-width:760px){.burger{display:block}.nav .theme{display:none}.nav .btn{margin-left:auto}}
@media (max-width:370px){.nav .btn{display:none}.burger{margin-left:auto}}
@media (min-width:761px){.mnav{display:none!important}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav-links li,.burger span{transition:none}}
@media (max-width:980px){.cpage.case .cs-hero,.cpage.case .zw-hero,.cpage.case .mo-hero,.cpage.case .al-hero{padding-top:calc(128px + env(safe-area-inset-top,0px))!important}}
@media (max-width:980px){
  .hs-view{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity}
  .hs-track{will-change:auto}
  .hs-track .pcard,.hs-track .pcard img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .hs-track .pcard-visual,.hs-track .pcard-visual img{transform:none!important;transition:none}
}
.mnav[hidden]{display:none!important}.mnav:not(.open){pointer-events:none}
.clogo{width:auto}
/* hero: stronger scroll motion */
.hero .stage{--hp:0}
.hero-phones{translate:0 calc(var(--hp) * -90px);rotate:calc(var(--hp) * -8deg);scale:calc(1 + var(--hp) * .14);transform-origin:50% 80%}
.loaded .hero-phones{animation:phonesIn 1.6s cubic-bezier(.2,.9,.25,1.15) .35s both}
@keyframes phonesIn{from{transform:translateY(22%) rotate(7deg) scale(.88);opacity:0}to{transform:none;opacity:1}}
.hero-panel{scale:calc(1 - var(--hp) * .07);translate:0 calc(var(--hp) * 50px);transform-origin:50% 100%}
.hp-rings{scale:calc(1 + var(--hp) * .55);rotate:calc(var(--hp) * 140deg);animation:hpSpin 40s linear infinite}
@keyframes hpSpin{to{transform:rotate(360deg)}}
.hp-meta{translate:0 calc(var(--hp) * -16px)}
@media (max-width:980px){.dot-pulse{animation:none;opacity:0}.flowline{will-change:auto}}
@media (prefers-reduced-motion:reduce){.loaded .hero-phones,.hp-rings{animation:none}}
.flow-hdot{display:none;position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);z-index:2;pointer-events:none;will-change:transform;transform:translate3d(-100px,-100px,0)}
.flowline.touch #dot{display:none}
@media (max-width:980px),(pointer:coarse){.flow-hdot{display:block}}
.flow-hdot{position:fixed;z-index:5}
.flow-fix{display:none;position:fixed;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;z-index:2}
.flow-fix.on{display:block}
.flow-fix svg{position:absolute;left:0;top:0;overflow:hidden}
.flow-fix .drawn-fix{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.flowline.touch .drawn{visibility:hidden}

/* ===== HOMEE+ case study ===== */
.hp{--hpb:#007AFF;--hpg:#2DA24F;--hpo:#F59A4C;--hpk:#0E0F12;--hpcard:#fff;--hpsoft:#F3F4F7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hp{--hpb:#3D9BFF;--hpcard:#16171B;--hpsoft:#1B1D22}}
:root[data-theme="dark"] .hp{--hpb:#3D9BFF;--hpcard:#16171B;--hpsoft:#1B1D22}
.hp .kicker::before{background:var(--hpb)}
.hp .cs-end-in{background:var(--hpk)}
.hp .cs-end .btn.mega{background:var(--hpb);border-color:var(--hpb);color:#fff}

/* phone frame */
.hp-ph{position:relative;container-type:inline-size;width:100%;margin:0;padding:0;align-self:start}
.hp-trim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.5cqw;background:#fff;z-index:3}
.hp-ph::before{content:"";position:absolute;inset:0;background:#111216;border-radius:15cqw;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -28px rgba(10,20,40,.45),0 12px 24px -16px rgba(0,0,0,.3)}
.hp-ph > .hp-scr{position:relative;z-index:1;margin:3.4cqw;container-type:inline-size;aspect-ratio:786/1704;border-radius:12cqw;overflow:hidden;background:#fff;transform:translateZ(0)}
.hp-scr img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
[data-hp-view] .hp-scr img:not(.on):not(.hp-tabbar){opacity:0}
.hp-scr img.hp-tabbar{top:auto;bottom:0;z-index:2;opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hp-ph::before{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -28px rgba(0,0,0,.6)}}
:root[data-theme="dark"] .hp-ph::before{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -28px rgba(0,0,0,.6)}

/* auto scroll of long screens (screen height = 1704/786 of width) */
[data-hp-view] .hp-scr img:not(.hp-tabbar){transition:opacity .55s var(--ease)}
.hp-auto.run img.on{animation:hpScroll 30s cubic-bezier(.4,0,.6,1) infinite alternate}
.hp-auto--slow.run img.on{animation-duration:18s}
@keyframes hpScroll{0%{transform:translateY(0)}96%,100%{transform:translateY(calc(-100% + 216.8cqw))}}
.hp-auto:hover img.on{animation-play-state:paused}

/* hero */
.cpage.case .hp-hero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(36px,4vw,56px)}
.hp-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.hp-h{font-weight:700;font-size:clamp(3.4rem,8vw,7rem);line-height:1.04;letter-spacing:-.04em;margin:6px 0 22px;padding-bottom:.08em}
.hp-h span{display:block;margin-top:14px;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.2;letter-spacing:-.035em;max-width:19ch;padding-bottom:.1em}
.hp-h em{font-style:normal;color:var(--hpb)}
.hp-status{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 15px 8px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.hp-status i{width:8px;height:8px;border-radius:50%;background:var(--hpo);animation:hpPulse 2.2s ease-out infinite}
@keyframes hpPulse{0%{box-shadow:0 0 0 0 rgba(245,154,76,.55)}70%{box-shadow:0 0 0 9px rgba(245,154,76,0)}100%{box-shadow:0 0 0 0 rgba(245,154,76,0)}}
.hp-lead{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;max-width:54ch;margin:0}
.hp-stage{position:relative;aspect-ratio:1/1.02;display:grid;place-items:center;isolation:isolate}
.hp-stage::before{content:"";position:absolute;inset:0 -4%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hpb) 46%,transparent),color-mix(in srgb,var(--hpb) 18%,transparent) 58%,transparent);filter:blur(12px);z-index:-1}
.hp-ph--hero{width:min(46%,300px)}
.hp-launch .hl-app{scale:.94;transform-origin:50% 0;animation:hlApp 11s cubic-bezier(.45,0,.55,1) infinite}
.hp-launch .hp-tabbar{transform-origin:50% 100%;animation:hlTab 11s cubic-bezier(.45,0,.55,1) infinite}
.hp-launch .hl-splash{z-index:3;animation:hlSplash 11s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hlSplash{0%{opacity:1;scale:1}16%{opacity:1;scale:1.03}24%{opacity:0;scale:1.12}86%{opacity:0;scale:1.12}92%,100%{opacity:1;scale:1}}
@keyframes hlApp{0%,16%{scale:.94;translate:0 0}28%{scale:1;translate:0 0}36%{translate:0 0}76%,92%{scale:1;translate:0 -330cqw}100%{scale:.94;translate:0 0}}
@keyframes hlTab{0%,16%{scale:.94}28%,92%{scale:1}100%{scale:.94}}

/* shared */
.hp .sec.hp-facts-sec{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}
.hp-p{color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;max-width:56ch;margin:0}
.hp-head{max-width:860px;margin-bottom:clamp(32px,4vw,56px)}
.hp-head .cs-h2{margin-bottom:22px}
.hp .cs-h2{max-width:20ch}
.hp-split-txt .cs-h2{margin-bottom:22px}

/* facts */
.hp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hp-facts > div{padding:22px 22px 22px 0}
.hp-facts > div + div{padding-left:22px;border-left:1px solid var(--line)}
.hp-facts dt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.hp-facts dd{margin:0;font-size:16px;line-height:1.45;font-weight:500}
.hp-note{margin:14px 0 0;font-size:13px;color:var(--ink-2)}

/* why */
.hp-why-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.hp-why-in .cs-h2{margin-bottom:0}
.hp-why-txt p{color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;margin:0}
.hp-why-txt p + p{margin-top:14px;color:var(--ink);font-weight:500}
.hp-pillars{grid-column:1/-1;list-style:none;margin:clamp(16px,2vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hp-pillars li{background:var(--hpsoft);border-radius:24px;padding:clamp(22px,2.4vw,32px)}
.hp-pillars b{display:block;font-size:14px;color:var(--hpb);margin-bottom:28px}
.hp-pillars h3{font-size:clamp(1.25rem,1.6vw,1.45rem);letter-spacing:-.02em;line-height:1.25;margin:0 0 10px;padding-bottom:.06em}
.hp-pillars p{margin:0;color:var(--ink-2);line-height:1.55}

/* split sections */
.hp-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,100px);align-items:center}
.hp-split--rev{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.hp-split-vis{display:flex;justify-content:center}
.hp-ph--big{max-width:340px}
.hp-q{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-q li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--hpcard)}
.hp-q svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--hpb);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.hp-q span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.hp-q b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:2px}
.hp-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:28px;padding:5px;border-radius:999px;background:var(--hpsoft)}
.hp-tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink-2);padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.hp-tabs button[aria-selected="true"]{background:var(--hpcard);color:var(--ink);box-shadow:0 2px 10px -4px rgba(0,0,0,.18)}
.hp-tabs button:focus-visible{outline:2px solid var(--hpb);outline-offset:2px}
.hp-tabs i{width:9px;height:9px;border-radius:50%}
.hp-tabs .s-all{background:var(--hpb)} .hp-tabs .s-done{background:var(--hpg)} .hp-tabs .s-prog{background:var(--hpo)}

/* agent */
.hp-agent-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.6fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.hp-crop{margin:0}
.hp-cbox{border-radius:24px;border:1px solid var(--line);background:#fff;overflow:hidden}
.hp-cbox img{display:block;width:100%;height:100%;object-fit:cover}
.hp-crop figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink-2)}

/* docs steps */
.hp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:none}
.hp-steps li{position:relative}
.hp-steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hpb);color:#fff;font-size:14px;margin:22px 0 12px}
.hp-steps h3{font-size:1.2rem;letter-spacing:-.02em;margin:0 0 6px;padding-bottom:.06em}
.hp-steps p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.hp-quote{margin:clamp(32px,4vw,56px) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;padding:clamp(22px,3vw,36px);border-radius:24px;background:var(--hpsoft)}
.hp-quote svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--hpb);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hp-quote p{margin:0;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.4;letter-spacing:-.015em;font-weight:500;padding-bottom:.06em}
.hp-quote cite{font-style:normal;font-size:14px;color:var(--ink-2)}

/* knowledge */
.hp-terms{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-terms li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;line-height:1.3;background:var(--hpcard)}
.hp-terms li:first-child{border-color:var(--hpb);color:var(--hpb)}
.hp-mini{margin:22px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.hp-mini b{color:var(--ink)}

/* offer trio */
.hp-trio{display:grid;grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;gap:clamp(18px,4vw,64px)}
.hp-trio > .hp-ph:nth-child(2){margin-top:clamp(20px,4vw,60px)}

/* brand */
.hp-brand-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:center}
.hp-brand-txt .cs-h2{margin-bottom:22px}
.hp-sw{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.hp-sw li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.hp-sw i{width:28px;height:28px;border-radius:9px;background:var(--c);box-shadow:0 0 0 1px var(--line) inset}
.hp-brand-vis{display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:clamp(16px,3vw,40px)}
.hp-brand-vis > .hp-ph:nth-child(2){margin-top:clamp(30px,5vw,80px)}

/* scope */
.hp-scope-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.hp-scope-list li{padding:22px 18px 6px 0}
.hp-scope-list li + li{padding-left:18px;border-left:1px solid var(--line)}
.hp-scope-list b{display:block;font-size:1.1rem;letter-spacing:-.015em;margin-bottom:8px}
.hp-scope-list span{display:block;color:var(--ink-2);font-size:15px;line-height:1.5}

/* reveal (no clipping masks on text) */
.hpr{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.hpr.in{opacity:1;transform:none}

@media (max-width:980px){
  .hp-hero-in,.hp-why-in,.hp-split,.hp-split--rev,.hp-brand-in{grid-template-columns:minmax(0,1fr)}
  .hp-split--rev .hp-split-vis{order:2}
  .hp-stage{max-width:620px;width:100%;aspect-ratio:1/.95}
  .hp-ph--hero{width:min(52%,300px)}
  .hp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-facts > div:nth-child(3){padding-left:0;border-left:0}
  .hp-facts > div:nth-child(n+3){border-top:1px solid var(--line)}
  .hp-agent-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hp-agent-grid .hp-ph{grid-column:1/-1;max-width:260px;justify-self:center}
  .hp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-scope-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-scope-list li,.hp-scope-list li + li{padding:20px 16px 14px 0;border-left:0;border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .hp-h{font-size:clamp(3rem,15vw,4.2rem)}
  .hp-stage{border-radius:28px}
  .hp-facts{grid-template-columns:minmax(0,1fr)}
  .hp-facts > div,.hp-facts > div + div{padding:16px 0;border-left:0}
  .hp-facts > div + div{border-top:1px solid var(--line)}
  .hp-pillars,.hp-q{grid-template-columns:minmax(0,1fr)}
  .hp-agent-grid{grid-template-columns:minmax(0,1fr)}
  .hp-steps{gap:28px 14px}
  .hp-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hp-trio > .hp-ph:nth-child(2){margin-top:24px}
  .hp-scope-list{grid-template-columns:minmax(0,1fr)}
  .hp-ph--big{max-width:290px}
  .hp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:18px}
  .hp-tabs button{justify-content:center;padding:10px 6px;font-size:14px;border-radius:14px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .hpr{opacity:1;transform:none;transition:none}
  .hp-auto.run img.on,.hp-status i,.hp-launch img{animation:none}
  .hp-launch .hl-splash{display:none}
  .hp-launch .hl-app{scale:1}
}

/* ===== hero: rotating projects ===== */
.hp-meta .hr-lab{display:flex;align-items:center;gap:12px;font-size:13px;opacity:.8}
.hr-dots{display:inline-flex;gap:5px}
.hp-meta .hr-dots i{display:block;width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.4;transition:width .5s var(--ease),opacity .5s var(--ease)}
.hp-meta .hr-dots i.on{width:18px;opacity:1}
.hp-meta .hr-txt{display:grid;opacity:1;font-size:inherit}
.hp-meta .hr-t{grid-area:1/1;display:flex;flex-direction:column;gap:2px;opacity:0;translate:0 12px;transition:opacity .55s var(--ease),translate .7s var(--ease);font-size:inherit;pointer-events:none}
.hp-meta .hr-t.on{opacity:1;translate:0 0}
.hp-meta .hr-t b{padding-bottom:.08em}
.hero .stage .layer--phone .float-b{transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.loaded .hero .stage .layer--phone .float-b.hr-off{opacity:0;transition-delay:0s}
.hr-alt{position:absolute;right:2%;bottom:13%;top:0;width:50%;z-index:2;pointer-events:none;translate:0 calc(var(--hp, 0) * -70px)}
.hr-v{position:absolute;right:0;bottom:0;max-width:100%;max-height:100%;width:auto;height:auto;opacity:0;translate:0 26px;scale:.96;transform-origin:50% 100%;transition:opacity .6s var(--ease),translate .9s var(--ease),scale .9s var(--ease);filter:drop-shadow(0 30px 30px rgba(0,0,40,.35))}
.hr-v.on{opacity:1;translate:0 0;scale:1}
@media (max-width:760px){.hr-alt{width:56%;top:14%;bottom:9%}}
@media (prefers-reduced-motion:reduce){.hp-meta .hr-t,.hr-v{translate:none;scale:none;transition:opacity .3s linear}}
.hr-mon{width:100%;max-height:none;container-type:inline-size;display:flex;flex-direction:column;align-items:center}
.hr-mon-b{width:100%;padding:1.6cqw 1.6cqw 2.5cqw;background:#16181b;border-radius:2cqw 2cqw 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.hr-mon-s{aspect-ratio:16/9;border-radius:.4cqw;background:#fff url(/cs/alchemia/card.webp) 50% 37.27%/125% auto no-repeat}
.hr-mon-c{width:100%;height:5.2cqw;background:linear-gradient(#e4e7ea,#c9ced3);border-radius:0 0 2cqw 2cqw;position:relative}
.hr-mon-c::after{content:"";position:absolute;left:50%;top:50%;width:1.1cqw;height:1.1cqw;margin:-.55cqw 0 0 -.55cqw;border-radius:50%;background:#b3b9bf}
.hr-mon-st{width:17cqw;height:10cqw;background:linear-gradient(90deg,#b7bdc3,#e3e6e9 45%,#c3c8cd);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.hr-mon-ba{width:34cqw;height:1.8cqw;border-radius:1cqw 1cqw .6cqw .6cqw;background:linear-gradient(#e6e9ec,#b9bfc5)}