/* 온유 스킨케어 견본 — 손님 theme/style.css (엔진 기본 style.css 를 통째로 덮음).
   섞기표: 인트로·글씨·색·마무리 = antara(세이지 막·가는 세리프·짙은 초록 끝 판·큰 알약), 화면 전환·사진 틀 = venetian(아래서 올라오는 아치·아치 창).
   색 값은 brand.json → :root 변수만 쓴다. */
:root{
  --serif:"Onyu Serif","Noto Serif KR",serif; --latin:"Onyu Latin","Onyu Serif",serif; --sans:var(--fb),"Site Sans", "Pretendard Variable",system-ui,sans-serif;
  --wrap:1240px; --gut:clamp(20px,5vw,64px); --sec:clamp(88px,12vw,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--sage)}
html{scrollbar-color:color-mix(in srgb,var(--sage) 55%,var(--paper)) var(--paper);scrollbar-width:thin}
::placeholder{color:var(--sub);opacity:.7}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--sage);color:var(--paper)}
:focus-visible{outline:2px solid var(--taupe);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.on-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{position:relative}

/* 글씨 — antara: 아주 가는 세리프 큰 제목, 작은 눈썹은 넓은 자간 */
.on-eb{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--taupe);margin-bottom:22px}
.on-eb::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.on-h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.4vw,96px);line-height:1.14;letter-spacing:-.035em}
.on-h1-s{font-size:clamp(38px,5.4vw,80px)}
.on-h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);line-height:1.25;letter-spacing:-.03em}
.on-h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.7vw,25px);line-height:1.4;letter-spacing:-.02em}
.on-num{font-family:var(--latin);font-style:italic;font-weight:300;font-size:19px;color:var(--taupe);letter-spacing:.02em}
.m-line{display:block;overflow:hidden;padding-bottom:.06em}.m-line>span{display:block}

/* 단추 */
.on-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.on-acts-c{justify-content:center}
.on-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-bg);font:500 15px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.on-btn:hover{background:var(--deep);border-color:var(--deep)}
.on-btn:active{transform:scale(.97)}
.on-btn-ln{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.on-btn-ln:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-btn-glass{background:rgba(243,238,230,.12);color:var(--paper);border-color:rgba(243,238,230,.55);backdrop-filter:blur(6px)}
.on-btn-glass:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-btn-light{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.on-btn-light:hover{background:transparent;color:var(--paper)}

/* 머리 */
.on-hd{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.on-hd.is-over{color:var(--paper)}
.on-hd.is-solid,.on-hd:not(.is-over){background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.on-hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto;padding:0 var(--gut);height:76px}
.on-logo{display:flex;align-items:baseline;gap:12px;text-decoration:none;white-space:nowrap}
.on-logo b{font-family:var(--latin);font-style:italic;font-weight:300;font-size:28px;letter-spacing:.06em}
.on-logo span{font-size:13px;letter-spacing:.08em;opacity:.8}
.on-nav{display:flex;gap:clamp(18px,2.6vw,40px)}
.on-nav a{position:relative;font-size:15px;text-decoration:none;padding:10px 0}
.on-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.on-nav a:hover::after,.on-nav a[aria-current]::after{transform:scaleX(1)}
.on-nav a:last-child{border:1px solid currentColor;border-radius:999px;padding:9px 20px}
.on-nav a:last-child::after{display:none}
.on-nav a:last-child:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-hd.is-over:not(.is-solid) .on-nav a:last-child:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-mnav{display:none}

/* 인트로 — antara 세이지 막 위 워드마크 */
#m-intro{position:fixed;inset:0;z-index:90;background:var(--sage);display:grid;place-items:center;pointer-events:none;color:var(--paper)}
html:not(.m-on) #m-intro,html.m-calm #m-intro{display:none}
#m-intro .m-name{font-family:var(--latin);font-style:italic;font-weight:200;font-size:clamp(84px,15vw,230px);letter-spacing:.12em;line-height:1;overflow:hidden;padding:0 .1em}
#m-intro .m-name span{display:inline-block;transform:translateY(105%)}
#m-intro .m-sub{position:absolute;bottom:44px;font-size:13px;letter-spacing:.3em;opacity:0}

/* 첫 화면 */
.on-hero{height:100vh;min-height:640px;overflow:hidden;color:var(--paper);background:var(--deep)}
.on-hero-bg{position:absolute;inset:-4% 0;will-change:transform;overflow:hidden}
.on-hero{contain:paint}
.on-hero-bg .on-ph,.on-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:35% center}
.on-hero-bg img{transform:scaleX(-1)}
.on-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,34,26,.8) 0%,rgba(24,34,26,.62) 34%,rgba(24,34,26,.2) 62%,rgba(24,34,26,0) 82%),linear-gradient(180deg,rgba(29,42,32,.45) 0%,rgba(29,42,32,.05) 28%,rgba(29,42,32,.2) 55%,rgba(29,42,32,.8) 100%)}
.on-hero-tx{position:absolute;left:0;right:0;bottom:0;max-width:1440px;margin:0 auto;padding:0 var(--gut) calc(11vw + clamp(40px,6vh,72px))}
.on-hero .on-eb{color:rgba(243,238,230,.85)}
.on-hero .on-h1{max-width:8.6em}
.on-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:34px;padding-top:28px;border-top:1px solid rgba(243,238,230,.3)}
.on-lead{max-width:34em;font-size:17px;color:rgba(243,238,230,.88)}
.on-hero .on-acts{margin-top:0;flex-shrink:0}

/* 소개 — antara 세이지 아치 판이 첫 화면 위로 올라옴 */
.on-text-arch{margin-top:-11vw;z-index:2;background:var(--sage);color:var(--paper);border-radius:50% 50% 0 0/11vw 11vw 0 0;padding:calc(var(--sec) + 4vw) 0 var(--sec);text-align:center}
.on-text-arch .on-eb{color:rgba(243,238,230,.75)}
.on-text-arch .on-eb::before{display:none}
.on-text-arch .on-h2{max-width:14em;margin:0 auto}
.on-big{max-width:24em;margin:40px auto 0;font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.1vw,30px);line-height:1.75;letter-spacing:-.025em;color:var(--paper)}
html.m-on:not(.m-calm) .on-big .m-w{opacity:1}

/* 구역 머리 */
.on-sec-hd{max-width:760px;margin-bottom:clamp(40px,4.4vw,64px)}
.on-sec-hd .on-h2{text-wrap:balance}
.on-h1,.on-band-t{text-wrap:balance}
.on-sec-lead{margin-top:18px;color:var(--sub);font-size:17px}

/* 세로 카드 — venetian 둥근 세로 카드 */
.on-cards{padding:var(--sec) 0}
.on-cards-tall .on-sec-hd{text-align:center;margin-left:auto;margin-right:auto}
.on-cards-tall .on-eb::before{display:none}
.on-tall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.on-tall li{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4.1;background:var(--deep);color:var(--paper)}
.on-tall-ph{position:absolute;inset:0}
.on-tall-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.on-tall li:hover .on-tall-ph img{transform:scale(1.05)}
.on-tall li::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,34,26,0) 30%,rgba(24,34,26,.5) 55%,rgba(24,34,26,.88) 78%,rgba(24,34,26,.94) 100%)}
.on-tall-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px}
.on-tall .on-h3{font-size:clamp(23px,2vw,28px)}
.on-kw{margin-top:8px;font-size:15px;opacity:.88}
.on-meta{margin-top:18px;padding-top:14px;border-top:1px solid rgba(243,238,230,.35);font-size:15px;letter-spacing:.02em}

/* 프로그램 목록 — antara 메뉴 줄 + 아치 사진 */
.on-cards-menu{padding-top:clamp(24px,4vw,48px)}
.on-menu{border-top:1px solid var(--line)}
.on-menu li{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--line)}
.on-menu-ph{aspect-ratio:4/5;border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--stone)}
.on-menu-ph img{width:100%;height:100%;object-fit:cover}
.on-menu-tx{display:grid;grid-template-columns:auto 1fr auto;column-gap:28px;align-items:baseline}
.on-menu-tx .on-num{grid-row:1}
.on-menu .on-h3{grid-column:2;font-size:clamp(26px,2.6vw,38px);font-weight:300}
.on-menu .on-time{grid-column:3;grid-row:1;font-size:17px;font-weight:500;color:var(--sage);white-space:nowrap;font-variant-numeric:tabular-nums}
.on-menu .on-kw{grid-column:2;margin-top:10px;font-size:15px;letter-spacing:.01em;color:var(--sage);opacity:1}
.on-menu .on-desc{grid-column:2;margin-top:16px;max-width:32em;color:var(--sub)}

/* 사진 모음 */
.on-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);align-items:start}
.on-gal li:nth-child(even){margin-top:clamp(28px,5vw,72px)}
.on-gal figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.on-gal li:nth-child(odd) figure img{border-radius:999px 999px var(--r) var(--r)}
.on-gal figcaption{margin-top:12px;font-size:15px;color:var(--sub)}

/* 글만 셋 */
.on-plain{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.on-plain li{padding-top:26px;border-top:1px solid var(--ink)}
.on-plain .on-h3{margin:14px 0 12px}
.on-plain p{color:var(--sub)}

/* 사진+글 — venetian 아치 창 */
.on-media{padding:var(--sec) 0}
.on-media-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(36px,7vw,120px);align-items:center}
.on-media.side-right .on-arch{order:2}
.on-arch{aspect-ratio:4/5;border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--stone)}
.on-arch img{width:100%;height:110%;object-fit:cover}
.on-media-tx{max-width:520px}
.on-media-tx .on-h2{margin-bottom:28px}
.on-media-tx p+p{margin-top:14px}
.on-media-tx p{color:var(--sub);font-size:17px}
.on-media-tx .on-first{color:var(--ink);font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);line-height:1.6}
.pg-home .on-media{background:var(--sand)}
.on-media+.on-media{padding-top:0}

/* 순서 */
.on-steps{padding:var(--sec) 0}
.on-step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px);counter-reset:s}
.on-step-list li{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.on-step-list li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--sage)}
.on-step-list .on-h3{margin:12px 0 10px}
.on-step-list p{color:var(--sub);font-size:15.5px}

/* 목록만 — 이용 안내·오시는 길 */
.on-text{padding:clamp(72px,9vw,128px) 0}
.on-text-rows .on-wrap,.on-text-prose .on-wrap{display:grid;grid-template-columns:4fr 7fr;gap:clamp(28px,6vw,96px)}
.pg-home .on-text-rows{padding-bottom:clamp(120px,14vw,200px)}
.on-rows li{display:flex;align-items:center;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.on-rows li:first-child{border-top:1px solid var(--line)}
.pg-home .on-text-rows .on-rows li{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px)}
.on-text-bd p{color:var(--sub);font-size:17px}
.on-text-bd p+p{margin-top:12px}

/* 하위 쪽 머리 */
.on-phd{padding:calc(76px + clamp(72px,10vw,150px)) 0 clamp(56px,7vw,100px);border-bottom:1px solid var(--line)}
.on-phd .on-h1{max-width:12em}
.on-phd-lead{max-width:36em;margin-top:30px;font-size:18px;color:var(--sub)}

/* 표 */
.on-table{padding:var(--sec) 0}
.on-tw{overflow-x:auto;border-top:1px solid var(--ink)}
.on-tw table{width:100%;border-collapse:collapse;min-width:560px}
.on-tw th,.on-tw td{padding:22px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:16px;white-space:nowrap}
.on-tw thead th{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--taupe);padding-top:16px;padding-bottom:16px}
.on-tw tbody th{font-family:var(--serif);font-weight:400;font-size:19px}
.on-tw td{font-variant-numeric:tabular-nums}
.on-tw td:last-child{color:var(--sage);font-weight:500}
.on-note{margin-top:24px;color:var(--sub)}
.pg-program .on-table{background:var(--sand)}

/* 물음 */
.on-faq{padding:var(--sec) 0}
.on-faq-in{display:grid;grid-template-columns:4fr 7fr;gap:clamp(28px,6vw,96px)}
.on-qs details{border-bottom:1px solid var(--line)}
.on-qs details:first-child{border-top:1px solid var(--line)}
.on-qs summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px;cursor:pointer;list-style:none}
.on-qs summary::-webkit-details-marker{display:none}
.on-qs summary i{position:relative;flex:0 0 18px;height:18px}
.on-qs summary i::before,.on-qs summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.on-qs summary i::after{transform:rotate(90deg)}
.on-qs details[open] summary i::after{transform:rotate(0)}
.on-a{padding:0 0 26px;color:var(--sub);max-width:36em}

/* 마무리 — antara 짙은 초록 판 */
.on-band{background:var(--deep);color:var(--on-deep);padding:clamp(110px,14vw,200px) 0;text-align:center;border-radius:50% 50% 0 0/7vw 7vw 0 0;margin-top:-1px}
.on-band .on-eb{color:var(--sand)}
.on-band-t{max-width:16em;margin:0 auto;font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.4vw,64px);line-height:1.22;letter-spacing:-.035em}
.on-band-p{max-width:30em;margin:24px auto 0;color:rgba(236,229,216,.78);font-size:17px}
.on-pill{display:inline-flex;align-items:center;justify-content:center;min-height:72px;min-width:min(360px,100%);padding:0 48px;border:1px solid rgba(236,229,216,.5);border-radius:999px;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.8vw,24px);text-decoration:none;transition:background .45s var(--ease),color .45s var(--ease)}
.on-pill:hover{background:var(--on-deep);color:var(--deep)}

/* 문의 */
.on-contact{padding:var(--sec) 0}
.on-contact-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,7vw,110px);align-items:start}
.on-contact-hd p{margin-top:20px;color:var(--sub);font-size:17px}
.on-fm{display:grid;gap:22px;padding:clamp(28px,3.4vw,48px);background:#FBF8F3;border-radius:var(--r);border:1px solid var(--line)}
.on-fm-note{padding:14px 18px;border-radius:12px;background:var(--sand);font-size:14.5px;line-height:1.6}
.on-fm .fl{display:grid;gap:8px}
.on-fm .fl span{font-size:14px;font-weight:500}
.on-fm .fl i{color:var(--taupe);font-style:normal}
.on-fm input[type=text],.on-fm input[type=tel],.on-fm textarea{width:100%;min-height:52px;padding:12px 2px;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent);background:transparent;font:16px/1.5 var(--sans);color:var(--ink);border-radius:0}
.on-fm input:focus,.on-fm textarea:focus{outline:none;border-bottom-color:var(--sage);box-shadow:0 1px 0 var(--sage)}
.on-fm .cs{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--sub);line-height:1.6}
.on-fm .cs input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--sage);flex:0 0 20px}
.on-fm .on-btn{justify-self:start}
.msg{min-height:1.4em;font-size:15px}
.msg.ok{color:var(--sage);font-weight:500}.msg.err{color:#9A3B2A}

/* 개인정보·없는 쪽 */
.on-legal{padding:clamp(56px,7vw,96px) 0 var(--sec)}
.on-legal-in{max-width:820px}
.on-legal .on-h3{margin:40px 0 12px;font-size:20px}
.on-legal p{color:var(--sub)}
.pg-404 .on-phd{border:0;min-height:70vh}

/* 꼬리 */
.on-ft{background:var(--deep);color:var(--on-deep);padding:clamp(56px,6vw,88px) 0 40px;border-top:1px solid rgba(236,229,216,.14)}
.on-ft-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr auto;gap:28px 40px}
.on-ft-brand{display:flex;align-items:baseline;gap:14px}
.on-ft-brand b{font-family:var(--latin);font-style:italic;font-weight:300;font-size:44px;letter-spacing:.06em}
.on-ft-brand span{font-size:14px;letter-spacing:.08em;opacity:.75}
.on-ft-nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.on-ft-nav a{display:inline-flex;justify-content:center;min-width:44px;min-height:44px;align-items:center;font-size:14px;text-decoration:none;opacity:.8}
.on-ft-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.on-ft-lines{grid-column:1/-1;padding-top:26px;border-top:1px solid rgba(236,229,216,.16);font-size:14px;color:rgba(236,229,216,.7);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.on-sample a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(236,229,216,.4)}
.on-sample a:hover{color:var(--on-deep)}
.pg-home .on-band+*,main>.on-band:last-child{margin-bottom:0}

/* 움직임 켜짐일 때만 처음 숨김(motion.js 가 꺼지면 다 보임) */
html.m-on:not(.m-calm) .on-hero [data-m-in]{opacity:0}

/* 넓은 화면 아님 */
@media (max-width:1024px){
  .on-tall{grid-template-columns:repeat(3,1fr)}
  .on-step-list{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .on-gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .on-nav{display:none}
  .on-mnav{display:block;position:relative}
  .on-mnav summary{display:grid;place-content:center;gap:7px;width:48px;height:48px;cursor:pointer;list-style:none}
  .on-mnav summary::-webkit-details-marker{display:none}
  .on-mnav summary i{display:block;width:24px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
  .on-mnav[open] summary i:first-child{transform:translateY(4px) rotate(45deg)}
  .on-mnav[open] summary i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .on-mnav:not([open]) nav{display:none}
  .on-mnav nav{position:fixed;top:76px;left:0;right:0;display:grid;padding:12px var(--gut) 28px;background:var(--paper);color:var(--ink);box-shadow:0 18px 30px rgba(29,42,32,.12)}
  .on-mnav nav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:21px;text-decoration:none}
  .on-hero-foot{flex-direction:column;align-items:flex-start;gap:26px}
  .on-hero-tx{padding-bottom:calc(16vw + 40px)}
  .on-tall{grid-template-columns:1fr;gap:16px}
  .on-tall li{aspect-ratio:4/3.4}
  .on-menu li{grid-template-columns:1fr;gap:24px}
  .on-menu-ph{aspect-ratio:4/3;max-width:none;border-radius:999px 999px var(--r) var(--r)}
  .on-menu-tx{grid-template-columns:auto 1fr;column-gap:16px}
  .on-menu .on-time{grid-column:2;grid-row:auto;margin-top:12px;font-size:16px}
  .on-media-in,.on-contact-in,.on-faq-in,.on-text-rows .on-wrap,.on-text-prose .on-wrap{grid-template-columns:1fr}
  .on-media.side-right .on-arch{order:0}
  .on-arch{max-width:420px;width:100%}
  .on-plain{grid-template-columns:1fr}
  .on-text-arch{margin-top:-16vw;border-radius:50% 50% 0 0/16vw 16vw 0 0}
  .on-band{border-radius:50% 50% 0 0/10vw 10vw 0 0}
  .on-ft-in{grid-template-columns:1fr}
  .on-ft-lines{flex-direction:column}
}
@media (max-width:560px){
  .on-logo span{display:none}
  .on-step-list{grid-template-columns:1fr;row-gap:36px}
  .on-hero{min-height:600px}
  .on-hero-tx{padding-bottom:calc(16vw + 36px)}
  .on-hero .on-h1{font-size:clamp(36px,10vw,46px)}
  .on-lead{font-size:16px}
  .on-hero .on-acts{width:100%}
  .on-hero .on-btn{flex:1 1 140px;padding:0 18px}
  .on-hero-bg img{object-position:40% center}
  .on-hero-shade{background:linear-gradient(180deg,rgba(29,42,32,.45) 0%,rgba(29,42,32,.25) 35%,rgba(29,42,32,.6) 60%,rgba(29,42,32,.85) 100%)}
  .on-pill{min-height:64px;padding:0 32px}
  .on-tw table{min-width:0}
  .on-tw th,.on-tw td{padding:16px 8px;white-space:normal;font-size:14.5px}
  .on-tw tbody th{font-size:16px}
  .on-gal{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}